@ngstarter-ui/components 21.0.15 → 21.0.16

package/ai/component-registry.json

@@ -4519,18 +4519,34 @@
       "name": "headless-stepper",
       "title": "Headless Stepper",
       "overviewName": "Headless Stepper",
-      "category": null,
+      "category": "components",
       "package": "@ngstarter-ui/components",
       "importPath": "@ngstarter-ui/components/headless-stepper",
       "publicApi": "projects/components/headless-stepper/public-api.ts",
       "sourceRoot": "projects/components/headless-stepper/src",
-      "docsPath": null,
-      "docsOverviewSource": null,
+      "docsPath": "/components/headless-stepper",
+      "docsOverviewSource": "projects/docs/src/app/components/headless-stepper/overview/overview.html",
       "purpose": "Provide stepper state and validation logic without rendering a fixed visual stepper UI.",
       "useWhen": "Use for custom multi-step workflows where the product needs its own header, progress indicator, buttons, layout, or responsive presentation while keeping standard NgStarter step behavior. Use ngs-headless-stepper with ngs-headless-step when you need selectedIndex, selected step state, progressPercent, canMoveNext, next(), previous(), reset(), linear mode, optional steps, and stepControl validation. Good for custom wizards, onboarding forms, checkout flows, setup flows, and complex forms with a bespoke layout. Do not use when the standard visual Stepper fits; use Stepper. Do not use for guided tours over existing UI; use GuidedTour. Do not use as Tabs, Accordion, or for a simple single-page form without steps.",
-      "exampleTopics": [],
-      "minimalExample": null,
-      "exampleFiles": [],
+      "exampleTopics": [
+        "Basic Headless Stepper",
+        "Linear Headless Stepper"
+      ],
+      "minimalExample": "<ngs-headless-stepper #stepper [(selectedIndex)]=\"selectedIndex\">\n  <div class=\"mb-5 flex flex-col gap-4\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\">\n      <div>\n        <p class=\"text-sm text-neutral-600\">Step {{ stepper.selectedIndex() + 1 }} of {{ stepper.stepsCount() }}</p>\n        <h4 class=\"mt-1 text-base font-semibold\">{{ steps[selectedIndex()].title }}</h4>\n        <p class=\"mt-1 text-sm text-neutral-600\">{{ steps[selectedIndex()].description }}</p>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        @for (item of steps; track item.title; let index = $index) {\n          <button\n            ngsButton=\"tonal\"\n            type=\"button\"\n            [class.headless-stepper-example-active]=\"selectedIndex() === index\"\n            (click)=\"stepper.selectedIndex.set(index)\">\n            {{ index + 1 }}\n          </button>\n        }\n      </div>\n    </div>\n    <ngs-progress-bar mode=\"determinate\" [value]=\"stepper.progressPercent()\"/>\n  </div>\n  <ngs-headless-step>\n    <ngs-card>\n      <ngs-card-content>\n        <h5 class=\"text-base font-semibold\">Workspace details</h5>\n        <p class=\"mt-2 text-sm text-neutral-600\">\n          Pick a workspace name, region, and owner. This example keeps the content simple while the stepper owns the\n          active step state.\n        </p>\n      </ngs-card-content>\n    </ngs-card>\n  </ngs-headless-step>\n  <ngs-headless-step>\n    <ngs-card>\n      <ngs-card-content>\n        <h5 class=\"text-base font-semibold\">Team access</h5>\n        <p class=\"mt-2 text-sm text-neutral-600\">\n          Show a c\n...",
+      "exampleFiles": [
+        {
+          "name": "basic-headless-stepper-example",
+          "title": "Basic headless stepper",
+          "file": "projects/docs/src/app/components/headless-stepper/_examples/basic-headless-stepper-example/basic-headless-stepper-example.html",
+          "source": "<ngs-headless-stepper #stepper [(selectedIndex)]=\"selectedIndex\">\n  <div class=\"mb-5 flex flex-col gap-4\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\">\n      <div>\n        <p class=\"text-sm text-neutral-600\">Step {{ stepper.selectedIndex() + 1 }} of {{ stepper.stepsCount() }}</p>\n        <h4 class=\"mt-1 text-base font-semibold\">{{ steps[selectedIndex()].title }}</h4>\n        <p class=\"mt-1 text-sm text-neutral-600\">{{ steps[selectedIndex()].description }}</p>\n      </div>\n      <div class=\"flex flex-wrap gap-2\">\n        @for (item of steps; track item.title; let index = $index) {\n          <button\n            ngsButton=\"tonal\"\n            type=\"button\"\n            [class.headless-stepper-example-active]=\"selectedIndex() === index\"\n            (click)=\"stepper.selectedIndex.set(index)\">\n            {{ index + 1 }}\n          </button>\n        }\n      </div>\n    </div>\n    <ngs-progress-bar mode=\"determinate\" [value]=\"stepper.progressPercent()\"/>\n  </div>\n  <ngs-headless-step>\n    <ngs-card>\n      <ngs-card-content>\n        <h5 class=\"text-base font-semibold\">Workspace details</h5>\n        <p class=\"mt-2 text-sm text-neutral-600\">\n          Pick a workspace name, region, and owner. This example keeps the content simple while the stepper owns the\n          active step state.\n        </p>\n      </ngs-card-content>\n    </ngs-card>\n  </ngs-headless-step>\n  <ngs-headless-step>\n    <ngs-card>\n      <ngs-card-content>\n        <h5 class=\"text-base font-semibold\">Team access</h5>\n        <p class=\"mt-2 text-sm text-neutral-600\">\n          Show a c\n..."
+        },
+        {
+          "name": "linear-headless-stepper-example",
+          "title": "Linear headless stepper",
+          "file": "projects/docs/src/app/components/headless-stepper/_examples/linear-headless-stepper-example/linear-headless-stepper-example.html",
+          "source": "<ngs-headless-stepper #stepper linear>\n  <div class=\"mb-5\">\n    <div class=\"flex items-center justify-between gap-4\">\n      <div>\n        <p class=\"text-sm text-neutral-600\">Linear setup</p>\n        <h4 class=\"mt-1 text-base font-semibold\">Step {{ stepper.selectedIndex() + 1 }} of {{ stepper.stepsCount() }}</h4>\n      </div>\n      <p class=\"text-sm text-neutral-600\">{{ stepper.progressPercent() | number: '1.0-0' }}%</p>\n    </div>\n    <ngs-progress-bar class=\"mt-4\" mode=\"determinate\" [value]=\"stepper.progressPercent()\"/>\n  </div>\n  <ngs-headless-step [stepControl]=\"accountForm\">\n    <form [formGroup]=\"accountForm\" class=\"flex flex-col gap-4\">\n      <ngs-form-field>\n        <ngs-label>Company</ngs-label>\n        <input ngsInput formControlName=\"company\" placeholder=\"Acme Operations\" required>\n      </ngs-form-field>\n      <p class=\"text-sm text-neutral-600\">\n        The next button becomes available when this form group is valid.\n      </p>\n    </form>\n  </ngs-headless-step>\n  <ngs-headless-step [stepControl]=\"billingForm\">\n    <form [formGroup]=\"billingForm\" class=\"flex flex-col gap-4\">\n      <ngs-form-field>\n        <ngs-label>Billing email</ngs-label>\n        <input ngsInput formControlName=\"email\" placeholder=\"billing@example.com\" required>\n      </ngs-form-field>\n      <p class=\"text-sm text-neutral-600\">\n        Headless Stepper tracks the connected control status and uses it for linear navigation.\n      </p>\n    </form>\n  </ngs-headless-step>\n  <ngs-headless-step optional>\n    <div class=\"rounded-lg border border-muted p-5\">\n      <h5 class=\"text-base font-semibold\">O\n..."
+        }
+      ],
       "previewAsset": "projects/components/headless-stepper/preview.svg",
       "selectors": [
         "ngs-headless-step",
@@ -8634,6 +8650,8 @@
       ],
       "outputs": [],
       "cssTokens": [
+        "--ngs-color-on-primary",
+        "--ngs-color-on-success",
         "--ngs-color-on-surface",
         "--ngs-color-on-surface-variant",
         "--ngs-color-outline-variant",
@@ -8645,9 +8663,11 @@
         "--ngs-stepper-header-gap",
         "--ngs-stepper-header-padding",
         "--ngs-stepper-icon-active-bg",
+        "--ngs-stepper-icon-active-color",
         "--ngs-stepper-icon-bg",
         "--ngs-stepper-icon-color",
         "--ngs-stepper-icon-completed-bg",
+        "--ngs-stepper-icon-completed-color",
         "--ngs-stepper-icon-size",
         "--ngs-stepper-label-active-color",
         "--ngs-stepper-label-color",

package/fesm2022/ngstarter-ui-components-headless-stepper.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { input, signal, inject, DestroyRef, effect, computed, ChangeDetectionStrategy, Component, model, contentChildren } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { startWith } from 'rxjs/operators';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 class HeadlessStep {
     /** Form control associated with this step */
     stepControl = input(undefined, ...(ngDevMode ? [{ debugName: "stepControl" }] : /* istanbul ignore next */ []));
     /** Whether the step is optional */
-    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** Whether the user has interacted with this step (writable signal) */
     interacted = signal(false, ...(ngDevMode ? [{ debugName: "interacted" }] : /* istanbul ignore next */ []));
     /** Whether this step is currently active (writable signal, controlled by Stepper) */
@@ -68,7 +68,7 @@ class HeadlessStep {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HeadlessStep, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-headless-step', exportAs: 'ngsHeadlessStep', template: `<ng-content/>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ngs-headless-step', exportAs: 'ngsHeadlessStep', standalone: true, template: `<ng-content/>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-headless-step',
                         '[style.display]': 'isActive() ? "block" : "none"',
                     }, styles: [":host{display:block}\n"] }]
@@ -175,11 +175,11 @@ class HeadlessStepper {
         this.selectedIndex.set(0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HeadlessStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: HeadlessStepper, isStandalone: true, selector: "ngs-headless-stepper", inputs: { linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, host: { classAttribute: "ngs-headless-stepper" }, queries: [{ propertyName: "steps", predicate: HeadlessStep, isSignal: true }], exportAs: ["ngsHeadlessStepper"], ngImport: i0, template: `<ng-content select="ngs-step"/>`, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: HeadlessStepper, isStandalone: true, selector: "ngs-headless-stepper", inputs: { linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, host: { classAttribute: "ngs-headless-stepper" }, queries: [{ propertyName: "steps", predicate: HeadlessStep, isSignal: true }], exportAs: ["ngsHeadlessStepper"], ngImport: i0, template: `<ng-content/>`, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HeadlessStepper, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-headless-stepper', exportAs: 'ngsHeadlessStepper', standalone: true, template: `<ng-content select="ngs-step"/>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ngs-headless-stepper', exportAs: 'ngsHeadlessStepper', standalone: true, template: `<ng-content/>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-headless-stepper',
                     }, styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HeadlessStep), { isSignal: true }] }] } });

