refactor: use signals apis (#118)

* refactor: use signals apis * making updates * fixing build * Update icon.provider.ts --------- Co-authored-by: Ashley Hunter <[email protected]>
ng-icons · Jul 17, 2024 · 938e191 · 938e191
1 parent b5b5ecf
commit 938e191
Show file tree

Hide file tree

Showing 71 changed files with 22,959 additions and 19,736 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,4 +1,4 @@
-Copyright 2021 Ashley Hunter
+Copyright 2024 Ashley Hunter
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 # Ng Icons
 
 The all-in-one icon library for Angular. This allows you to use icons from multiple icon sets with a single icon component.
-Containing over 53,600 icons for you to use in your projects.
+Containing over 54,600 icons for you to use in your projects.
 
 Currently, we support the following libraries:
 
@@ -58,7 +58,7 @@ Ng Icons is an MIT-licensed open source project with its ongoing development mad
 | 15.x.x          | 23.x.x - 24.x.x |
 | 16.x.x          | 25.x.x          |
 | 17.x.x          | 26.x.x - 27.x.x |
-| 18.x.x          | 28.x.x          |
+| 18.x.x          | 28.x.x - 29.x.x |
 
 > **Note**: Ng Icons relies on modern browser features and is designed to work on evergreen browsers. We do not support older browsers such as IE11.
 

diff --git a/apps/documentation/src/app/browse-icons/browse-icons.component.html b/apps/documentation/src/app/browse-icons/browse-icons.component.html
@@ -17,7 +17,7 @@ <h1 appFadeIn class="heading font-extrabold text-5xl text-center mb-4">
         [class.active]="iconset === activeIconset()"
         (click)="loadIconset(iconset)"
       >
-        <ng-icon [name]="iconset.icon"></ng-icon>
+        <ng-icon [name]="iconset.icon" />
         <span class="text-xs font-medium text-center">{{ iconset.name }}</span>
       </div>
     }

diff --git a/apps/documentation/src/app/components/segment/segment.component.html b/apps/documentation/src/app/components/segment/segment.component.html
@@ -1,14 +1,11 @@
-<span
-  #option
-  *ngFor="let option of options; let index = index"
-  class="segment-option"
-  (click)="select(index)"
->
-  {{ option }}
-</span>
+@for (option of options(); track option; let index = $index) {
+  <span #option class="segment-option" (click)="select(index)">
+    {{ option }}
+  </span>
+}
 
 <div
   class="segment-highlight"
-  [style.left.px]="activeOption?.nativeElement?.offsetLeft"
-  [style.width.px]="activeOption?.nativeElement?.offsetWidth"
+  [style.left.px]="activeOption().nativeElement.offsetLeft"
+  [style.width.px]="activeOption().nativeElement.offsetWidth"
 ></div>
