@gravionlabs/helix-core 22.1.2 → 22.1.3

package/fesm2022/gravionlabs-helix-core-steps.mjs

@@ -1,17 +1,16 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, input, numberAttribute, booleanAttribute, output, viewChild, inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import * as i2 from '@angular/router';
-import { Router, ActivatedRoute, RouterModule } from '@angular/router';
-import { find, findSingle } from '@gravionlabs/helix-core/uix/utils';
-import { SharedModule } from '@gravionlabs/helix-core/api';
-import { BaseComponent } from '@gravionlabs/helix-core/basecomponent';
-import * as i3 from '@gravionlabs/helix-core/tooltip';
-import { TooltipModule } from '@gravionlabs/helix-core/tooltip';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const style = /*css*/ `
+import * as i1 from "@angular/common";
+import { CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, NgModule, ViewEncapsulation, booleanAttribute, inject, input, numberAttribute, output, viewChild } from "@angular/core";
+import * as i2 from "@angular/router";
+import { ActivatedRoute, Router, RouterModule } from "@angular/router";
+import { find, findSingle } from "@gravionlabs/helix-core/uix/utils";
+import { SharedModule } from "@gravionlabs/helix-core/api";
+import { BaseComponent } from "@gravionlabs/helix-core/basecomponent";
+import * as i3 from "@gravionlabs/helix-core/tooltip";
+import { TooltipModule } from "@gravionlabs/helix-core/tooltip";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+const style = `
     .h-steps {
         position: relative;
     }
@@ -128,266 +127,452 @@ const style = /*css*/ `
         color: dt('steps.item.label.active.color');
     }
 `;
-
 const classes = {
-    root: ({ instance }) => ['h-steps h-component', { 'h-readonly': instance.readonly }],
-    list: 'h-steps-list',
-    item: ({ instance, item, index }) => [
-        'h-steps-item',
-        {
-            'h-steps-item-active': instance.isActive(item, index),
-            'h-disabled': instance.isItemDisabled(item, index)
-        }
-    ],
-    itemLink: 'h-steps-item-link',
-    itemNumber: 'h-steps-item-number',
-    itemLabel: 'h-steps-item-label'
+	root: ({ instance }) => ["h-steps h-component", { "h-readonly": instance.readonly }],
+	list: "h-steps-list",
+	item: ({ instance, item, index }) => ["h-steps-item", {
+		"h-steps-item-active": instance.isActive(item, index),
+		"h-disabled": instance.isItemDisabled(item, index)
+	}],
+	itemLink: "h-steps-item-link",
+	itemNumber: "h-steps-item-number",
+	itemLabel: "h-steps-item-label"
 };
