Skip to content

Commit

Permalink
feat(): add support Angular 14
Browse files Browse the repository at this point in the history
  • Loading branch information
@Enlcxx
Enlcxx committed Mar 16, 2023
1 parent d42a436 commit 6ffa851
Show file tree
Hide file tree
Showing 36 changed files with 2,550 additions and 2,001 deletions.
1 change: 0 additions & 1 deletion angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"defaultProject": "alyle-ui",
"projects": {
"alyle-ui": {
"root": "",
Expand Down
45 changes: 22 additions & 23 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,37 +40,36 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^13.3.12",
"@angular/cdk": "^13.3.9",
"@angular/common": "^13.3.12",
"@angular/compiler": "^13.3.12",
"@angular/core": "^13.3.12",
"@angular/elements": "^13.3.12",
"@angular/forms": "^13.3.12",
"@angular/platform-browser": "^13.3.12",
"@angular/platform-browser-dynamic": "^13.3.12",
"@angular/platform-server": "^13.3.12",
"@angular/router": "^13.3.12",
"@angular/service-worker": "^13.3.12",
"@nguniversal/express-engine": "^13.1.1",
"@stackblitz/sdk": "^1.6.0",
"@angular/animations": "^14.3.0",
"@angular/cdk": "^14.2.7",
"@angular/common": "^14.3.0",
"@angular/compiler": "^14.3.0",
"@angular/core": "^14.3.0",
"@angular/elements": "^14.3.0",
"@angular/forms": "^14.3.0",
"@angular/platform-browser": "^14.3.0",
"@angular/platform-browser-dynamic": "^14.3.0",
"@angular/platform-server": "^14.3.0",
"@angular/router": "^14.3.0",
"@angular/service-worker": "^14.3.0",
"@nguniversal/express-engine": "^14.2.3",
"@stackblitz/sdk": "^1.8.2",
"ansi-colors": "^4.1.3",
"chroma-js": "^2.4.2",
"core-js": "^2.6.1",
"document-register-element": "^1.7.2",
"express": "^4.16.3",
"hammerjs": "^2.0.8",
"moment": "^2.22.2",
"prismjs": "^1.29.0",
"rxjs": "^6.6.2",
"tslib": "^2.2.0",
"rxjs": "^6.6.7",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^13.3.10",
"@angular-devkit/schematics": "^13.3.10",
"@angular/cli": "^13.3.10",
"@angular/compiler-cli": "^13.3.10",
"@angular-devkit/build-angular": "^14.2.10",
"@angular-devkit/schematics": "^14.2.10",
"@angular/cli": "^14.2.10",
"@angular/compiler-cli": "^14.3.0",
"@nguniversal/builders": "^14.2.3",
"@octokit/request": "^5.3.1",
"@types/chroma-js": "^1.4.1",
Expand Down Expand Up @@ -103,7 +102,7 @@
"karma-jasmine-html-reporter": "^1.7.0",
"karma-junit-reporter": "^2.0.1",
"log-update": "^4.0.0",
"ng-packagr": "^13.2.1",
"ng-packagr": "^14.2.2",
"parse5": "^5.1.1",
"protractor": "~7.0.0",
"replace-in-file": "^6.3.5",
Expand All @@ -112,7 +111,7 @@
"ts-node": "^10.9.1",
"tsconfig-paths": "^3.13.0",
"tslint": "^6.1.3",
"typescript": "~4.6.2",
"typescript": "~4.8.2",
"yargs": "^13.2.2"
},
"schematics": "./dist/@alyle/ui/schematics/collection.json",
Expand Down
18 changes: 9 additions & 9 deletions src/api/docs/customization/color.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,24 @@ <h1 id="color">Color</h1>
<h2 id="supported-values">Supported values</h2>
<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>

<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._8w610n3q{background:rgb(255,255,0);opacity:1}._8w610n3q *{color: #202020 !important}</style><span class="_8w610n3q"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgb</span>
<span class="tt18 tt1j">const</span> Black <span class="tt18 ttb0">=</span> <style>._fzjn5sgs{background:rgb(0,0,0);opacity:1}._fzjn5sgs *{color: white !important}</style><span class="_fzjn5sgs"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// number</span>
<span class="tt18 tt1j">const</span> White <span class="tt18 ttb0">=</span> <style>._8ztjzsky{background:rgb(255,255,255);opacity:1}._8ztjzsky *{color: #202020 !important}</style><span class="_8ztjzsky"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// hex</span>
<span class="tt18 tt1j">const</span> Text <span class="tt18 ttb0">=</span> <style>._h8uyams6{background:rgba(0,0,0,0.87);opacity:0.87}._h8uyams6 *{color: white !important}</style><span class="_h8uyams6"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._1xhfr17s{background:rgb(255,255,0);opacity:1}._1xhfr17s *{color: #202020 !important}</style><span class="_1xhfr17s"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgb</span>
<span class="tt18 tt1j">const</span> Black <span class="tt18 ttb0">=</span> <style>._1v51i8fg{background:rgb(0,0,0);opacity:1}._1v51i8fg *{color: white !important}</style><span class="_1v51i8fg"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// number</span>
<span class="tt18 tt1j">const</span> White <span class="tt18 ttb0">=</span> <style>._h5ht1wlr{background:rgb(255,255,255);opacity:1}._h5ht1wlr *{color: #202020 !important}</style><span class="_h5ht1wlr"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// hex</span>
<span class="tt18 tt1j">const</span> Text <span class="tt18 ttb0">=</span> <style>._dsfj4sjf{background:rgba(0,0,0,0.87);opacity:0.87}._dsfj4sjf *{color: white !important}</style><span class="_dsfj4sjf"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
</code></pre>
<p>Note that a 6-digit hexadecimal is different from a 3-digit hexadecimal.</p>
<pre class="ttb"><code prsm class="ttm"><style>._hsqrw8x4{background:rgb(255,255,255);opacity:1}._hsqrw8x4 *{color: #202020 !important}</style><span class="_hsqrw8x4"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._b1oi0lfe{background:rgb(0,15,255);opacity:1}._b1oi0lfe *{color: white !important}</style><span class="_b1oi0lfe"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
<pre class="ttb"><code prsm class="ttm"><style>._9emc5hi3{background:rgb(255,255,255);opacity:1}._9emc5hi3 *{color: #202020 !important}</style><span class="_9emc5hi3"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._cdj2mi9s{background:rgb(0,15,255);opacity:1}._cdj2mi9s *{color: white !important}</style><span class="_cdj2mi9s"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
</code></pre>
<h2 id="how-to-use-color">How to use <code class="ttm ttx">color</code></h2>
<p><code class="ttm ttx">color</code> and the previously mentioned methods returns an immutable <code class="ttm ttx">Color</code>.</p>
<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>

<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._8qlyc4j6{background:rgb(255,255,0);opacity:1}._8qlyc4j6 *{color: #202020 !important}</style><span class="_8qlyc4j6"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._jwheh4xp{background:rgb(255,255,0);opacity:1}._jwheh4xp *{color: #202020 !important}</style><span class="_jwheh4xp"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
</code></pre>
<p>Using methods:</p>
<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._g22ztnq{background:rgb(255,255,0);opacity:1}._g22ztnq *{color: #202020 !important}</style><span class="_g22ztnq"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._dw30n4sg{background:rgb(255,255,0);opacity:1}._dw30n4sg *{color: #202020 !important}</style><span class="_dw30n4sg"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
Yellow<span class="tt18 ttae">.</span><span class="tt18 tta3">darken</span><span class="tt18 ttae">(</span><span class="tt18 ttap">2</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">alpha</span><span class="tt18 ttae">(</span><span class="tt18 ttap">.94</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgba(145,156,0,0.94)</span>
</code></pre>
<pre class="ttb"><code prsm class="ttm"><style>._ds82jo68{background:rgb(255,255,255);opacity:1}._ds82jo68 *{color: #202020 !important}</style><span class="_ds82jo68"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
<style>._g1j1mpbg{background:rgb(255,255,255);opacity:1}._g1j1mpbg *{color: #202020 !important}</style><span class="_g1j1mpbg"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
<pre class="ttb"><code prsm class="ttm"><style>._9v3knhl8{background:rgb(255,255,255);opacity:1}._9v3knhl8 *{color: #202020 !important}</style><span class="_9v3knhl8"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
<style>._k94ew74g{background:rgb(255,255,255);opacity:1}._k94ew74g *{color: #202020 !important}</style><span class="_k94ew74g"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
</code></pre>
Loading

0 comments on commit 6ffa851

Please sign in to comment.