@patternfly/elements
Version:
PatternFly Elements
69 lines • 24.1 kB
JavaScript
var _PfProgressStepper_instances, _PfProgressStepper_internals, _PfProgressStepper_mo, _PfProgressStepper_onMutation;
import { __classPrivateFieldGet, __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators/custom-element.js';
import { property } from 'lit/decorators/property.js';
import { css } from "lit";
const style = css `[hidden] {\n display: none !important;\n}\n\n:host {\n --pf-c-progress-stepper--m-vertical--GridAutoFlow: row;\n --pf-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;\n --pf-c-progress-stepper--m-vertical__step-connector--before--Top: 0;\n --pf-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);\n --pf-c-progress-stepper--m-vertical__step-connector--before--Width: auto;\n --pf-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;\n --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-global--BorderWidth--md, 2px);\n --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-global--BorderColor--100, #d2d2d2);\n --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0;\n --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent;\n --pf-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);\n --pf-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);\n --pf-c-progress-stepper--m-vertical__step-main--MarginRight: 0;\n --pf-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-global--spacer--xl, 2rem);\n --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n --pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;\n --pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);\n --pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;\n --pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;\n --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight: 0;\n --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft: 0;\n --pf-c-progress-stepper--m-horizontal--GridAutoFlow: column;\n --pf-c-progress-stepper--m-horizontal--GridTemplateColumns: initial;\n --pf-c-progress-stepper--m-horizontal__step-connector--before--Top: calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);\n --pf-c-progress-stepper--m-horizontal__step-connector--before--Left: 0;\n --pf-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%;\n --pf-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;\n --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0;\n --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor: unset;\n --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);\n --pf-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);\n --pf-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);\n --pf-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n --pf-c-progress-stepper--m-horizontal__step-main--MarginBottom: 0;\n --pf-c-progress-stepper--m-horizontal__step-main--MarginLeft: 0;\n --pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);\n --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom: 0;\n --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;\n --pf-c-progress-stepper--m-compact--GridAutoFlow: row;\n --pf-c-progress-stepper--m-compact__step-main--MarginTop: 0;\n --pf-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);\n --pf-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;\n --pf-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;\n --pf-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);\n --pf-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n --pf-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);\n --pf-c-progress-stepper--m-compact__pficon--MarginTop: 2px;\n --pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;\n --pf-c-progress-stepper--m-center__step-connector--before--Left: 50%;\n --pf-c-progress-stepper--m-center--GridTemplateColumns: 1fr;\n --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;\n --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n --pf-c-progress-stepper--m-center__step-main--TextAlign: center;\n --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;\n --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;\n --pf-c-progress-stepper--GridTemplateRows: auto 1fr;\n --pf-c-progress-stepper__step-connector--JustifyContent: start;\n --pf-c-progress-stepper__step-icon--ZIndex: var(--pf-global--ZIndex--xs, 100);\n --pf-c-progress-stepper__step-icon--Width: 1.75rem;\n --pf-c-progress-stepper__step-icon--Height: var(--pf-c-progress-stepper__step-icon--Width);\n --pf-c-progress-stepper__step-icon--FontSize: var(--pf-global--FontSize--md, 1rem);\n --pf-c-progress-stepper__step-icon--Color: var(--pf-global--Color--100, #151515);\n --pf-c-progress-stepper__step-icon--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);\n --pf-c-progress-stepper__step-icon--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n --pf-c-progress-stepper__step-icon--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);\n --pf-c-progress-stepper__pficon--MarginTop: 3px;\n --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;\n --pf-c-progress-stepper__step-title--Color: var(--pf-global--Color--100, #151515);\n --pf-c-progress-stepper__step-title--TextAlign: left;\n --pf-c-progress-stepper__step-title--FontSize: var(--pf-global--FontSize--md, 1rem);\n --pf-c-progress-stepper__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);\n --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-global--FontWeight--bold, 700);\n --pf-c-progress-stepper__step--m-current__step-title--Color: var(--pf-global--Color--100, #151515);\n --pf-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-global--Color--200, #6a6e73);\n --pf-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-global--danger-color--100, #c9190b);\n --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200, #8a8d90);\n --pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm, 1px);\n --pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset: 0.25rem;\n --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100, #151515);\n --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100, #151515);\n --pf-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-global--Color--100, #151515);\n --pf-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-global--Color--100, #151515);\n --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-global--danger-color--200, #a30000);\n --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color: var(--pf-global--danger-color--200, #a30000);\n --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--pf-global--danger-color--100, #c9190b);\n --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--danger-color--200, #a30000);\n --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor: var(--pf-global--danger-color--200, #a30000);\n --pf-c-progress-stepper__step-description--MarginTop: var(--pf-global--spacer--xs, 0.25rem);\n --pf-c-progress-stepper__step-description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n --pf-c-progress-stepper__step-description--Color: var(--pf-global--Color--200, #6a6e73);\n --pf-c-progress-stepper__step-description--TextAlign: left;\n --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);\n --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);\n --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);\n --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);\n --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);\n --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);\n --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);\n --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);\n --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);\n --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);\n --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);\n --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);\n --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);\n --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);\n --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);\n --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);\n --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);\n --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);\n --pf-c-progress-stepper--m-center__step-connector--before--Content: none;\n --pf-c-progress-stepper--m-center__step-main--before--Content: '';\n --pf-c-progress-stepper__step-connector--before--Content: '';\n --pf-c-progress-stepper__step-main--before--Content: none;\n position: relative;\n display: grid;\n grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);\n grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);\n grid-template-rows: var(--pf-c-progress-stepper--GridTemplateRows);\n grid-auto-columns: 1fr;\n}\n\n@media (min-width: 768px) {\n :host {\n --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow, column);\n --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns, initial);\n --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);\n --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);\n --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);\n --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);\n --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);\n --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);\n --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);\n --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);\n --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);\n --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);\n --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);\n --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);\n --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);\n --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);\n --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);\n --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);\n --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);\n --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);\n --pf-c-progress-stepper--m-center__step-connector--before--Content: '';\n --pf-c-progress-stepper--m-center__step-main--before--Content: none;\n }\n}\n\n:host([center]) {\n --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);\n --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);\n --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);\n --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);\n --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);\n --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);\n --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);\n --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);\n --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);\n --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);\n --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);\n --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);\n --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);\n\n grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);\n}\n\n:host([center]:not([compact])) {\n --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);\n --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);\n}\n\n:host([vertical]) ::slotted(pf-progress-step) {\n flex-direction: row;\n align-items: flex-start;\n}\n\n:host([vertical]) {\n --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);\n --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);\n --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);\n --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);\n --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);\n --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);\n --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);\n --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);\n --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);\n --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);\n --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);\n --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);\n --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);\n --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);\n --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);\n --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);\n --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);\n --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);\n --pf-c-progress-stepper__step-connector--before--Content: '';\n --pf-c-progress-stepper__step-main--before--Content: none;\n --pf-c-progress-stepper--m-center__step-connector--before--Content: none;\n --pf-c-progress-stepper--m-center__step-main--before--Content: '';\n --pf-c-progress-stepper__step-main--Position: relative;\n}\n\n:host([vertical][center]) {\n --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);\n}\n\n:host([compact]) {\n --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-compact__step-main--MarginTop);\n --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);\n --pf-c-progress-stepper__step-icon--Width: var(--pf-c-progress-stepper--m-compact__step-icon--Width);\n --pf-c-progress-stepper__step-icon--FontSize: var(--pf-c-progress-stepper--m-compact__step-icon--FontSize);\n --pf-c-progress-stepper__step-title--FontSize: var(--pf-c-progress-stepper--m-compact__step-title--FontSize);\n --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-c-progress-stepper--m-compact__step-title--FontWeight);\n --pf-c-progress-stepper__pficon--MarginTop: var(--pf-c-progress-stepper--m-compact__pficon--MarginTop);\n --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: var(--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);\n --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);\n --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight);\n display: inline-grid;\n grid-template-columns: var(--pf-c-progress-stepper--m-compact--GridTemplateColumns);\n grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);\n}\n`;
import { PfProgressStep } from './pf-progress-step.js';
import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
import '@patternfly/elements/pf-icon/pf-icon.js';
let PfProgressStepper = class PfProgressStepper extends LitElement {
get value() {
const { childTagName } = this.constructor;
const steps = this.querySelectorAll?.(childTagName) ?? [];
const current = this.querySelector?.(`${childTagName}[current]`);
const n = Array.from(steps).indexOf(current) + 1;
return (n / steps.length) * 100;
}
constructor() {
super();
_PfProgressStepper_instances.add(this);
/** Whether to use the vertical layout */
this.vertical = false;
/** Whether to use the center alignment */
this.center = false;
/** Whether to use the compact layout */
this.compact = false;
_PfProgressStepper_internals.set(this, InternalsController.of(this, {
role: 'progressbar',
ariaValueNow: this.value.toString(),
}));
_PfProgressStepper_mo.set(this, new MutationObserver(() => __classPrivateFieldGet(this, _PfProgressStepper_instances, "m", _PfProgressStepper_onMutation).call(this)));
__classPrivateFieldGet(this, _PfProgressStepper_mo, "f").observe(this, { childList: true });
}
render() {
// TODO: add label prop
// eslint-disable-next-line lit-a11y/accessible-name
return html `<div role="listbox" style="display:contents;"><slot></slot></div>`;
}
updated(changed) {
if (changed.has('compact')) {
this.querySelectorAll?.('pf-progress-step').forEach(step => step.requestUpdate());
}
}
};
_PfProgressStepper_internals = new WeakMap();
_PfProgressStepper_mo = new WeakMap();
_PfProgressStepper_instances = new WeakSet();
_PfProgressStepper_onMutation = function _PfProgressStepper_onMutation() {
__classPrivateFieldGet(this, _PfProgressStepper_internals, "f").ariaValueNow = this.value.toString();
};
PfProgressStepper.childTagName = 'pf-progress-step';
PfProgressStepper.styles = [style];
PfProgressStepper.formAssociated = true;
PfProgressStepper.version = "4.1.0";
__decorate([
property({ type: Boolean, reflect: true })
], PfProgressStepper.prototype, "vertical", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], PfProgressStepper.prototype, "center", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], PfProgressStepper.prototype, "compact", void 0);
PfProgressStepper = __decorate([
customElement('pf-progress-stepper')
], PfProgressStepper);
export { PfProgressStepper };
//# sourceMappingURL=pf-progress-stepper.js.map