-class StepsStyle extends BaseStyle {
-    name = 'steps';
-    style = style;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepsStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepsStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.
- *
- * [Live Demo](https://www.primeng.org/steps/)
- *
- * @module stepsstyle
- *
- */
+var StepsStyle = class StepsStyle extends BaseStyle {
+	name = "steps";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepsStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepsStyle
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepsStyle,
+	decorators: [{ type: Injectable }]
+});
 var StepsClasses;
-(function (StepsClasses) {
-    /**
-     * Class name of the root element
-     */
-    StepsClasses["root"] = "h-steps";
-    /**
-     * Class name of the list element
-     */
-    StepsClasses["list"] = "h-steps-list";
-    /**
-     * Class name of the item element
-     */
-    StepsClasses["item"] = "h-steps-item";
-    /**
-     * Class name of the item link element
-     */
-    StepsClasses["itemLink"] = "h-steps-item-link";
-    /**
-     * Class name of the item number element
-     */
-    StepsClasses["itemNumber"] = "h-steps-item-number";
-    /**
-     * Class name of the item label element
-     */
-    StepsClasses["itemLabel"] = "h-steps-item-label";
+(function(StepsClasses) {
+	StepsClasses["root"] = "h-steps";
+	StepsClasses["list"] = "h-steps-list";
+	StepsClasses["item"] = "h-steps-item";
+	StepsClasses["itemLink"] = "h-steps-item-link";
+	StepsClasses["itemNumber"] = "h-steps-item-number";
+	StepsClasses["itemLabel"] = "h-steps-item-label";
 })(StepsClasses || (StepsClasses = {}));
-
-/**
- * Steps components is an indicator for the steps in a wizard workflow.
- * @group Components
- */
-class Steps extends BaseComponent {
-    componentName = 'Steps';
-    /**
-     * Index of the active item.
-     * @group Props
-     */
-    activeIndex = input(0, { ...(ngDevMode ? { debugName: "activeIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * An array of menu items.
-     * @group Props
-     */
-    model = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "model" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the items are clickable or not.
-     * @group Props
-     */
-    readonly = input(true, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
-    /**
-     * Style class of the component.
-     * @group Props
-     */
-    styleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
-     * @group Props
-     */
-    exact = input(true, { ...(ngDevMode ? { debugName: "exact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Callback to invoke when the new step is selected.
-     * @param {number} number - current index.
-     * @group Emits
-     */
-    activeIndexChange = output();
-    listViewChild = viewChild('list', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "listViewChild" }] : /* istanbul ignore next */ []));
-    router = inject(Router);
-    route = inject(ActivatedRoute);
-    _componentStyle = inject(StepsStyle);
-    subscription;
-    onInit() {
-        this.subscription = this.router.events.subscribe(() => this.cd.markForCheck());
-    }
-    onItemClick(event, item, i) {
-        if (this.readonly() || item.disabled) {
-            event.preventDefault();
-            return;
-        }
-        this.activeIndexChange.emit(i);
-        if (!item.url && !item.routerLink) {
-            event.preventDefault();
-        }
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item,
-                index: i
-            });
-        }
-    }
-    onItemKeydown(event, item, i) {
-        const activeIndex = this.activeIndex();
-        switch (event.code) {
-            case 'ArrowRight': {
-                this.navigateToNextItem(event.target);
-                event.preventDefault();
-                break;
-            }
-            case 'ArrowLeft': {
-                this.navigateToPrevItem(event.target);
-                event.preventDefault();
-                break;
-            }
-            case 'Home': {
-                this.navigateToFirstItem(event.target);
-                event.preventDefault();
-                break;
-            }
-            case 'End': {
-                this.navigateToLastItem(event.target);
-                event.preventDefault();
-                break;
-            }
-            case 'Tab':
-                if (i !== (activeIndex ?? -1)) {
-                    const siblings = find(this.listViewChild()?.nativeElement, '[data-pc-section="menuitem"]');
-                    siblings[i].children[0].tabIndex = '-1';
-                    siblings[activeIndex ?? 0].children[0].tabIndex = '0';
-                }
-                break;
-            case 'Enter':
-            case 'Space': {
-                this.onItemClick(event, item, i);
-                event.preventDefault();
-                break;
-            }
-            default:
-                break;
-        }
-    }
-    navigateToNextItem(target) {
-        const nextItem = this.findNextItem(target);
-        nextItem && this.setFocusToMenuitem(target, nextItem);
-    }
-    navigateToPrevItem(target) {
-        const prevItem = this.findPrevItem(target);
-        prevItem && this.setFocusToMenuitem(target, prevItem);
-    }
-    navigateToFirstItem(target) {
-        const firstItem = this.findFirstItem();
-        firstItem && this.setFocusToMenuitem(target, firstItem);
-    }
-    navigateToLastItem(target) {
-        const lastItem = this.findLastItem();
-        lastItem && this.setFocusToMenuitem(target, lastItem);
-    }
-    findNextItem(item) {
-        const nextItem = item.parentElement.nextElementSibling;
-        return nextItem ? nextItem.children[0] : null;
-    }
-    findPrevItem(item) {
-        const prevItem = item.parentElement.previousElementSibling;
-        return prevItem ? prevItem.children[0] : null;
-    }
-    findFirstItem() {
-        const firstSibling = findSingle(this.listViewChild()?.nativeElement, '[data-pc-section="menuitem"]');
-        return firstSibling ? firstSibling.children[0] : null;
-    }
-    findLastItem() {
-        const siblings = find(this.listViewChild()?.nativeElement, '[data-pc-section="menuitem"]');
-        return siblings ? siblings[siblings.length - 1].children[0] : null;
-    }
-    setFocusToMenuitem(target, focusableItem) {
-        target.tabIndex = '-1';
-        focusableItem.tabIndex = '0';
-        focusableItem.focus();
-    }
-    isClickableRouterLink(item) {
-        return item.routerLink && !this.readonly() && !item.disabled;
-    }
-    isItemDisabled(item, index) {
-        return item.disabled || (this.readonly() && !this.isActive(item, index));
-    }
-    isActive(item, index) {
-        if (item.routerLink) {
-            let routerLink = Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink];
-            return this.router.isActive(this.router.createUrlTree(routerLink, { relativeTo: this.route }).toString(), false);
-        }
-        return index === this.activeIndex();
-    }
-    getItemTabIndex(item, index) {
-        if (item.disabled) {
-            return '-1';
-        }
-        if (!item.disabled && this.activeIndex() === index) {
-            return item.tabindex || '0';
-        }
-        return item.tabindex ?? '-1';
-    }
-    onDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Steps, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Steps, isStandalone: true, selector: "h-steps", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, exact: { classPropertyName: "exact", publicName: "exact", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndexChange: "activeIndexChange" }, providers: [StepsStyle], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<nav [class]=\"cn(cx('root'), styleClass())\" [ngStyle]=\"style()\" [attr.data-pc-name]=\"'steps'\">\n  <ul #list [attr.data-pc-section]=\"'menu'\" [class]=\"cx('list')\">\n    @for (item of model(); track item.label; let i = $index) {\n      @if (item.visible !== false) {\n        <li\n          [class]=\"cx('item', { item, index: i })\"\n          #menuitem\n          [ngStyle]=\"item.style\"\n          [attr.aria-current]=\"isActive(item, i) ? 'step' : undefined\"\n          [attr.id]=\"item.id\"\n          hTooltip\n          [tooltipOptions]=\"item.tooltipOptions\"\n          [pTooltipUnstyled]=\"unstyled()\"\n          [attr.data-pc-section]=\"'menuitem'\"\n          >\n          @if (isClickableRouterLink(item)) {\n            <a\n              role=\"link\"\n              [routerLink]=\"item.routerLink\"\n              [queryParams]=\"item.queryParams\"\n              [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n              [class]=\"cx('itemLink')\"\n              (click)=\"onItemClick($event, item, i)\"\n              (keydown)=\"onItemKeydown($event, item, i)\"\n              [target]=\"item.target\"\n              [attr.tabindex]=\"getItemTabIndex(item, i)\"\n              [attr.aria-expanded]=\"i === activeIndex()\"\n              [attr.aria-disabled]=\"item.disabled || (readonly() && i !== activeIndex())\"\n              [fragment]=\"item.fragment\"\n              [queryParamsHandling]=\"item.queryParamsHandling\"\n              [preserveFragment]=\"item.preserveFragment\"\n              [skipLocationChange]=\"item.skipLocationChange\"\n              [replaceUrl]=\"item.replaceUrl\"\n              [state]=\"item.state\"\n              [attr.ariaCurrentWhenActive]=\"exact() ? 'step' : undefined\"\n              >\n              <span [class]=\"cx('itemNumber')\">{{ i + 1 }}</span>\n              @if (item.escape !== false) {\n                <span [class]=\"cx('itemLabel')\">{{ item.label }}</span>\n              } @else {\n                <span [class]=\"cx('itemLabel')\" [innerHTML]=\"item.label\"></span>\n              }\n            </a>\n          } @else {\n            <a\n              role=\"link\"\n              [attr.href]=\"item.url\"\n              [class]=\"cx('itemLink')\"\n              (click)=\"onItemClick($event, item, i)\"\n              (keydown)=\"onItemKeydown($event, item, i)\"\n              [target]=\"item.target\"\n              [attr.tabindex]=\"getItemTabIndex(item, i)\"\n              [attr.aria-expanded]=\"i === activeIndex()\"\n              [attr.aria-disabled]=\"item.disabled || (readonly() && i !== activeIndex())\"\n              [attr.ariaCurrentWhenActive]=\"exact() && (!item.disabled || readonly()) ? 'step' : undefined\"\n              >\n              <span [class]=\"cx('itemNumber')\">{{ i + 1 }}</span>\n              @if (item.escape !== false) {\n                <span [class]=\"cx('itemLabel')\">{{ item.label }}</span>\n              } @else {\n                <span [class]=\"cx('itemLabel')\" [innerHTML]=\"item.label\"></span>\n              }\n            </a>\n          }\n        </li>\n      }\n    }\n  </ul>\n</nav>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[hTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "hTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Steps, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-steps', standalone: true, imports: [CommonModule, RouterModule, TooltipModule, SharedModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [StepsStyle], template: "<nav [class]=\"cn(cx('root'), styleClass())\" [ngStyle]=\"style()\" [attr.data-pc-name]=\"'steps'\">\n  <ul #list [attr.data-pc-section]=\"'menu'\" [class]=\"cx('list')\">\n    @for (item of model(); track item.label; let i = $index) {\n      @if (item.visible !== false) {\n        <li\n          [class]=\"cx('item', { item, index: i })\"\n          #menuitem\n          [ngStyle]=\"item.style\"\n          [attr.aria-current]=\"isActive(item, i) ? 'step' : undefined\"\n          [attr.id]=\"item.id\"\n          hTooltip\n          [tooltipOptions]=\"item.tooltipOptions\"\n          [pTooltipUnstyled]=\"unstyled()\"\n          [attr.data-pc-section]=\"'menuitem'\"\n          >\n          @if (isClickableRouterLink(item)) {\n            <a\n              role=\"link\"\n              [routerLink]=\"item.routerLink\"\n              [queryParams]=\"item.queryParams\"\n              [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n              [class]=\"cx('itemLink')\"\n              (click)=\"onItemClick($event, item, i)\"\n              (keydown)=\"onItemKeydown($event, item, i)\"\n              [target]=\"item.target\"\n              [attr.tabindex]=\"getItemTabIndex(item, i)\"\n              [attr.aria-expanded]=\"i === activeIndex()\"\n              [attr.aria-disabled]=\"item.disabled || (readonly() && i !== activeIndex())\"\n              [fragment]=\"item.fragment\"\n              [queryParamsHandling]=\"item.queryParamsHandling\"\n              [preserveFragment]=\"item.preserveFragment\"\n              [skipLocationChange]=\"item.skipLocationChange\"\n              [replaceUrl]=\"item.replaceUrl\"\n              [state]=\"item.state\"\n              [attr.ariaCurrentWhenActive]=\"exact() ? 'step' : undefined\"\n              >\n              <span [class]=\"cx('itemNumber')\">{{ i + 1 }}</span>\n              @if (item.escape !== false) {\n                <span [class]=\"cx('itemLabel')\">{{ item.label }}</span>\n              } @else {\n                <span [class]=\"cx('itemLabel')\" [innerHTML]=\"item.label\"></span>\n              }\n            </a>\n          } @else {\n            <a\n              role=\"link\"\n              [attr.href]=\"item.url\"\n              [class]=\"cx('itemLink')\"\n              (click)=\"onItemClick($event, item, i)\"\n              (keydown)=\"onItemKeydown($event, item, i)\"\n              [target]=\"item.target\"\n              [attr.tabindex]=\"getItemTabIndex(item, i)\"\n              [attr.aria-expanded]=\"i === activeIndex()\"\n              [attr.aria-disabled]=\"item.disabled || (readonly() && i !== activeIndex())\"\n              [attr.ariaCurrentWhenActive]=\"exact() && (!item.disabled || readonly()) ? 'step' : undefined\"\n              >\n              <span [class]=\"cx('itemNumber')\">{{ i + 1 }}</span>\n              @if (item.escape !== false) {\n                <span [class]=\"cx('itemLabel')\">{{ item.label }}</span>\n              } @else {\n                <span [class]=\"cx('itemLabel')\" [innerHTML]=\"item.label\"></span>\n              }\n            </a>\n          }\n        </li>\n      }\n    }\n  </ul>\n</nav>\n" }]
-        }], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], exact: [{ type: i0.Input, args: [{ isSignal: true, alias: "exact", required: false }] }], activeIndexChange: [{ type: i0.Output, args: ["activeIndexChange"] }], listViewChild: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }] } });
-class StepsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: StepsModule, imports: [Steps, SharedModule], exports: [Steps, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepsModule, imports: [Steps, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StepsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [Steps, SharedModule],
-                    exports: [Steps, SharedModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var Steps = class Steps extends BaseComponent {
+	componentName = "Steps";
+	activeIndex = input(0, {
+		...ngDevMode ? { debugName: "activeIndex" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	model = input(...ngDevMode ? [void 0, { debugName: "model" }] : 	/* istanbul ignore next */ []);
+	readonly = input(true, {
+		...ngDevMode ? { debugName: "readonly" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	style = input(...ngDevMode ? [void 0, { debugName: "style" }] : 	/* istanbul ignore next */ []);
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	exact = input(true, {
+		...ngDevMode ? { debugName: "exact" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	activeIndexChange = output();
+	listViewChild = viewChild("list", ...ngDevMode ? [{ debugName: "listViewChild" }] : 	/* istanbul ignore next */ []);
+	router = inject(Router);
+	route = inject(ActivatedRoute);
+	_componentStyle = inject(StepsStyle);
+	subscription;
+	onInit() {
+		this.subscription = this.router.events.subscribe(() => this.cd.markForCheck());
+	}
+	onItemClick(event, item, i) {
+		if (this.readonly() || item.disabled) {
+			event.preventDefault();
+			return;
+		}
+		this.activeIndexChange.emit(i);
+		if (!item.url && !item.routerLink) event.preventDefault();
+		if (item.command) item.command({
+			originalEvent: event,
+			item,
+			index: i
+		});
+	}
+	onItemKeydown(event, item, i) {
+		const activeIndex = this.activeIndex();
+		switch (event.code) {
+			case "ArrowRight":
+				this.navigateToNextItem(event.target);
+				event.preventDefault();
+				break;
+			case "ArrowLeft":
+				this.navigateToPrevItem(event.target);
+				event.preventDefault();
+				break;
+			case "Home":
+				this.navigateToFirstItem(event.target);
+				event.preventDefault();
+				break;
+			case "End":
+				this.navigateToLastItem(event.target);
+				event.preventDefault();
+				break;
+			case "Tab":
+				if (i !== (activeIndex ?? -1)) {
+					const siblings = find(this.listViewChild()?.nativeElement, "[data-pc-section=\"menuitem\"]");
+					siblings[i].children[0].tabIndex = "-1";
+					siblings[activeIndex ?? 0].children[0].tabIndex = "0";
+				}
+				break;
+			case "Enter":
+			case "Space":
+				this.onItemClick(event, item, i);
+				event.preventDefault();
+				break;
+			default: break;
+		}
+	}
+	navigateToNextItem(target) {
+		const nextItem = this.findNextItem(target);
+		nextItem && this.setFocusToMenuitem(target, nextItem);
+	}
+	navigateToPrevItem(target) {
+		const prevItem = this.findPrevItem(target);
+		prevItem && this.setFocusToMenuitem(target, prevItem);
+	}
+	navigateToFirstItem(target) {
+		const firstItem = this.findFirstItem();
+		firstItem && this.setFocusToMenuitem(target, firstItem);
+	}
+	navigateToLastItem(target) {
+		const lastItem = this.findLastItem();
+		lastItem && this.setFocusToMenuitem(target, lastItem);
+	}
+	findNextItem(item) {
+		const nextItem = item.parentElement.nextElementSibling;
+		return nextItem ? nextItem.children[0] : null;
+	}
+	findPrevItem(item) {
+		const prevItem = item.parentElement.previousElementSibling;
+		return prevItem ? prevItem.children[0] : null;
+	}
+	findFirstItem() {
+		const firstSibling = findSingle(this.listViewChild()?.nativeElement, "[data-pc-section=\"menuitem\"]");
+		return firstSibling ? firstSibling.children[0] : null;
+	}
+	findLastItem() {
+		const siblings = find(this.listViewChild()?.nativeElement, "[data-pc-section=\"menuitem\"]");
+		return siblings ? siblings[siblings.length - 1].children[0] : null;
+	}
+	setFocusToMenuitem(target, focusableItem) {
+		target.tabIndex = "-1";
+		focusableItem.tabIndex = "0";
+		focusableItem.focus();
+	}
+	isClickableRouterLink(item) {
+		return item.routerLink && !this.readonly() && !item.disabled;
+	}
+	isItemDisabled(item, index) {
+		return item.disabled || this.readonly() && !this.isActive(item, index);
+	}
+	isActive(item, index) {
+		if (item.routerLink) {
+			let routerLink = Array.isArray(item.routerLink) ? item.routerLink : [item.routerLink];
+			return this.router.isActive(this.router.createUrlTree(routerLink, { relativeTo: this.route }).toString(), false);
+		}
+		return index === this.activeIndex();
+	}
+	getItemTabIndex(item, index) {
+		if (item.disabled) return "-1";
+		if (!item.disabled && this.activeIndex() === index) return item.tabindex || "0";
+		return item.tabindex ?? "-1";
+	}
+	onDestroy() {
+		if (this.subscription) this.subscription.unsubscribe();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: Steps,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: Steps,
+		isStandalone: true,
+		selector: "h-steps",
+		inputs: {
+			activeIndex: {
+				classPropertyName: "activeIndex",
+				publicName: "activeIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			model: {
+				classPropertyName: "model",
+				publicName: "model",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			style: {
+				classPropertyName: "style",
+				publicName: "style",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			styleClass: {
+				classPropertyName: "styleClass",
+				publicName: "styleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			exact: {
+				classPropertyName: "exact",
+				publicName: "exact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { activeIndexChange: "activeIndexChange" },
+		providers: [StepsStyle],
+		viewQueries: [{
+			propertyName: "listViewChild",
+			first: true,
+			predicate: ["list"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<nav [class]=\"cn(cx('root'), styleClass())\" [ngStyle]=\"style()\" [attr.data-pc-name]=\"'steps'\">\n  <ul #list [attr.data-pc-section]=\"'menu'\" [class]=\"cx('list')\">\n    @for (item of model(); track item.label; let i = $index) {\n      @if (item.visible !== false) {\n        <li\n          [class]=\"cx('item', { item, index: i })\"\n          #menuitem\n          [ngStyle]=\"item.style\"\n          [attr.aria-current]=\"isActive(item, i) ? 'step' : undefined\"\n          [attr.id]=\"item.id\"\n          hTooltip\n          [tooltipOptions]=\"item.tooltipOptions\"\n          [pTooltipUnstyled]=\"unstyled()\"\n          [attr.data-pc-section]=\"'menuitem'\"\n          >\n          @if (isClickableRouterLink(item)) {\n            <a\n              role=\"link\"\n              [routerLink]=\"item.routerLink\"\n              [queryParams]=\"item.queryParams\"\n              [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n              [class]=\"cx('itemLink')\"\n              (click)=\"onItemClick($event, item, i)\"\n              (keydown)=\"onItemKeydown($event, item, i)\"\n              [target]=\"item.target\"\n              [attr.tabindex]=\"getItemTabIndex(item, i)\"\n              [attr.aria-expanded]=\"i === activeIndex()\"\n              [attr.aria-disabled]=\"item.disabled || (readonly() && i !== activeIndex())\"\n              [fragment]=\"item.fragment\"\n              [queryParamsHandling]=\"item.queryParamsHandling\"\n              [preserveFragment]=\"item.preserveFragment\"\n              [skipLocationChange]=\"item.skipLocationChange\"\n              [replaceUrl]=\"item.replaceUrl\"\n              [state]=\"item.state\"\n              [attr.ariaCurrentWhenActive]=\"exact() ? 'step' : undefined\"\n              >\n              <span [class]=\"cx('itemNumber')\">{{ i + 1 }}</span>\n              @if (item.escape !== false) {\n                <span [class]=\"cx('itemLabel')\">{{ item.label }}</span>\n              } @else {\n                <span [class]=\"cx('itemLabel')\" [innerHTML]=\"item.label\"></span>\n              }\n            </a>\n          } @else {\n            <a\n              role=\"link\"\n              [attr.href]=\"item.url\"\n              [class]=\"cx('itemLink')\"\n              (click)=\"onItemClick($event, item, i)\"\n              (keydown)=\"onItemKeydown($event, item, i)\"\n              [target]=\"item.target\"\n              [attr.tabindex]=\"getItemTabIndex(item, i)\"\n              [attr.aria-expanded]=\"i === activeIndex()\"\n              [attr.aria-disabled]=\"item.disabled || (readonly() && i !== activeIndex())\"\n              [attr.ariaCurrentWhenActive]=\"exact() && (!item.disabled || readonly()) ? 'step' : undefined\"\n              >\n              <span [class]=\"cx('itemNumber')\">{{ i + 1 }}</span>\n              @if (item.escape !== false) {\n                <span [class]=\"cx('itemLabel')\">{{ item.label }}</span>\n              } @else {\n                <span [class]=\"cx('itemLabel')\" [innerHTML]=\"item.label\"></span>\n              }\n            </a>\n          }\n        </li>\n      }\n    }\n  </ul>\n</nav>\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgStyle,
+				selector: "[ngStyle]",
+				inputs: ["ngStyle"]
+			},
+			{
+				kind: "ngmodule",
+				type: RouterModule
+			},
+			{
+				kind: "directive",
+				type: i2.RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: TooltipModule
+			},
+			{
+				kind: "directive",
+				type: i3.Tooltip,
+				selector: "[hTooltip]",
+				inputs: [
+					"tooltipPosition",
+					"tooltipEvent",
+					"positionStyle",
+					"tooltipStyleClass",
+					"tooltipZIndex",
+					"escape",
+					"showDelay",
+					"hideDelay",
+					"life",
+					"positionTop",
+					"positionLeft",
+					"autoHide",
+					"fitContent",
+					"hideOnEscape",
+					"showOnEllipsis",
+					"hTooltip",
+					"tooltipDisabled",
+					"tooltipOptions",
+					"appendTo",
+					"ptTooltip",
+					"pTooltipPT",
+					"pTooltipUnstyled"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: Steps,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-steps",
+			standalone: true,
+			imports: [
+				CommonModule,
+				RouterModule,
+				TooltipModule,
+				SharedModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [StepsStyle],
+			template: "<nav [class]=\"cn(cx('root'), styleClass())\" [ngStyle]=\"style()\" [attr.data-pc-name]=\"'steps'\">\n  <ul #list [attr.data-pc-section]=\"'menu'\" [class]=\"cx('list')\">\n    @for (item of model(); track item.label; let i = $index) {\n      @if (item.visible !== false) {\n        <li\n          [class]=\"cx('item', { item, index: i })\"\n          #menuitem\n          [ngStyle]=\"item.style\"\n          [attr.aria-current]=\"isActive(item, i) ? 'step' : undefined\"\n          [attr.id]=\"item.id\"\n          hTooltip\n          [tooltipOptions]=\"item.tooltipOptions\"\n          [pTooltipUnstyled]=\"unstyled()\"\n          [attr.data-pc-section]=\"'menuitem'\"\n          >\n          @if (isClickableRouterLink(item)) {\n            <a\n              role=\"link\"\n              [routerLink]=\"item.routerLink\"\n              [queryParams]=\"item.queryParams\"\n              [routerLinkActiveOptions]=\"item.routerLinkActiveOptions || { exact: false }\"\n              [class]=\"cx('itemLink')\"\n              (click)=\"onItemClick($event, item, i)\"\n              (keydown)=\"onItemKeydown($event, item, i)\"\n              [target]=\"item.target\"\n              [attr.tabindex]=\"getItemTabIndex(item, i)\"\n              [attr.aria-expanded]=\"i === activeIndex()\"\n              [attr.aria-disabled]=\"item.disabled || (readonly() && i !== activeIndex())\"\n              [fragment]=\"item.fragment\"\n              [queryParamsHandling]=\"item.queryParamsHandling\"\n              [preserveFragment]=\"item.preserveFragment\"\n              [skipLocationChange]=\"item.skipLocationChange\"\n              [replaceUrl]=\"item.replaceUrl\"\n              [state]=\"item.state\"\n              [attr.ariaCurrentWhenActive]=\"exact() ? 'step' : undefined\"\n              >\n              <span [class]=\"cx('itemNumber')\">{{ i + 1 }}</span>\n              @if (item.escape !== false) {\n                <span [class]=\"cx('itemLabel')\">{{ item.label }}</span>\n              } @else {\n                <span [class]=\"cx('itemLabel')\" [innerHTML]=\"item.label\"></span>\n              }\n            </a>\n          } @else {\n            <a\n              role=\"link\"\n              [attr.href]=\"item.url\"\n              [class]=\"cx('itemLink')\"\n              (click)=\"onItemClick($event, item, i)\"\n              (keydown)=\"onItemKeydown($event, item, i)\"\n              [target]=\"item.target\"\n              [attr.tabindex]=\"getItemTabIndex(item, i)\"\n              [attr.aria-expanded]=\"i === activeIndex()\"\n              [attr.aria-disabled]=\"item.disabled || (readonly() && i !== activeIndex())\"\n              [attr.ariaCurrentWhenActive]=\"exact() && (!item.disabled || readonly()) ? 'step' : undefined\"\n              >\n              <span [class]=\"cx('itemNumber')\">{{ i + 1 }}</span>\n              @if (item.escape !== false) {\n                <span [class]=\"cx('itemLabel')\">{{ item.label }}</span>\n              } @else {\n                <span [class]=\"cx('itemLabel')\" [innerHTML]=\"item.label\"></span>\n              }\n            </a>\n          }\n        </li>\n      }\n    }\n  </ul>\n</nav>\n"
+		}]
+	}],
+	propDecorators: {
+		activeIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIndex",
+				required: false
+			}]
+		}],
+		model: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "model",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		style: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "style",
+				required: false
+			}]
+		}],
+		styleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleClass",
+				required: false
+			}]
+		}],
+		exact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "exact",
+				required: false
+			}]
+		}],
+		activeIndexChange: [{
+			type: i0.Output,
+			args: ["activeIndexChange"]
+		}],
+		listViewChild: [{
+			type: i0.ViewChild,
+			args: ["list", { isSignal: true }]
+		}]
+	}
+});
+var StepsModule = class StepsModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepsModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepsModule,
+		imports: [Steps, SharedModule],
+		exports: [Steps, SharedModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: StepsModule,
+		imports: [
+			Steps,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: StepsModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [Steps, SharedModule],
+			exports: [Steps, SharedModule]
+		}]
+	}]
+});
 export { Steps, StepsClasses, StepsModule, StepsStyle };
-//# sourceMappingURL=gravionlabs-helix-core-steps.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-steps.mjs.map