primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
600 lines (581 loc) • 27.3 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, inject, numberAttribute, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, NgModule } from '@angular/core';
import * as i2 from '@angular/router';
import { Router, ActivatedRoute, RouterModule } from '@angular/router';
import { find, findSingle } from '@primeuix/utils';
import { SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i3 from 'primeng/tooltip';
import { TooltipModule } from 'primeng/tooltip';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-steps {
position: relative;
}
.p-steps-list {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
}
.p-steps-item {
position: relative;
display: flex;
justify-content: center;
flex: 1 1 auto;
}
.p-steps-item.p-disabled,
.p-steps-item.p-disabled * {
opacity: 1;
pointer-events: auto;
user-select: auto;
cursor: auto;
}
.p-steps-item:before {
content: " ";
border-top: 2px solid ${dt('steps.separator.background')};
width: 100%;
top: 50%;
left: 0;
display: block;
position: absolute;
margin-top: -1rem;
margin-top: calc(-1rem + 1px);
}
.p-steps-item:first-child::before {
width: calc(50% + 1rem);
transform: translateX(100%);
}
.p-steps-item:last-child::before {
width: 50%;
}
.p-steps-item-link {
display: inline-flex;
flex-direction: column;
align-items: center;
overflow: hidden;
text-decoration: none;
transition: outline-color ${dt('steps.transition.duration')}, box-shadow ${dt('steps.transition.duration')};
border-radius: ${dt('steps.item.link.border.radius')};
outline-color: transparent;
gap: ${dt('steps.item.link.gap')};
}
.p-steps-item-link:not(.p-disabled):focus-visible {
box-shadow: ${dt('steps.item.link.focus.ring.shadow')};
outline: ${dt('steps.item.link.focus.ring.width')} ${dt('steps.item.link.focus.ring.style')} ${dt('steps.item.link.focus.ring.color')};
outline-offset: ${dt('steps.item.link.focus.ring.offset')};
}
.p-steps-item-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
color: ${dt('steps.item.label.color')};
display: block;
font-weight: ${dt('steps.item.label.font.weight')};
}
.p-steps-item-number {
display: flex;
align-items: center;
justify-content: center;
color: ${dt('steps.item.number.color')};
border: 2px solid ${dt('steps.item.number.border.color')};
background: ${dt('steps.item.number.background')};
min-width: ${dt('steps.item.number.size')};
height: ${dt('steps.item.number.size')};
line-height: ${dt('steps.item.number.size')};
font-size: ${dt('steps.item.number.font.size')};
z-index: 1;
border-radius: ${dt('steps.item.number.border.radius')};
position: relative;
font-weight: ${dt('steps.item.number.font.weight')};
}
.p-steps-item-number::after {
content: " ";
position: absolute;
width: 100%;
height: 100%;
border-radius: ${dt('steps.item.number.border.radius')};
box-shadow: ${dt('steps.item.number.shadow')};
}
.p-steps:not(.p-readonly) .p-steps-item {
cursor: pointer;
}
.p-steps-item-active .p-steps-item-number {
background: ${dt('steps.item.number.active.background')};
border-color: ${dt('steps.item.number.active.border.color')};
color: ${dt('steps.item.number.active.color')};
}
.p-steps-item-active .p-steps-item-label {
color: ${dt('steps.item.label.active.color')};
}
`;
const classes = {
root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
list: 'p-steps-list',
item: ({ instance, item, index }) => [
'p-steps-item',
{
'p-steps-item-active': instance.isActive(index),
'p-disabled': instance.isItemDisabled(item, index)
}
],
itemLink: 'p-steps-item-link',
itemNumber: 'p-steps-item-number',
itemLabel: 'p-steps-item-label'
};
class StepsStyle extends BaseStyle {
name = 'steps';
theme = theme;
classes = classes;
static ɵfac = /*@__PURE__*/ (() => { let ɵStepsStyle_BaseFactory; return function StepsStyle_Factory(__ngFactoryType__) { return (ɵStepsStyle_BaseFactory || (ɵStepsStyle_BaseFactory = i0.ɵɵgetInheritedFactory(StepsStyle)))(__ngFactoryType__ || StepsStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: StepsStyle, factory: StepsStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StepsStyle, [{
type: Injectable
}], null, null); })();
/**
*
* 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 StepsClasses;
(function (StepsClasses) {
/**
* Class name of the root element
*/
StepsClasses["root"] = "p-steps";
/**
* Class name of the list element
*/
StepsClasses["list"] = "p-steps-list";
/**
* Class name of the item element
*/
StepsClasses["item"] = "p-steps-item";
/**
* Class name of the item link element
*/
StepsClasses["itemLink"] = "p-steps-item-link";
/**
* Class name of the item number element
*/
StepsClasses["itemNumber"] = "p-steps-item-number";
/**
* Class name of the item label element
*/
StepsClasses["itemLabel"] = "p-steps-item-label";
})(StepsClasses || (StepsClasses = {}));
const _c0 = ["list"];
const _forTrack0 = ($index, $item) => $item.label;
const _c1 = a0 => ({ "p-steps p-component": true, "p-readonly": a0 });
const _c2 = (a0, a1) => ({ "p-steps-item-active": a0, "p-disabled": a1 });
const _c3 = () => ({ exact: false });
function Steps_For_4_li_0_a_2_span_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 14);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const item_r3 = i0.ɵɵnextContext(3).$implicit;
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(item_r3.label);
} }
function Steps_For_4_li_0_a_2_ng_template_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "span", 15);
} if (rf & 2) {
const item_r3 = i0.ɵɵnextContext(3).$implicit;
i0.ɵɵproperty("innerHTML", item_r3.label, i0.ɵɵsanitizeHtml);
} }
function Steps_For_4_li_0_a_2_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "a", 11);
i0.ɵɵlistener("click", function Steps_For_4_li_0_a_2_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); const item_r3 = ctx_r1.$implicit; const ɵ$index_5_r4 = ctx_r1.$index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onItemClick($event, item_r3, ɵ$index_5_r4)); })("keydown", function Steps_For_4_li_0_a_2_Template_a_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); const item_r3 = ctx_r1.$implicit; const ɵ$index_5_r4 = ctx_r1.$index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onItemKeydown($event, item_r3, ɵ$index_5_r4)); });
i0.ɵɵelementStart(1, "span", 12);
i0.ɵɵtext(2);
i0.ɵɵelementEnd();
i0.ɵɵtemplate(3, Steps_For_4_li_0_a_2_span_3_Template, 2, 1, "span", 13)(4, Steps_For_4_li_0_a_2_ng_template_4_Template, 1, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementEnd();
} if (rf & 2) {
const htmlLabel_r6 = i0.ɵɵreference(5);
const ctx_r1 = i0.ɵɵnextContext(2);
const item_r3 = ctx_r1.$implicit;
const ɵ$index_5_r4 = ctx_r1.$index;
const ctx_r4 = i0.ɵɵnextContext();
i0.ɵɵproperty("routerLink", item_r3.routerLink)("queryParams", item_r3.queryParams)("routerLinkActiveOptions", item_r3.routerLinkActiveOptions || i0.ɵɵpureFunction0(17, _c3))("target", item_r3.target)("fragment", item_r3.fragment)("queryParamsHandling", item_r3.queryParamsHandling)("preserveFragment", item_r3.preserveFragment)("skipLocationChange", item_r3.skipLocationChange)("replaceUrl", item_r3.replaceUrl)("state", item_r3.state);
i0.ɵɵattribute("tabindex", ctx_r4.getItemTabIndex(item_r3, ɵ$index_5_r4))("aria-expanded", ɵ$index_5_r4 === ctx_r4.activeIndex)("aria-disabled", item_r3.disabled || ctx_r4.readonly && ɵ$index_5_r4 !== ctx_r4.activeIndex)("ariaCurrentWhenActive", ctx_r4.exact ? "step" : undefined);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ɵ$index_5_r4 + 1);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", item_r3.escape !== false)("ngIfElse", htmlLabel_r6);
} }
function Steps_For_4_li_0_ng_template_3_span_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 14);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const item_r3 = i0.ɵɵnextContext(3).$implicit;
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(item_r3.label);
} }
function Steps_For_4_li_0_ng_template_3_ng_template_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "span", 15);
} if (rf & 2) {
const item_r3 = i0.ɵɵnextContext(3).$implicit;
i0.ɵɵproperty("innerHTML", item_r3.label, i0.ɵɵsanitizeHtml);
} }
function Steps_For_4_li_0_ng_template_3_Template(rf, ctx) { if (rf & 1) {
const _r7 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "a", 16);
i0.ɵɵlistener("click", function Steps_For_4_li_0_ng_template_3_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); const item_r3 = ctx_r1.$implicit; const ɵ$index_5_r4 = ctx_r1.$index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onItemClick($event, item_r3, ɵ$index_5_r4)); })("keydown", function Steps_For_4_li_0_ng_template_3_Template_a_keydown_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); const item_r3 = ctx_r1.$implicit; const ɵ$index_5_r4 = ctx_r1.$index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onItemKeydown($event, item_r3, ɵ$index_5_r4)); });
i0.ɵɵelementStart(1, "span", 12);
i0.ɵɵtext(2);
i0.ɵɵelementEnd();
i0.ɵɵtemplate(3, Steps_For_4_li_0_ng_template_3_span_3_Template, 2, 1, "span", 13)(4, Steps_For_4_li_0_ng_template_3_ng_template_4_Template, 1, 1, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementEnd();
} if (rf & 2) {
const htmlRouteLabel_r8 = i0.ɵɵreference(5);
const ctx_r1 = i0.ɵɵnextContext(2);
const item_r3 = ctx_r1.$implicit;
const ɵ$index_5_r4 = ctx_r1.$index;
const ctx_r4 = i0.ɵɵnextContext();
i0.ɵɵproperty("target", item_r3.target);
i0.ɵɵattribute("href", item_r3.url, i0.ɵɵsanitizeUrl)("tabindex", ctx_r4.getItemTabIndex(item_r3, ɵ$index_5_r4))("aria-expanded", ɵ$index_5_r4 === ctx_r4.activeIndex)("aria-disabled", item_r3.disabled || ctx_r4.readonly && ɵ$index_5_r4 !== ctx_r4.activeIndex)("ariaCurrentWhenActive", ctx_r4.exact && (!item_r3.disabled || ctx_r4.readonly) ? "step" : undefined);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ɵ$index_5_r4 + 1);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", item_r3.escape !== false)("ngIfElse", htmlRouteLabel_r8);
} }
function Steps_For_4_li_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "li", 9, 1);
i0.ɵɵtemplate(2, Steps_For_4_li_0_a_2_Template, 6, 18, "a", 10)(3, Steps_For_4_li_0_ng_template_3_Template, 6, 9, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementEnd();
} if (rf & 2) {
const elseBlock_r9 = i0.ɵɵreference(4);
const ctx_r1 = i0.ɵɵnextContext();
const item_r3 = ctx_r1.$implicit;
const ɵ$index_5_r4 = ctx_r1.$index;
const ctx_r4 = i0.ɵɵnextContext();
i0.ɵɵclassMap(item_r3.styleClass);
i0.ɵɵproperty("ngStyle", item_r3.style)("tooltipOptions", item_r3.tooltipOptions)("ngClass", i0.ɵɵpureFunction2(10, _c2, ctx_r4.isActive(item_r3, ɵ$index_5_r4), item_r3.disabled || ctx_r4.readonly && !ctx_r4.isActive(item_r3, ɵ$index_5_r4)));
i0.ɵɵattribute("aria-current", ctx_r4.isActive(item_r3, ɵ$index_5_r4) ? "step" : undefined)("id", item_r3.id)("data-pc-section", "menuitem");
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx_r4.isClickableRouterLink(item_r3))("ngIfElse", elseBlock_r9);
} }
function Steps_For_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Steps_For_4_li_0_Template, 5, 13, "li", 8);
} if (rf & 2) {
const item_r3 = ctx.$implicit;
i0.ɵɵproperty("ngIf", item_r3.visible !== false);
} }
/**
* Steps components is an indicator for the steps in a wizard workflow.
* @group Components
*/
class Steps extends BaseComponent {
/**
* Index of the active item.
* @group Props
*/
activeIndex = 0;
/**
* An array of menu items.
* @group Props
*/
model;
/**
* Whether the items are clickable or not.
* @group Props
*/
readonly = true;
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
/**
* Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
* @group Props
*/
exact = true;
/**
* Callback to invoke when the new step is selected.
* @param {number} number - current index.
* @group Emits
*/
activeIndexChange = new EventEmitter();
listViewChild;
router = inject(Router);
route = inject(ActivatedRoute);
_componentStyle = inject(StepsStyle);
subscription;
ngOnInit() {
super.ngOnInit();
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) {
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 !== this.activeIndex) {
const siblings = find(this.listViewChild.nativeElement, '[data-pc-section="menuitem"]');
siblings[i].children[0].tabIndex = '-1';
siblings[this.activeIndex].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;
}
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';
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
super.ngOnDestroy();
}
static ɵfac = /*@__PURE__*/ (() => { let ɵSteps_BaseFactory; return function Steps_Factory(__ngFactoryType__) { return (ɵSteps_BaseFactory || (ɵSteps_BaseFactory = i0.ɵɵgetInheritedFactory(Steps)))(__ngFactoryType__ || Steps); }; })();
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Steps, selectors: [["p-steps"]], viewQuery: function Steps_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c0, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listViewChild = _t.first);
} }, inputs: { activeIndex: [2, "activeIndex", "activeIndex", numberAttribute], model: "model", readonly: [2, "readonly", "readonly", booleanAttribute], style: "style", styleClass: "styleClass", exact: [2, "exact", "exact", booleanAttribute] }, outputs: { activeIndexChange: "activeIndexChange" }, features: [i0.ɵɵProvidersFeature([StepsStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 8, consts: [["list", ""], ["menuitem", ""], ["elseBlock", ""], ["htmlLabel", ""], ["htmlRouteLabel", ""], [3, "ngClass", "ngStyle"], [1, "p-steps-list"], ["pTooltip", "", 1, "p-steps-item", 3, "ngStyle", "class", "tooltipOptions", "ngClass"], ["class", "p-steps-item", "pTooltip", "", 3, "ngStyle", "class", "tooltipOptions", "ngClass", 4, "ngIf"], ["pTooltip", "", 1, "p-steps-item", 3, "ngStyle", "tooltipOptions", "ngClass"], ["role", "link", "class", "p-steps-item-link", 3, "routerLink", "queryParams", "routerLinkActiveOptions", "target", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "click", "keydown", 4, "ngIf", "ngIfElse"], ["role", "link", 1, "p-steps-item-link", 3, "click", "keydown", "routerLink", "queryParams", "routerLinkActiveOptions", "target", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state"], [1, "p-steps-item-number"], ["class", "p-steps-item-label", 4, "ngIf", "ngIfElse"], [1, "p-steps-item-label"], [1, "p-steps-item-label", 3, "innerHTML"], ["role", "link", 1, "p-steps-item-link", 3, "click", "keydown", "target"]], template: function Steps_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "nav", 5)(1, "ul", 6, 0);
i0.ɵɵrepeaterCreate(3, Steps_For_4_Template, 1, 1, "li", 7, _forTrack0);
i0.ɵɵelementEnd()();
} if (rf & 2) {
i0.ɵɵclassMap(ctx.styleClass);
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c1, ctx.readonly))("ngStyle", ctx.style);
i0.ɵɵattribute("data-pc-name", "steps");
i0.ɵɵadvance();
i0.ɵɵattribute("data-pc-section", "menu");
i0.ɵɵadvance(2);
i0.ɵɵrepeater(ctx.model);
} }, dependencies: [CommonModule, i1.NgClass, i1.NgIf, i1.NgStyle, RouterModule, i2.RouterLink, TooltipModule, i3.Tooltip, SharedModule], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Steps, [{
type: Component,
args: [{
selector: 'p-steps',
standalone: true,
imports: [CommonModule, RouterModule, TooltipModule, SharedModule],
template: `
<nav [ngClass]="{ 'p-steps p-component': true, 'p-readonly': readonly }" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'steps'">
<ul #list [attr.data-pc-section]="'menu'" class="p-steps-list">
@for (item of model; track item.label; let i = $index) {
<li
*ngIf="item.visible !== false"
class="p-steps-item"
#menuitem
[ngStyle]="item.style"
[class]="item.styleClass"
[attr.aria-current]="isActive(item, i) ? 'step' : undefined"
[attr.id]="item.id"
pTooltip
[tooltipOptions]="item.tooltipOptions"
[ngClass]="{
'p-steps-item-active': isActive(item, i),
'p-disabled': item.disabled || (readonly && !isActive(item, i))
}"
[attr.data-pc-section]="'menuitem'"
>
<a
role="link"
*ngIf="isClickableRouterLink(item); else elseBlock"
[routerLink]="item.routerLink"
[queryParams]="item.queryParams"
[routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
class="p-steps-item-link"
(click)="onItemClick($event, item, i)"
(keydown)="onItemKeydown($event, item, i)"
[target]="item.target"
[attr.tabindex]="getItemTabIndex(item, i)"
[attr.aria-expanded]="i === activeIndex"
[attr.aria-disabled]="item.disabled || (readonly && i !== activeIndex)"
[fragment]="item.fragment"
[queryParamsHandling]="item.queryParamsHandling"
[preserveFragment]="item.preserveFragment"
[skipLocationChange]="item.skipLocationChange"
[replaceUrl]="item.replaceUrl"
[state]="item.state"
[attr.ariaCurrentWhenActive]="exact ? 'step' : undefined"
>
<span class="p-steps-item-number">{{ i + 1 }}</span>
<span class="p-steps-item-label" *ngIf="item.escape !== false; else htmlLabel">{{ item.label }}</span>
<ng-template #htmlLabel><span class="p-steps-item-label" [innerHTML]="item.label"></span></ng-template>
</a>
<ng-template #elseBlock>
<a
role="link"
[attr.href]="item.url"
class="p-steps-item-link"
(click)="onItemClick($event, item, i)"
(keydown)="onItemKeydown($event, item, i)"
[target]="item.target"
[attr.tabindex]="getItemTabIndex(item, i)"
[attr.aria-expanded]="i === activeIndex"
[attr.aria-disabled]="item.disabled || (readonly && i !== activeIndex)"
[attr.ariaCurrentWhenActive]="exact && (!item.disabled || readonly) ? 'step' : undefined"
>
<span class="p-steps-item-number">{{ i + 1 }}</span>
<span class="p-steps-item-label" *ngIf="item.escape !== false; else htmlRouteLabel">{{ item.label }}</span>
<ng-template #htmlRouteLabel><span class="p-steps-item-label" [innerHTML]="item.label"></span></ng-template>
</a>
</ng-template>
</li>
}
</ul>
</nav>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [StepsStyle]
}]
}], null, { activeIndex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], model: [{
type: Input
}], readonly: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], exact: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], activeIndexChange: [{
type: Output
}], listViewChild: [{
type: ViewChild,
args: ['list', { static: false }]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Steps, { className: "Steps", filePath: "steps.ts", lineNumber: 92 }); })();
class StepsModule {
static ɵfac = function StepsModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StepsModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: StepsModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Steps, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StepsModule, [{
type: NgModule,
args: [{
imports: [Steps, SharedModule],
exports: [Steps, SharedModule]
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(StepsModule, { imports: [Steps, SharedModule], exports: [Steps, SharedModule] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { Steps, StepsClasses, StepsModule, StepsStyle };
//# sourceMappingURL=primeng-steps.mjs.map