package/fesm2022/ngstarter-ui-components-headless-stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngstarter-ui-components-headless-stepper.mjs","sources":["../../../projects/components/headless-stepper/src/headless-step.ts","../../../projects/components/headless-stepper/src/headless-stepper.ts","../../../projects/components/headless-stepper/ngstarter-ui-components-headless-stepper.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  signal,\n  computed,\n  effect,\n  inject,\n  DestroyRef\n} from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { startWith } from 'rxjs/operators';\n\n@Component({\n  selector: 'ngs-headless-step',\n  exportAs: 'ngsHeadlessStep',\n  template: `<ng-content/>`,\n  styles: [`\n    :host {\n      display: block;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-headless-step',\n    '[style.display]': 'isActive() ? \"block\" : \"none\"',\n  }\n})\nexport class HeadlessStep {\n  /** Form control associated with this step */\n  stepControl = input<AbstractControl | undefined>(undefined);\n  /** Whether the step is optional */\n  optional = input(false);\n\n  /** Whether the user has interacted with this step (writable signal) */\n  readonly interacted = signal(false);\n  /** Whether this step is currently active (writable signal, controlled by Stepper) */\n  readonly isActive = signal(false);\n  /** Internal writable signal tracking the validity of the stepControl */\n  private readonly _isValid = signal(true); // Default to true if no control\n\n  private _destroyRef = inject(DestroyRef); // Inject DestroyRef for automatic cleanup\n\n  constructor() {\n    effect(() => {\n      const control = this.stepControl(); // Read the input signal\n\n      if (control) {\n        // Set initial validity based on the control's current state when the effect runs\n        this._isValid.set(control.valid);\n\n        // Subscribe to statusChanges and update the _isValid signal\n        // Use takeUntilDestroyed for automatic cleanup when the component is destroyed\n        control.statusChanges.pipe(\n          startWith(control.status), // Emit initial status immediately to sync _isValid\n          takeUntilDestroyed(this._destroyRef) // Automatically unsubscribe on component destroy\n        ).subscribe(() => {\n          // Update the internal validity signal whenever the control's status changes\n          this._isValid.set(control.valid);\n        });\n\n      } else {\n        // If no control is provided, consider the step inherently valid for completion\n        this._isValid.set(true);\n      }\n    });\n  }\n\n  /** Computed signal indicating if the step is completed */\n  readonly completed = computed(() => {\n    // A step is completed if it doesn't have a stepControl or\n    // if the internal _isValid signal (reflecting the control's validity) is true.\n    return !this.stepControl() || this._isValid();\n  });\n\n  /**\n   * Checks if the step is currently valid.\n   * Considers the validity of the associated stepControl if provided.\n   * @returns boolean True if the step is valid, false otherwise.\n   */\n  public isValid(): boolean {\n    return this._isValid(); // Directly return the tracked validity state\n  }\n\n  /** Resets the step's interacted state */\n  reset(): void {\n    this.interacted.set(false);\n  }\n\n  /** Sets the active state of the step */\n  setActive(active: boolean): void {\n    this.isActive.set(active);\n  }\n\n  /** Sets the interacted state of the step */\n  setInteracted(interacted: boolean): void {\n    this.interacted.set(interacted);\n  }\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  effect,\n  computed,\n  input,\n  model,\n  contentChildren,\n} from '@angular/core';\nimport { HeadlessStep } from './headless-step';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\n\n@Component({\n  selector: 'ngs-headless-stepper',\n  exportAs: 'ngsHeadlessStepper',\n  standalone: true,\n  template: `<ng-content select=\"ngs-step\"/>`,\n  styles: [`\n    :host {\n      display: block;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-headless-stepper',\n  },\n})\nexport class HeadlessStepper {\n  /** Whether the stepper should operate in linear mode. */\n  readonly linear = input(false, {\n    transform: coerceBooleanProperty\n  });\n  /** The index of the active step (two-way bound). */\n  readonly selectedIndex = model(0);\n\n  /** Collection of child StepComponent instances. */\n  readonly steps = contentChildren(HeadlessStep);\n\n  /** Computed signal for the total number of steps. */\n  readonly stepsCount = computed(() => {\n    return this.steps()?.length ?? 0;\n  });\n\n  /** The currently selected StepComponent instance. */\n  readonly selected = computed(() => {\n    const index = this.selectedIndex();\n    const stepList = this.steps();\n    // Use the stepsCount() computed signal for checking length\n    return stepList && index >= 0 && index < this.stepsCount() ? stepList[index] : undefined;\n  });\n\n  /** Checks if the user can navigate to the next step. */\n  readonly canMoveNext = computed(() => {\n    const index = this.selectedIndex();\n    // Use stepsCount() signal\n    const totalSteps = this.stepsCount();\n    const currentSelected = this.selected();\n    const isLinear = this.linear();\n\n    // Cannot move next if there are no steps or already on the last step\n    if (totalSteps === 0 || index >= totalSteps - 1) {\n      return false;\n    }\n    if (!isLinear || !currentSelected) {\n      return true;\n    }\n    return currentSelected.completed() || currentSelected.optional();\n  });\n\n  /** Computed signal indicating if the current step is the first step. */\n  readonly isFirstStep = computed(() => {\n    const index = this.selectedIndex();\n    // Use stepsCount() signal\n    return index === 0 && this.stepsCount() > 0;\n  });\n\n  /** Computed signal indicating if the current step is the last step. */\n  readonly isLastStep = computed(() => {\n    const index = this.selectedIndex();\n    // Use stepsCount() signal\n    const totalSteps = this.stepsCount();\n    return totalSteps > 0 && index === totalSteps - 1;\n  });\n\n  /** Computed signal calculating the progress percentage. */\n  readonly progressPercent = computed(() => {\n    const totalSteps = this.stepsCount();\n    const index = this.selectedIndex();\n\n    if (totalSteps === 0) {\n      return 0;\n    }\n\n    const progress = (100 / totalSteps) * (index + 1);\n    return Math.max(0, Math.min(100, progress));\n  });\n\n  constructor() {\n    effect(() => {\n      const currentSteps = this.steps();\n      const currentIndex = this.selectedIndex();\n      currentSteps.forEach((step, index) => step.setActive(index === currentIndex));\n    });\n\n    effect((onCleanup) => { // Mark as interacted\n      const currentSelected = this.selected();\n      if (currentSelected && !currentSelected.interacted()) {\n        currentSelected.setInteracted(true);\n      }\n    });\n\n    effect(() => { // Validate index\n      const totalSteps = this.stepsCount();\n      const currentIndex = this.selectedIndex();\n\n      if (totalSteps > 0) {\n        const newIndex = Math.max(0, Math.min(currentIndex, totalSteps - 1));\n        if (newIndex !== currentIndex) this.selectedIndex.set(newIndex);\n      } else if (currentIndex !== 0) {\n        this.selectedIndex.set(0);\n      }\n    });\n  }\n\n  /** Navigates to the next step if possible. */\n  next(): void {\n    if (this.canMoveNext()) {\n      this.selectedIndex.update(i => i + 1);\n    }\n  }\n\n  /** Navigates to the previous step if possible. */\n  previous(): void {\n    // Use renamed computed signal for check\n    if (!this.isFirstStep()) {\n      this.selectedIndex.update(i => i - 1);\n    }\n  }\n\n  /** Resets the stepper to the first step. */\n  reset(): void {\n    this.steps().forEach(step => step.reset());\n    this.selectedIndex.set(0);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngstarter-ui-components-headless-stepper.mjs","sources":["../../../projects/components/headless-stepper/src/headless-step.ts","../../../projects/components/headless-stepper/src/headless-stepper.ts","../../../projects/components/headless-stepper/ngstarter-ui-components-headless-stepper.ts"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  signal,\n  computed,\n  effect,\n  inject,\n  DestroyRef\n} from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { startWith } from 'rxjs/operators';\n\n@Component({\n  selector: 'ngs-headless-step',\n  exportAs: 'ngsHeadlessStep',\n  standalone: true,\n  template: `<ng-content/>`,\n  styles: [`\n    :host {\n      display: block;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-headless-step',\n    '[style.display]': 'isActive() ? \"block\" : \"none\"',\n  }\n})\nexport class HeadlessStep {\n  /** Form control associated with this step */\n  stepControl = input<AbstractControl | undefined>(undefined);\n  /** Whether the step is optional */\n  optional = input(false, {\n    transform: coerceBooleanProperty\n  });\n\n  /** Whether the user has interacted with this step (writable signal) */\n  readonly interacted = signal(false);\n  /** Whether this step is currently active (writable signal, controlled by Stepper) */\n  readonly isActive = signal(false);\n  /** Internal writable signal tracking the validity of the stepControl */\n  private readonly _isValid = signal(true); // Default to true if no control\n\n  private _destroyRef = inject(DestroyRef); // Inject DestroyRef for automatic cleanup\n\n  constructor() {\n    effect(() => {\n      const control = this.stepControl(); // Read the input signal\n\n      if (control) {\n        // Set initial validity based on the control's current state when the effect runs\n        this._isValid.set(control.valid);\n\n        // Subscribe to statusChanges and update the _isValid signal\n        // Use takeUntilDestroyed for automatic cleanup when the component is destroyed\n        control.statusChanges.pipe(\n          startWith(control.status), // Emit initial status immediately to sync _isValid\n          takeUntilDestroyed(this._destroyRef) // Automatically unsubscribe on component destroy\n        ).subscribe(() => {\n          // Update the internal validity signal whenever the control's status changes\n          this._isValid.set(control.valid);\n        });\n\n      } else {\n        // If no control is provided, consider the step inherently valid for completion\n        this._isValid.set(true);\n      }\n    });\n  }\n\n  /** Computed signal indicating if the step is completed */\n  readonly completed = computed(() => {\n    // A step is completed if it doesn't have a stepControl or\n    // if the internal _isValid signal (reflecting the control's validity) is true.\n    return !this.stepControl() || this._isValid();\n  });\n\n  /**\n   * Checks if the step is currently valid.\n   * Considers the validity of the associated stepControl if provided.\n   * @returns boolean True if the step is valid, false otherwise.\n   */\n  public isValid(): boolean {\n    return this._isValid(); // Directly return the tracked validity state\n  }\n\n  /** Resets the step's interacted state */\n  reset(): void {\n    this.interacted.set(false);\n  }\n\n  /** Sets the active state of the step */\n  setActive(active: boolean): void {\n    this.isActive.set(active);\n  }\n\n  /** Sets the interacted state of the step */\n  setInteracted(interacted: boolean): void {\n    this.interacted.set(interacted);\n  }\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  effect,\n  computed,\n  input,\n  model,\n  contentChildren,\n} from '@angular/core';\nimport { HeadlessStep } from './headless-step';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\n\n@Component({\n  selector: 'ngs-headless-stepper',\n  exportAs: 'ngsHeadlessStepper',\n  standalone: true,\n  template: `<ng-content/>`,\n  styles: [`\n    :host {\n      display: block;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-headless-stepper',\n  },\n})\nexport class HeadlessStepper {\n  /** Whether the stepper should operate in linear mode. */\n  readonly linear = input(false, {\n    transform: coerceBooleanProperty\n  });\n  /** The index of the active step (two-way bound). */\n  readonly selectedIndex = model(0);\n\n  /** Collection of child StepComponent instances. */\n  readonly steps = contentChildren(HeadlessStep);\n\n  /** Computed signal for the total number of steps. */\n  readonly stepsCount = computed(() => {\n    return this.steps()?.length ?? 0;\n  });\n\n  /** The currently selected StepComponent instance. */\n  readonly selected = computed(() => {\n    const index = this.selectedIndex();\n    const stepList = this.steps();\n    // Use the stepsCount() computed signal for checking length\n    return stepList && index >= 0 && index < this.stepsCount() ? stepList[index] : undefined;\n  });\n\n  /** Checks if the user can navigate to the next step. */\n  readonly canMoveNext = computed(() => {\n    const index = this.selectedIndex();\n    // Use stepsCount() signal\n    const totalSteps = this.stepsCount();\n    const currentSelected = this.selected();\n    const isLinear = this.linear();\n\n    // Cannot move next if there are no steps or already on the last step\n    if (totalSteps === 0 || index >= totalSteps - 1) {\n      return false;\n    }\n    if (!isLinear || !currentSelected) {\n      return true;\n    }\n    return currentSelected.completed() || currentSelected.optional();\n  });\n\n  /** Computed signal indicating if the current step is the first step. */\n  readonly isFirstStep = computed(() => {\n    const index = this.selectedIndex();\n    // Use stepsCount() signal\n    return index === 0 && this.stepsCount() > 0;\n  });\n\n  /** Computed signal indicating if the current step is the last step. */\n  readonly isLastStep = computed(() => {\n    const index = this.selectedIndex();\n    // Use stepsCount() signal\n    const totalSteps = this.stepsCount();\n    return totalSteps > 0 && index === totalSteps - 1;\n  });\n\n  /** Computed signal calculating the progress percentage. */\n  readonly progressPercent = computed(() => {\n    const totalSteps = this.stepsCount();\n    const index = this.selectedIndex();\n\n    if (totalSteps === 0) {\n      return 0;\n    }\n\n    const progress = (100 / totalSteps) * (index + 1);\n    return Math.max(0, Math.min(100, progress));\n  });\n\n  constructor() {\n    effect(() => {\n      const currentSteps = this.steps();\n      const currentIndex = this.selectedIndex();\n      currentSteps.forEach((step, index) => step.setActive(index === currentIndex));\n    });\n\n    effect((onCleanup) => { // Mark as interacted\n      const currentSelected = this.selected();\n      if (currentSelected && !currentSelected.interacted()) {\n        currentSelected.setInteracted(true);\n      }\n    });\n\n    effect(() => { // Validate index\n      const totalSteps = this.stepsCount();\n      const currentIndex = this.selectedIndex();\n\n      if (totalSteps > 0) {\n        const newIndex = Math.max(0, Math.min(currentIndex, totalSteps - 1));\n        if (newIndex !== currentIndex) this.selectedIndex.set(newIndex);\n      } else if (currentIndex !== 0) {\n        this.selectedIndex.set(0);\n      }\n    });\n  }\n\n  /** Navigates to the next step if possible. */\n  next(): void {\n    if (this.canMoveNext()) {\n      this.selectedIndex.update(i => i + 1);\n    }\n  }\n\n  /** Navigates to the previous step if possible. */\n  previous(): void {\n    // Use renamed computed signal for check\n    if (!this.isFirstStep()) {\n      this.selectedIndex.update(i => i - 1);\n    }\n  }\n\n  /** Resets the stepper to the first step. */\n  reset(): void {\n    this.steps().forEach(step => step.reset());\n    this.selectedIndex.set(0);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-stepper.mjs

@@ -56,11 +56,11 @@ class Stepper extends CdkStepper {
         super.ngAfterContentInit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Stepper, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Stepper, isStandalone: true, selector: "ngs-stepper", inputs: { headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkStepper, useExisting: Stepper }], queries: [{ propertyName: "stepItems", predicate: Step, descendants: true, isSignal: true }, { propertyName: "_stepLabels", predicate: StepLabel, descendants: true, isSignal: true }], exportAs: ["ngsStepper"], usesInheritance: true, ngImport: i0, template: "<div class=\"ngs-stepper\"\n     [class.ngs-stepper-vertical]=\"orientation === 'vertical'\"\n     [class.ngs-stepper-horizontal]=\"orientation === 'horizontal'\"\n     [class.ngs-stepper-header-bottom]=\"headerPosition() === 'bottom'\">\n  @if (orientation === 'horizontal') {\n    <div class=\"ngs-stepper-header-container\" [class.ngs-stepper-label-bottom-container]=\"labelPosition() === 'bottom'\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-header\"\n             [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n             [class.ngs-stepper-header-completed]=\"step.completed\"\n             [class.ngs-stepper-label-bottom]=\"labelPosition() === 'bottom'\"\n             (click)=\"step.select()\"\n             role=\"tab\"\n             [attr.aria-selected]=\"selectedIndex === i\"\n             [attr.aria-controls]=\"_getStepContentId(i)\">\n          <div class=\"ngs-stepper-icon\">\n            @if (step.completed) {\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n                <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n              </svg>\n            } @else {\n              {{ i + 1 }}\n            }\n          </div>\n          <div class=\"ngs-stepper-label\">\n            @if (step.stepLabel) {\n              <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n            } @else {\n              {{ step.label }}\n            }\n          </div>\n        </div>\n        @if (i < stepItems().length - 1 && labelPosition() !== 'bottom') {\n          <div class=\"ngs-stepper-line\"></div>\n        }\n      }\n    </div>\n\n    <div class=\"ngs-stepper-content-container\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      }\n    </div>\n  } @else {\n    @for (step of stepItems(); track step; let i = $index) {\n      <div class=\"ngs-stepper-header\"\n           [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n           [class.ngs-stepper-header-completed]=\"step.completed\"\n           (click)=\"step.select()\"\n           role=\"tab\"\n           [attr.aria-selected]=\"selectedIndex === i\"\n           [attr.aria-controls]=\"_getStepContentId(i)\">\n        <div class=\"ngs-stepper-icon\">\n          @if (step.completed) {\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n              <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"ngs-stepper-label\">\n          @if (step.stepLabel) {\n            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n          } @else {\n            {{ step.label }}\n          }\n        </div>\n      </div>\n      <div class=\"ngs-stepper-content-wrapper\" [class.ngs-stepper-last-step]=\"i === stepItems().length - 1\">\n        <div class=\"ngs-stepper-vertical-line\"></div>\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":root{--ngs-stepper-header-padding: 16px;--ngs-stepper-header-gap: 8px;--ngs-stepper-icon-size: 24px;--ngs-stepper-icon-bg: var(--ngs-color-surface-container-high);--ngs-stepper-icon-color: var(--ngs-color-on-surface);--ngs-stepper-icon-active-bg: var(--ngs-color-primary);--ngs-stepper-icon-completed-bg: var(--ngs-color-success);--ngs-stepper-label-color: var(--ngs-color-on-surface-variant);--ngs-stepper-label-active-color: var(--ngs-color-on-surface);--ngs-stepper-line-color: var(--ngs-color-outline-variant);--ngs-stepper-content-padding: 24px}.ngs-stepper{display:flex;flex-direction:column}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-header{padding:16px 0}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content-wrapper{margin-left:calc(var(--ngs-stepper-icon-size) / 2 - .5px);padding-left:calc(var(--ngs-stepper-icon-size) / 2 + var(--ngs-stepper-header-gap) + .5px);position:relative}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content-wrapper.ngs-stepper-last-step .ngs-stepper-vertical-line{display:none}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-vertical-line{position:absolute;left:0;top:-16px;bottom:-16px;width:1px;background:var(--ngs-stepper-line-color)}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content{padding:8px 0 24px}.ngs-stepper.ngs-stepper-header-bottom{flex-direction:column-reverse}.ngs-stepper.ngs-stepper-header-bottom .ngs-stepper-header-container{border-bottom:none;border-top:1px solid var(--ngs-stepper-line-color)}.ngs-stepper-header-container{display:flex;align-items:center;padding:0 var(--ngs-stepper-header-padding);border-bottom:1px solid var(--ngs-stepper-line-color);overflow-x:hidden}.ngs-stepper-header-container.ngs-stepper-label-bottom-container{align-items:flex-start;padding:0}.ngs-stepper-header-container.ngs-stepper-label-bottom-container .ngs-stepper-header{flex:1;padding-left:8px;padding-right:8px}.ngs-stepper-header{display:flex;align-items:center;gap:var(--ngs-stepper-header-gap);padding:16px 0;cursor:pointer;white-space:nowrap;outline:none;position:relative;min-width:0}.ngs-stepper-header:hover .ngs-stepper-icon:not(.ngs-stepper-header-active .ngs-stepper-icon){background:var(--ngs-color-surface-container-highest)}.ngs-stepper-header.ngs-stepper-label-bottom{flex-direction:column;justify-content:center;width:auto;min-width:100px;gap:12px}.ngs-stepper-header.ngs-stepper-label-bottom .ngs-stepper-label{text-align:center;white-space:normal}.ngs-stepper-header.ngs-stepper-label-bottom:before,.ngs-stepper-header.ngs-stepper-label-bottom:after{content:\"\";position:absolute;top:calc(var(--ngs-stepper-icon-size) / 2 + 16px);height:1px;background:var(--ngs-stepper-line-color);width:calc(50% - var(--ngs-stepper-icon-size) / 2 - 8px)}.ngs-stepper-header.ngs-stepper-label-bottom:before{left:0}.ngs-stepper-header.ngs-stepper-label-bottom:after{right:0}.ngs-stepper-header.ngs-stepper-label-bottom:first-child:before,.ngs-stepper-header.ngs-stepper-label-bottom:last-of-type:after{display:none}.ngs-stepper-icon{width:var(--ngs-stepper-icon-size);height:var(--ngs-stepper-icon-size);border-radius:50%;background:var(--ngs-stepper-icon-bg);color:var(--ngs-stepper-icon-color);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0;transition:background-color .2s ease;z-index:1}.ngs-stepper-header-active .ngs-stepper-icon{background:var(--ngs-stepper-icon-active-bg)}.ngs-stepper-header-active .ngs-stepper-label{color:var(--ngs-stepper-label-active-color);font-weight:500}.ngs-stepper-header-completed .ngs-stepper-icon{background:var(--ngs-stepper-icon-completed-bg)}.ngs-stepper-label{color:var(--ngs-stepper-label-color);font-size:14px;transition:color .2s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-stepper-line{flex:1;height:1px;background:var(--ngs-stepper-line-color);margin:0 16px;min-width:24px}.ngs-stepper-content-container{padding:var(--ngs-stepper-content-padding)}.ngs-stepper-content{outline:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Stepper, isStandalone: true, selector: "ngs-stepper", inputs: { headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkStepper, useExisting: Stepper }], queries: [{ propertyName: "stepItems", predicate: Step, descendants: true, isSignal: true }, { propertyName: "_stepLabels", predicate: StepLabel, descendants: true, isSignal: true }], exportAs: ["ngsStepper"], usesInheritance: true, ngImport: i0, template: "<div class=\"ngs-stepper\"\n     [class.ngs-stepper-vertical]=\"orientation === 'vertical'\"\n     [class.ngs-stepper-horizontal]=\"orientation === 'horizontal'\"\n     [class.ngs-stepper-header-bottom]=\"headerPosition() === 'bottom'\">\n  @if (orientation === 'horizontal') {\n    <div class=\"ngs-stepper-header-container\" [class.ngs-stepper-label-bottom-container]=\"labelPosition() === 'bottom'\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-header\"\n             [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n             [class.ngs-stepper-header-completed]=\"step.completed\"\n             [class.ngs-stepper-label-bottom]=\"labelPosition() === 'bottom'\"\n             (click)=\"step.select()\"\n             role=\"tab\"\n             [attr.aria-selected]=\"selectedIndex === i\"\n             [attr.aria-controls]=\"_getStepContentId(i)\">\n          <div class=\"ngs-stepper-icon\">\n            @if (step.completed) {\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n                <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n              </svg>\n            } @else {\n              {{ i + 1 }}\n            }\n          </div>\n          <div class=\"ngs-stepper-label\">\n            @if (step.stepLabel) {\n              <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n            } @else {\n              {{ step.label }}\n            }\n          </div>\n        </div>\n        @if (i < stepItems().length - 1 && labelPosition() !== 'bottom') {\n          <div class=\"ngs-stepper-line\"></div>\n        }\n      }\n    </div>\n\n    <div class=\"ngs-stepper-content-container\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      }\n    </div>\n  } @else {\n    @for (step of stepItems(); track step; let i = $index) {\n      <div class=\"ngs-stepper-header\"\n           [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n           [class.ngs-stepper-header-completed]=\"step.completed\"\n           (click)=\"step.select()\"\n           role=\"tab\"\n           [attr.aria-selected]=\"selectedIndex === i\"\n           [attr.aria-controls]=\"_getStepContentId(i)\">\n        <div class=\"ngs-stepper-icon\">\n          @if (step.completed) {\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n              <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"ngs-stepper-label\">\n          @if (step.stepLabel) {\n            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n          } @else {\n            {{ step.label }}\n          }\n        </div>\n      </div>\n      <div class=\"ngs-stepper-content-wrapper\" [class.ngs-stepper-last-step]=\"i === stepItems().length - 1\">\n        <div class=\"ngs-stepper-vertical-line\"></div>\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":root{--ngs-stepper-header-padding: 16px;--ngs-stepper-header-gap: 8px;--ngs-stepper-icon-size: 24px;--ngs-stepper-icon-bg: var(--ngs-color-surface-container-high);--ngs-stepper-icon-color: var(--ngs-color-on-surface);--ngs-stepper-icon-active-bg: var(--ngs-color-primary);--ngs-stepper-icon-active-color: var(--ngs-color-on-primary);--ngs-stepper-icon-completed-bg: var(--ngs-color-success);--ngs-stepper-icon-completed-color: var(--ngs-color-on-success);--ngs-stepper-label-color: var(--ngs-color-on-surface-variant);--ngs-stepper-label-active-color: var(--ngs-color-on-surface);--ngs-stepper-line-color: var(--ngs-color-outline-variant);--ngs-stepper-content-padding: 24px}.ngs-stepper{display:flex;flex-direction:column}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-header{padding:16px 0}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content-wrapper{margin-left:calc(var(--ngs-stepper-icon-size) / 2 - .5px);padding-left:calc(var(--ngs-stepper-icon-size) / 2 + var(--ngs-stepper-header-gap) + .5px);position:relative}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content-wrapper.ngs-stepper-last-step .ngs-stepper-vertical-line{display:none}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-vertical-line{position:absolute;left:0;top:-16px;bottom:-16px;width:1px;background:var(--ngs-stepper-line-color)}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content{padding:8px 0 24px}.ngs-stepper.ngs-stepper-header-bottom{flex-direction:column-reverse}.ngs-stepper.ngs-stepper-header-bottom .ngs-stepper-header-container{border-bottom:none;border-top:1px solid var(--ngs-stepper-line-color)}.ngs-stepper-header-container{display:flex;align-items:center;padding:0 var(--ngs-stepper-header-padding);border-bottom:1px solid var(--ngs-stepper-line-color);overflow-x:hidden}.ngs-stepper-header-container.ngs-stepper-label-bottom-container{align-items:flex-start;padding:0}.ngs-stepper-header-container.ngs-stepper-label-bottom-container .ngs-stepper-header{flex:1;padding-left:8px;padding-right:8px}.ngs-stepper-header{display:flex;align-items:center;gap:var(--ngs-stepper-header-gap);padding:16px 0;cursor:pointer;white-space:nowrap;outline:none;position:relative;min-width:0}.ngs-stepper-header:hover .ngs-stepper-icon:not(.ngs-stepper-header-active .ngs-stepper-icon){background:var(--ngs-color-surface-container-highest)}.ngs-stepper-header.ngs-stepper-label-bottom{flex-direction:column;justify-content:center;width:auto;min-width:100px;gap:12px}.ngs-stepper-header.ngs-stepper-label-bottom .ngs-stepper-label{text-align:center;white-space:normal}.ngs-stepper-header.ngs-stepper-label-bottom:before,.ngs-stepper-header.ngs-stepper-label-bottom:after{content:\"\";position:absolute;top:calc(var(--ngs-stepper-icon-size) / 2 + 16px);height:1px;background:var(--ngs-stepper-line-color);width:calc(50% - var(--ngs-stepper-icon-size) / 2 - 8px)}.ngs-stepper-header.ngs-stepper-label-bottom:before{left:0}.ngs-stepper-header.ngs-stepper-label-bottom:after{right:0}.ngs-stepper-header.ngs-stepper-label-bottom:first-child:before,.ngs-stepper-header.ngs-stepper-label-bottom:last-of-type:after{display:none}.ngs-stepper-icon{width:var(--ngs-stepper-icon-size);height:var(--ngs-stepper-icon-size);border-radius:50%;background:var(--ngs-stepper-icon-bg);color:var(--ngs-stepper-icon-color);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0;transition:background-color .2s ease;z-index:1}.ngs-stepper-header-active .ngs-stepper-icon{background:var(--ngs-stepper-icon-active-bg);color:var(--ngs-stepper-icon-active-color)}.ngs-stepper-header-active .ngs-stepper-label{color:var(--ngs-stepper-label-active-color);font-weight:500}.ngs-stepper-header-completed .ngs-stepper-icon{background:var(--ngs-stepper-icon-completed-bg);color:var(--ngs-stepper-icon-completed-color)}.ngs-stepper-label{color:var(--ngs-stepper-label-color);font-size:14px;transition:color .2s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-stepper-line{flex:1;height:1px;background:var(--ngs-stepper-line-color);margin:0 16px;min-width:24px}.ngs-stepper-content-container{padding:var(--ngs-stepper-content-padding)}.ngs-stepper-content{outline:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Stepper, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-stepper', exportAs: 'ngsStepper', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, providers: [{ provide: CdkStepper, useExisting: Stepper }], template: "<div class=\"ngs-stepper\"\n     [class.ngs-stepper-vertical]=\"orientation === 'vertical'\"\n     [class.ngs-stepper-horizontal]=\"orientation === 'horizontal'\"\n     [class.ngs-stepper-header-bottom]=\"headerPosition() === 'bottom'\">\n  @if (orientation === 'horizontal') {\n    <div class=\"ngs-stepper-header-container\" [class.ngs-stepper-label-bottom-container]=\"labelPosition() === 'bottom'\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-header\"\n             [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n             [class.ngs-stepper-header-completed]=\"step.completed\"\n             [class.ngs-stepper-label-bottom]=\"labelPosition() === 'bottom'\"\n             (click)=\"step.select()\"\n             role=\"tab\"\n             [attr.aria-selected]=\"selectedIndex === i\"\n             [attr.aria-controls]=\"_getStepContentId(i)\">\n          <div class=\"ngs-stepper-icon\">\n            @if (step.completed) {\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n                <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n              </svg>\n            } @else {\n              {{ i + 1 }}\n            }\n          </div>\n          <div class=\"ngs-stepper-label\">\n            @if (step.stepLabel) {\n              <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n            } @else {\n              {{ step.label }}\n            }\n          </div>\n        </div>\n        @if (i < stepItems().length - 1 && labelPosition() !== 'bottom') {\n          <div class=\"ngs-stepper-line\"></div>\n        }\n      }\n    </div>\n\n    <div class=\"ngs-stepper-content-container\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      }\n    </div>\n  } @else {\n    @for (step of stepItems(); track step; let i = $index) {\n      <div class=\"ngs-stepper-header\"\n           [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n           [class.ngs-stepper-header-completed]=\"step.completed\"\n           (click)=\"step.select()\"\n           role=\"tab\"\n           [attr.aria-selected]=\"selectedIndex === i\"\n           [attr.aria-controls]=\"_getStepContentId(i)\">\n        <div class=\"ngs-stepper-icon\">\n          @if (step.completed) {\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n              <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"ngs-stepper-label\">\n          @if (step.stepLabel) {\n            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n          } @else {\n            {{ step.label }}\n          }\n        </div>\n      </div>\n      <div class=\"ngs-stepper-content-wrapper\" [class.ngs-stepper-last-step]=\"i === stepItems().length - 1\">\n        <div class=\"ngs-stepper-vertical-line\"></div>\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":root{--ngs-stepper-header-padding: 16px;--ngs-stepper-header-gap: 8px;--ngs-stepper-icon-size: 24px;--ngs-stepper-icon-bg: var(--ngs-color-surface-container-high);--ngs-stepper-icon-color: var(--ngs-color-on-surface);--ngs-stepper-icon-active-bg: var(--ngs-color-primary);--ngs-stepper-icon-completed-bg: var(--ngs-color-success);--ngs-stepper-label-color: var(--ngs-color-on-surface-variant);--ngs-stepper-label-active-color: var(--ngs-color-on-surface);--ngs-stepper-line-color: var(--ngs-color-outline-variant);--ngs-stepper-content-padding: 24px}.ngs-stepper{display:flex;flex-direction:column}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-header{padding:16px 0}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content-wrapper{margin-left:calc(var(--ngs-stepper-icon-size) / 2 - .5px);padding-left:calc(var(--ngs-stepper-icon-size) / 2 + var(--ngs-stepper-header-gap) + .5px);position:relative}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content-wrapper.ngs-stepper-last-step .ngs-stepper-vertical-line{display:none}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-vertical-line{position:absolute;left:0;top:-16px;bottom:-16px;width:1px;background:var(--ngs-stepper-line-color)}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content{padding:8px 0 24px}.ngs-stepper.ngs-stepper-header-bottom{flex-direction:column-reverse}.ngs-stepper.ngs-stepper-header-bottom .ngs-stepper-header-container{border-bottom:none;border-top:1px solid var(--ngs-stepper-line-color)}.ngs-stepper-header-container{display:flex;align-items:center;padding:0 var(--ngs-stepper-header-padding);border-bottom:1px solid var(--ngs-stepper-line-color);overflow-x:hidden}.ngs-stepper-header-container.ngs-stepper-label-bottom-container{align-items:flex-start;padding:0}.ngs-stepper-header-container.ngs-stepper-label-bottom-container .ngs-stepper-header{flex:1;padding-left:8px;padding-right:8px}.ngs-stepper-header{display:flex;align-items:center;gap:var(--ngs-stepper-header-gap);padding:16px 0;cursor:pointer;white-space:nowrap;outline:none;position:relative;min-width:0}.ngs-stepper-header:hover .ngs-stepper-icon:not(.ngs-stepper-header-active .ngs-stepper-icon){background:var(--ngs-color-surface-container-highest)}.ngs-stepper-header.ngs-stepper-label-bottom{flex-direction:column;justify-content:center;width:auto;min-width:100px;gap:12px}.ngs-stepper-header.ngs-stepper-label-bottom .ngs-stepper-label{text-align:center;white-space:normal}.ngs-stepper-header.ngs-stepper-label-bottom:before,.ngs-stepper-header.ngs-stepper-label-bottom:after{content:\"\";position:absolute;top:calc(var(--ngs-stepper-icon-size) / 2 + 16px);height:1px;background:var(--ngs-stepper-line-color);width:calc(50% - var(--ngs-stepper-icon-size) / 2 - 8px)}.ngs-stepper-header.ngs-stepper-label-bottom:before{left:0}.ngs-stepper-header.ngs-stepper-label-bottom:after{right:0}.ngs-stepper-header.ngs-stepper-label-bottom:first-child:before,.ngs-stepper-header.ngs-stepper-label-bottom:last-of-type:after{display:none}.ngs-stepper-icon{width:var(--ngs-stepper-icon-size);height:var(--ngs-stepper-icon-size);border-radius:50%;background:var(--ngs-stepper-icon-bg);color:var(--ngs-stepper-icon-color);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0;transition:background-color .2s ease;z-index:1}.ngs-stepper-header-active .ngs-stepper-icon{background:var(--ngs-stepper-icon-active-bg)}.ngs-stepper-header-active .ngs-stepper-label{color:var(--ngs-stepper-label-active-color);font-weight:500}.ngs-stepper-header-completed .ngs-stepper-icon{background:var(--ngs-stepper-icon-completed-bg)}.ngs-stepper-label{color:var(--ngs-stepper-label-color);font-size:14px;transition:color .2s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-stepper-line{flex:1;height:1px;background:var(--ngs-stepper-line-color);margin:0 16px;min-width:24px}.ngs-stepper-content-container{padding:var(--ngs-stepper-content-padding)}.ngs-stepper-content{outline:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ngs-stepper', exportAs: 'ngsStepper', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, providers: [{ provide: CdkStepper, useExisting: Stepper }], template: "<div class=\"ngs-stepper\"\n     [class.ngs-stepper-vertical]=\"orientation === 'vertical'\"\n     [class.ngs-stepper-horizontal]=\"orientation === 'horizontal'\"\n     [class.ngs-stepper-header-bottom]=\"headerPosition() === 'bottom'\">\n  @if (orientation === 'horizontal') {\n    <div class=\"ngs-stepper-header-container\" [class.ngs-stepper-label-bottom-container]=\"labelPosition() === 'bottom'\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-header\"\n             [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n             [class.ngs-stepper-header-completed]=\"step.completed\"\n             [class.ngs-stepper-label-bottom]=\"labelPosition() === 'bottom'\"\n             (click)=\"step.select()\"\n             role=\"tab\"\n             [attr.aria-selected]=\"selectedIndex === i\"\n             [attr.aria-controls]=\"_getStepContentId(i)\">\n          <div class=\"ngs-stepper-icon\">\n            @if (step.completed) {\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n                <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n              </svg>\n            } @else {\n              {{ i + 1 }}\n            }\n          </div>\n          <div class=\"ngs-stepper-label\">\n            @if (step.stepLabel) {\n              <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n            } @else {\n              {{ step.label }}\n            }\n          </div>\n        </div>\n        @if (i < stepItems().length - 1 && labelPosition() !== 'bottom') {\n          <div class=\"ngs-stepper-line\"></div>\n        }\n      }\n    </div>\n\n    <div class=\"ngs-stepper-content-container\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      }\n    </div>\n  } @else {\n    @for (step of stepItems(); track step; let i = $index) {\n      <div class=\"ngs-stepper-header\"\n           [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n           [class.ngs-stepper-header-completed]=\"step.completed\"\n           (click)=\"step.select()\"\n           role=\"tab\"\n           [attr.aria-selected]=\"selectedIndex === i\"\n           [attr.aria-controls]=\"_getStepContentId(i)\">\n        <div class=\"ngs-stepper-icon\">\n          @if (step.completed) {\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n              <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"ngs-stepper-label\">\n          @if (step.stepLabel) {\n            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n          } @else {\n            {{ step.label }}\n          }\n        </div>\n      </div>\n      <div class=\"ngs-stepper-content-wrapper\" [class.ngs-stepper-last-step]=\"i === stepItems().length - 1\">\n        <div class=\"ngs-stepper-vertical-line\"></div>\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [":root{--ngs-stepper-header-padding: 16px;--ngs-stepper-header-gap: 8px;--ngs-stepper-icon-size: 24px;--ngs-stepper-icon-bg: var(--ngs-color-surface-container-high);--ngs-stepper-icon-color: var(--ngs-color-on-surface);--ngs-stepper-icon-active-bg: var(--ngs-color-primary);--ngs-stepper-icon-active-color: var(--ngs-color-on-primary);--ngs-stepper-icon-completed-bg: var(--ngs-color-success);--ngs-stepper-icon-completed-color: var(--ngs-color-on-success);--ngs-stepper-label-color: var(--ngs-color-on-surface-variant);--ngs-stepper-label-active-color: var(--ngs-color-on-surface);--ngs-stepper-line-color: var(--ngs-color-outline-variant);--ngs-stepper-content-padding: 24px}.ngs-stepper{display:flex;flex-direction:column}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-header{padding:16px 0}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content-wrapper{margin-left:calc(var(--ngs-stepper-icon-size) / 2 - .5px);padding-left:calc(var(--ngs-stepper-icon-size) / 2 + var(--ngs-stepper-header-gap) + .5px);position:relative}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content-wrapper.ngs-stepper-last-step .ngs-stepper-vertical-line{display:none}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-vertical-line{position:absolute;left:0;top:-16px;bottom:-16px;width:1px;background:var(--ngs-stepper-line-color)}.ngs-stepper.ngs-stepper-vertical .ngs-stepper-content{padding:8px 0 24px}.ngs-stepper.ngs-stepper-header-bottom{flex-direction:column-reverse}.ngs-stepper.ngs-stepper-header-bottom .ngs-stepper-header-container{border-bottom:none;border-top:1px solid var(--ngs-stepper-line-color)}.ngs-stepper-header-container{display:flex;align-items:center;padding:0 var(--ngs-stepper-header-padding);border-bottom:1px solid var(--ngs-stepper-line-color);overflow-x:hidden}.ngs-stepper-header-container.ngs-stepper-label-bottom-container{align-items:flex-start;padding:0}.ngs-stepper-header-container.ngs-stepper-label-bottom-container .ngs-stepper-header{flex:1;padding-left:8px;padding-right:8px}.ngs-stepper-header{display:flex;align-items:center;gap:var(--ngs-stepper-header-gap);padding:16px 0;cursor:pointer;white-space:nowrap;outline:none;position:relative;min-width:0}.ngs-stepper-header:hover .ngs-stepper-icon:not(.ngs-stepper-header-active .ngs-stepper-icon){background:var(--ngs-color-surface-container-highest)}.ngs-stepper-header.ngs-stepper-label-bottom{flex-direction:column;justify-content:center;width:auto;min-width:100px;gap:12px}.ngs-stepper-header.ngs-stepper-label-bottom .ngs-stepper-label{text-align:center;white-space:normal}.ngs-stepper-header.ngs-stepper-label-bottom:before,.ngs-stepper-header.ngs-stepper-label-bottom:after{content:\"\";position:absolute;top:calc(var(--ngs-stepper-icon-size) / 2 + 16px);height:1px;background:var(--ngs-stepper-line-color);width:calc(50% - var(--ngs-stepper-icon-size) / 2 - 8px)}.ngs-stepper-header.ngs-stepper-label-bottom:before{left:0}.ngs-stepper-header.ngs-stepper-label-bottom:after{right:0}.ngs-stepper-header.ngs-stepper-label-bottom:first-child:before,.ngs-stepper-header.ngs-stepper-label-bottom:last-of-type:after{display:none}.ngs-stepper-icon{width:var(--ngs-stepper-icon-size);height:var(--ngs-stepper-icon-size);border-radius:50%;background:var(--ngs-stepper-icon-bg);color:var(--ngs-stepper-icon-color);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0;transition:background-color .2s ease;z-index:1}.ngs-stepper-header-active .ngs-stepper-icon{background:var(--ngs-stepper-icon-active-bg);color:var(--ngs-stepper-icon-active-color)}.ngs-stepper-header-active .ngs-stepper-label{color:var(--ngs-stepper-label-active-color);font-weight:500}.ngs-stepper-header-completed .ngs-stepper-icon{background:var(--ngs-stepper-icon-completed-bg);color:var(--ngs-stepper-icon-completed-color)}.ngs-stepper-label{color:var(--ngs-stepper-label-color);font-size:14px;transition:color .2s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ngs-stepper-line{flex:1;height:1px;background:var(--ngs-stepper-line-color);margin:0 16px;min-width:24px}.ngs-stepper-content-container{padding:var(--ngs-stepper-content-padding)}.ngs-stepper-content{outline:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], stepItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Step), { ...{ descendants: true }, isSignal: true }] }], _stepLabels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StepLabel), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class StepperNext extends CdkStepperNext {

package/fesm2022/ngstarter-ui-components-stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngstarter-ui-components-stepper.mjs","sources":["../../../projects/components/stepper/src/step-label.ts","../../../projects/components/stepper/src/step/step.ts","../../../projects/components/stepper/src/step/step.html","../../../projects/components/stepper/src/stepper/stepper.ts","../../../projects/components/stepper/src/stepper/stepper.html","../../../projects/components/stepper/src/stepper-next.ts","../../../projects/components/stepper/src/stepper-previous.ts","../../../projects/components/stepper/ngstarter-ui-components-stepper.ts"],"sourcesContent":["import { Directive, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsStepLabel]',\n  standalone: true\n})\nexport class StepLabel {\n  constructor(public template: TemplateRef<any>) { }\n}\n","import { Component, ContentChild, Input, ViewEncapsulation, forwardRef, Inject } from '@angular/core';\nimport { CdkStep, CdkStepper } from '@angular/cdk/stepper';\nimport { StepLabel } from '../step-label';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\n\nimport { Stepper } from '../stepper/stepper';\n\n@Component({\n  selector: 'ngs-step',\n  exportAs: 'ngsStep',\n  standalone: true,\n  imports: [],\n  templateUrl: './step.html',\n  styleUrl: './step.scss',\n  encapsulation: ViewEncapsulation.None,\n  providers: [{ provide: CdkStep, useExisting: Step }],\n})\nexport class Step extends CdkStep {\n  @ContentChild(StepLabel) override stepLabel: StepLabel = undefined!;\n\n  constructor(@Inject(forwardRef(() => Stepper)) stepper: Stepper) {\n    super(stepper);\n  }\n}\n","<ng-template>\n  <ng-content />\n</ng-template>\n","import { Component, input, ViewEncapsulation, contentChildren } from '@angular/core';\nimport { CdkStepper, StepperOrientation } from '@angular/cdk/stepper';\nimport { Step } from '../step/step';\nimport { StepLabel } from '../step-label';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ngs-stepper',\n  exportAs: 'ngsStepper',\n  standalone: true,\n  imports: [CommonModule],\n  templateUrl: './stepper.html',\n  styleUrl: './stepper.scss',\n  encapsulation: ViewEncapsulation.None,\n  providers: [{ provide: CdkStepper, useExisting: Stepper }],\n})\nexport class Stepper extends CdkStepper {\n  headerPosition = input<'top' | 'bottom'>('top');\n  labelPosition = input<'top' | 'bottom'>('top');\n\n  private _stepperOrientation: StepperOrientation = 'horizontal';\n\n  override get orientation(): StepperOrientation {\n    return this._stepperOrientation;\n  }\n  override set orientation(value: StepperOrientation) {\n    this._stepperOrientation = value;\n  }\n\n  // Use a separate signal for template iteration to avoid overriding CdkStepper's QueryList `_steps`.\n  readonly stepItems = contentChildren(Step, { descendants: true });\n  readonly _stepLabels = contentChildren(StepLabel, { descendants: true });\n\n  override ngAfterContentInit() {\n    super.ngAfterContentInit();\n  }\n}\n","<div class=\"ngs-stepper\"\n     [class.ngs-stepper-vertical]=\"orientation === 'vertical'\"\n     [class.ngs-stepper-horizontal]=\"orientation === 'horizontal'\"\n     [class.ngs-stepper-header-bottom]=\"headerPosition() === 'bottom'\">\n  @if (orientation === 'horizontal') {\n    <div class=\"ngs-stepper-header-container\" [class.ngs-stepper-label-bottom-container]=\"labelPosition() === 'bottom'\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-header\"\n             [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n             [class.ngs-stepper-header-completed]=\"step.completed\"\n             [class.ngs-stepper-label-bottom]=\"labelPosition() === 'bottom'\"\n             (click)=\"step.select()\"\n             role=\"tab\"\n             [attr.aria-selected]=\"selectedIndex === i\"\n             [attr.aria-controls]=\"_getStepContentId(i)\">\n          <div class=\"ngs-stepper-icon\">\n            @if (step.completed) {\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n                <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n              </svg>\n            } @else {\n              {{ i + 1 }}\n            }\n          </div>\n          <div class=\"ngs-stepper-label\">\n            @if (step.stepLabel) {\n              <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n            } @else {\n              {{ step.label }}\n            }\n          </div>\n        </div>\n        @if (i < stepItems().length - 1 && labelPosition() !== 'bottom') {\n          <div class=\"ngs-stepper-line\"></div>\n        }\n      }\n    </div>\n\n    <div class=\"ngs-stepper-content-container\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      }\n    </div>\n  } @else {\n    @for (step of stepItems(); track step; let i = $index) {\n      <div class=\"ngs-stepper-header\"\n           [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n           [class.ngs-stepper-header-completed]=\"step.completed\"\n           (click)=\"step.select()\"\n           role=\"tab\"\n           [attr.aria-selected]=\"selectedIndex === i\"\n           [attr.aria-controls]=\"_getStepContentId(i)\">\n        <div class=\"ngs-stepper-icon\">\n          @if (step.completed) {\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n              <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"ngs-stepper-label\">\n          @if (step.stepLabel) {\n            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n          } @else {\n            {{ step.label }}\n          }\n        </div>\n      </div>\n      <div class=\"ngs-stepper-content-wrapper\" [class.ngs-stepper-last-step]=\"i === stepItems().length - 1\">\n        <div class=\"ngs-stepper-vertical-line\"></div>\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      </div>\n    }\n  }\n</div>\n","import { Directive, input } from '@angular/core';\nimport { CdkStepperNext } from '@angular/cdk/stepper';\n\n@Directive({\n  selector: 'button[ngsStepperNext]',\n  host: {\n    '[type]': 'type',\n  },\n  standalone: true\n})\nexport class StepperNext extends CdkStepperNext {\n  override type: string = 'submit';\n}\n","import { Directive, input } from '@angular/core';\nimport { CdkStepperPrevious } from '@angular/cdk/stepper';\n\n@Directive({\n  selector: 'button[ngsStepperPrevious]',\n  host: {\n    '[type]': 'type',\n  },\n  standalone: true\n})\nexport class StepperPrevious extends CdkStepperPrevious {\n  override type: string = 'button';\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngstarter-ui-components-stepper.mjs","sources":["../../../projects/components/stepper/src/step-label.ts","../../../projects/components/stepper/src/step/step.ts","../../../projects/components/stepper/src/step/step.html","../../../projects/components/stepper/src/stepper/stepper.ts","../../../projects/components/stepper/src/stepper/stepper.html","../../../projects/components/stepper/src/stepper-next.ts","../../../projects/components/stepper/src/stepper-previous.ts","../../../projects/components/stepper/ngstarter-ui-components-stepper.ts"],"sourcesContent":["import { Directive, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[ngsStepLabel]',\n  standalone: true\n})\nexport class StepLabel {\n  constructor(public template: TemplateRef<any>) { }\n}\n","import { Component, ContentChild, Input, ViewEncapsulation, forwardRef, Inject } from '@angular/core';\nimport { CdkStep, CdkStepper } from '@angular/cdk/stepper';\nimport { StepLabel } from '../step-label';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\n\nimport { Stepper } from '../stepper/stepper';\n\n@Component({\n  selector: 'ngs-step',\n  exportAs: 'ngsStep',\n  standalone: true,\n  imports: [],\n  templateUrl: './step.html',\n  styleUrl: './step.scss',\n  encapsulation: ViewEncapsulation.None,\n  providers: [{ provide: CdkStep, useExisting: Step }],\n})\nexport class Step extends CdkStep {\n  @ContentChild(StepLabel) override stepLabel: StepLabel = undefined!;\n\n  constructor(@Inject(forwardRef(() => Stepper)) stepper: Stepper) {\n    super(stepper);\n  }\n}\n","<ng-template>\n  <ng-content />\n</ng-template>\n","import { Component, input, ViewEncapsulation, contentChildren } from '@angular/core';\nimport { CdkStepper, StepperOrientation } from '@angular/cdk/stepper';\nimport { Step } from '../step/step';\nimport { StepLabel } from '../step-label';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ngs-stepper',\n  exportAs: 'ngsStepper',\n  standalone: true,\n  imports: [CommonModule],\n  templateUrl: './stepper.html',\n  styleUrl: './stepper.scss',\n  encapsulation: ViewEncapsulation.None,\n  providers: [{ provide: CdkStepper, useExisting: Stepper }],\n})\nexport class Stepper extends CdkStepper {\n  headerPosition = input<'top' | 'bottom'>('top');\n  labelPosition = input<'top' | 'bottom'>('top');\n\n  private _stepperOrientation: StepperOrientation = 'horizontal';\n\n  override get orientation(): StepperOrientation {\n    return this._stepperOrientation;\n  }\n  override set orientation(value: StepperOrientation) {\n    this._stepperOrientation = value;\n  }\n\n  // Use a separate signal for template iteration to avoid overriding CdkStepper's QueryList `_steps`.\n  readonly stepItems = contentChildren(Step, { descendants: true });\n  readonly _stepLabels = contentChildren(StepLabel, { descendants: true });\n\n  override ngAfterContentInit() {\n    super.ngAfterContentInit();\n  }\n}\n","<div class=\"ngs-stepper\"\n     [class.ngs-stepper-vertical]=\"orientation === 'vertical'\"\n     [class.ngs-stepper-horizontal]=\"orientation === 'horizontal'\"\n     [class.ngs-stepper-header-bottom]=\"headerPosition() === 'bottom'\">\n  @if (orientation === 'horizontal') {\n    <div class=\"ngs-stepper-header-container\" [class.ngs-stepper-label-bottom-container]=\"labelPosition() === 'bottom'\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-header\"\n             [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n             [class.ngs-stepper-header-completed]=\"step.completed\"\n             [class.ngs-stepper-label-bottom]=\"labelPosition() === 'bottom'\"\n             (click)=\"step.select()\"\n             role=\"tab\"\n             [attr.aria-selected]=\"selectedIndex === i\"\n             [attr.aria-controls]=\"_getStepContentId(i)\">\n          <div class=\"ngs-stepper-icon\">\n            @if (step.completed) {\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n                <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n              </svg>\n            } @else {\n              {{ i + 1 }}\n            }\n          </div>\n          <div class=\"ngs-stepper-label\">\n            @if (step.stepLabel) {\n              <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n            } @else {\n              {{ step.label }}\n            }\n          </div>\n        </div>\n        @if (i < stepItems().length - 1 && labelPosition() !== 'bottom') {\n          <div class=\"ngs-stepper-line\"></div>\n        }\n      }\n    </div>\n\n    <div class=\"ngs-stepper-content-container\">\n      @for (step of stepItems(); track step; let i = $index) {\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      }\n    </div>\n  } @else {\n    @for (step of stepItems(); track step; let i = $index) {\n      <div class=\"ngs-stepper-header\"\n           [class.ngs-stepper-header-active]=\"selectedIndex === i\"\n           [class.ngs-stepper-header-completed]=\"step.completed\"\n           (click)=\"step.select()\"\n           role=\"tab\"\n           [attr.aria-selected]=\"selectedIndex === i\"\n           [attr.aria-controls]=\"_getStepContentId(i)\">\n        <div class=\"ngs-stepper-icon\">\n          @if (step.completed) {\n            <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n              <path fill=\"currentColor\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"ngs-stepper-label\">\n          @if (step.stepLabel) {\n            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\" />\n          } @else {\n            {{ step.label }}\n          }\n        </div>\n      </div>\n      <div class=\"ngs-stepper-content-wrapper\" [class.ngs-stepper-last-step]=\"i === stepItems().length - 1\">\n        <div class=\"ngs-stepper-vertical-line\"></div>\n        <div class=\"ngs-stepper-content\"\n             [id]=\"_getStepContentId(i)\"\n             role=\"tabpanel\"\n             [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n             [hidden]=\"selectedIndex !== i\">\n          <ng-container [ngTemplateOutlet]=\"step.content\" />\n        </div>\n      </div>\n    }\n  }\n</div>\n","import { Directive, input } from '@angular/core';\nimport { CdkStepperNext } from '@angular/cdk/stepper';\n\n@Directive({\n  selector: 'button[ngsStepperNext]',\n  host: {\n    '[type]': 'type',\n  },\n  standalone: true\n})\nexport class StepperNext extends CdkStepperNext {\n  override type: string = 'submit';\n}\n","import { Directive, input } from '@angular/core';\nimport { CdkStepperPrevious } from '@angular/cdk/stepper';\n\n@Directive({\n  selector: 'button[ngsStepperPrevious]',\n  host: {\n    '[type]': 'type',\n  },\n  standalone: true\n})\nexport class StepperPrevious extends CdkStepperPrevious {\n  override type: string = 'button';\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ngstarter-ui/components",
   "description": "NgStarter - AI-friendly Enterprise Angular UI Components and Admin Panel",
-  "version": "21.0.15",
+  "version": "21.0.16",
   "repository": {
     "type": "git",
     "url": "https://github.com/elementarlabsdev/ngstarter.git"

package/styles/_tokens.scss

@@ -45,7 +45,7 @@
   --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
   --ngs-color-on-info-container: #000000;
   --ngs-color-success: #22c55e;
-  --ngs-color-on-success: #000000;
+  --ngs-color-on-success: #ffffff;
   --ngs-color-success-container: #dcfce7;
   --ngs-color-on-success-container: #000000;
   --ngs-color-warning: #f59e0b;
@@ -471,7 +471,7 @@
   --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
   --ngs-color-on-info-container: #000000;
   --ngs-color-success: #059669;
-  --ngs-color-on-success: #000000;
+  --ngs-color-on-success: #ffffff;
   --ngs-color-success-container: #d1fae5;
   --ngs-color-on-success-container: #000000;
   --ngs-color-warning: #d97706;

package/styles/themes/modern.scss

@@ -39,7 +39,7 @@
   --ngs-color-info-container: color-mix(in srgb, var(--ngs-color-info), #ffffff 86%);
   --ngs-color-on-info-container: #000000;
   --ngs-color-success: #059669;
-  --ngs-color-on-success: #000000;
+  --ngs-color-on-success: #ffffff;
   --ngs-color-success-container: #d1fae5;
   --ngs-color-on-success-container: #000000;
   --ngs-color-warning: #d97706;

package/types/ngstarter-ui-components-headless-stepper.d.ts

@@ -5,7 +5,7 @@ declare class HeadlessStep {
     /** Form control associated with this step */
     stepControl: _angular_core.InputSignal<AbstractControl<any, any, any> | undefined>;
     /** Whether the step is optional */
-    optional: _angular_core.InputSignal<boolean>;
+    optional: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Whether the user has interacted with this step (writable signal) */
     readonly interacted: _angular_core.WritableSignal<boolean>;
     /** Whether this step is currently active (writable signal, controlled by Stepper) */
@@ -59,7 +59,7 @@ declare class HeadlessStepper {
     /** Resets the stepper to the first step. */
     reset(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeadlessStepper, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeadlessStepper, "ngs-headless-stepper", ["ngsHeadlessStepper"], { "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; }, ["steps"], ["ngs-step"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeadlessStepper, "ngs-headless-stepper", ["ngsHeadlessStepper"], { "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; }, ["steps"], ["*"], true, never>;
 }
 
 export { HeadlessStep, HeadlessStepper };