@ngstarter-ui/components 21.0.16 → 21.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/ai/component-registry.json +128 -1
  2. package/fesm2022/ngstarter-ui-components-step-tracker.mjs +323 -0
  3. package/fesm2022/ngstarter-ui-components-step-tracker.mjs.map +1 -0
  4. package/package.json +5 -1
  5. package/styles/_tokens.scss +1 -1
  6. package/types/ngstarter-ui-components-step-tracker.d.ts +90 -0
package/ai/component-registry.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "generatedBy": "scripts/generate-ai-metadata.mjs",
4
4
  "package": "@ngstarter-ui/components",
5
5
  "description": "AI-readable registry for NgStarter UI Angular secondary entry points.",
6
- "componentCount": 122,
6
+ "componentCount": 123,
7
7
  "conventions": {
8
8
  "importPattern": "@ngstarter-ui/components/<component>",
9
9
  "selectorPrefix": "ngs",
@@ -8586,6 +8586,133 @@
8586
8586
  ],
8587
8587
  "example": null
8588
8588
  },
8589
+ {
8590
+ "name": "step-tracker",
8591
+ "title": "Step Tracker",
8592
+ "overviewName": "Step Tracker",
8593
+ "category": "components",
8594
+ "package": "@ngstarter-ui/components",
8595
+ "importPath": "@ngstarter-ui/components/step-tracker",
8596
+ "publicApi": "projects/components/step-tracker/public-api.ts",
8597
+ "sourceRoot": "projects/components/step-tracker/src",
8598
+ "docsPath": "/components/step-tracker",
8599
+ "docsOverviewSource": "projects/docs/src/app/components/step-tracker/overview/overview.html",
8600
+ "purpose": "Show the status of related steps without owning wizard navigation, validation, or routed content.",
8601
+ "useWhen": "Use ngs-step-tracker with ngs-step-tracker-item when users need passive visibility into process stages such as completed, current, pending, error, or disabled. Good for payroll review stages, onboarding checklists, fulfillment status, setup status, approval flows, and compact progress summaries in cards, sidebars, drawers, and page headers. Use StepTracker when steps are status display only. Configure global completed/error indicator icon names with provideStepTracker or STEP_TRACKER_CONFIG; use ngsStepTrackerCompletedIcon and ngsStepTrackerErrorIcon templates for per-tracker overrides. Do not use it for wizard navigation, next/previous buttons, linear validation, or projected step content; use Stepper or HeadlessStepper for those workflows. Do not use it for chronological audit/event history; use Timeline. Do not use it for a single percentage; use ProgressBar.",
8602
+ "exampleTopics": [
8603
+ "Basic Step Tracker",
8604
+ "Horizontal Step Tracker",
8605
+ "Step Tracker With Custom Icons",
8606
+ "Step Tracker With Projected Content",
8607
+ "Step Tracker States",
8608
+ "Step tracker icons",
8609
+ "Step tracker projected content"
8610
+ ],
8611
+ "minimalExample": "<ngs-step-tracker class=\"max-w-sm\" [activeIndex]=\"activeIndex()\">\n <ngs-step-tracker-item label=\"Pay period & Employee\"/>\n <ngs-step-tracker-item\n label=\"Total Hours\"\n description=\"Review your employee total working hour\"\n />\n <ngs-step-tracker-item\n state=\"error\"\n label=\"Time off\"\n description=\"Missing time off approval\"\n />\n <ngs-step-tracker-item label=\"Review payroll\"/>\n <ngs-step-tracker-item label=\"Success\"/>\n</ngs-step-tracker>\n<div class=\"mt-6 flex gap-3\">\n <button ngsButton=\"outlined\" type=\"button\" (click)=\"previousStep()\">Previous step</button>\n <button ngsButton=\"filled\" type=\"button\" (click)=\"nextStep()\">Next step</button>\n</div>",
8612
+ "exampleFiles": [
8613
+ {
8614
+ "name": "basic-step-tracker-example",
8615
+ "title": "Basic step tracker",
8616
+ "file": "projects/docs/src/app/components/step-tracker/_examples/basic-step-tracker-example/basic-step-tracker-example.html",
8617
+ "source": "<ngs-step-tracker class=\"max-w-sm\" [activeIndex]=\"activeIndex()\">\n <ngs-step-tracker-item label=\"Pay period & Employee\"/>\n <ngs-step-tracker-item\n label=\"Total Hours\"\n description=\"Review your employee total working hour\"\n />\n <ngs-step-tracker-item\n state=\"error\"\n label=\"Time off\"\n description=\"Missing time off approval\"\n />\n <ngs-step-tracker-item label=\"Review payroll\"/>\n <ngs-step-tracker-item label=\"Success\"/>\n</ngs-step-tracker>\n<div class=\"mt-6 flex gap-3\">\n <button ngsButton=\"outlined\" type=\"button\" (click)=\"previousStep()\">Previous step</button>\n <button ngsButton=\"filled\" type=\"button\" (click)=\"nextStep()\">Next step</button>\n</div>"
8618
+ },
8619
+ {
8620
+ "name": "horizontal-step-tracker-example",
8621
+ "title": "Horizontal step tracker",
8622
+ "file": "projects/docs/src/app/components/step-tracker/_examples/horizontal-step-tracker-example/horizontal-step-tracker-example.html",
8623
+ "source": "<ngs-step-tracker orientation=\"horizontal\">\n <ngs-step-tracker-item state=\"completed\" label=\"Created\" description=\"Request opened\"/>\n <ngs-step-tracker-item state=\"completed\" label=\"Assigned\" description=\"Owner selected\"/>\n <ngs-step-tracker-item state=\"current\" label=\"Review\" description=\"Waiting on finance\"/>\n <ngs-step-tracker-item state=\"pending\" label=\"Approval\" description=\"Not started\"/>\n</ngs-step-tracker>"
8624
+ },
8625
+ {
8626
+ "name": "step-tracker-icons-example",
8627
+ "title": "Step tracker icons",
8628
+ "file": "projects/docs/src/app/components/step-tracker/_examples/step-tracker-icons-example/step-tracker-icons-example.html",
8629
+ "source": "<ngs-step-tracker orientation=\"horizontal\">\n <ng-template ngsStepTrackerCompletedIcon>\n <ngs-icon name=\"fluent:shield-checkmark-24-regular\" class=\"size-5\"/>\n </ng-template>\n <ng-template ngsStepTrackerErrorIcon>\n <ngs-icon name=\"fluent:warning-24-regular\" class=\"size-5\"/>\n </ng-template>\n <ngs-step-tracker-item state=\"completed\" label=\"Created\" description=\"Request opened\"/>\n <ngs-step-tracker-item state=\"completed\" label=\"Assigned\" description=\"Owner selected\"/>\n <ngs-step-tracker-item state=\"error\" label=\"Documents\" description=\"Missing approval\"/>\n <ngs-step-tracker-item state=\"pending\" label=\"Approval\" description=\"Not started\"/>\n</ngs-step-tracker>"
8630
+ }
8631
+ ],
8632
+ "previewAsset": "projects/components/step-tracker/preview.svg",
8633
+ "selectors": [
8634
+ "[ngsStepTrackerCompletedIcon]",
8635
+ "[ngsStepTrackerDescription]",
8636
+ "[ngsStepTrackerErrorIcon]",
8637
+ "[ngsStepTrackerLabel]",
8638
+ "ngs-step-tracker",
8639
+ "ngs-step-tracker-description",
8640
+ "ngs-step-tracker-item",
8641
+ "ngs-step-tracker-label"
8642
+ ],
8643
+ "exportedSymbols": [
8644
+ "provideStepTracker",
8645
+ "STEP_TRACKER_CONFIG",
8646
+ "STEP_TRACKER_DEFAULT_CONFIG",
8647
+ "StepTracker",
8648
+ "StepTrackerCompletedIcon",
8649
+ "StepTrackerConfig",
8650
+ "StepTrackerDescription",
8651
+ "StepTrackerErrorIcon",
8652
+ "StepTrackerItem",
8653
+ "StepTrackerItemState",
8654
+ "StepTrackerLabel",
8655
+ "StepTrackerOrientation",
8656
+ "StepTrackerResolvedItemState"
8657
+ ],
8658
+ "inputs": [
8659
+ "activeIndex",
8660
+ "description",
8661
+ "label",
8662
+ "orientation",
8663
+ "state"
8664
+ ],
8665
+ "outputs": [],
8666
+ "cssTokens": [
8667
+ "--ngs-color-danger",
8668
+ "--ngs-color-neutral-400",
8669
+ "--ngs-color-neutral-500",
8670
+ "--ngs-color-neutral-800",
8671
+ "--ngs-color-on-danger",
8672
+ "--ngs-color-on-success",
8673
+ "--ngs-color-outline",
8674
+ "--ngs-color-primary",
8675
+ "--ngs-color-success",
8676
+ "--ngs-color-surface",
8677
+ "--ngs-color-surface-container-high",
8678
+ "--ngs-font-size-base",
8679
+ "--ngs-font-size-sm",
8680
+ "--ngs-icon-size",
8681
+ "--ngs-step-tracker-completed-bg",
8682
+ "--ngs-step-tracker-completed-color",
8683
+ "--ngs-step-tracker-connector-active-color",
8684
+ "--ngs-step-tracker-connector-color",
8685
+ "--ngs-step-tracker-connector-gap",
8686
+ "--ngs-step-tracker-connector-left",
8687
+ "--ngs-step-tracker-connector-length",
8688
+ "--ngs-step-tracker-connector-right",
8689
+ "--ngs-step-tracker-connector-segment",
8690
+ "--ngs-step-tracker-connector-space",
8691
+ "--ngs-step-tracker-connector-top",
8692
+ "--ngs-step-tracker-connector-width",
8693
+ "--ngs-step-tracker-current-bg",
8694
+ "--ngs-step-tracker-current-border",
8695
+ "--ngs-step-tracker-current-color",
8696
+ "--ngs-step-tracker-description-color",
8697
+ "--ngs-step-tracker-description-font-size",
8698
+ "--ngs-step-tracker-disabled-bg",
8699
+ "--ngs-step-tracker-disabled-color",
8700
+ "--ngs-step-tracker-error-bg",
8701
+ "--ngs-step-tracker-error-color",
8702
+ "--ngs-step-tracker-gap",
8703
+ "--ngs-step-tracker-horizontal-indicator-margin-bottom",
8704
+ "--ngs-step-tracker-indicator-font-size",
8705
+ "--ngs-step-tracker-indicator-font-weight",
8706
+ "--ngs-step-tracker-indicator-size",
8707
+ "--ngs-step-tracker-item-gap",
8708
+ "--ngs-step-tracker-label-color",
8709
+ "--ngs-step-tracker-label-font-size",
8710
+ "--ngs-step-tracker-label-font-weight",
8711
+ "--ngs-step-tracker-pending-bg",
8712
+ "--ngs-step-tracker-pending-color"
8713
+ ],
8714
+ "example": null
8715
+ },
8589
8716
  {
8590
8717
  "name": "stepper",
8591
8718
  "title": "Stepper",
package/fesm2022/ngstarter-ui-components-step-tracker.mjs ADDED
@@ -0,0 +1,323 @@
1
+ import * as i0 from '@angular/core';
2
+ import { InjectionToken, makeEnvironmentProviders, ChangeDetectionStrategy, Component, input, inject, ElementRef, signal, computed, TemplateRef, Directive, model, contentChildren, contentChild, DestroyRef, NgZone, effect, afterNextRender } from '@angular/core';
3
+ import { NgTemplateOutlet } from '@angular/common';
4
+ import { Icon } from '@ngstarter-ui/components/icon';
5
+
6
+ const STEP_TRACKER_DEFAULT_CONFIG = {
7
+ completedIconName: 'fluent:checkmark-16-filled',
8
+ errorIconName: 'fluent:error-circle-16-filled',
9
+ };
10
+ const STEP_TRACKER_CONFIG = new InjectionToken('STEP_TRACKER_CONFIG', {
11
+ factory: () => STEP_TRACKER_DEFAULT_CONFIG,
12
+ });
13
+ function provideStepTracker(config = {}) {
14
+ return makeEnvironmentProviders([
15
+ {
16
+ provide: STEP_TRACKER_CONFIG,
17
+ useValue: {
18
+ ...STEP_TRACKER_DEFAULT_CONFIG,
19
+ ...config,
20
+ },
21
+ },
22
+ ]);
23
+ }
24
+
25
+ class StepTrackerDescription {
26
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTrackerDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
27
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: StepTrackerDescription, isStandalone: true, selector: "ngs-step-tracker-description, [ngsStepTrackerDescription]", host: { classAttribute: "ngs-step-tracker-description" }, exportAs: ["ngsStepTrackerDescription"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;min-width:0;color:var(--ngs-step-tracker-description-color);font-size:var(--ngs-step-tracker-description-font-size);font-weight:400;line-height:1.45}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
28
+ }
29
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTrackerDescription, decorators: [{
30
+ type: Component,
31
+ args: [{ selector: 'ngs-step-tracker-description, [ngsStepTrackerDescription]', exportAs: 'ngsStepTrackerDescription', changeDetection: ChangeDetectionStrategy.OnPush, host: {
32
+ 'class': 'ngs-step-tracker-description',
33
+ }, template: "<ng-content/>\n", styles: [":host{display:block;min-width:0;color:var(--ngs-step-tracker-description-color);font-size:var(--ngs-step-tracker-description-font-size);font-weight:400;line-height:1.45}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
34
+ }] });
35
+
36
+ class StepTrackerLabel {
37
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTrackerLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
38
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: StepTrackerLabel, isStandalone: true, selector: "ngs-step-tracker-label, [ngsStepTrackerLabel]", host: { classAttribute: "ngs-step-tracker-label" }, exportAs: ["ngsStepTrackerLabel"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;min-width:0;color:var(--ngs-step-tracker-label-color);font-size:var(--ngs-step-tracker-label-font-size);font-weight:var(--ngs-step-tracker-label-font-weight);line-height:1.35}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
39
+ }
40
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTrackerLabel, decorators: [{
41
+ type: Component,
42
+ args: [{ selector: 'ngs-step-tracker-label, [ngsStepTrackerLabel]', exportAs: 'ngsStepTrackerLabel', changeDetection: ChangeDetectionStrategy.OnPush, host: {
43
+ 'class': 'ngs-step-tracker-label',
44
+ }, template: "<ng-content/>\n", styles: [":host{display:block;min-width:0;color:var(--ngs-step-tracker-label-color);font-size:var(--ngs-step-tracker-label-font-size);font-weight:var(--ngs-step-tracker-label-font-weight);line-height:1.35}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
45
+ }] });
46
+
47
+ class StepTrackerItem {
48
+ state = input('auto', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
49
+ label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
50
+ description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
51
+ _config = inject(STEP_TRACKER_CONFIG);
52
+ _elementRef = inject(ElementRef);
53
+ _trackerState = signal('pending', ...(ngDevMode ? [{ debugName: "_trackerState" }] : /* istanbul ignore next */ []));
54
+ completedIconTemplate = signal(null, ...(ngDevMode ? [{ debugName: "completedIconTemplate" }] : /* istanbul ignore next */ []));
55
+ errorIconTemplate = signal(null, ...(ngDevMode ? [{ debugName: "errorIconTemplate" }] : /* istanbul ignore next */ []));
56
+ completedIconName = this._config.completedIconName ?? STEP_TRACKER_DEFAULT_CONFIG.completedIconName;
57
+ errorIconName = this._config.errorIconName ?? STEP_TRACKER_DEFAULT_CONFIG.errorIconName;
58
+ resolvedState = computed(() => {
59
+ const state = this.state();
60
+ return state === 'auto' ? this._trackerState() : state;
61
+ }, ...(ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []));
62
+ setTrackerState(state) {
63
+ this._trackerState.set(state);
64
+ }
65
+ setIndicatorIconTemplates(completedIconTemplate, errorIconTemplate) {
66
+ this.completedIconTemplate.set(completedIconTemplate);
67
+ this.errorIconTemplate.set(errorIconTemplate);
68
+ }
69
+ getHostElement() {
70
+ return this._elementRef.nativeElement;
71
+ }
72
+ getIndicatorRect() {
73
+ return this._elementRef.nativeElement.querySelector('.indicator')?.getBoundingClientRect() ?? null;
74
+ }
75
+ setHorizontalConnector(left, width, top) {
76
+ const element = this._elementRef.nativeElement;
77
+ element.style.setProperty('--ngs-step-tracker-connector-left', `${Math.round(left)}px`);
78
+ element.style.setProperty('--ngs-step-tracker-connector-length', `${Math.max(0, Math.round(width))}px`);
79
+ element.style.setProperty('--ngs-step-tracker-connector-right', 'auto');
80
+ element.style.setProperty('--ngs-step-tracker-connector-top', `${Math.round(top)}px`);
81
+ }
82
+ resetHorizontalConnector() {
83
+ const element = this._elementRef.nativeElement;
84
+ element.style.removeProperty('--ngs-step-tracker-connector-left');
85
+ element.style.removeProperty('--ngs-step-tracker-connector-length');
86
+ element.style.removeProperty('--ngs-step-tracker-connector-right');
87
+ element.style.removeProperty('--ngs-step-tracker-connector-top');
88
+ }
89
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTrackerItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
90
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: StepTrackerItem, isStandalone: true, selector: "ngs-step-tracker-item", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.ngs-step-tracker-item-completed": "resolvedState() === \"completed\"", "class.ngs-step-tracker-item-current": "resolvedState() === \"current\"", "class.ngs-step-tracker-item-pending": "resolvedState() === \"pending\"", "class.ngs-step-tracker-item-error": "resolvedState() === \"error\"", "class.ngs-step-tracker-item-disabled": "resolvedState() === \"disabled\"", "attr.aria-current": "resolvedState() === \"current\" ? \"step\" : null", "attr.aria-disabled": "resolvedState() === \"disabled\" ? \"true\" : null" }, classAttribute: "ngs-step-tracker-item" }, exportAs: ["ngsStepTrackerItem"], ngImport: i0, template: "<div class=\"indicator-column\" aria-hidden=\"true\">\n <div class=\"indicator\">\n <span class=\"indicator-number\"></span>\n <span class=\"indicator-check\">\n @if (completedIconTemplate()) {\n <ng-container [ngTemplateOutlet]=\"completedIconTemplate()\"/>\n } @else {\n <ngs-icon [name]=\"completedIconName\"/>\n }\n </span>\n <span class=\"indicator-error\">\n @if (errorIconTemplate()) {\n <ng-container [ngTemplateOutlet]=\"errorIconTemplate()\"/>\n } @else {\n <ngs-icon [name]=\"errorIconName\"/>\n }\n </span>\n </div>\n <div class=\"connector\"></div>\n</div>\n\n<div class=\"content\">\n @if (label()) {\n <ngs-step-tracker-label>{{ label() }}</ngs-step-tracker-label>\n } @else {\n <ng-content select=\"ngs-step-tracker-label, [ngsStepTrackerLabel]\"/>\n }\n\n @if (description()) {\n <ngs-step-tracker-description>{{ description() }}</ngs-step-tracker-description>\n } @else {\n <ng-content select=\"ngs-step-tracker-description, [ngsStepTrackerDescription]\"/>\n }\n\n <ng-content/>\n</div>\n", styles: [":host{display:grid;grid-template-columns:var(--ngs-step-tracker-indicator-size) minmax(0,1fr);column-gap:var(--ngs-step-tracker-item-gap);counter-increment:ngs-step-tracker-item;min-height:calc(var(--ngs-step-tracker-indicator-size) + calc(var(--spacing, .25rem) * 8))}:host .indicator-column{display:flex;flex-direction:column;align-items:center;min-width:0}:host .indicator{width:var(--ngs-step-tracker-indicator-size);height:var(--ngs-step-tracker-indicator-size);border-radius:9999px;display:flex;align-items:center;justify-content:center;flex:none;position:relative;background:var(--ngs-step-tracker-pending-bg);color:var(--ngs-step-tracker-pending-color);font-size:var(--ngs-step-tracker-indicator-font-size);font-weight:var(--ngs-step-tracker-indicator-font-weight);line-height:1}:host .indicator-number:before{content:counter(ngs-step-tracker-item)}:host .indicator-check,:host .indicator-error{display:none;align-items:center;justify-content:center;line-height:1}:host .indicator-check ngs-icon,:host .indicator-error ngs-icon{--ngs-icon-size: calc(var(--ngs-step-tracker-indicator-size) - 6px)}:host .indicator-check ngs-icon{--ngs-icon-size: calc(var(--ngs-step-tracker-indicator-size) - 10px)}:host .connector{width:var(--ngs-step-tracker-connector-width);flex:1;min-height:calc(var(--spacing, .25rem) * 8);margin-top:var(--ngs-step-tracker-connector-gap);margin-bottom:var(--ngs-step-tracker-connector-gap);background-image:linear-gradient(to bottom,var(--ngs-step-tracker-connector-color) var(--ngs-step-tracker-connector-segment),transparent var(--ngs-step-tracker-connector-segment));background-size:var(--ngs-step-tracker-connector-width) calc(var(--ngs-step-tracker-connector-segment) + var(--ngs-step-tracker-connector-space))}:host .content{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);padding:4px 0 calc(var(--spacing, .25rem) * 6)}:host:last-child{min-height:var(--ngs-step-tracker-indicator-size)}:host:last-child .connector{display:none}:host.ngs-step-tracker-item-completed .indicator{background:var(--ngs-step-tracker-completed-bg);color:var(--ngs-step-tracker-completed-color)}:host.ngs-step-tracker-item-completed .indicator-number{display:none}:host.ngs-step-tracker-item-completed .indicator-check{display:inline-flex;font-weight:700}:host.ngs-step-tracker-item-completed .connector{--ngs-step-tracker-connector-color: var(--ngs-step-tracker-connector-active-color)}:host.ngs-step-tracker-item-current .indicator{background:var(--ngs-step-tracker-current-bg);border:2px solid var(--ngs-step-tracker-current-border);color:var(--ngs-step-tracker-current-color);box-shadow:0 0 0 2px var(--ngs-step-tracker-current-border)}@supports (color: color-mix(in lab,red,red)){:host.ngs-step-tracker-item-current .indicator{box-shadow:0 0 0 2px color-mix(in srgb,var(--ngs-step-tracker-current-border),transparent 82%)}}:host.ngs-step-tracker-item-current .connector{--ngs-step-tracker-connector-color: var(--ngs-step-tracker-connector-active-color)}:host.ngs-step-tracker-item-error .indicator{background:var(--ngs-step-tracker-error-bg);color:var(--ngs-step-tracker-error-color)}:host.ngs-step-tracker-item-error .indicator-number{display:none}:host.ngs-step-tracker-item-error .indicator-error{display:inline-flex;font-size:calc(var(--ngs-step-tracker-indicator-size) * .48);font-weight:700}:host.ngs-step-tracker-item-disabled{opacity:.7}:host.ngs-step-tracker-item-disabled .indicator{background:var(--ngs-step-tracker-disabled-bg);color:var(--ngs-step-tracker-disabled-color)}:host-context(.ngs-step-tracker-horizontal){flex:1 1 0;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--ngs-step-tracker-indicator-size) auto;justify-items:stretch;min-width:calc(var(--spacing, .25rem) * 32);min-height:0;position:relative;text-align:center}:host-context(.ngs-step-tracker-horizontal) .indicator-column{width:100%;flex-direction:row;justify-self:stretch;justify-content:center;margin-bottom:var(--ngs-step-tracker-horizontal-indicator-margin-bottom);position:static}:host-context(.ngs-step-tracker-horizontal) .content{padding-bottom:0}:host-context(.ngs-step-tracker-horizontal) .connector{position:absolute;top:calc(var(--ngs-step-tracker-connector-top, calc(var(--ngs-step-tracker-indicator-size) / 2)) - var(--ngs-step-tracker-connector-width) / 2);left:var(--ngs-step-tracker-connector-left, calc(50% + var(--ngs-step-tracker-indicator-size) / 2 + var(--ngs-step-tracker-connector-gap)));right:var(--ngs-step-tracker-connector-right, calc(-50% - var(--ngs-step-tracker-gap) + var(--ngs-step-tracker-indicator-size) / 2 + var(--ngs-step-tracker-connector-gap)));width:var(--ngs-step-tracker-connector-length, auto);height:var(--ngs-step-tracker-connector-width);min-height:0;flex:none;margin:0;background-image:linear-gradient(to right,var(--ngs-step-tracker-connector-color) var(--ngs-step-tracker-connector-segment),transparent var(--ngs-step-tracker-connector-segment));background-size:calc(var(--ngs-step-tracker-connector-segment) + var(--ngs-step-tracker-connector-space)) var(--ngs-step-tracker-connector-width)}:host-context(.ngs-step-tracker-horizontal):last-child .connector{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StepTrackerDescription, selector: "ngs-step-tracker-description, [ngsStepTrackerDescription]", exportAs: ["ngsStepTrackerDescription"] }, { kind: "component", type: StepTrackerLabel, selector: "ngs-step-tracker-label, [ngsStepTrackerLabel]", exportAs: ["ngsStepTrackerLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
91
+ }
92
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTrackerItem, decorators: [{
93
+ type: Component,
94
+ args: [{ selector: 'ngs-step-tracker-item', exportAs: 'ngsStepTrackerItem', imports: [Icon, NgTemplateOutlet, StepTrackerDescription, StepTrackerLabel], changeDetection: ChangeDetectionStrategy.OnPush, host: {
95
+ 'class': 'ngs-step-tracker-item',
96
+ 'role': 'listitem',
97
+ '[class.ngs-step-tracker-item-completed]': 'resolvedState() === "completed"',
98
+ '[class.ngs-step-tracker-item-current]': 'resolvedState() === "current"',
99
+ '[class.ngs-step-tracker-item-pending]': 'resolvedState() === "pending"',
100
+ '[class.ngs-step-tracker-item-error]': 'resolvedState() === "error"',
101
+ '[class.ngs-step-tracker-item-disabled]': 'resolvedState() === "disabled"',
102
+ '[attr.aria-current]': 'resolvedState() === "current" ? "step" : null',
103
+ '[attr.aria-disabled]': 'resolvedState() === "disabled" ? "true" : null',
104
+ }, template: "<div class=\"indicator-column\" aria-hidden=\"true\">\n <div class=\"indicator\">\n <span class=\"indicator-number\"></span>\n <span class=\"indicator-check\">\n @if (completedIconTemplate()) {\n <ng-container [ngTemplateOutlet]=\"completedIconTemplate()\"/>\n } @else {\n <ngs-icon [name]=\"completedIconName\"/>\n }\n </span>\n <span class=\"indicator-error\">\n @if (errorIconTemplate()) {\n <ng-container [ngTemplateOutlet]=\"errorIconTemplate()\"/>\n } @else {\n <ngs-icon [name]=\"errorIconName\"/>\n }\n </span>\n </div>\n <div class=\"connector\"></div>\n</div>\n\n<div class=\"content\">\n @if (label()) {\n <ngs-step-tracker-label>{{ label() }}</ngs-step-tracker-label>\n } @else {\n <ng-content select=\"ngs-step-tracker-label, [ngsStepTrackerLabel]\"/>\n }\n\n @if (description()) {\n <ngs-step-tracker-description>{{ description() }}</ngs-step-tracker-description>\n } @else {\n <ng-content select=\"ngs-step-tracker-description, [ngsStepTrackerDescription]\"/>\n }\n\n <ng-content/>\n</div>\n", styles: [":host{display:grid;grid-template-columns:var(--ngs-step-tracker-indicator-size) minmax(0,1fr);column-gap:var(--ngs-step-tracker-item-gap);counter-increment:ngs-step-tracker-item;min-height:calc(var(--ngs-step-tracker-indicator-size) + calc(var(--spacing, .25rem) * 8))}:host .indicator-column{display:flex;flex-direction:column;align-items:center;min-width:0}:host .indicator{width:var(--ngs-step-tracker-indicator-size);height:var(--ngs-step-tracker-indicator-size);border-radius:9999px;display:flex;align-items:center;justify-content:center;flex:none;position:relative;background:var(--ngs-step-tracker-pending-bg);color:var(--ngs-step-tracker-pending-color);font-size:var(--ngs-step-tracker-indicator-font-size);font-weight:var(--ngs-step-tracker-indicator-font-weight);line-height:1}:host .indicator-number:before{content:counter(ngs-step-tracker-item)}:host .indicator-check,:host .indicator-error{display:none;align-items:center;justify-content:center;line-height:1}:host .indicator-check ngs-icon,:host .indicator-error ngs-icon{--ngs-icon-size: calc(var(--ngs-step-tracker-indicator-size) - 6px)}:host .indicator-check ngs-icon{--ngs-icon-size: calc(var(--ngs-step-tracker-indicator-size) - 10px)}:host .connector{width:var(--ngs-step-tracker-connector-width);flex:1;min-height:calc(var(--spacing, .25rem) * 8);margin-top:var(--ngs-step-tracker-connector-gap);margin-bottom:var(--ngs-step-tracker-connector-gap);background-image:linear-gradient(to bottom,var(--ngs-step-tracker-connector-color) var(--ngs-step-tracker-connector-segment),transparent var(--ngs-step-tracker-connector-segment));background-size:var(--ngs-step-tracker-connector-width) calc(var(--ngs-step-tracker-connector-segment) + var(--ngs-step-tracker-connector-space))}:host .content{display:flex;min-width:0;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);padding:4px 0 calc(var(--spacing, .25rem) * 6)}:host:last-child{min-height:var(--ngs-step-tracker-indicator-size)}:host:last-child .connector{display:none}:host.ngs-step-tracker-item-completed .indicator{background:var(--ngs-step-tracker-completed-bg);color:var(--ngs-step-tracker-completed-color)}:host.ngs-step-tracker-item-completed .indicator-number{display:none}:host.ngs-step-tracker-item-completed .indicator-check{display:inline-flex;font-weight:700}:host.ngs-step-tracker-item-completed .connector{--ngs-step-tracker-connector-color: var(--ngs-step-tracker-connector-active-color)}:host.ngs-step-tracker-item-current .indicator{background:var(--ngs-step-tracker-current-bg);border:2px solid var(--ngs-step-tracker-current-border);color:var(--ngs-step-tracker-current-color);box-shadow:0 0 0 2px var(--ngs-step-tracker-current-border)}@supports (color: color-mix(in lab,red,red)){:host.ngs-step-tracker-item-current .indicator{box-shadow:0 0 0 2px color-mix(in srgb,var(--ngs-step-tracker-current-border),transparent 82%)}}:host.ngs-step-tracker-item-current .connector{--ngs-step-tracker-connector-color: var(--ngs-step-tracker-connector-active-color)}:host.ngs-step-tracker-item-error .indicator{background:var(--ngs-step-tracker-error-bg);color:var(--ngs-step-tracker-error-color)}:host.ngs-step-tracker-item-error .indicator-number{display:none}:host.ngs-step-tracker-item-error .indicator-error{display:inline-flex;font-size:calc(var(--ngs-step-tracker-indicator-size) * .48);font-weight:700}:host.ngs-step-tracker-item-disabled{opacity:.7}:host.ngs-step-tracker-item-disabled .indicator{background:var(--ngs-step-tracker-disabled-bg);color:var(--ngs-step-tracker-disabled-color)}:host-context(.ngs-step-tracker-horizontal){flex:1 1 0;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--ngs-step-tracker-indicator-size) auto;justify-items:stretch;min-width:calc(var(--spacing, .25rem) * 32);min-height:0;position:relative;text-align:center}:host-context(.ngs-step-tracker-horizontal) .indicator-column{width:100%;flex-direction:row;justify-self:stretch;justify-content:center;margin-bottom:var(--ngs-step-tracker-horizontal-indicator-margin-bottom);position:static}:host-context(.ngs-step-tracker-horizontal) .content{padding-bottom:0}:host-context(.ngs-step-tracker-horizontal) .connector{position:absolute;top:calc(var(--ngs-step-tracker-connector-top, calc(var(--ngs-step-tracker-indicator-size) / 2)) - var(--ngs-step-tracker-connector-width) / 2);left:var(--ngs-step-tracker-connector-left, calc(50% + var(--ngs-step-tracker-indicator-size) / 2 + var(--ngs-step-tracker-connector-gap)));right:var(--ngs-step-tracker-connector-right, calc(-50% - var(--ngs-step-tracker-gap) + var(--ngs-step-tracker-indicator-size) / 2 + var(--ngs-step-tracker-connector-gap)));width:var(--ngs-step-tracker-connector-length, auto);height:var(--ngs-step-tracker-connector-width);min-height:0;flex:none;margin:0;background-image:linear-gradient(to right,var(--ngs-step-tracker-connector-color) var(--ngs-step-tracker-connector-segment),transparent var(--ngs-step-tracker-connector-segment));background-size:calc(var(--ngs-step-tracker-connector-segment) + var(--ngs-step-tracker-connector-space)) var(--ngs-step-tracker-connector-width)}:host-context(.ngs-step-tracker-horizontal):last-child .connector{display:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
105
+ }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
106
+
107
+ class StepTrackerCompletedIcon {
108
+ templateRef = inject(TemplateRef);
109
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTrackerCompletedIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
110
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: StepTrackerCompletedIcon, isStandalone: true, selector: "[ngsStepTrackerCompletedIcon]", exportAs: ["ngsStepTrackerCompletedIcon"], ngImport: i0 });
111
+ }
112
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTrackerCompletedIcon, decorators: [{
113
+ type: Directive,
114
+ args: [{
115
+ selector: '[ngsStepTrackerCompletedIcon]',
116
+ exportAs: 'ngsStepTrackerCompletedIcon',
117
+ }]
118
+ }] });
119
+
120
+ class StepTrackerErrorIcon {
121
+ templateRef = inject(TemplateRef);
122
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTrackerErrorIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
123
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: StepTrackerErrorIcon, isStandalone: true, selector: "[ngsStepTrackerErrorIcon]", exportAs: ["ngsStepTrackerErrorIcon"], ngImport: i0 });
124
+ }
125
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTrackerErrorIcon, decorators: [{
126
+ type: Directive,
127
+ args: [{
128
+ selector: '[ngsStepTrackerErrorIcon]',
129
+ exportAs: 'ngsStepTrackerErrorIcon',
130
+ }]
131
+ }] });
132
+
133
+ class StepTracker {
134
+ orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
135
+ activeIndex = model(null, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
136
+ items = contentChildren(StepTrackerItem, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
137
+ completedIcon = contentChild(StepTrackerCompletedIcon, ...(ngDevMode ? [{ debugName: "completedIcon" }] : /* istanbul ignore next */ []));
138
+ errorIcon = contentChild(StepTrackerErrorIcon, ...(ngDevMode ? [{ debugName: "errorIcon" }] : /* istanbul ignore next */ []));
139
+ itemsCount = computed(() => this.items().length, ...(ngDevMode ? [{ debugName: "itemsCount" }] : /* istanbul ignore next */ []));
140
+ _destroyRef = inject(DestroyRef);
141
+ _elementRef = inject(ElementRef);
142
+ _ngZone = inject(NgZone);
143
+ _observedItemElements = new Set();
144
+ _resizeObserver = null;
145
+ _syncFrame = 0;
146
+ _hasBrowserRender = false;
147
+ constructor() {
148
+ effect(() => {
149
+ const activeIndex = this.activeIndex();
150
+ this.items().forEach((item, index) => {
151
+ item.setTrackerState(this._stateForIndex(index, activeIndex));
152
+ });
153
+ });
154
+ effect(() => {
155
+ const completedIcon = this.completedIcon()?.templateRef ?? null;
156
+ const errorIcon = this.errorIcon()?.templateRef ?? null;
157
+ this.items().forEach((item) => {
158
+ item.setIndicatorIconTemplates(completedIcon, errorIcon);
159
+ });
160
+ });
161
+ effect(() => {
162
+ const activeIndex = this.activeIndex();
163
+ const itemsCount = this.itemsCount();
164
+ if (activeIndex === null || itemsCount === 0) {
165
+ return;
166
+ }
167
+ const nextIndex = Math.max(0, Math.min(activeIndex, itemsCount));
168
+ if (nextIndex !== activeIndex) {
169
+ this.activeIndex.set(nextIndex);
170
+ }
171
+ });
172
+ effect(() => {
173
+ this.orientation();
174
+ this.items();
175
+ this._observeItems();
176
+ this._scheduleConnectorSync();
177
+ });
178
+ afterNextRender(() => {
179
+ this._hasBrowserRender = true;
180
+ this._ngZone.runOutsideAngular(() => {
181
+ this._resizeObserver = new ResizeObserver(() => {
182
+ this._scheduleConnectorSync();
183
+ });
184
+ this._resizeObserver.observe(this._elementRef.nativeElement);
185
+ this._observeItems();
186
+ this._scheduleConnectorSync();
187
+ });
188
+ });
189
+ this._destroyRef.onDestroy(() => {
190
+ this._resizeObserver?.disconnect();
191
+ if (this._syncFrame) {
192
+ cancelAnimationFrame(this._syncFrame);
193
+ }
194
+ });
195
+ }
196
+ setActiveIndex(index) {
197
+ this.activeIndex.set(index);
198
+ }
199
+ next() {
200
+ const itemsCount = this.itemsCount();
201
+ if (itemsCount === 0) {
202
+ return;
203
+ }
204
+ const activeIndex = this.activeIndex();
205
+ this.activeIndex.set(activeIndex === null ? 0 : Math.min(activeIndex + 1, itemsCount));
206
+ }
207
+ previous() {
208
+ const itemsCount = this.itemsCount();
209
+ if (itemsCount === 0) {
210
+ return;
211
+ }
212
+ const activeIndex = this.activeIndex();
213
+ this.activeIndex.set(activeIndex === null ? 0 : Math.max(activeIndex - 1, 0));
214
+ }
215
+ _stateForIndex(index, activeIndex) {
216
+ if (activeIndex === null) {
217
+ return 'pending';
218
+ }
219
+ if (index < activeIndex) {
220
+ return 'completed';
221
+ }
222
+ if (index === activeIndex) {
223
+ return 'current';
224
+ }
225
+ return 'pending';
226
+ }
227
+ _observeItems() {
228
+ if (!this._resizeObserver) {
229
+ return;
230
+ }
231
+ const nextElements = new Set(this.items().map((item) => item.getHostElement()));
232
+ for (const element of this._observedItemElements) {
233
+ if (!nextElements.has(element)) {
234
+ this._resizeObserver.unobserve(element);
235
+ this._observedItemElements.delete(element);
236
+ }
237
+ }
238
+ for (const element of nextElements) {
239
+ if (!this._observedItemElements.has(element)) {
240
+ this._resizeObserver.observe(element);
241
+ this._observedItemElements.add(element);
242
+ }
243
+ }
244
+ }
245
+ _scheduleConnectorSync() {
246
+ if (!this._hasBrowserRender || typeof requestAnimationFrame === 'undefined') {
247
+ return;
248
+ }
249
+ if (this._syncFrame) {
250
+ cancelAnimationFrame(this._syncFrame);
251
+ }
252
+ this._syncFrame = requestAnimationFrame(() => {
253
+ this._syncFrame = 0;
254
+ this._syncHorizontalConnectors();
255
+ });
256
+ }
257
+ _syncHorizontalConnectors() {
258
+ const items = this.items();
259
+ if (this.orientation() !== 'horizontal') {
260
+ items.forEach((item) => {
261
+ item.resetHorizontalConnector();
262
+ });
263
+ return;
264
+ }
265
+ const connectorGap = this._readConnectorGap();
266
+ items.forEach((item, index) => {
267
+ const nextItem = items[index + 1];
268
+ if (!nextItem) {
269
+ item.resetHorizontalConnector();
270
+ return;
271
+ }
272
+ const hostRect = item.getHostElement().getBoundingClientRect();
273
+ const currentEnd = this._getHorizontalConnectorEnd(item);
274
+ const nextStart = this._getHorizontalConnectorStart(nextItem);
275
+ const left = currentEnd - hostRect.left + connectorGap;
276
+ const width = Math.max(0, nextStart - currentEnd - connectorGap * 2);
277
+ const top = this._getHorizontalConnectorTop(item, hostRect);
278
+ item.setHorizontalConnector(left, width, top);
279
+ });
280
+ }
281
+ _getHorizontalConnectorEnd(item) {
282
+ return item.getIndicatorRect()?.right ?? 0;
283
+ }
284
+ _getHorizontalConnectorStart(item) {
285
+ return item.getIndicatorRect()?.left ?? Number.POSITIVE_INFINITY;
286
+ }
287
+ _getHorizontalConnectorTop(item, hostRect) {
288
+ const indicatorRect = item.getIndicatorRect();
289
+ if (!indicatorRect) {
290
+ return 0;
291
+ }
292
+ return indicatorRect.top - hostRect.top + indicatorRect.height / 2;
293
+ }
294
+ _readConnectorGap() {
295
+ const probe = document.createElement('div');
296
+ probe.style.position = 'absolute';
297
+ probe.style.visibility = 'hidden';
298
+ probe.style.pointerEvents = 'none';
299
+ probe.style.width = 'var(--ngs-step-tracker-connector-gap)';
300
+ this._elementRef.nativeElement.appendChild(probe);
301
+ const width = probe.getBoundingClientRect().width;
302
+ probe.remove();
303
+ return width;
304
+ }
305
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTracker, deps: [], target: i0.ɵɵFactoryTarget.Component });
306
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: StepTracker, isStandalone: true, selector: "ngs-step-tracker", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { attributes: { "role": "list" }, properties: { "class.ngs-step-tracker-vertical": "orientation() === \"vertical\"", "class.ngs-step-tracker-horizontal": "orientation() === \"horizontal\"" }, classAttribute: "ngs-step-tracker" }, queries: [{ propertyName: "items", predicate: StepTrackerItem, isSignal: true }, { propertyName: "completedIcon", first: true, predicate: StepTrackerCompletedIcon, descendants: true, isSignal: true }, { propertyName: "errorIcon", first: true, predicate: StepTrackerErrorIcon, descendants: true, isSignal: true }], exportAs: ["ngsStepTracker"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-step-tracker-gap: calc(var(--spacing, .25rem) * 3.5);--ngs-step-tracker-item-gap: calc(var(--spacing, .25rem) * 3.5);--ngs-step-tracker-horizontal-indicator-margin-bottom: calc(var(--spacing, .25rem) * 6);--ngs-step-tracker-indicator-size: calc(var(--spacing, .25rem) * 7);--ngs-step-tracker-indicator-font-size: var(--ngs-font-size-sm);--ngs-step-tracker-indicator-font-weight: 600;--ngs-step-tracker-label-font-size: var(--ngs-font-size-base);--ngs-step-tracker-label-font-weight: 600;--ngs-step-tracker-label-color: var(--ngs-color-neutral-800);--ngs-step-tracker-description-font-size: var(--ngs-font-size-sm);--ngs-step-tracker-description-color: var(--ngs-color-neutral-500);--ngs-step-tracker-connector-width: 2px;--ngs-step-tracker-connector-gap: calc(var(--spacing, .25rem) * 2);--ngs-step-tracker-connector-segment: 4px;--ngs-step-tracker-connector-space: 6px;--ngs-step-tracker-connector-color: var(--ngs-color-outline);--ngs-step-tracker-connector-active-color: var(--ngs-color-primary);--ngs-step-tracker-completed-bg: var(--ngs-color-success);--ngs-step-tracker-completed-color: var(--ngs-color-on-success);--ngs-step-tracker-current-bg: var(--ngs-color-surface);--ngs-step-tracker-current-color: var(--ngs-color-neutral-800);--ngs-step-tracker-current-border: var(--ngs-color-primary);--ngs-step-tracker-pending-bg: var(--ngs-color-neutral-400);--ngs-step-tracker-pending-color: var(--ngs-color-surface);--ngs-step-tracker-error-bg: var(--ngs-color-danger);--ngs-step-tracker-error-color: var(--ngs-color-on-danger);--ngs-step-tracker-disabled-bg: var(--ngs-color-surface-container-high);--ngs-step-tracker-disabled-color: var(--ngs-color-neutral-500);display:flex;counter-reset:ngs-step-tracker-item}:host(.ngs-step-tracker-vertical){flex-direction:column}:host(.ngs-step-tracker-horizontal){flex-direction:row;align-items:flex-start;gap:var(--ngs-step-tracker-gap);padding-top:calc(var(--ngs-step-tracker-indicator-size) / 2)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
307
+ }
308
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: StepTracker, decorators: [{
309
+ type: Component,
310
+ args: [{ selector: 'ngs-step-tracker', exportAs: 'ngsStepTracker', changeDetection: ChangeDetectionStrategy.OnPush, host: {
311
+ 'class': 'ngs-step-tracker',
312
+ 'role': 'list',
313
+ '[class.ngs-step-tracker-vertical]': 'orientation() === "vertical"',
314
+ '[class.ngs-step-tracker-horizontal]': 'orientation() === "horizontal"',
315
+ }, template: "<ng-content/>\n", styles: [":host{--ngs-step-tracker-gap: calc(var(--spacing, .25rem) * 3.5);--ngs-step-tracker-item-gap: calc(var(--spacing, .25rem) * 3.5);--ngs-step-tracker-horizontal-indicator-margin-bottom: calc(var(--spacing, .25rem) * 6);--ngs-step-tracker-indicator-size: calc(var(--spacing, .25rem) * 7);--ngs-step-tracker-indicator-font-size: var(--ngs-font-size-sm);--ngs-step-tracker-indicator-font-weight: 600;--ngs-step-tracker-label-font-size: var(--ngs-font-size-base);--ngs-step-tracker-label-font-weight: 600;--ngs-step-tracker-label-color: var(--ngs-color-neutral-800);--ngs-step-tracker-description-font-size: var(--ngs-font-size-sm);--ngs-step-tracker-description-color: var(--ngs-color-neutral-500);--ngs-step-tracker-connector-width: 2px;--ngs-step-tracker-connector-gap: calc(var(--spacing, .25rem) * 2);--ngs-step-tracker-connector-segment: 4px;--ngs-step-tracker-connector-space: 6px;--ngs-step-tracker-connector-color: var(--ngs-color-outline);--ngs-step-tracker-connector-active-color: var(--ngs-color-primary);--ngs-step-tracker-completed-bg: var(--ngs-color-success);--ngs-step-tracker-completed-color: var(--ngs-color-on-success);--ngs-step-tracker-current-bg: var(--ngs-color-surface);--ngs-step-tracker-current-color: var(--ngs-color-neutral-800);--ngs-step-tracker-current-border: var(--ngs-color-primary);--ngs-step-tracker-pending-bg: var(--ngs-color-neutral-400);--ngs-step-tracker-pending-color: var(--ngs-color-surface);--ngs-step-tracker-error-bg: var(--ngs-color-danger);--ngs-step-tracker-error-color: var(--ngs-color-on-danger);--ngs-step-tracker-disabled-bg: var(--ngs-color-surface-container-high);--ngs-step-tracker-disabled-color: var(--ngs-color-neutral-500);display:flex;counter-reset:ngs-step-tracker-item}:host(.ngs-step-tracker-vertical){flex-direction:column}:host(.ngs-step-tracker-horizontal){flex-direction:row;align-items:flex-start;gap:var(--ngs-step-tracker-gap);padding-top:calc(var(--ngs-step-tracker-indicator-size) / 2)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
316
+ }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StepTrackerItem), { isSignal: true }] }], completedIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepTrackerCompletedIcon), { isSignal: true }] }], errorIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepTrackerErrorIcon), { isSignal: true }] }] } });
317
+
318
+ /**
319
+ * Generated bundle index. Do not edit.
320
+ */
321
+
322
+ export { STEP_TRACKER_CONFIG, STEP_TRACKER_DEFAULT_CONFIG, StepTracker, StepTrackerCompletedIcon, StepTrackerDescription, StepTrackerErrorIcon, StepTrackerItem, StepTrackerLabel, provideStepTracker };
323
+ //# sourceMappingURL=ngstarter-ui-components-step-tracker.mjs.map
package/fesm2022/ngstarter-ui-components-step-tracker.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ngstarter-ui-components-step-tracker.mjs","sources":["../../../projects/components/step-tracker/src/config.ts","../../../projects/components/step-tracker/src/step-tracker-description/step-tracker-description.ts","../../../projects/components/step-tracker/src/step-tracker-description/step-tracker-description.html","../../../projects/components/step-tracker/src/step-tracker-label/step-tracker-label.ts","../../../projects/components/step-tracker/src/step-tracker-label/step-tracker-label.html","../../../projects/components/step-tracker/src/step-tracker-item/step-tracker-item.ts","../../../projects/components/step-tracker/src/step-tracker-item/step-tracker-item.html","../../../projects/components/step-tracker/src/step-tracker-completed-icon/step-tracker-completed-icon.ts","../../../projects/components/step-tracker/src/step-tracker-error-icon/step-tracker-error-icon.ts","../../../projects/components/step-tracker/src/step-tracker/step-tracker.ts","../../../projects/components/step-tracker/src/step-tracker/step-tracker.html","../../../projects/components/step-tracker/ngstarter-ui-components-step-tracker.ts"],"sourcesContent":["import { EnvironmentProviders, InjectionToken, makeEnvironmentProviders } from '@angular/core';\n\nexport interface StepTrackerConfig {\n completedIconName?: string;\n errorIconName?: string;\n}\n\nexport const STEP_TRACKER_DEFAULT_CONFIG: Required<StepTrackerConfig> = {\n completedIconName: 'fluent:checkmark-16-filled',\n errorIconName: 'fluent:error-circle-16-filled',\n};\n\nexport const STEP_TRACKER_CONFIG = new InjectionToken<StepTrackerConfig>(\n 'STEP_TRACKER_CONFIG',\n {\n factory: () => STEP_TRACKER_DEFAULT_CONFIG,\n },\n);\n\nexport function provideStepTracker(config: StepTrackerConfig = {}): EnvironmentProviders {\n return makeEnvironmentProviders([\n {\n provide: STEP_TRACKER_CONFIG,\n useValue: {\n ...STEP_TRACKER_DEFAULT_CONFIG,\n ...config,\n },\n },\n ]);\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-step-tracker-description, [ngsStepTrackerDescription]',\n exportAs: 'ngsStepTrackerDescription',\n templateUrl: './step-tracker-description.html',\n styleUrl: './step-tracker-description.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'ngs-step-tracker-description',\n },\n})\nexport class StepTrackerDescription {}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'ngs-step-tracker-label, [ngsStepTrackerLabel]',\n exportAs: 'ngsStepTrackerLabel',\n templateUrl: './step-tracker-label.html',\n styleUrl: './step-tracker-label.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'ngs-step-tracker-label',\n },\n})\nexport class StepTrackerLabel {}\n","<ng-content/>\n","import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n TemplateRef,\n computed,\n inject,\n input,\n signal\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { Icon } from '@ngstarter-ui/components/icon';\nimport {\n STEP_TRACKER_CONFIG,\n STEP_TRACKER_DEFAULT_CONFIG\n} from '../config';\nimport { StepTrackerDescription } from '../step-tracker-description/step-tracker-description';\nimport { StepTrackerLabel } from '../step-tracker-label/step-tracker-label';\n\nexport type StepTrackerResolvedItemState =\n | 'completed'\n | 'current'\n | 'pending'\n | 'error'\n | 'disabled';\n\nexport type StepTrackerItemState = StepTrackerResolvedItemState | 'auto';\n\n@Component({\n selector: 'ngs-step-tracker-item',\n exportAs: 'ngsStepTrackerItem',\n imports: [Icon, NgTemplateOutlet, StepTrackerDescription, StepTrackerLabel],\n templateUrl: './step-tracker-item.html',\n styleUrl: './step-tracker-item.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'ngs-step-tracker-item',\n 'role': 'listitem',\n '[class.ngs-step-tracker-item-completed]': 'resolvedState() === \"completed\"',\n '[class.ngs-step-tracker-item-current]': 'resolvedState() === \"current\"',\n '[class.ngs-step-tracker-item-pending]': 'resolvedState() === \"pending\"',\n '[class.ngs-step-tracker-item-error]': 'resolvedState() === \"error\"',\n '[class.ngs-step-tracker-item-disabled]': 'resolvedState() === \"disabled\"',\n '[attr.aria-current]': 'resolvedState() === \"current\" ? \"step\" : null',\n '[attr.aria-disabled]': 'resolvedState() === \"disabled\" ? \"true\" : null',\n },\n})\nexport class StepTrackerItem {\n readonly state = input<StepTrackerItemState>('auto');\n readonly label = input<string>('');\n readonly description = input<string>('');\n\n private readonly _config = inject(STEP_TRACKER_CONFIG);\n private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly _trackerState = signal<StepTrackerResolvedItemState>('pending');\n readonly completedIconTemplate = signal<TemplateRef<unknown> | null>(null);\n readonly errorIconTemplate = signal<TemplateRef<unknown> | null>(null);\n readonly completedIconName = this._config.completedIconName ?? STEP_TRACKER_DEFAULT_CONFIG.completedIconName;\n readonly errorIconName = this._config.errorIconName ?? STEP_TRACKER_DEFAULT_CONFIG.errorIconName;\n\n readonly resolvedState = computed<StepTrackerResolvedItemState>(() => {\n const state = this.state();\n return state === 'auto' ? this._trackerState() : state;\n });\n\n setTrackerState(state: StepTrackerResolvedItemState): void {\n this._trackerState.set(state);\n }\n\n setIndicatorIconTemplates(\n completedIconTemplate: TemplateRef<unknown> | null,\n errorIconTemplate: TemplateRef<unknown> | null,\n ): void {\n this.completedIconTemplate.set(completedIconTemplate);\n this.errorIconTemplate.set(errorIconTemplate);\n }\n\n getHostElement(): HTMLElement {\n return this._elementRef.nativeElement;\n }\n\n getIndicatorRect(): DOMRect | null {\n return this._elementRef.nativeElement.querySelector('.indicator')?.getBoundingClientRect() ?? null;\n }\n\n setHorizontalConnector(left: number, width: number, top: number): void {\n const element = this._elementRef.nativeElement;\n\n element.style.setProperty('--ngs-step-tracker-connector-left', `${Math.round(left)}px`);\n element.style.setProperty('--ngs-step-tracker-connector-length', `${Math.max(0, Math.round(width))}px`);\n element.style.setProperty('--ngs-step-tracker-connector-right', 'auto');\n element.style.setProperty('--ngs-step-tracker-connector-top', `${Math.round(top)}px`);\n }\n\n resetHorizontalConnector(): void {\n const element = this._elementRef.nativeElement;\n\n element.style.removeProperty('--ngs-step-tracker-connector-left');\n element.style.removeProperty('--ngs-step-tracker-connector-length');\n element.style.removeProperty('--ngs-step-tracker-connector-right');\n element.style.removeProperty('--ngs-step-tracker-connector-top');\n }\n}\n","<div class=\"indicator-column\" aria-hidden=\"true\">\n <div class=\"indicator\">\n <span class=\"indicator-number\"></span>\n <span class=\"indicator-check\">\n @if (completedIconTemplate()) {\n <ng-container [ngTemplateOutlet]=\"completedIconTemplate()\"/>\n } @else {\n <ngs-icon [name]=\"completedIconName\"/>\n }\n </span>\n <span class=\"indicator-error\">\n @if (errorIconTemplate()) {\n <ng-container [ngTemplateOutlet]=\"errorIconTemplate()\"/>\n } @else {\n <ngs-icon [name]=\"errorIconName\"/>\n }\n </span>\n </div>\n <div class=\"connector\"></div>\n</div>\n\n<div class=\"content\">\n @if (label()) {\n <ngs-step-tracker-label>{{ label() }}</ngs-step-tracker-label>\n } @else {\n <ng-content select=\"ngs-step-tracker-label, [ngsStepTrackerLabel]\"/>\n }\n\n @if (description()) {\n <ngs-step-tracker-description>{{ description() }}</ngs-step-tracker-description>\n } @else {\n <ng-content select=\"ngs-step-tracker-description, [ngsStepTrackerDescription]\"/>\n }\n\n <ng-content/>\n</div>\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n selector: '[ngsStepTrackerCompletedIcon]',\n exportAs: 'ngsStepTrackerCompletedIcon',\n})\nexport class StepTrackerCompletedIcon {\n readonly templateRef = inject(TemplateRef);\n}\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n selector: '[ngsStepTrackerErrorIcon]',\n exportAs: 'ngsStepTrackerErrorIcon',\n})\nexport class StepTrackerErrorIcon {\n readonly templateRef = inject(TemplateRef);\n}\n","import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n NgZone,\n afterNextRender,\n contentChild,\n computed,\n contentChildren,\n effect,\n inject,\n input,\n model\n} from '@angular/core';\nimport {\n StepTrackerItem,\n StepTrackerResolvedItemState\n} from '../step-tracker-item/step-tracker-item';\nimport { StepTrackerCompletedIcon } from '../step-tracker-completed-icon/step-tracker-completed-icon';\nimport { StepTrackerErrorIcon } from '../step-tracker-error-icon/step-tracker-error-icon';\n\nexport type StepTrackerOrientation = 'vertical' | 'horizontal';\n\n@Component({\n selector: 'ngs-step-tracker',\n exportAs: 'ngsStepTracker',\n templateUrl: './step-tracker.html',\n styleUrl: './step-tracker.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'ngs-step-tracker',\n 'role': 'list',\n '[class.ngs-step-tracker-vertical]': 'orientation() === \"vertical\"',\n '[class.ngs-step-tracker-horizontal]': 'orientation() === \"horizontal\"',\n },\n})\nexport class StepTracker {\n readonly orientation = input<StepTrackerOrientation>('vertical');\n readonly activeIndex = model<number | null>(null);\n\n readonly items = contentChildren(StepTrackerItem);\n readonly completedIcon = contentChild(StepTrackerCompletedIcon);\n readonly errorIcon = contentChild(StepTrackerErrorIcon);\n readonly itemsCount = computed(() => this.items().length);\n\n private readonly _destroyRef = inject(DestroyRef);\n private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly _ngZone = inject(NgZone);\n private readonly _observedItemElements = new Set<HTMLElement>();\n private _resizeObserver: ResizeObserver | null = null;\n private _syncFrame = 0;\n private _hasBrowserRender = false;\n\n constructor() {\n effect(() => {\n const activeIndex = this.activeIndex();\n\n this.items().forEach((item, index) => {\n item.setTrackerState(this._stateForIndex(index, activeIndex));\n });\n });\n\n effect(() => {\n const completedIcon = this.completedIcon()?.templateRef ?? null;\n const errorIcon = this.errorIcon()?.templateRef ?? null;\n\n this.items().forEach((item) => {\n item.setIndicatorIconTemplates(completedIcon, errorIcon);\n });\n });\n\n effect(() => {\n const activeIndex = this.activeIndex();\n const itemsCount = this.itemsCount();\n\n if (activeIndex === null || itemsCount === 0) {\n return;\n }\n\n const nextIndex = Math.max(0, Math.min(activeIndex, itemsCount));\n\n if (nextIndex !== activeIndex) {\n this.activeIndex.set(nextIndex);\n }\n });\n\n effect(() => {\n this.orientation();\n this.items();\n this._observeItems();\n this._scheduleConnectorSync();\n });\n\n afterNextRender(() => {\n this._hasBrowserRender = true;\n\n this._ngZone.runOutsideAngular(() => {\n this._resizeObserver = new ResizeObserver(() => {\n this._scheduleConnectorSync();\n });\n this._resizeObserver.observe(this._elementRef.nativeElement);\n this._observeItems();\n this._scheduleConnectorSync();\n });\n });\n\n this._destroyRef.onDestroy(() => {\n this._resizeObserver?.disconnect();\n\n if (this._syncFrame) {\n cancelAnimationFrame(this._syncFrame);\n }\n });\n }\n\n setActiveIndex(index: number): void {\n this.activeIndex.set(index);\n }\n\n next(): void {\n const itemsCount = this.itemsCount();\n\n if (itemsCount === 0) {\n return;\n }\n\n const activeIndex = this.activeIndex();\n this.activeIndex.set(activeIndex === null ? 0 : Math.min(activeIndex + 1, itemsCount));\n }\n\n previous(): void {\n const itemsCount = this.itemsCount();\n\n if (itemsCount === 0) {\n return;\n }\n\n const activeIndex = this.activeIndex();\n this.activeIndex.set(activeIndex === null ? 0 : Math.max(activeIndex - 1, 0));\n }\n\n private _stateForIndex(index: number, activeIndex: number | null): StepTrackerResolvedItemState {\n if (activeIndex === null) {\n return 'pending';\n }\n\n if (index < activeIndex) {\n return 'completed';\n }\n\n if (index === activeIndex) {\n return 'current';\n }\n\n return 'pending';\n }\n\n private _observeItems(): void {\n if (!this._resizeObserver) {\n return;\n }\n\n const nextElements = new Set(this.items().map((item) => item.getHostElement()));\n\n for (const element of this._observedItemElements) {\n if (!nextElements.has(element)) {\n this._resizeObserver.unobserve(element);\n this._observedItemElements.delete(element);\n }\n }\n\n for (const element of nextElements) {\n if (!this._observedItemElements.has(element)) {\n this._resizeObserver.observe(element);\n this._observedItemElements.add(element);\n }\n }\n }\n\n private _scheduleConnectorSync(): void {\n if (!this._hasBrowserRender || typeof requestAnimationFrame === 'undefined') {\n return;\n }\n\n if (this._syncFrame) {\n cancelAnimationFrame(this._syncFrame);\n }\n\n this._syncFrame = requestAnimationFrame(() => {\n this._syncFrame = 0;\n this._syncHorizontalConnectors();\n });\n }\n\n private _syncHorizontalConnectors(): void {\n const items = this.items();\n\n if (this.orientation() !== 'horizontal') {\n items.forEach((item) => {\n item.resetHorizontalConnector();\n });\n return;\n }\n\n const connectorGap = this._readConnectorGap();\n\n items.forEach((item, index) => {\n const nextItem = items[index + 1];\n\n if (!nextItem) {\n item.resetHorizontalConnector();\n return;\n }\n\n const hostRect = item.getHostElement().getBoundingClientRect();\n const currentEnd = this._getHorizontalConnectorEnd(item);\n const nextStart = this._getHorizontalConnectorStart(nextItem);\n const left = currentEnd - hostRect.left + connectorGap;\n const width = Math.max(0, nextStart - currentEnd - connectorGap * 2);\n const top = this._getHorizontalConnectorTop(item, hostRect);\n\n item.setHorizontalConnector(left, width, top);\n });\n }\n\n private _getHorizontalConnectorEnd(item: StepTrackerItem): number {\n return item.getIndicatorRect()?.right ?? 0;\n }\n\n private _getHorizontalConnectorStart(item: StepTrackerItem): number {\n return item.getIndicatorRect()?.left ?? Number.POSITIVE_INFINITY;\n }\n\n private _getHorizontalConnectorTop(item: StepTrackerItem, hostRect: DOMRect): number {\n const indicatorRect = item.getIndicatorRect();\n\n if (!indicatorRect) {\n return 0;\n }\n\n return indicatorRect.top - hostRect.top + indicatorRect.height / 2;\n }\n\n private _readConnectorGap(): number {\n const probe = document.createElement('div');\n\n probe.style.position = 'absolute';\n probe.style.visibility = 'hidden';\n probe.style.pointerEvents = 'none';\n probe.style.width = 'var(--ngs-step-tracker-connector-gap)';\n this._elementRef.nativeElement.appendChild(probe);\n\n const width = probe.getBoundingClientRect().width;\n probe.remove();\n\n return width;\n }\n}\n","<ng-content/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ngstarter-ui/components",
3
3
  "description": "NgStarter - AI-friendly Enterprise Angular UI Components and Admin Panel",