diff --git a/apps/documentation/src/app/components/segment/segment.component.ts b/apps/documentation/src/app/components/segment/segment.component.ts
@@ -1,12 +1,14 @@
 import { CommonModule } from '@angular/common';
 import {
+  afterNextRender,
+  ChangeDetectorRef,
   Component,
+  computed,
   ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  QueryList,
-  ViewChildren,
+  inject,
+  input,
+  model,
+  viewChildren,
 } from '@angular/core';
 
 @Component({
@@ -17,21 +19,25 @@ import {
   styleUrls: ['./segment.component.scss'],
 })
 export class SegmentComponent {
-  @Input() selectedIndex = 0;
+  private readonly changeDetector = inject(ChangeDetectorRef);
 
-  @Input() options: string[] = [];
+  readonly selectedIndex = model(0);
 
-  @Output() readonly selectedIndexChange = new EventEmitter<number>();
+  readonly options = input<string[]>([]);
 
   /** Access the options */
-  @ViewChildren('option') optionsElements?: QueryList<ElementRef<HTMLElement>>;
+  readonly optionElements = viewChildren<ElementRef<HTMLElement>>('option');
 
-  get activeOption(): ElementRef<HTMLElement> | undefined {
-    return this.optionsElements?.toArray()[this.selectedIndex];
+  readonly activeOption = computed(
+    () => this.optionElements()[this.selectedIndex()],
+  );
+
+  constructor() {
+    // this is required to ensure the width is correctly calculated after rendering
+    afterNextRender(() => this.changeDetector.detectChanges());
   }
 
   select(index: number): void {
-    this.selectedIndex = index;
-    this.selectedIndexChange.emit(index);
+    this.selectedIndex.set(index);
   }
 }
diff --git a/apps/documentation/src/app/index/index.component.html b/apps/documentation/src/app/index/index.component.html
@@ -25,7 +25,7 @@
   </h1>
 
   <p appFadeIn class="text-sm md:text-base text-[#F5EAEA] text-center mb-16">
-    Providing over 53,600 icons for use in your applications
+    Providing over 54,600 icons for use in your applications
   </p>
 
   <div appFadeIn class="flex gap-6 flex-col md:flex-row">

diff --git a/package.json b/package.json
@@ -8,77 +8,77 @@
     "test": "nx run-many --target=test --all --parallel=8 --runInBand",
     "compile": "nx generate @ng-icons/workspace-plugin:svg-to-ts && nx run-many --target=build --all --parallel=8 && nx generate @ng-icons/workspace-plugin:update-readmes",
     "generate:iconsets": "nx generate @ng-icons/workspace-plugin:svg-to-ts",
-    "deploy": "nx run-many --all --target=deploy --parallel=8 --packageVersion=28.1.0"
+    "deploy": "nx run-many --all --target=deploy --parallel=8 --packageVersion=29.0.0"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "18.0.0",
-    "@angular/cdk": "18.0.0",
-    "@angular/common": "18.0.0",
-    "@angular/compiler": "18.0.0",
-    "@angular/core": "18.0.0",
-    "@angular/forms": "18.0.0",
-    "@angular/platform-browser": "18.0.0",
-    "@angular/platform-browser-dynamic": "18.0.0",
-    "@angular/router": "18.0.0",
+    "@angular/animations": "18.1.0",
+    "@angular/cdk": "18.1.1",
+    "@angular/common": "18.1.0",
+    "@angular/compiler": "18.1.0",
+    "@angular/core": "18.1.0",
+    "@angular/forms": "18.1.0",
+    "@angular/platform-browser": "18.1.0",
+    "@angular/platform-browser-dynamic": "18.1.0",
+    "@angular/router": "18.1.0",
     "@klarr-agency/circum-icons": "https://gitpkg.now.sh/Klarr-Agency/Circum-Icons/svg?6522c0a4aea8fb4c0818228f444f0082d6e6820c",
     "@material-icons/svg": "1.0.33",
+    "@ng-icons/svgs": "git://github.com/ng-icons/svgs",
     "@phosphor-icons/core": "^2.1.1",
-    "@primer/octicons": "19.8.0",
+    "@primer/octicons": "19.11.0",
     "@radix-ui/react-icons": "https://gitpkg.now.sh/radix-ui/icons/packages/radix-icons?237cd76c007a573c2a6f6caabe9ea3de81393f50",
-    "@rx-angular/cdk": "17.0.1",
-    "@rx-angular/template": "17.1.0",
+    "@rx-angular/cdk": "18.0.0",
+    "@rx-angular/template": "18.0.0",
     "@swc/helpers": "0.5.11",
-    "@tabler/icons": "2.47.0",
+    "@tabler/icons": "3.11.0",
     "UXAspects": "https://gitpkg.now.sh/UXAspects/UXAspects/src/icons/ux?5d63a0e39423bc331994e06e8bb2ba5b5517e799",
     "akar-icons-app": "https://gitpkg.now.sh/artcoholic/akar-icons-app/src/svg?938a77e1fbb1e19d770f1b3c5e3e49daaf2578bc",
     "bootstrap-icons": "1.11.3",
     "cryptocurrency-icons": "0.18.1",
     "css.gg": "2.1.1",
     "dripicons": "https://gitpkg.now.sh/amitjakhu/dripicons/SVG?b8b7035c6c0f34035b0a78af4b393a3fd8628c38",
-    "feather-icons": "4.29.1",
+    "feather-icons": "4.29.2",
     "font-awesome-brands": "https://gitpkg.now.sh/FortAwesome/Font-Awesome/svgs/brands?6.x",
     "font-awesome-regular": "https://gitpkg.now.sh/FortAwesome/Font-Awesome/svgs/regular?6.x",
     "font-awesome-solid": "https://gitpkg.now.sh/FortAwesome/Font-Awesome/svgs/solid?6.x",
     "fuse.js": "^7.0.0",
-    "heroicons": "2.1.1",
-    "@ng-icons/svgs": "git://github.com/ng-icons/svgs",
-    "iconoir": "7.4.0",
+    "heroicons": "2.1.5",
+    "iconoir": "7.7.0",
     "iconsax": "https://gitpkg.now.sh/lusaxweb/iconsax/static/Iconsax/Svg/All?67c8869d0142557d4f70e0a76664d1a71c70f73a",
-    "ionicons": "7.2.2",
+    "ionicons": "7.4.0",
     "jam-icons": "2.0.0",
     "lets-icons": "^1.0.2",
-    "lucide-static": "0.331.0",
+    "lucide-static": "0.408.0",
     "material-icon-theme": "4.33.0",
-    "material-symbols": "0.14.7",
-    "remixicon": "4.1.0",
+    "material-symbols": "0.21.2",
+    "remixicon": "4.3.0",
     "rxjs": "7.8.0",
-    "simple-icons": "11.4.0",
-    "tdesign-icons-svg": "^0.2.0",
+    "simple-icons": "13.1.0",
+    "tdesign-icons-svg": "^0.2.1",
     "tslib": "^2.3.0",
     "typicons.font": "2.1.2",
     "zone.js": "0.14.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "18.0.1",
-    "@angular-devkit/core": "18.0.1",
-    "@angular-devkit/schematics": "18.0.1",
+    "@angular-devkit/build-angular": "18.1.1",
+    "@angular-devkit/core": "18.1.1",
+    "@angular-devkit/schematics": "18.1.1",
     "@angular-eslint/eslint-plugin": "18.0.1",
     "@angular-eslint/eslint-plugin-template": "18.0.1",
     "@angular-eslint/template-parser": "18.0.1",
-    "@angular/cli": "~18.0.0",
-    "@angular/compiler-cli": "18.0.0",
-    "@angular/language-service": "18.0.0",
+    "@angular/cli": "~18.1.0",
+    "@angular/compiler-cli": "18.1.0",
+    "@angular/language-service": "18.1.0",
     "@eslint/eslintrc": "^2.1.1",
-    "@nx/angular": "19.2.0",
-    "@nx/devkit": "19.2.0",
-    "@nx/eslint": "19.2.0",
-    "@nx/eslint-plugin": "19.2.0",
-    "@nx/jest": "19.2.0",
-    "@nx/js": "19.2.0",
-    "@nx/plugin": "19.2.0",
-    "@nx/workspace": "19.2.0",
-    "@schematics/angular": "18.0.1",
+    "@nx/angular": "19.5.0",
+    "@nx/devkit": "19.5.0",
+    "@nx/eslint": "19.5.0",
+    "@nx/eslint-plugin": "19.5.0",
+    "@nx/jest": "19.5.0",
+    "@nx/js": "19.5.0",
+    "@nx/plugin": "19.5.0",
+    "@nx/workspace": "19.5.0",
+    "@schematics/angular": "18.1.1",
     "@swc-node/register": "1.9.1",
     "@swc/cli": "0.3.12",
     "@swc/core": "1.5.7",
@@ -88,8 +88,9 @@
     "@types/jest": "29.4.0",
     "@types/node": "^18.16.9",
     "@types/svgo": "^2.4.0",
-    "@typescript-eslint/eslint-plugin": "7.7.0",
-    "@typescript-eslint/parser": "7.7.0",
+    "@typescript-eslint/eslint-plugin": "7.16.1",
+    "@typescript-eslint/parser": "7.16.1",
+    "@typescript-eslint/utils": "^7.16.0",
     "autoprefixer": "^10.4.0",
     "esbuild": "^0.19.2",
     "eslint": "8.57.0",
@@ -102,9 +103,9 @@
     "jest-preset-angular": "14.1.0",
     "jsonc-eslint-parser": "^2.1.0",
     "markdown-loader": "^6.0.0",
-    "ng-packagr": "18.0.0",
+    "ng-packagr": "18.1.0",
     "ngx-deploy-npm": "8.0.1",
-    "nx": "19.2.0",
+    "nx": "19.5.0",
     "postcss": "^8.4.5",
     "postcss-import": "~14.1.0",
     "postcss-preset-env": "~7.5.0",
@@ -114,6 +115,6 @@
     "tailwindcss": "3.0.24",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.4.5"
+    "typescript": "5.5.3"
   }
 }
