@patternfly/elements
Version:
PatternFly Elements
1 lines • 16.8 kB
Source Map (JSON)
{"version":3,"file":"pf-progress-stepper.js","sourceRoot":"","sources":["pf-progress-stepper.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,yCAAyC,CAAC;AAyH1C,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAuB/C,IAAI,KAAK;QACP,MAAM,EAAE,YAAY,EAAE,GAAI,IAAI,CAAC,WAAwC,CAAC;QACxE,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAiB,YAAY,CAAC,IAAI,EAAE,CAAC;QAC1E,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,YAAY,WAAW,CAAC,CAAC;QACjE,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,OAAyB,CAAC,GAAG,CAAC,CAAC;QACnE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;IAClC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QAzBV,yCAAyC;QACG,aAAQ,GAAG,KAAK,CAAC;QAE7D,0CAA0C;QACE,WAAM,GAAG,KAAK,CAAC;QAE3D,wCAAwC;QACI,YAAO,GAAG,KAAK,CAAC;QAE5D,uCAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE;YACxC,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;SACpC,CAAC,EAAC;QAEH,gCAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,mEAAY,MAAhB,IAAI,CAAc,CAAC,EAAC;QAYnD,uBAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAMD,MAAM;QACJ,uBAAuB;QACvB,oDAAoD;QACpD,OAAO,IAAI,CAAA,mEAAmE,CAAC;IACjF,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,gBAAgB,EAAE,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QACpF,CAAC;IACH,CAAC;;;;;;IAbC,uBAAA,IAAI,oCAAW,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;AACvD,CAAC;AArCgB,8BAAY,GAAG,kBAAkB,AAArB,CAAsB;AAEnC,wBAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;AAE3C,gCAAc,GAAG,IAAI,AAAP,CAAQ;;AAGe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAGf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAiB;AAdjD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB","sourcesContent":["import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-progress-stepper.css';\n\nimport { PfProgressStep } from './pf-progress-step.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow.\n * @cssprop [--pf-c-progress-stepper--m-vertical--GridAutoFlow=row]\n * @cssprop [--pf-c-progress-stepper--m-vertical--GridTemplateColumns=auto 1fr]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Top=0]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Left=calc(var(--pf-c-progress-stepper__step-icon--Width) / 2)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Width=auto]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Height=100%]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth=var(--pf-global--BorderWidth--md, 2px)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth=0]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor=transparent]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Transform=translateX(-50%)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginRight=0]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginBottom=var(--pf-global--spacer--xl, 2rem)]\n * @cssprop [--pf-c-progress-stepper--m-vertical__step-main--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns=1fr]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow=auto]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight=0]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight=0]\n * @cssprop [--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal--GridAutoFlow=column]\n * @cssprop [--pf-c-progress-stepper--m-horizontal--GridTemplateColumns=initial]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Top=calc(var(--pf-c-progress-stepper__step-icon--Height) / 2)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Left=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Width=100%]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Height=auto]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor=unset]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform=translateY(-50%)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns=repeat(auto-fill, 1.75rem)]\n * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom=0]\n * @cssprop [--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow=2]\n * @cssprop [--pf-c-progress-stepper--m-compact--GridAutoFlow=row]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-main--MarginTop=0]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-main--MarginBottom=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--MinWidth=1.75rem]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-icon--Width=1.125rem]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-icon--FontSize=var(--pf-global--icon--FontSize--sm, 0.625rem)]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-title--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-title--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-progress-stepper--m-compact__pficon--MarginTop=2px]\n * @cssprop [--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop=-3px]\n * @cssprop [--pf-c-progress-stepper--m-center__step-connector--before--Left=50%]\n * @cssprop [--pf-c-progress-stepper--m-center--GridTemplateColumns=1fr]\n * @cssprop [--pf-c-progress-stepper--m-center__step-connector--JustifyContent=center]\n * @cssprop [--pf-c-progress-stepper--m-center__step-main--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-center__step-main--MarginLeft=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper--m-center__step-main--TextAlign=center]\n * @cssprop [--pf-c-progress-stepper--m-center__step-description--MarginRight=0]\n * @cssprop [--pf-c-progress-stepper--m-center__step-description--MarginLeft=0]\n * @cssprop [--pf-c-progress-stepper--GridTemplateRows=auto 1fr]\n * @cssprop [--pf-c-progress-stepper__step-connector--JustifyContent=start]\n * @cssprop [--pf-c-progress-stepper__step-icon--ZIndex=var(--pf-global--ZIndex--xs, 100)]\n * @cssprop [--pf-c-progress-stepper__step-icon--Width=1.75rem]\n * @cssprop [--pf-c-progress-stepper__step-icon--Height=var(--pf-c-progress-stepper__step-icon--Width)]\n * @cssprop [--pf-c-progress-stepper__step-icon--FontSize=var(--pf-global--FontSize--md, 1rem)]\n * @cssprop [--pf-c-progress-stepper__step-icon--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step-icon--BackgroundColor=var(--pf-global--BackgroundColor--light-200, #fafafa)]\n * @cssprop [--pf-c-progress-stepper__step-icon--BorderWidth=var(--pf-global--BorderWidth--md, 2px)]\n * @cssprop [--pf-c-progress-stepper__step-icon--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-progress-stepper__pficon--MarginTop=3px]\n * @cssprop [--pf-c-progress-stepper__fa-exclamation-triangle--MarginTop=-5px]\n * @cssprop [--pf-c-progress-stepper__step-title--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step-title--TextAlign=left]\n * @cssprop [--pf-c-progress-stepper__step-title--FontSize=var(--pf-global--FontSize--md, 1rem)]\n * @cssprop [--pf-c-progress-stepper__step-title--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-progress-stepper__step--m-current__step-title--FontWeight=var(--pf-global--FontWeight--bold, 700)]\n * @cssprop [--pf-c-progress-stepper__step--m-current__step-title--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step--m-pending__step-title--Color=var(--pf-global--Color--200, #6a6e73)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--Color=var(--pf-global--danger-color--100, #c9190b)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor=var(--pf-global--BorderColor--200, #8a8d90)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset=0.25rem]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--hover--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step-title--m-help-text--focus--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color=var(--pf-global--danger-color--200, #a30000)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color=var(--pf-global--danger-color--200, #a30000)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor=var(--pf-global--danger-color--100, #c9190b)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor=var(--pf-global--danger-color--200, #a30000)]\n * @cssprop [--pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor=var(--pf-global--danger-color--200, #a30000)]\n * @cssprop [--pf-c-progress-stepper__step-description--MarginTop=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-progress-stepper__step-description--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]\n * @cssprop [--pf-c-progress-stepper__step-description--Color=var(--pf-global--Color--200, #6a6e73)]\n * @cssprop [--pf-c-progress-stepper__step-description--TextAlign=left]\n * @cssprop [--pf-c-progress-stepper--GridAutoFlow=var(--pf-c-progress-stepper--m-vertical--GridAutoFlow)]\n * @cssprop [--pf-c-progress-stepper--GridTemplateColumns=var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Top=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Left=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Width=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Height=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderRightWidth=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderRightColor=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderBottomWidth=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--BorderBottomColor=var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor)]\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Transform=var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform)]\n * @cssprop [--pf-c-progress-stepper__step-main--MarginTop=var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop)]\n * @cssprop [--pf-c-progress-stepper__step-main--MarginRight=var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight)]\n * @cssprop [--pf-c-progress-stepper__step-main--MarginBottom=var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom)]\n * @cssprop [--pf-c-progress-stepper__step-main--MarginLeft=var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft)]\n * @cssprop [--pf-c-progress-stepper--m-compact--GridTemplateColumns=var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns)]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--GridRow=var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow)]\n * @cssprop [--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom=var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom)]\n * @cssprop [--pf-c-progress-stepper--m-center__step-connector--before--Content=none]\n * @cssprop [--pf-c-progress-stepper--m-center__step-main--before--Content='']\n * @cssprop [--pf-c-progress-stepper__step-connector--before--Content='']\n * @cssprop [--pf-c-progress-stepper__step-main--before--Content=none]\n */\n@customElement('pf-progress-stepper')\nexport class PfProgressStepper extends LitElement {\n protected static childTagName = 'pf-progress-step';\n\n static readonly styles: CSSStyleSheet[] = [style];\n\n static formAssociated = true;\n\n /** Whether to use the vertical layout */\n @property({ type: Boolean, reflect: true }) vertical = false;\n\n /** Whether to use the center alignment */\n @property({ type: Boolean, reflect: true }) center = false;\n\n /** Whether to use the compact layout */\n @property({ type: Boolean, reflect: true }) compact = false;\n\n #internals = InternalsController.of(this, {\n role: 'progressbar',\n ariaValueNow: this.value.toString(),\n });\n\n #mo = new MutationObserver(() => this.#onMutation());\n\n get value(): number {\n const { childTagName } = (this.constructor as typeof PfProgressStepper);\n const steps = this.querySelectorAll?.<PfProgressStep>(childTagName) ?? [];\n const current = this.querySelector?.(`${childTagName}[current]`);\n const n = Array.from(steps).indexOf(current as PfProgressStep) + 1;\n return (n / steps.length) * 100;\n }\n\n constructor() {\n super();\n this.#mo.observe(this, { childList: true });\n }\n\n #onMutation() {\n this.#internals.ariaValueNow = this.value.toString();\n }\n\n render(): TemplateResult<1> {\n // TODO: add label prop\n // eslint-disable-next-line lit-a11y/accessible-name\n return html`<div role=\"listbox\" style=\"display:contents;\"><slot></slot></div>`;\n }\n\n updated(changed: PropertyValues<this>): void {\n if (changed.has('compact')) {\n this.querySelectorAll?.('pf-progress-step').forEach(step => step.requestUpdate());\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-progress-stepper': PfProgressStepper;\n }\n}\n"]}