4
- "version": "21.0.16",
4
+ "version": "21.0.17",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/elementarlabsdev/ngstarter.git"
@@ -482,6 +482,10 @@
482
482
  "types": "./types/ngstarter-ui-components-split.d.ts",
483
483
  "default": "./fesm2022/ngstarter-ui-components-split.mjs"
484
484
  },
485
+ "./step-tracker": {
486
+ "types": "./types/ngstarter-ui-components-step-tracker.d.ts",
487
+ "default": "./fesm2022/ngstarter-ui-components-step-tracker.mjs"
488
+ },
485
489
  "./stepper": {
486
490
  "types": "./types/ngstarter-ui-components-stepper.d.ts",
487
491
  "default": "./fesm2022/ngstarter-ui-components-stepper.mjs"
package/styles/_tokens.scss CHANGED
@@ -37,7 +37,7 @@
37
37
  --ngs-color-tertiary-container: color-mix(in srgb, var(--ngs-color-tertiary), #ffffff 86%);
38
38
  --ngs-color-on-tertiary-container: #000000;
39
39
  --ngs-color-danger: #ef4444;
40
- --ngs-color-on-danger: #000000;
40
+ --ngs-color-on-danger: #fff;
41
41
  --ngs-color-danger-container: #fee2e2;
42
42
  --ngs-color-on-danger-container: #000000;
43
43
  --ngs-color-info: color-mix(in srgb, var(--ngs-color-primary-seed), #2563eb 35%);
package/types/ngstarter-ui-components-step-tracker.d.ts ADDED
@@ -0,0 +1,90 @@
1
+ import * as _angular_core from '@angular/core';
2
+ import { TemplateRef, InjectionToken, EnvironmentProviders } from '@angular/core';
3
+
4
+ type StepTrackerResolvedItemState = 'completed' | 'current' | 'pending' | 'error' | 'disabled';
5
+ type StepTrackerItemState = StepTrackerResolvedItemState | 'auto';
6
+ declare class StepTrackerItem {
7
+ readonly state: _angular_core.InputSignal<StepTrackerItemState>;
8
+ readonly label: _angular_core.InputSignal<string>;
9
+ readonly description: _angular_core.InputSignal<string>;
10
+ private readonly _config;
11
+ private readonly _elementRef;
12
+ private readonly _trackerState;
13
+ readonly completedIconTemplate: _angular_core.WritableSignal<TemplateRef<unknown> | null>;
14
+ readonly errorIconTemplate: _angular_core.WritableSignal<TemplateRef<unknown> | null>;
15
+ readonly completedIconName: string;
16
+ readonly errorIconName: string;
17
+ readonly resolvedState: _angular_core.Signal<StepTrackerResolvedItemState>;
18
+ setTrackerState(state: StepTrackerResolvedItemState): void;
19
+ setIndicatorIconTemplates(completedIconTemplate: TemplateRef<unknown> | null, errorIconTemplate: TemplateRef<unknown> | null): void;
20
+ getHostElement(): HTMLElement;
21
+ getIndicatorRect(): DOMRect | null;
22
+ setHorizontalConnector(left: number, width: number, top: number): void;
23
+ resetHorizontalConnector(): void;
24
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepTrackerItem, never>;
25
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepTrackerItem, "ngs-step-tracker-item", ["ngsStepTrackerItem"], { "state": { "alias": "state"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["ngs-step-tracker-label, [ngsStepTrackerLabel]", "ngs-step-tracker-description, [ngsStepTrackerDescription]", "*"], true, never>;
26
+ }
27
+
28
+ declare class StepTrackerCompletedIcon {
29
+ readonly templateRef: TemplateRef<any>;
30
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepTrackerCompletedIcon, never>;
31
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StepTrackerCompletedIcon, "[ngsStepTrackerCompletedIcon]", ["ngsStepTrackerCompletedIcon"], {}, {}, never, never, true, never>;
32
+ }
33
+
34
+ declare class StepTrackerErrorIcon {
35
+ readonly templateRef: TemplateRef<any>;
36
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepTrackerErrorIcon, never>;
37
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StepTrackerErrorIcon, "[ngsStepTrackerErrorIcon]", ["ngsStepTrackerErrorIcon"], {}, {}, never, never, true, never>;
38
+ }
39
+
40
+ type StepTrackerOrientation = 'vertical' | 'horizontal';
41
+ declare class StepTracker {
42
+ readonly orientation: _angular_core.InputSignal<StepTrackerOrientation>;
43
+ readonly activeIndex: _angular_core.ModelSignal<number | null>;
44
+ readonly items: _angular_core.Signal<readonly StepTrackerItem[]>;
45
+ readonly completedIcon: _angular_core.Signal<StepTrackerCompletedIcon | undefined>;
46
+ readonly errorIcon: _angular_core.Signal<StepTrackerErrorIcon | undefined>;
47
+ readonly itemsCount: _angular_core.Signal<number>;
48
+ private readonly _destroyRef;
49
+ private readonly _elementRef;
50
+ private readonly _ngZone;
51
+ private readonly _observedItemElements;
52
+ private _resizeObserver;
53
+ private _syncFrame;
54
+ private _hasBrowserRender;
55
+ constructor();
56
+ setActiveIndex(index: number): void;
57
+ next(): void;
58
+ previous(): void;
59
+ private _stateForIndex;
60
+ private _observeItems;
61
+ private _scheduleConnectorSync;
62
+ private _syncHorizontalConnectors;
63
+ private _getHorizontalConnectorEnd;
64
+ private _getHorizontalConnectorStart;
65
+ private _getHorizontalConnectorTop;
66
+ private _readConnectorGap;
67
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepTracker, never>;
68
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepTracker, "ngs-step-tracker", ["ngsStepTracker"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; }, { "activeIndex": "activeIndexChange"; }, ["items", "completedIcon", "errorIcon"], ["*"], true, never>;
69
+ }
70
+
71
+ declare class StepTrackerLabel {
72
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepTrackerLabel, never>;
73
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepTrackerLabel, "ngs-step-tracker-label, [ngsStepTrackerLabel]", ["ngsStepTrackerLabel"], {}, {}, never, ["*"], true, never>;
74
+ }
75
+
76
+ declare class StepTrackerDescription {
77
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<StepTrackerDescription, never>;
78
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<StepTrackerDescription, "ngs-step-tracker-description, [ngsStepTrackerDescription]", ["ngsStepTrackerDescription"], {}, {}, never, ["*"], true, never>;
79
+ }
80
+
81
+ interface StepTrackerConfig {
82
+ completedIconName?: string;
83
+ errorIconName?: string;
84
+ }
85
+ declare const STEP_TRACKER_DEFAULT_CONFIG: Required<StepTrackerConfig>;
86
+ declare const STEP_TRACKER_CONFIG: InjectionToken<StepTrackerConfig>;
87
+ declare function provideStepTracker(config?: StepTrackerConfig): EnvironmentProviders;
88
+
89
+ export { STEP_TRACKER_CONFIG, STEP_TRACKER_DEFAULT_CONFIG, StepTracker, StepTrackerCompletedIcon, StepTrackerDescription, StepTrackerErrorIcon, StepTrackerItem, StepTrackerLabel, provideStepTracker };
90
+ export type { StepTrackerConfig, StepTrackerItemState, StepTrackerOrientation, StepTrackerResolvedItemState };