diff --git a/packages/akar-icons/README.md b/packages/akar-icons/README.md
@@ -9,7 +9,7 @@
 # Ng Icons
 
 The all-in-one icon library for Angular. This allows you to use icons from multiple icon sets with a single icon component.
-Containing over 53,600 icons for you to use in your projects.
+Containing over 54,600 icons for you to use in your projects.
 
 Currently, we support the following libraries:
 
@@ -58,7 +58,7 @@ Ng Icons is an MIT-licensed open source project with its ongoing development mad
 | 15.x.x          | 23.x.x - 24.x.x |
 | 16.x.x          | 25.x.x          |
 | 17.x.x          | 26.x.x - 27.x.x |
-| 18.x.x          | 28.x.x          |
+| 18.x.x          | 28.x.x - 29.x.x |
 
 > **Note**: Ng Icons relies on modern browser features and is designed to work on evergreen browsers. We do not support older browsers such as IE11.
 

diff --git a/packages/bootstrap-icons/README.md b/packages/bootstrap-icons/README.md
@@ -9,7 +9,7 @@
 # Ng Icons
 
 The all-in-one icon library for Angular. This allows you to use icons from multiple icon sets with a single icon component.
-Containing over 53,600 icons for you to use in your projects.
+Containing over 54,600 icons for you to use in your projects.
 
 Currently, we support the following libraries:
 
