@ng-zen/cli 20.0.0-next.1 → 20.0.0-next.3

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [20.0.0-next.3](https://github.com/kstepien3/ng-zen/compare/v20.0.0-next.2...v20.0.0-next.3) (2025-07-21)
+
+### 🚀 New Features
+
+* **icon:** remove @hugeicons/angular package & improvements ([#248](https://github.com/kstepien3/ng-zen/issues/248)) ([cceabb0](https://github.com/kstepien3/ng-zen/commit/cceabb036f092170da66724d29ffca8ccd702983))
+
+## [20.0.0-next.2](https://github.com/kstepien3/ng-zen/compare/v20.0.0-next.1...v20.0.0-next.2) (2025-07-16)
+
+### 🛠️ Code Refactor
+
+* remove suffix from files for Angular v20 compatibility ([#243](https://github.com/kstepien3/ng-zen/issues/243)) ([d26e2f2](https://github.com/kstepien3/ng-zen/commit/d26e2f2faeb052b8f984f82a59e7d95248b2964b))
+
 ## [20.0.0-next.1](https://github.com/kstepien3/ng-zen/compare/v19.4.0...v20.0.0-next.1) (2025-07-15)
 
 ### ⚠ BREAKING CHANGES

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "20.0.0-next.1",
+  "version": "20.0.0-next.3",
   "description": "A CLI tool for generating customizable, modern Angular UI components using schematics.",
   "license": "BSD-2-Clause",
   "private": false,

package/schematics/components/files/{input/input.component.spec.ts → avatar/avatar.spec.ts}

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ZenInputComponent } from './input.component';
+import { ZenAvatar } from './avatar';
 
-describe('InputComponent', () => {
-  let component: ZenInputComponent;
-  let fixture: ComponentFixture<ZenInputComponent>;
+describe('ZenAvatar', () => {
+  let component: ZenAvatar;
+  let fixture: ComponentFixture<ZenAvatar>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenInputComponent],
+      imports: [ZenAvatar],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ZenInputComponent);
+    fixture = TestBed.createComponent(ZenAvatar);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/schematics/components/files/avatar/avatar.stories.ts

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenAvatarComponent } from './avatar.component';
+import { ZenAvatar } from './avatar';
 
 export default {
   title: 'Components/Avatar',
-  component: ZenAvatarComponent,
+  component: ZenAvatar,
   tags: ['autodocs'],
   render: args => ({ props: { ...args } }),
-} satisfies Meta<ZenAvatarComponent>;
+} satisfies Meta<ZenAvatar>;
 
-type Story = StoryObj<ZenAvatarComponent>;
+type Story = StoryObj<ZenAvatar>;
 
 export const Image: Story = {
   args: {

package/schematics/components/files/avatar/{avatar.component.ts → avatar.ts}

@@ -40,15 +40,15 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   imports: [NgOptimizedImage],
   template: `
     @if (src()) {
-      <img [alt]="alt()" [ngSrc]="src()" fill onerror="console.log('test')" />
+      <img [alt]="alt()" [ngSrc]="src()" fill />
     } @else {
       <ng-content />
     }
   `,
-  styleUrl: './avatar.component.scss',
+  styleUrl: './avatar.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ZenAvatarComponent {
+export class ZenAvatar {
   /**
    * Name of the source image. Image name will be processed by the image loader,
    * and the final URL will be applied as the src property of the image.

package/schematics/components/files/avatar/index.ts

@@ -1 +1 @@
-export * from './avatar.component';
+export * from './avatar';

package/schematics/components/files/button/{button.component.spec.ts → button.spec.ts}

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ZenButtonComponent } from './button.component';
+import { ZenButton } from './button';
 
-describe('ButtonComponent', () => {
-  let component: ZenButtonComponent;
-  let fixture: ComponentFixture<ZenButtonComponent>;
+describe('ZenButton', () => {
+  let component: ZenButton;
+  let fixture: ComponentFixture<ZenButton>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenButtonComponent],
+      imports: [ZenButton],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ZenButtonComponent);
+    fixture = TestBed.createComponent(ZenButton);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/schematics/components/files/button/button.stories.ts

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenButtonComponent } from './button.component';
+import { ZenButton } from './button';
 
 export default {
   title: 'Components/Button',
-  component: ZenButtonComponent,
+  component: ZenButton,
   tags: ['autodocs'],
   render: args => ({ props: { ...args } }),
-} satisfies Meta<ZenButtonComponent>;
+} satisfies Meta<ZenButton>;
 
-type Story = StoryObj<ZenButtonComponent>;
+type Story = StoryObj<ZenButton>;
 
 export const Default: Story = {
   render: () => ({

package/schematics/components/files/button/{button.component.ts → button.ts}

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * ZenButtonComponent is a reusable button component designed to provide
+ * ZenButton is a reusable button component designed to provide
  * a consistent and customizable button style across the application.
  * It can be used with both `<button>` and `<a>` HTML elements by applying
  * the `zen-button` attribute.
@@ -33,7 +33,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   template: `
     <ng-content />
   `,
-  styleUrl: './button.component.scss',
+  styleUrl: './button.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ZenButtonComponent {}
+export class ZenButton {}

package/schematics/components/files/button/index.ts

@@ -1 +1 @@
-export * from './button.component';
+export * from './button';

package/schematics/components/files/{avatar/avatar.component.spec.ts → checkbox/checkbox.spec.ts}

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ZenAvatarComponent } from './avatar.component';
+import { ZenCheckbox } from './checkbox';
 
-describe('ZenAvatarComponent', () => {
-  let component: ZenAvatarComponent;
-  let fixture: ComponentFixture<ZenAvatarComponent>;
+describe('ZenCheckbox', () => {
+  let component: ZenCheckbox;
+  let fixture: ComponentFixture<ZenCheckbox>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenAvatarComponent],
+      imports: [ZenCheckbox],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ZenAvatarComponent);
+    fixture = TestBed.createComponent(ZenCheckbox);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/schematics/components/files/checkbox/checkbox.stories.ts

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenCheckboxComponent } from './checkbox.component';
+import { ZenCheckbox } from './checkbox';
 
 export default {
   title: 'Components/Checkbox',
-  component: ZenCheckboxComponent,
+  component: ZenCheckbox,
   tags: ['autodocs'],
   argTypes: {
     value: { control: 'boolean' },
@@ -18,9 +18,9 @@ export default {
     required: false,
     id: '',
   },
-} satisfies Meta<ZenCheckboxComponent>;
+} satisfies Meta<ZenCheckbox>;
 
-type Story = StoryObj<ZenCheckboxComponent>;
+type Story = StoryObj<ZenCheckbox>;
 
 export const Default: Story = {
   render: args => ({

package/schematics/components/files/checkbox/{checkbox.component.ts → checkbox.ts}

@@ -2,7 +2,7 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input
 import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
- * ZenCheckboxComponent is a reusable checkbox component designed to provide
+ * ZenCheckbox is a reusable checkbox component designed to provide
  * a consistent and customizable checkbox style across the application.
  * It supports Angular forms integration and provides two-way data binding
  * for boolean values.
@@ -51,13 +51,13 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
     }
     <!-- @else { ✕ } -->
   `,
-  styleUrls: ['./checkbox.component.scss'],
+  styleUrls: ['./checkbox.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [FormsModule],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ZenCheckboxComponent),
+      useExisting: forwardRef(() => ZenCheckbox),
       multi: true,
     },
   ],
@@ -65,7 +65,7 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
     '(blur)': 'onTouched()',
   },
 })
-export class ZenCheckboxComponent implements ControlValueAccessor {
+export class ZenCheckbox implements ControlValueAccessor {
   /** Holds the current checkbox value. */
   readonly value = model(false);
   /** Determines if the checkbox is disabled. */

package/schematics/components/files/checkbox/index.ts

@@ -1 +1 @@
-export * from './checkbox.component';
+export * from './checkbox';

package/schematics/components/files/{switch/switch.component.spec.ts → divider/divider.spec.ts}

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ZenSwitchComponent } from './switch.component';
+import { ZenDivider } from './divider';
 
-describe('ZenSwitchComponent', () => {
-  let component: ZenSwitchComponent;
-  let fixture: ComponentFixture<ZenSwitchComponent>;
+describe('ZenDivider', () => {
+  let component: ZenDivider;
+  let fixture: ComponentFixture<ZenDivider>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenSwitchComponent],
+      imports: [ZenDivider],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ZenSwitchComponent);
+    fixture = TestBed.createComponent(ZenDivider);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/schematics/components/files/divider/divider.stories.ts

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenDividerComponent } from './divider.component';
+import { ZenDivider } from './divider';
 
 interface StoryParams {
   content: string;
@@ -9,7 +9,7 @@ interface StoryParams {
 
 export default {
   title: 'Components/Divider',
-  component: ZenDividerComponent,
+  component: ZenDivider,
   tags: ['autodocs'],
   parameters: {
     layout: 'padded',
@@ -20,9 +20,9 @@ export default {
     align: { control: 'select', options: ['start', 'center', 'end'] },
   },
   args: { content: '', vertical: false, align: 'center' },
-} satisfies Meta<ZenDividerComponent & StoryParams>;
+} satisfies Meta<ZenDivider & StoryParams>;
 
-type Story = StoryObj<ZenDividerComponent & StoryParams>;
+type Story = StoryObj<ZenDivider & StoryParams>;
 
 export const Default: Story = {
   render: args => ({

package/schematics/components/files/divider/{divider.component.ts → divider.ts}

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input } from '@angular/core';
 
 /**
- * ZenDividerComponent is a reusable divider component that provides a simple way to
+ * ZenDivider is a reusable divider component that provides a simple way to
  * separate content sections visually. It supports both horizontal (default) and vertical
  * orientations and can contain optional content.
  *
@@ -34,14 +34,14 @@ import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input
 @Component({
   selector: `zen-divider, zen-divider[vertical],`,
   template: '<ng-content/>',
-  styleUrl: './divider.component.scss',
+  styleUrl: './divider.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class.has-content]': 'hasContent()',
     '[class]': '"zen-align-"+align()',
   },
 })
-export class ZenDividerComponent {
+export class ZenDivider {
   /**
    * Controls the alignment of content within the divider.
    * @default 'center'

package/schematics/components/files/divider/index.ts

@@ -1 +1 @@
-export * from './divider.component';
+export * from './divider';

package/schematics/components/files/icon/icon.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenIcon } from './icon';
+
+describe('ZenIcon', () => {
+  let component: ZenIcon;
+  let fixture: ComponentFixture<ZenIcon>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenIcon],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenIcon);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('icon', 'Tree02Icon');
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/icon/icon.stories.ts

@@ -1,21 +1,31 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenIconComponent } from './icon.component';
+import { ZenIcon } from './icon';
 
-type Options = ZenIconComponent;
+type Options = ZenIcon;
 
 export default {
   title: 'Components/Icon',
-  component: ZenIconComponent,
+  component: ZenIcon,
   tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 }, description: 'Size' },
+    strokeWidth: { control: { type: 'range', min: 1, max: 5, step: 0.25 }, description: 'strokeWidth' },
+    absoluteStrokeWidth: { control: 'boolean' },
+  },
+  args: {
+    size: 64,
+    strokeWidth: 1.5,
+    absoluteStrokeWidth: false,
+  },
 } satisfies Meta<Options>;
 
 type Story = StoryObj<Options>;
 
 export const Default: Story = {
-  render: () => ({
+  render: args => ({
     template: `
-        <zen-icon icon="Tree02Icon" [size]="64"/>
+        <zen-icon icon="Tree02Icon" [size]="${args.size}" [strokeWidth]="${args.strokeWidth}" ${args.absoluteStrokeWidth ? 'absoluteStrokeWidth' : ''}>
     `,
   }),
 };

package/schematics/components/files/icon/icon.ts

@@ -0,0 +1,79 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import * as icons from '@hugeicons/core-free-icons';
+
+type Icon = keyof typeof icons;
+interface Path {
+  d: string | number;
+  fill: string | number;
+  opacity: string | number;
+  fillRule: string | number;
+  strokeWidth?: number;
+}
+
+/**
+ * A reusable Angular component for rendering icons from the Hugeicons library.
+ *
+ * This component renders an SVG icon from the `@hugeicons/core-free-icons` collection by name.
+ * The size, stroke width, and color are configurable through inputs. It dynamically generates the SVG
+ * and its paths, providing a flexible and efficient way to use Hugeicons in an Angular application.
+ *
+ * @example
+ * <zen-icon icon="Tree02Icon" />
+ *
+ * @license {@link https://github.com/hugeicons/angular/blob/main/README.md#license|MIT}
+ * @see [Hugeicons](https://hugeicons.com)
+ */
+@Component({
+  selector: 'zen-icon',
+  template: `
+    <svg
+      [attr.color]="color()"
+      [attr.height]="size()"
+      [attr.width]="size()"
+      fill="none"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      @for (path of paths(); track path) {
+        <path
+          [attr.d]="path.d"
+          [attr.fill-rule]="path.fillRule"
+          [attr.fill]="path.fill"
+          [attr.opacity]="path.opacity"
+          [attr.stroke-width]="path.strokeWidth"
+          [attr.stroke]="'currentColor'"
+        />
+      }
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ZenIcon {
+  /** Icon file names from HugeIcons */
+  readonly icon = input.required({ transform: (icon: Icon) => icons[icon] });
+  readonly size = input<number>(24);
+  readonly absoluteStrokeWidth = input<boolean, unknown>(false, { transform: booleanAttribute });
+  readonly strokeWidth = input<number>(1.5);
+  readonly color = input<string>('currentColor');
+
+  readonly paths = computed<Path[]>(() => this.updatePaths());
+
+  private readonly calculatedStrokeWidth = computed(() => this.calculateStrokeWidth());
+
+  private calculateStrokeWidth(): number {
+    if (!this.absoluteStrokeWidth()) return this.strokeWidth();
+
+    const BASE_SIZE = 24;
+    return (this.strokeWidth() * BASE_SIZE) / this.size();
+  }
+
+  private updatePaths(): Path[] {
+    return this.icon().map(([, attrs]) => ({
+      d: attrs['d'],
+      fill: attrs['fill'] ?? 'none',
+      opacity: attrs['opacity'],
+      fillRule: attrs['fillRule'],
+      strokeWidth: this.calculatedStrokeWidth(),
+    }));
+  }
+}

package/schematics/components/files/icon/index.ts

@@ -1 +1 @@
-export * from './icon.component';
+export * from './icon';

package/schematics/components/files/input/index.ts

@@ -1 +1 @@
-export * from './input.component';
+export * from './input';

package/schematics/components/files/input/input.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenInput } from './input';
+
+describe('ZenInput', () => {
+  let component: ZenInput;
+  let fixture: ComponentFixture<ZenInput>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenInput],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenInput);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/input/input.stories.ts

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenInputComponent } from './input.component';
+import { ZenInput } from './input';
 
 export default {
   title: 'Components/Input',
-  component: ZenInputComponent,
+  component: ZenInput,
   tags: ['autodocs'],
   argTypes: {
     value: { control: 'text' },
@@ -20,9 +20,9 @@ export default {
     required: false,
     id: '',
   },
-} satisfies Meta<ZenInputComponent>;
+} satisfies Meta<ZenInput>;
 
-type Story = StoryObj<ZenInputComponent>;
+type Story = StoryObj<ZenInput>;
 
 export const Default: Story = {
   render: args => ({

package/schematics/components/files/input/{input.component.ts → input.ts}

@@ -2,7 +2,7 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input
 import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
- * ZenInputComponent is a reusable text input component designed to provide
+ * ZenInput is a reusable text input component designed to provide
  * a consistent and customizable input style across the application.
  * It supports Angular forms integration and provides two-way data binding.
  *
@@ -43,18 +43,18 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
       (ngModelChange)="onInputChange($event)"
     />
   `,
-  styleUrls: ['./input.component.scss'],
+  styleUrls: ['./input.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ZenInputComponent),
+      useExisting: forwardRef(() => ZenInput),
       multi: true,
     },
   ],
   imports: [FormsModule],
 })
-export class ZenInputComponent implements ControlValueAccessor {
+export class ZenInput implements ControlValueAccessor {
   /** Holds the current input value. */
   readonly value = model('');
   /** Determines if the input is disabled. */

package/schematics/components/files/skeleton/index.ts

@@ -1 +1 @@
-export * from './skeleton.component';
+export * from './skeleton';

package/schematics/components/files/skeleton/skeleton.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenSkeleton } from './skeleton';
+
+describe('ZenSkeleton', () => {
+  let component: ZenSkeleton;
+  let fixture: ComponentFixture<ZenSkeleton>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenSkeleton],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenSkeleton);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/skeleton/skeleton.stories.ts

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenSkeletonComponent } from './skeleton.component';
+import { ZenSkeleton } from './skeleton';
 
 interface StoryParams {
   rounded: boolean;
@@ -8,11 +8,11 @@ interface StoryParams {
   width: number;
 }
 
-type StoryType = ZenSkeletonComponent & StoryParams;
+type StoryType = ZenSkeleton & StoryParams;
 
 export default {
   title: 'Components/Skeleton',
-  component: ZenSkeletonComponent,
+  component: ZenSkeleton,
   tags: ['autodocs'],
   argTypes: {
     rounded: { control: { type: 'boolean' } },

package/schematics/components/files/skeleton/{skeleton.component.ts → skeleton.ts}

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * ZenInputComponent loader component that displays loading states.
+ * ZenInput loader component that displays loading states.
  *
  * @example
  *
@@ -30,7 +30,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 @Component({
   selector: 'zen-skeleton, zen-skeleton[rounded]',
   template: ``,
-  styleUrl: './skeleton.component.scss',
+  styleUrl: './skeleton.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ZenSkeletonComponent {}
+export class ZenSkeleton {}

package/schematics/components/files/switch/index.ts

@@ -1 +1 @@
-export * from './switch.component';
+export * from './switch';

package/schematics/components/files/switch/switch.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenSwitch } from './switch';
+
+describe('ZenSwitch', () => {
+  let component: ZenSwitch;
+  let fixture: ComponentFixture<ZenSwitch>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenSwitch],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenSwitch);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/switch/switch.stories.ts

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenSwitchComponent } from './switch.component';
+import { ZenSwitch } from './switch';
 
 export default {
   title: 'Components/Switch',
-  component: ZenSwitchComponent,
+  component: ZenSwitch,
   tags: ['autodocs'],
   argTypes: {
     value: { control: 'boolean' },
@@ -14,9 +14,9 @@ export default {
     value: false,
     disabled: false,
   },
-} satisfies Meta<ZenSwitchComponent>;
+} satisfies Meta<ZenSwitch>;
 
-type Story = StoryObj<ZenSwitchComponent>;
+type Story = StoryObj<ZenSwitch>;
 
 export const Default: Story = {
   render: args => ({

package/schematics/components/files/switch/{switch.component.ts → switch.ts}

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, forwardRef, model } from '@angular/
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
- * ZenInputComponent is a reusable text input component designed to provide
+ * ZenInput is a reusable text input component designed to provide
  * a consistent and customizable input style across the application.
  * It supports Angular forms integration and provides two-way data binding.
  *
@@ -39,12 +39,12 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
       <!-- @if (!value()) { ─ } -->
     </span>
   `,
-  styleUrl: './switch.component.scss',
+  styleUrl: './switch.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ZenSwitchComponent),
+      useExisting: forwardRef(() => ZenSwitch),
       multi: true,
     },
   ],
@@ -57,7 +57,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
     '(keydown)': 'onKeyDown($event)',
   },
 })
-export class ZenSwitchComponent implements ControlValueAccessor {
+export class ZenSwitch implements ControlValueAccessor {
   /** Holds the current checkbox value. */
   readonly value = model(false);
   /** Determines if the checkbox is disabled. */

package/schematics/components/files/textarea/index.ts

@@ -1 +1 @@
-export * from './textarea.component';
+export * from './textarea';

package/schematics/components/files/textarea/{textarea.component.spec.ts → textarea.spec.ts}

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ZenTextareaComponent } from './textarea.component';
+import { ZenTextarea } from './textarea';
 
 describe('ZenTextareaComponent', () => {
-  let component: ZenTextareaComponent;
-  let fixture: ComponentFixture<ZenTextareaComponent>;
+  let component: ZenTextarea;
+  let fixture: ComponentFixture<ZenTextarea>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenTextareaComponent],
+      imports: [ZenTextarea],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ZenTextareaComponent);
+    fixture = TestBed.createComponent(ZenTextarea);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/schematics/components/files/textarea/textarea.stories.ts

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenTextareaComponent } from './textarea.component';
+import { ZenTextarea } from './textarea';
 
 interface StoryParams {
   value: string;
@@ -12,7 +12,7 @@ interface StoryParams {
 
 export default {
   title: 'Components/Textarea',
-  component: ZenTextareaComponent,
+  component: ZenTextarea,
   tags: ['autodocs'],
   args: {
     value: '',
@@ -28,9 +28,9 @@ export default {
     required: { control: 'boolean' },
     disabled: { control: 'boolean' },
   },
-} satisfies Meta<ZenTextareaComponent & StoryParams>;
+} satisfies Meta<ZenTextarea & StoryParams>;
 
-type Story = StoryObj<ZenTextareaComponent & StoryParams>;
+type Story = StoryObj<ZenTextarea & StoryParams>;
 
 export const Default: Story = {
   render: args => ({

package/schematics/components/files/textarea/{textarea.component.ts → textarea.ts}

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * ZenTextareaComponent is a reusable textarea component designed to provide
+ * ZenTextarea is a reusable textarea component designed to provide
  * a consistent and customizable textarea style across the application.
  * It supports Angular forms integration and provides two-way data binding.
  *
@@ -32,7 +32,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   template: `
     <ng-content />
   `,
-  styleUrls: ['./textarea.component.scss'],
+  styleUrls: ['./textarea.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ZenTextareaComponent {}
+export class ZenTextarea {}

package/schematics/dependency-manager/dependencies.constant.js

@@ -4,7 +4,6 @@ exports.DEPENDENCIES_CONFIG = void 0;
 exports.DEPENDENCIES_CONFIG = {
     icon: {
         dependencies: {
-            '@hugeicons/angular': 'latest',
             '@hugeicons/core-free-icons': 'latest',
         },
     },

package/schematics/dependency-manager/dependencies.constant.js.map

@@ -1 +1 @@
-{"version":3,"file":"dependencies.constant.js","sourceRoot":"","sources":["../../../../../src/schematics/dependency-manager/dependencies.constant.ts"],"names":[],"mappings":";;;AAEa,QAAA,mBAAmB,GAAyB;IACvD,IAAI,EAAE;QACJ,YAAY,EAAE;YACZ,oBAAoB,EAAE,QAAQ;YAC9B,4BAA4B,EAAE,QAAQ;SACvC;KACF;CACF,CAAC","sourcesContent":["import { FilesConfig } from '../../types';\n\nexport const DEPENDENCIES_CONFIG: Partial<FilesConfig> = {\n  icon: {\n    dependencies: {\n      '@hugeicons/angular': 'latest',\n      '@hugeicons/core-free-icons': 'latest',\n    },\n  },\n};\n"]}
+{"version":3,"file":"dependencies.constant.js","sourceRoot":"","sources":["../../../../../src/schematics/dependency-manager/dependencies.constant.ts"],"names":[],"mappings":";;;AAEa,QAAA,mBAAmB,GAAyB;IACvD,IAAI,EAAE;QACJ,YAAY,EAAE;YACZ,4BAA4B,EAAE,QAAQ;SACvC;KACF;CACF,CAAC","sourcesContent":["import { FilesConfig } from '../../types';\n\nexport const DEPENDENCIES_CONFIG: Partial<FilesConfig> = {\n  icon: {\n    dependencies: {\n      '@hugeicons/core-free-icons': 'latest',\n    },\n  },\n};\n"]}

package/schematics/dependency-manager/dependencies.constant.ts

@@ -3,7 +3,6 @@ import { FilesConfig } from '../../types';
 export const DEPENDENCIES_CONFIG: Partial<FilesConfig> = {
   icon: {
     dependencies: {
-      '@hugeicons/angular': 'latest',
       '@hugeicons/core-free-icons': 'latest',
     },
   },

package/schematics/components/files/checkbox/checkbox.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ZenCheckboxComponent } from './checkbox.component';
-
-describe('ZenCheckboxComponent', () => {
-  let component: ZenCheckboxComponent;
-  let fixture: ComponentFixture<ZenCheckboxComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ZenCheckboxComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenCheckboxComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/schematics/components/files/divider/divider.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ZenDividerComponent } from './divider.component';
-
-describe('DividerComponent', () => {
-  let component: ZenDividerComponent;
-  let fixture: ComponentFixture<ZenDividerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ZenDividerComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenDividerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/schematics/components/files/icon/icon.component.ts

@@ -1,35 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { HugeiconsIconComponent } from '@hugeicons/angular';
-import * as icons from '@hugeicons/core-free-icons';
-
-type Icon = keyof typeof icons;
-
-/**
- * A reusable Angular component for rendering icons from the Hugeicons library.
- *
- * This component acts as a wrapper around the `<hugeicons-icon>` component, allowing you to display any icon from the
- * `@hugeicons/core-free-icons` collection by specifying its name. The icon, size, and stroke width are fully configurable
- * via inputs.
- *
- * @example
- * <zen-icon icon="Tree02Icon" />
- *
- * @author Konrad Stępień
- * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
- * @see [GitHub](https://github.com/kstepien3/ng-zen)
- * @see [Hugeicons](https://hugeicons.com)
- */
-@Component({
-  selector: 'zen-icon',
-  template: `
-    <hugeicons-icon [icon]="icon()" [size]="size()" [strokeWidth]="strokeWidth()" color="currentColor" />
-  `,
-  imports: [HugeiconsIconComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ZenIconComponent {
-  /** Icon file names from HugeIcons */
-  readonly icon = input.required({ transform: (icon: Icon) => icons[icon] });
-  readonly size = input<number>(24);
-  readonly strokeWidth = input<number>(1.5);
-}

package/schematics/components/files/skeleton/skeleton.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ZenSkeletonComponent } from './skeleton.component';
-
-describe('ZenSkeletonComponent', () => {
-  let component: ZenSkeletonComponent;
-  let fixture: ComponentFixture<ZenSkeletonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ZenSkeletonComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenSkeletonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});