@xui/steps 2.0.0-alpha.19 → 2.0.0-alpha.21

package/fesm2022/xui-steps.mjs

@@ -10,8 +10,10 @@ import { XuiIcon } from '@xui/icon';
  * overrides the status the parent would otherwise derive from `current`.
  */
 class XuiStep {
+    /** The step's name, shown beside its marker. */
     title = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Supporting detail under the title. */
     description = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     /** Force a status instead of deriving it from the active step. */
@@ -51,12 +53,19 @@ const [injectXuiStepsConfig, provideXuiStepsConfig] = createXConfigToken('XuiSte
  */
 class XuiSteps {
     config = injectXuiStepsConfig();
+    /** Extra classes, merged into the component's own rather than replacing them. */
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /**
+     * Zero-based index of the active step. Everything before it reads as done, everything after as pending. Two-way
+     * bindable.
+     */
     current = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** Run the steps across the page or down it. */
     orientation = input(this.config.orientation, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Let a step header jump to that step. Off by default, so the sequence stays under the host's control. */
     clickable = input(this.config.clickable, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     steps = contentChildren(XuiStep, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));

package/fesm2022/xui-steps.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"xui-steps.mjs","sources":["../../../../../../libs/ui/steps/xui/src/lib/step.ts","../../../../../../libs/ui/steps/xui/src/lib/steps.token.ts","../../../../../../libs/ui/steps/xui/src/lib/steps.ts","../../../../../../libs/ui/steps/xui/src/index.ts","../../../../../../libs/ui/steps/xui/src/xui-steps.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';\n\nexport type XuiStepStatus = 'wait' | 'process' | 'finish' | 'error';\n\n/**\n * One step inside {@link XuiSteps}. `title`/`description` describe it; `status`\n * overrides the status the parent would otherwise derive from `current`.\n */\n@Component({\n  selector: 'xui-step',\n  template: '',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None\n})\nexport class XuiStep {\n  readonly title = input<string>('');\n  readonly description = input<string>('');\n  /** Force a status instead of deriving it from the active step. */\n  readonly status = input<XuiStepStatus>();\n}\n","import { createXConfigToken } from '@xui/core';\n\nexport interface XuiStepsConfig {\n  orientation: 'horizontal' | 'vertical';\n  clickable: boolean;\n}\n\nexport const [injectXuiStepsConfig, provideXuiStepsConfig] = createXConfigToken<XuiStepsConfig>('XuiStepsConfig', {\n  orientation: 'horizontal',\n  clickable: false\n});\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  input,\n  model,\n  ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCheckRound, matCloseRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport { XuiStep, type XuiStepStatus } from './step';\nimport { injectXuiStepsConfig } from './steps.token';\n\n/**\n * A step / wizard progress indicator. Wrap `<xui-step>` entries and bind\n * `current` (two-way) to the active index; each step's status is derived\n * (`finish` before, `process` at, `wait` after) unless the step overrides it.\n * With `clickable`, clicking a step moves `current`.\n *\n * ```html\n * <xui-steps [(current)]=\"step\">\n *   <xui-step title=\"Cart\" />\n *   <xui-step title=\"Pay\" description=\"Card or PayPal\" />\n *   <xui-step title=\"Done\" />\n * </xui-steps>\n * ```\n */\n@Component({\n  selector: 'xui-steps',\n  template: `\n    @for (step of steps(); track $index; let i = $index, last = $last) {\n      <div [class]=\"itemClass()\">\n        <button type=\"button\" [class]=\"headerClass()\" [disabled]=\"!clickable()\" (click)=\"select(i)\">\n          <span [class]=\"circleClass(statusAt(i))\">\n            @if (statusAt(i) === 'finish') {\n              <ng-icon xui size=\"sm\" name=\"matCheckRound\" />\n            } @else if (statusAt(i) === 'error') {\n              <ng-icon xui size=\"sm\" name=\"matCloseRound\" />\n            } @else {\n              {{ i + 1 }}\n            }\n          </span>\n          <span class=\"flex flex-col text-start\">\n            <span [class]=\"titleClass(statusAt(i))\">{{ step.title() }}</span>\n            @if (step.description()) {\n              <span class=\"text-foreground-muted text-xs\">{{ step.description() }}</span>\n            }\n          </span>\n        </button>\n        @if (!last) {\n          <span [class]=\"connectorClass(statusAt(i))\"></span>\n        }\n      </div>\n    }\n  `,\n  host: {\n    '[class]': 'computedClass()'\n  },\n  imports: [NgIcon, XuiIcon],\n  viewProviders: [provideIcons({ matCheckRound, matCloseRound })],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None\n})\nexport class XuiSteps {\n  private readonly config = injectXuiStepsConfig();\n\n  readonly class = input<ClassValue>('');\n\n  readonly current = model<number>(0);\n  readonly orientation = input<'horizontal' | 'vertical'>(this.config.orientation);\n  readonly clickable = input<boolean, BooleanInput>(this.config.clickable, { transform: booleanAttribute });\n\n  protected readonly steps = contentChildren(XuiStep);\n\n  protected statusAt(index: number): XuiStepStatus {\n    const override = this.steps()[index]?.status();\n    if (override) {\n      return override;\n    }\n    const current = this.current();\n    return index < current ? 'finish' : index === current ? 'process' : 'wait';\n  }\n\n  protected select(index: number): void {\n    if (this.clickable()) {\n      this.current.set(index);\n    }\n  }\n\n  private get vertical(): boolean {\n    return this.orientation() === 'vertical';\n  }\n\n  protected readonly computedClass = computed(() =>\n    xui('flex', this.orientation() === 'vertical' ? 'flex-col gap-1' : 'flex-row items-start', this.class())\n  );\n  protected readonly itemClass = computed(() =>\n    xui('flex', this.vertical ? 'flex-col' : 'flex-1 items-center gap-3 last:flex-none')\n  );\n  protected readonly headerClass = computed(() =>\n    xui('flex items-center gap-3 rounded', this.clickable() ? 'cursor-pointer' : 'cursor-default')\n  );\n\n  protected circleClass(status: XuiStepStatus): string {\n    return xui(\n      'flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors',\n      status === 'process'\n        ? 'bg-primary text-primary-foreground border-primary'\n        : status === 'finish'\n          ? 'border-primary text-primary'\n          : status === 'error'\n            ? 'border-error text-error'\n            : 'border-border text-foreground-muted'\n    );\n  }\n\n  protected titleClass(status: XuiStepStatus): string {\n    return xui(\n      'text-sm font-medium',\n      status === 'wait' ? 'text-foreground-muted' : status === 'error' ? 'text-error' : 'text-foreground'\n    );\n  }\n\n  protected connectorClass(status: XuiStepStatus): string {\n    const done = status === 'finish';\n    return this.vertical\n      ? xui('ms-4 min-h-4 w-px flex-1 self-stretch', done ? 'bg-primary' : 'bg-border')\n      : xui('h-px flex-1', done ? 'bg-primary' : 'bg-border');\n  }\n}\n","import { XuiStep } from './lib/step';\nimport { XuiSteps } from './lib/steps';\n\nexport * from './lib/step';\nexport * from './lib/steps';\nexport * from './lib/steps.token';\n\nexport const XuiStepsImports = [XuiSteps, XuiStep] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"xui-steps.mjs","sources":["../../../../../../libs/ui/steps/xui/src/lib/step.ts","../../../../../../libs/ui/steps/xui/src/lib/steps.token.ts","../../../../../../libs/ui/steps/xui/src/lib/steps.ts","../../../../../../libs/ui/steps/xui/src/index.ts","../../../../../../libs/ui/steps/xui/src/xui-steps.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';\n\nexport type XuiStepStatus = 'wait' | 'process' | 'finish' | 'error';\n\n/**\n * One step inside {@link XuiSteps}. `title`/`description` describe it; `status`\n * overrides the status the parent would otherwise derive from `current`.\n */\n@Component({\n  selector: 'xui-step',\n  template: '',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None\n})\nexport class XuiStep {\n  /** The step's name, shown beside its marker. */\n  readonly title = input<string>('');\n  /** Supporting detail under the title. */\n  readonly description = input<string>('');\n  /** Force a status instead of deriving it from the active step. */\n  readonly status = input<XuiStepStatus>();\n}\n","import { createXConfigToken } from '@xui/core';\n\nexport interface XuiStepsConfig {\n  orientation: 'horizontal' | 'vertical';\n  clickable: boolean;\n}\n\nexport const [injectXuiStepsConfig, provideXuiStepsConfig] = createXConfigToken<XuiStepsConfig>('XuiStepsConfig', {\n  orientation: 'horizontal',\n  clickable: false\n});\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  input,\n  model,\n  ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCheckRound, matCloseRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport { XuiStep, type XuiStepStatus } from './step';\nimport { injectXuiStepsConfig } from './steps.token';\n\n/**\n * A step / wizard progress indicator. Wrap `<xui-step>` entries and bind\n * `current` (two-way) to the active index; each step's status is derived\n * (`finish` before, `process` at, `wait` after) unless the step overrides it.\n * With `clickable`, clicking a step moves `current`.\n *\n * ```html\n * <xui-steps [(current)]=\"step\">\n *   <xui-step title=\"Cart\" />\n *   <xui-step title=\"Pay\" description=\"Card or PayPal\" />\n *   <xui-step title=\"Done\" />\n * </xui-steps>\n * ```\n */\n@Component({\n  selector: 'xui-steps',\n  template: `\n    @for (step of steps(); track $index; let i = $index, last = $last) {\n      <div [class]=\"itemClass()\">\n        <button type=\"button\" [class]=\"headerClass()\" [disabled]=\"!clickable()\" (click)=\"select(i)\">\n          <span [class]=\"circleClass(statusAt(i))\">\n            @if (statusAt(i) === 'finish') {\n              <ng-icon xui size=\"sm\" name=\"matCheckRound\" />\n            } @else if (statusAt(i) === 'error') {\n              <ng-icon xui size=\"sm\" name=\"matCloseRound\" />\n            } @else {\n              {{ i + 1 }}\n            }\n          </span>\n          <span class=\"flex flex-col text-start\">\n            <span [class]=\"titleClass(statusAt(i))\">{{ step.title() }}</span>\n            @if (step.description()) {\n              <span class=\"text-foreground-muted text-xs\">{{ step.description() }}</span>\n            }\n          </span>\n        </button>\n        @if (!last) {\n          <span [class]=\"connectorClass(statusAt(i))\"></span>\n        }\n      </div>\n    }\n  `,\n  host: {\n    '[class]': 'computedClass()'\n  },\n  imports: [NgIcon, XuiIcon],\n  viewProviders: [provideIcons({ matCheckRound, matCloseRound })],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None\n})\nexport class XuiSteps {\n  private readonly config = injectXuiStepsConfig();\n\n  /** Extra classes, merged into the component's own rather than replacing them. */\n  readonly class = input<ClassValue>('');\n\n  /**\n   * Zero-based index of the active step. Everything before it reads as done, everything after as pending. Two-way\n   * bindable.\n   */\n  readonly current = model<number>(0);\n  /** Run the steps across the page or down it. */\n  readonly orientation = input<'horizontal' | 'vertical'>(this.config.orientation);\n  /** Let a step header jump to that step. Off by default, so the sequence stays under the host's control. */\n  readonly clickable = input<boolean, BooleanInput>(this.config.clickable, { transform: booleanAttribute });\n\n  protected readonly steps = contentChildren(XuiStep);\n\n  protected statusAt(index: number): XuiStepStatus {\n    const override = this.steps()[index]?.status();\n    if (override) {\n      return override;\n    }\n    const current = this.current();\n    return index < current ? 'finish' : index === current ? 'process' : 'wait';\n  }\n\n  protected select(index: number): void {\n    if (this.clickable()) {\n      this.current.set(index);\n    }\n  }\n\n  private get vertical(): boolean {\n    return this.orientation() === 'vertical';\n  }\n\n  protected readonly computedClass = computed(() =>\n    xui('flex', this.orientation() === 'vertical' ? 'flex-col gap-1' : 'flex-row items-start', this.class())\n  );\n  protected readonly itemClass = computed(() =>\n    xui('flex', this.vertical ? 'flex-col' : 'flex-1 items-center gap-3 last:flex-none')\n  );\n  protected readonly headerClass = computed(() =>\n    xui('flex items-center gap-3 rounded', this.clickable() ? 'cursor-pointer' : 'cursor-default')\n  );\n\n  protected circleClass(status: XuiStepStatus): string {\n    return xui(\n      'flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors',\n      status === 'process'\n        ? 'bg-primary text-primary-foreground border-primary'\n        : status === 'finish'\n          ? 'border-primary text-primary'\n          : status === 'error'\n            ? 'border-error text-error'\n            : 'border-border text-foreground-muted'\n    );\n  }\n\n  protected titleClass(status: XuiStepStatus): string {\n    return xui(\n      'text-sm font-medium',\n      status === 'wait' ? 'text-foreground-muted' : status === 'error' ? 'text-error' : 'text-foreground'\n    );\n  }\n\n  protected connectorClass(status: XuiStepStatus): string {\n    const done = status === 'finish';\n    return this.vertical\n      ? xui('ms-4 min-h-4 w-px flex-1 self-stretch', done ? 'bg-primary' : 'bg-border')\n      : xui('h-px flex-1', done ? 'bg-primary' : 'bg-border');\n  }\n}\n","import { XuiStep } from './lib/step';\nimport { XuiSteps } from './lib/steps';\n\nexport * from './lib/step';\nexport * from './lib/steps';\nexport * from './lib/steps.token';\n\nexport const XuiStepsImports = [XuiSteps, XuiStep] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xui/steps",
-  "version": "2.0.0-alpha.19",
+  "version": "2.0.0-alpha.21",
   "description": "Modern Angular 22 UI Library based on TailwindCSS",
   "keywords": [
     "angular",
@@ -40,8 +40,8 @@
     "@angular/core": "22",
     "@ng-icons/core": "34",
     "@ng-icons/material-icons": "34",
-    "@xui/core": "2.0.0-alpha.19",
-    "@xui/icon": "2.0.0-alpha.19",
+    "@xui/core": "2.0.0-alpha.21",
+    "@xui/icon": "2.0.0-alpha.21",
     "clsx": "^2.1.1"
   },
   "publishConfig": {

package/types/xui-steps.d.ts

@@ -8,7 +8,9 @@ type XuiStepStatus = 'wait' | 'process' | 'finish' | 'error';
  * overrides the status the parent would otherwise derive from `current`.
  */
 declare class XuiStep {
+    /** The step's name, shown beside its marker. */
     readonly title: _angular_core.InputSignal<string>;
+    /** Supporting detail under the title. */
     readonly description: _angular_core.InputSignal<string>;
     /** Force a status instead of deriving it from the active step. */
     readonly status: _angular_core.InputSignal<XuiStepStatus | undefined>;
@@ -32,9 +34,16 @@ declare class XuiStep {
  */
 declare class XuiSteps {
     private readonly config;
+    /** Extra classes, merged into the component's own rather than replacing them. */
     readonly class: _angular_core.InputSignal<ClassValue>;
+    /**
+     * Zero-based index of the active step. Everything before it reads as done, everything after as pending. Two-way
+     * bindable.
+     */
     readonly current: _angular_core.ModelSignal<number>;
+    /** Run the steps across the page or down it. */
     readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    /** Let a step header jump to that step. Off by default, so the sequence stays under the host's control. */
     readonly clickable: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     protected readonly steps: _angular_core.Signal<readonly XuiStep[]>;
     protected statusAt(index: number): XuiStepStatus;