@@ -58,7 +58,7 @@ Ng Icons is an MIT-licensed open source project with its ongoing development mad
 | 15.x.x          | 23.x.x - 24.x.x |
 | 16.x.x          | 25.x.x          |
 | 17.x.x          | 26.x.x - 27.x.x |
-| 18.x.x          | 28.x.x          |
+| 18.x.x          | 28.x.x - 29.x.x |
 
 > **Note**: Ng Icons relies on modern browser features and is designed to work on evergreen browsers. We do not support older browsers such as IE11.
 

diff --git a/packages/circum-icons/README.md b/packages/circum-icons/README.md
@@ -9,7 +9,7 @@
 # Ng Icons
 
 The all-in-one icon library for Angular. This allows you to use icons from multiple icon sets with a single icon component.
-Containing over 53,600 icons for you to use in your projects.
+Containing over 54,600 icons for you to use in your projects.
 
 Currently, we support the following libraries:
 
@@ -58,7 +58,7 @@ Ng Icons is an MIT-licensed open source project with its ongoing development mad
 | 15.x.x          | 23.x.x - 24.x.x |
 | 16.x.x          | 25.x.x          |
 | 17.x.x          | 26.x.x - 27.x.x |
-| 18.x.x          | 28.x.x          |
+| 18.x.x          | 28.x.x - 29.x.x |
 
 > **Note**: Ng Icons relies on modern browser features and is designed to work on evergreen browsers. We do not support older browsers such as IE11.
 

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -9,7 +9,7 @@
 # Ng Icons
 
 The all-in-one icon library for Angular. This allows you to use icons from multiple icon sets with a single icon component.
-Containing over 53,600 icons for you to use in your projects.
+Containing over 54,600 icons for you to use in your projects.
 
 Currently, we support the following libraries:
 
@@ -58,7 +58,7 @@ Ng Icons is an MIT-licensed open source project with its ongoing development mad
 | 15.x.x          | 23.x.x - 24.x.x |
 | 16.x.x          | 25.x.x          |
 | 17.x.x          | 26.x.x - 27.x.x |
-| 18.x.x          | 28.x.x          |
+| 18.x.x          | 28.x.x - 29.x.x |
 
 > **Note**: Ng Icons relies on modern browser features and is designed to work on evergreen browsers. We do not support older browsers such as IE11.