npm - q2-tecton-elements - Versions diffs - 1.67.2 → 1.68.0 - Mend

q2-tecton-elements 1.67.2 → 1.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (807) hide show

package/dist/q2-tecton-elements/q2-stepper-vertical.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-stepper-vertical.entry.esm.js","sources":["src/components/q2-stepper-vertical/q2-stepper-vertical.scss?tag=q2-stepper-vertical&encapsulation=shadow","src/components/q2-stepper-vertical/q2-stepper-vertical.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: grid;\n grid-template-columns: var-list(--tct-stepper-vertical-list-width, var-prefixer(advanced-stepper-list-width), 180px) 1fr;\n gap: var-list(--tct-stepper-vertical-layout-gap, var-prefixer(advanced-stepper-layout-gap), 120px);\n}\n\n.step-label,\n.step-child-label {\n color: var(--comp-btn-label-color);\n font-size: var(--comp-btn-label-font-size);\n font-weight: var(--comp-label-font-weight, 400);\n min-height: 1.5em;\n}\n\n.step-label {\n @include line-clamp(var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 2));\n\n [aria-selected='true'] & {\n font-weight: var-list(\n --tct-stepper-vertical-btn-active-font-weight,\n var-prefixer(advanced-stepper-btn-active-font-weight),\n 600\n );\n }\n\n [aria-describedby] & {\n @include line-clamp(\n var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 1)\n );\n }\n}\n\n.step-child-label {\n grid-area: content;\n color: var(--comp-btn-label-color);\n}\n\n.step-description {\n color: var-list(\n --tct-stepper-vertical-description-color,\n var-prefixer(advanced-stepper-description-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(\n --tct-stepper-vertical-description-font-size,\n var-prefixer(advanced-stepper-description-font-size),\n --app-font-size-small,\n 12px\n );\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n}\n\nul {\n --comp-top-btn-icon-size: #{var-list(\n --tct-stepper-vertical-btn-icon-size,\n var-prefixer(advanced-stepper-btn-icon-size),\n 24px\n )};\n --comp-btn-icon-size: #{var(--comp-top-btn-icon-size)};\n --comp-btn-icon-visibility: #{var(--tct-stepper-vertical-btn-icon-visibility, visible)};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-3x,\n 15px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-btn-label-font-size,\n var-prefixer(advanced-stepper-btn-label-font-size),\n 16px\n )};\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-label-color,\n var-prefixer(advanced-stepper-label-color),\n --t-text,\n #4d4d4d\n )};\n --comp-tween: #{var-list(\n --tct-stepper-vertical-tween,\n var-prefixer(advanced-stepper-tween),\n --app-tween-1,\n unquote('0.2s ease')\n )};\n --comp-bullet-bg: #{var-list(\n --tct-stepper-vertical-bullet-active-background,\n var-prefixer(advanced-stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n\n list-style: none;\n margin: 0;\n padding: 0;\n\n ul {\n --comp-btn-icon-size: #{var-list(\n --tct-stepper-vertical-child-btn-icon-size,\n var-prefixer(advanced-stepper-child-btn-icon-size),\n 12px\n )};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-2x,\n 10px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-child-btn-label-font-size,\n var-prefixer(advanced-stepper-child-btn-label-font-size),\n --app-font-size-small,\n 12px\n )};\n\n &[aria-hidden='true'] {\n display: none;\n }\n }\n}\n\n\n.step-btn,\n.step-child-btn {\n display: grid;\n grid-template-columns: var(--comp-btn-icon-size) 1fr;\n gap: var(--comp-btn-content-gap);\n text-align: var-list(--tct-stepper-vertical-btn-text-align, var-prefixer(advanced-stepper-btn-text-align), start);\n grid-template-areas: 'icon content';\n align-items: center;\n width: 100%;\n position: relative;\n background: transparent;\n border: 0;\n cursor: pointer;\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n border-radius: var(--tct-stepper-vertical-step-focus-visible-border-radius, 0);\n\n &[aria-disabled]:not(.pane-disabled) {\n cursor: default;\n --comp-label-font-weight: 300;\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-btn-locked-color,\n var-prefixer(advanced-stepper-btn-locked-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n )};\n }\n\n &.pane-disabled {\n cursor: not-allowed;\n }\n\n &[aria-selected='true'] {\n --comp-label-font-weight: 600;\n }\n\n &:focus-visible {\n box-shadow: var(--tct-stepper-vertical-step-focus-visible-box-shadow, --const-double-focus-ring);\n }\n}\n\n.step-btn {\n min-height: var-list(--tct-stepper-vertical-btn-height, var-prefixer(advanced-stepper-btn-height), 40px);\n font-size: var-list(--tct-stepper-vertical-btn-font-size, var-prefixer(advanced-stepper-btn-font-size), 16px);\n\n --comp-active-color: var(--comp-bullet-bg);\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n --tct-stoplight-success: var(--comp-active-color);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-child-btn {\n --comp-active-color: var(--comp-bullet-bg);\n\n min-height: var-list(\n --tct-stepper-vertical-child-btn-height,\n var-prefixer(advanced-stepper-child-btn-height),\n 30px\n );\n padding-left: var-list(\n --tct-stepper-vertical-child-btn-left-padding,\n var-prefixer(advanced-stepper-child-btn-left-padding),\n --app-scale-2x,\n 10px\n );\n font-size: var-list(\n --tct-stepper-vertical-child-btn-font-size,\n var-prefixer(advanced-stepper-child-btn-font-size),\n 12px\n );\n border-left-width: var-list(\n --tct-stepper-vertical-child-btn-left-border-width,\n var-prefixer(advanced-stepper-child-btn-left-border-width),\n 3px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-btn-left-border-style,\n var-prefixer(advanced-stepper-child-btn-left-border-style),\n solid\n );\n border-left-color: transparent;\n\n &[aria-selected='true'] {\n --comp-btn-label-color: var(--comp-active-color);\n border-left-color: var(--comp-active-color);\n }\n\n &.status-error {\n --comp-btn-label-color: var(--const-stoplight-alert, #d20a0a);\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n }\n\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-content {\n grid-area: content;\n}\n\n.step-icon,\n.step-bubble,\n.step-child-icon {\n visibility: var(--comp-btn-icon-visibility);\n grid-area: icon;\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n line-height: 0;\n\n q2-icon {\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n}\n\n.step-icon,\n.step-bubble {\n background: var(--comp-active-color);\n color: var(--t-base, #ffffff);\n border-radius: 50%;\n\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n\n q2-icon {\n &:before {\n content: '';\n display: block;\n background: var(--t-base, #ffffff);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n\n // Text-based statuses\n .status-locked & {\n background: var(--t-gray-12, #d9d9d9);\n color: var(--t-text, #4d4d4d);\n }\n\n [aria-selected='true'] & {\n box-shadow:\n 0 0 0 2px var(--t-base, #ffffff),\n 0 0 0 4px var(--comp-active-color);\n }\n}\n\n.step-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n}\n\n.step-child-icon {\n q2-icon {\n --tct-icon-stroke-primary: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--comp-active-color);\n }\n [aria-selected='true'] & {\n q2-icon {\n fill: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--t-base, #ffffff);\n }\n }\n}\n\n.spacer {\n height: 0;\n border-left-width: var-list(\n --tct-stepper-vertical-child-border-width,\n var-prefixer(advanced-stepaer-child-border-width),\n 1px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-border-style,\n var-prefixer(advanced-stepper-child-border-style),\n solid\n );\n border-left-color: var-list(\n --tct-stepper-vertical-child-border-color,\n var-prefixer(advanced-stepper-child-border-color),\n --t-gray-12,\n #d9d9d9\n );\n overflow: hidden;\n margin-left: calc(var(--comp-top-btn-icon-size) / 2);\n transition: height var(--comp-tween);\n\n &.has-sibling {\n height: var-list(\n --tct-stepper-vertical-spacer-height,\n var-prefixer(advanced-stepper-spacer-height),\n --app-scale-6x,\n 30px\n );\n }\n\n ul {\n opacity: 0;\n transition: opacity var(--comp-tween);\n }\n\n &.is-opening,\n &.is-open {\n ul {\n display: block;\n opacity: 1 !important;\n }\n }\n\n &.is-open {\n overflow: visible;\n }\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\ninterface BaseStructuredPane {\n id: string;\n label: string;\n description: string;\n isActive: boolean;\n status: string;\n disabled: boolean;\n}\n\ninterface StructuredPane extends BaseStructuredPane {\n children: BaseStructuredPane[];\n}\n\n/*\n @name Vertical Stepper\n * @category Display\n * @summary Use for guiding users through a multi-step workflow with vertical progress.\n /\n@Component({ tag: 'q2-stepper-vertical', shadow: true, styleUrl: 'q2-stepper-vertical.scss' })\nexport class Q2StepperVertical implements ComponentInterface {\n // #region Own Properties\n\n expandedStepChildrenList: HTMLUListElement;\n mutationObserver: MutationObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n structuredPanes: StructuredPane[] = [];\n\n // #endregion\n // #region Public Property API\n\n /* The `id` of the currently selected `q2-stepper-pane`. /\n @Prop({ reflect: true, mutable: true })\n currentStepId: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n this.setDefaultPane();\n this.buildPaneList();\n const observer = new MutationObserver(this.determinePaneChanges);\n const observerOptions = {\n childList: true,\n };\n observer.observe(this.hostElement, observerOptions);\n this.allRootPanes.forEach(pane => {\n const childrenSlot = pane.querySelector('[slot=children]');\n if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStepId), 0);\n }\n\n componentWillUpdate() {\n this.expandedStepChildrenList = null;\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n\n this.openCurrentStepChildren();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStepId = event.detail.selectedStepId;\n }\n }\n\n @Listen('contentChange')\n contentChangeHandler() {\n this.buildPaneList();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStepBtn(this.currentStepId, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler() {\n this.buildPaneList();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to select a step corresponding with the step id.\n \n @testOnly\n */\n @Method()\n async selectStep(stepId: string) {\n const stepperPane = this.hostElement.shadowRoot.querySelector(`button.step-btn#${stepId}`);\n (stepperPane as HTMLButtonElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('currentStepId')\n currentStepChanged(stepId: string) {\n this.showStep(stepId);\n }\n\n // #endregion\n // #region Local Methods\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n get allRootPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n }\n\n buildPaneList = () => {\n const { allRootPanes } = this;\n if (!allRootPanes.length) return;\n\n this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n .map(this.extractDetails);\n\n accum.push({ ...this.extractDetails(pane), children });\n return accum;\n }, []);\n };\n\n determinePaneChanges = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type !== 'childList') return;\n if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n if (\n mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n )\n return;\n this.buildPaneList();\n });\n };\n\n extractDetails(pane: HTMLQ2StepperPaneElement) {\n const { label, description, status, disabled } = pane;\n if (!pane.id) pane.id = `step-${createGuid()}`;\n return {\n id: pane.id,\n label,\n description,\n status,\n disabled,\n };\n }\n\n focusStepBtn(stepId: string, forceFocus?: boolean) {\n const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[id=\"${stepId}\"]`);\n const isComponentActive = document.activeElement === this.hostElement;\n if (!stepBtn) return;\n if (isComponentActive \|\| forceFocus) {\n stepBtn.focus();\n }\n }\n\n getStepId(currentStepId: string, goTo: string) {\n const allEnabledStepBtns = Array.from(\n this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n 'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n )\n );\n const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('id') === currentStepId);\n\n let nextStepIndex;\n switch (goTo) {\n case 'prev':\n nextStepIndex = Math.max(currentStepIndex - 1, 0);\n break;\n\n case 'next':\n nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n break;\n\n case 'first':\n nextStepIndex = 0;\n break;\n\n case 'last':\n nextStepIndex = allEnabledStepBtns.length - 1;\n break;\n }\n\n return allEnabledStepBtns[nextStepIndex].getAttribute('id');\n }\n\n onStepClick = (event, stepId: string) => {\n event.stopPropagation();\n const { currentStepId } = this;\n if (stepId === currentStepId) return;\n const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n mirrorEmit(this, ['change', 'tctChange'], {\n selectedStep,\n selectedStepId: stepId,\n currentStepId,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n const { key } = event;\n\n let selectedStepId;\n switch (key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'prev');\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'next');\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'first');\n break;\n\n case 'End':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'last');\n break;\n }\n\n if (!selectedStepId) return;\n this.focusStepBtn(selectedStepId, true);\n };\n\n openCurrentStepChildren() {\n const { expandedStepChildrenList } = this;\n const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n allSpacers.forEach(spacer => {\n if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n if (spacer.classList.contains('is-open')) return;\n spacer.classList.add('is-opening');\n spacer.addEventListener(\n 'transitionend',\n () => {\n spacer.classList.remove('is-opening');\n spacer.classList.add('is-open');\n this.resizeIframe();\n },\n { once: true }\n );\n } else {\n spacer.removeAttribute('style');\n spacer.classList.remove('is-open', 'is-opening');\n }\n });\n }\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n setDefaultPane() {\n if (this.currentStepId) return;\n const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n if (!firstEnabledStep) return;\n if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n this.currentStepId = firstEnabledStep.id;\n }\n\n showStep(stepId: string) {\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepId);\n this.focusStepBtn(stepId);\n }\n\n showStepPane(stepId: string) {\n this.allPanes.forEach(pane => {\n if (pane.isActive \|\| pane.id === stepId) {\n pane.isActive = stepId === pane.id;\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderChildStepBtn(pane: BaseStructuredPane, index: number, children: number, parentLabel: string) {\n const { currentStepId } = this;\n const { id, label, status, disabled: isPaneDisabled } = pane;\n const stepNumber = index + 1;\n const labelId = label && `label-${id}`;\n const isCurrentStep = id === currentStepId;\n const isLocked = status === 'locked';\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n let statusIcon;\n if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-child-btn'];\n if (status) stepClasses.push(`status-${status}`);\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon && (\n <div class=\"step-child-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n )}\n {label && (\n <div\n class=\"step-child-label\"\n id={labelId}\n >\n {loc(label)}\n </div>\n )}\n </button>\n </li>\n );\n }\n\n renderSpacer(pane: StructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n const shouldRender = (isLastStep && !!pane.children.length) \|\| !isLastStep;\n const spacerClasses = ['spacer'];\n if (!isLastStep) spacerClasses.push('has-sibling');\n return (\n shouldRender && (\n <div class={spacerClasses.join(' ')}>\n {!!pane.children.length && (\n <ul\n ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n aria-hidden={`${!isExpanded}`}\n >\n {pane.children.map((child, index, children) =>\n this.renderChildStepBtn(child, index, children.length, stepLabel)\n )}\n </ul>\n )}\n </div>\n )\n );\n }\n\n renderStepBtn(pane: StructuredPane, index: number) {\n const { currentStepId, structuredPanes } = this;\n const isLastStep = index === structuredPanes.length - 1;\n const { id, label, description, status, disabled: isPaneDisabled } = pane;\n const stepNumber = index + 1;\n const isCurrentStep = id === currentStepId;\n const labelId = label && `label-${id}`;\n const isLocked = status === 'locked';\n const stepLabel = label && loc(label);\n const descriptionId = label && description && `description-${id}`;\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n\n const childIds = pane.children.map(child => child.id);\n const isExpanded = isCurrentStep \|\| childIds.includes(currentStepId);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n\n {label && (\n <div>\n <div\n class=\"step-label\"\n id={labelId}\n >\n {stepLabel}\n </div>\n {description && (\n <div\n class=\"step-description\"\n id={descriptionId}\n >\n {loc(description)}\n </div>\n )}\n </div>\n )}\n </button>\n {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n </li>\n );\n }\n\n render() {\n return (\n <Fragment>\n <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n <div role=\"list\">\n <slot />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-stepper-vertical.entry.esm.js","sources":["src/components/q2-stepper-vertical/q2-stepper-vertical.scss?tag=q2-stepper-vertical&encapsulation=shadow","src/components/q2-stepper-vertical/q2-stepper-vertical.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: grid;\n grid-template-columns: var-list(--tct-stepper-vertical-list-width, var-prefixer(advanced-stepper-list-width), 180px) 1fr;\n gap: var-list(--tct-stepper-vertical-layout-gap, var-prefixer(advanced-stepper-layout-gap), 120px);\n}\n\n.step-label,\n.step-child-label {\n color: var(--comp-btn-label-color);\n font-size: var(--comp-btn-label-font-size);\n font-weight: var(--comp-label-font-weight, 400);\n min-height: 1.5em;\n}\n\n.step-label {\n @include line-clamp(var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 2));\n\n [aria-selected='true'] & {\n font-weight: var-list(\n --tct-stepper-vertical-btn-active-font-weight,\n var-prefixer(advanced-stepper-btn-active-font-weight),\n 600\n );\n }\n\n [aria-describedby] & {\n @include line-clamp(\n var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 1)\n );\n }\n}\n\n.step-child-label {\n grid-area: content;\n color: var(--comp-btn-label-color);\n}\n\n.step-description {\n color: var-list(\n --tct-stepper-vertical-description-color,\n var-prefixer(advanced-stepper-description-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(\n --tct-stepper-vertical-description-font-size,\n var-prefixer(advanced-stepper-description-font-size),\n --app-font-size-small,\n 12px\n );\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n}\n\nul {\n --comp-top-btn-icon-size: #{var-list(\n --tct-stepper-vertical-btn-icon-size,\n var-prefixer(advanced-stepper-btn-icon-size),\n 24px\n )};\n --comp-btn-icon-size: #{var(--comp-top-btn-icon-size)};\n --comp-btn-icon-visibility: #{var(--tct-stepper-vertical-btn-icon-visibility, visible)};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-3x,\n 15px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-btn-label-font-size,\n var-prefixer(advanced-stepper-btn-label-font-size),\n 16px\n )};\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-label-color,\n var-prefixer(advanced-stepper-label-color),\n --t-text,\n #4d4d4d\n )};\n --comp-tween: #{var-list(\n --tct-stepper-vertical-tween,\n var-prefixer(advanced-stepper-tween),\n --app-tween-1,\n unquote('0.2s ease')\n )};\n --comp-bullet-bg: #{var-list(\n --tct-stepper-vertical-bullet-active-background,\n var-prefixer(advanced-stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n\n list-style: none;\n margin: 0;\n padding: 0;\n\n ul {\n --comp-btn-icon-size: #{var-list(\n --tct-stepper-vertical-child-btn-icon-size,\n var-prefixer(advanced-stepper-child-btn-icon-size),\n 12px\n )};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-2x,\n 10px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-child-btn-label-font-size,\n var-prefixer(advanced-stepper-child-btn-label-font-size),\n --app-font-size-small,\n 12px\n )};\n\n &[aria-hidden='true'] {\n display: none;\n }\n }\n}\n\n\n.step-btn,\n.step-child-btn {\n display: grid;\n grid-template-columns: var(--comp-btn-icon-size) 1fr;\n gap: var(--comp-btn-content-gap);\n text-align: var-list(--tct-stepper-vertical-btn-text-align, var-prefixer(advanced-stepper-btn-text-align), start);\n grid-template-areas: 'icon content';\n align-items: center;\n width: 100%;\n position: relative;\n background: transparent;\n border: 0;\n cursor: pointer;\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n border-radius: var(--tct-stepper-vertical-step-focus-visible-border-radius, 0);\n\n &[aria-disabled]:not(.pane-disabled) {\n cursor: default;\n --comp-label-font-weight: 300;\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-btn-locked-color,\n var-prefixer(advanced-stepper-btn-locked-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n )};\n }\n\n &.pane-disabled {\n cursor: not-allowed;\n }\n\n &[aria-selected='true'] {\n --comp-label-font-weight: 600;\n }\n\n &:focus-visible {\n box-shadow: var(--tct-stepper-vertical-step-focus-visible-box-shadow, --const-double-focus-ring);\n }\n}\n\n.step-btn {\n min-height: var-list(--tct-stepper-vertical-btn-height, var-prefixer(advanced-stepper-btn-height), 40px);\n font-size: var-list(--tct-stepper-vertical-btn-font-size, var-prefixer(advanced-stepper-btn-font-size), 16px);\n\n --comp-active-color: var(--comp-bullet-bg);\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n --tct-stoplight-success: var(--comp-active-color);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-child-btn {\n --comp-active-color: var(--comp-bullet-bg);\n\n min-height: var-list(\n --tct-stepper-vertical-child-btn-height,\n var-prefixer(advanced-stepper-child-btn-height),\n 30px\n );\n padding-left: var-list(\n --tct-stepper-vertical-child-btn-left-padding,\n var-prefixer(advanced-stepper-child-btn-left-padding),\n --app-scale-2x,\n 10px\n );\n font-size: var-list(\n --tct-stepper-vertical-child-btn-font-size,\n var-prefixer(advanced-stepper-child-btn-font-size),\n 12px\n );\n border-left-width: var-list(\n --tct-stepper-vertical-child-btn-left-border-width,\n var-prefixer(advanced-stepper-child-btn-left-border-width),\n 3px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-btn-left-border-style,\n var-prefixer(advanced-stepper-child-btn-left-border-style),\n solid\n );\n border-left-color: transparent;\n\n &[aria-selected='true'] {\n --comp-btn-label-color: var(--comp-active-color);\n border-left-color: var(--comp-active-color);\n }\n\n &.status-error {\n --comp-btn-label-color: var(--const-stoplight-alert, #d20a0a);\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n }\n\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-content {\n grid-area: content;\n}\n\n.step-icon,\n.step-bubble,\n.step-child-icon {\n visibility: var(--comp-btn-icon-visibility);\n grid-area: icon;\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n line-height: 0;\n\n q2-icon {\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n}\n\n.step-icon,\n.step-bubble {\n background: var(--comp-active-color);\n color: var(--t-base, #ffffff);\n border-radius: 50%;\n\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n\n q2-icon {\n &:before {\n content: '';\n display: block;\n background: var(--t-base, #ffffff);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n\n // Text-based statuses\n .status-locked & {\n background: var(--t-gray-12, #d9d9d9);\n color: var(--t-text, #4d4d4d);\n }\n\n [aria-selected='true'] & {\n box-shadow:\n 0 0 0 2px var(--t-base, #ffffff),\n 0 0 0 4px var(--comp-active-color);\n }\n}\n\n.step-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n}\n\n.step-child-icon {\n q2-icon {\n --tct-icon-stroke-primary: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--comp-active-color);\n }\n [aria-selected='true'] & {\n q2-icon {\n fill: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--t-base, #ffffff);\n }\n }\n}\n\n.spacer {\n height: 0;\n border-left-width: var-list(\n --tct-stepper-vertical-child-border-width,\n var-prefixer(advanced-stepaer-child-border-width),\n 1px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-border-style,\n var-prefixer(advanced-stepper-child-border-style),\n solid\n );\n border-left-color: var-list(\n --tct-stepper-vertical-child-border-color,\n var-prefixer(advanced-stepper-child-border-color),\n --t-gray-12,\n #d9d9d9\n );\n overflow: hidden;\n margin-left: calc(var(--comp-top-btn-icon-size) / 2);\n transition: height var(--comp-tween);\n\n &.has-sibling {\n height: var-list(\n --tct-stepper-vertical-spacer-height,\n var-prefixer(advanced-stepper-spacer-height),\n --app-scale-6x,\n 30px\n );\n }\n\n ul {\n opacity: 0;\n transition: opacity var(--comp-tween);\n }\n\n &.is-opening,\n &.is-open {\n ul {\n display: block;\n opacity: 1 !important;\n }\n }\n\n &.is-open {\n overflow: visible;\n }\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\ninterface BaseStructuredPane {\n id: string;\n label: string;\n description: string;\n isActive: boolean;\n status: string;\n disabled: boolean;\n}\n\ninterface StructuredPane extends BaseStructuredPane {\n children: BaseStructuredPane[];\n}\n\n/*\n @name Vertical Stepper\n * @category Display\n * @summary Use for guiding users through a multi-step workflow with vertical progress.\n /\n@Component({ tag: 'q2-stepper-vertical', shadow: true, styleUrl: 'q2-stepper-vertical.scss' })\nexport class Q2StepperVertical implements ComponentInterface {\n // #region Own Properties\n\n expandedStepChildrenList: HTMLUListElement;\n mutationObserver: MutationObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n structuredPanes: StructuredPane[] = [];\n\n // #endregion\n // #region Public Property API\n\n /* The `id` of the currently selected `q2-stepper-pane`. /\n @Prop({ reflect: true, mutable: true })\n currentStepId: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n this.setDefaultPane();\n this.buildPaneList();\n const observer = new MutationObserver(this.determinePaneChanges);\n const observerOptions = {\n childList: true,\n };\n observer.observe(this.hostElement, observerOptions);\n this.allRootPanes.forEach(pane => {\n const childrenSlot = pane.querySelector('[slot=children]');\n if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStepId), 0);\n }\n\n componentWillUpdate() {\n this.expandedStepChildrenList = null;\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n\n this.openCurrentStepChildren();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStepId = event.detail.selectedStepId;\n }\n }\n\n @Listen('contentChange')\n contentChangeHandler() {\n this.buildPaneList();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStepBtn(this.currentStepId, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler() {\n this.buildPaneList();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to select a step corresponding with the step id.\n \n @testOnly\n */\n @Method()\n async selectStep(stepId: string) {\n const stepperPane = this.hostElement.shadowRoot.querySelector(`button.step-btn#${stepId}`);\n (stepperPane as HTMLButtonElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('currentStepId')\n currentStepChanged(stepId: string) {\n this.showStep(stepId);\n }\n\n // #endregion\n // #region Local Methods\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n get allRootPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n }\n\n buildPaneList = () => {\n const { allRootPanes } = this;\n if (!allRootPanes.length) return;\n\n this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n .map(this.extractDetails);\n\n accum.push({ ...this.extractDetails(pane), children });\n return accum;\n }, []);\n };\n\n determinePaneChanges = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type !== 'childList') return;\n if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n if (\n mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n )\n return;\n this.buildPaneList();\n });\n };\n\n extractDetails(pane: HTMLQ2StepperPaneElement) {\n const { label, description, status, disabled } = pane;\n if (!pane.id) pane.id = `step-${createGuid()}`;\n return {\n id: pane.id,\n label,\n description,\n status,\n disabled,\n };\n }\n\n focusStepBtn(stepId: string, forceFocus?: boolean) {\n const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[id=\"${stepId}\"]`);\n const isComponentActive = document.activeElement === this.hostElement;\n if (!stepBtn) return;\n if (isComponentActive \|\| forceFocus) {\n stepBtn.focus();\n }\n }\n\n getStepId(currentStepId: string, goTo: string) {\n const allEnabledStepBtns = Array.from(\n this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n 'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n )\n );\n const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('id') === currentStepId);\n\n let nextStepIndex;\n switch (goTo) {\n case 'prev':\n nextStepIndex = Math.max(currentStepIndex - 1, 0);\n break;\n\n case 'next':\n nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n break;\n\n case 'first':\n nextStepIndex = 0;\n break;\n\n case 'last':\n nextStepIndex = allEnabledStepBtns.length - 1;\n break;\n }\n\n return allEnabledStepBtns[nextStepIndex].getAttribute('id');\n }\n\n onStepClick = (event, stepId: string) => {\n event.stopPropagation();\n const { currentStepId } = this;\n if (stepId === currentStepId) return;\n const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n mirrorEmit(this, ['change', 'tctChange'], {\n selectedStep,\n selectedStepId: stepId,\n currentStepId,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n const { key } = event;\n\n let selectedStepId;\n switch (key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'prev');\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'next');\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'first');\n break;\n\n case 'End':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'last');\n break;\n }\n\n if (!selectedStepId) return;\n this.focusStepBtn(selectedStepId, true);\n };\n\n openCurrentStepChildren() {\n const { expandedStepChildrenList } = this;\n const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n allSpacers.forEach(spacer => {\n if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n if (spacer.classList.contains('is-open')) return;\n spacer.classList.add('is-opening');\n spacer.addEventListener(\n 'transitionend',\n () => {\n spacer.classList.remove('is-opening');\n spacer.classList.add('is-open');\n this.resizeIframe();\n },\n { once: true }\n );\n } else {\n spacer.removeAttribute('style');\n spacer.classList.remove('is-open', 'is-opening');\n }\n });\n }\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n setDefaultPane() {\n if (this.currentStepId) return;\n const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n if (!firstEnabledStep) return;\n if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n this.currentStepId = firstEnabledStep.id;\n }\n\n showStep(stepId: string) {\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepId);\n this.focusStepBtn(stepId);\n }\n\n showStepPane(stepId: string) {\n this.allPanes.forEach(pane => {\n if (pane.isActive \|\| pane.id === stepId) {\n pane.isActive = stepId === pane.id;\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderChildStepBtn(pane: BaseStructuredPane, index: number, children: number, parentLabel: string) {\n const { currentStepId } = this;\n const { id, label, status, disabled: isPaneDisabled } = pane;\n const stepNumber = index + 1;\n const labelId = label && `label-${id}`;\n const isCurrentStep = id === currentStepId;\n const isLocked = status === 'locked';\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n let statusIcon;\n if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-child-btn'];\n if (status) stepClasses.push(`status-${status}`);\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon && (\n <div class=\"step-child-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n )}\n {label && (\n <div\n class=\"step-child-label\"\n id={labelId}\n >\n {loc(label)}\n </div>\n )}\n </button>\n </li>\n );\n }\n\n renderSpacer(pane: StructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n const shouldRender = (isLastStep && !!pane.children.length) \|\| !isLastStep;\n const spacerClasses = ['spacer'];\n if (!isLastStep) spacerClasses.push('has-sibling');\n return (\n shouldRender && (\n <div class={spacerClasses.join(' ')}>\n {!!pane.children.length && (\n <ul\n ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n aria-hidden={`${!isExpanded}`}\n >\n {pane.children.map((child, index, children) =>\n this.renderChildStepBtn(child, index, children.length, stepLabel)\n )}\n </ul>\n )}\n </div>\n )\n );\n }\n\n renderStepBtn(pane: StructuredPane, index: number) {\n const { currentStepId, structuredPanes } = this;\n const isLastStep = index === structuredPanes.length - 1;\n const { id, label, description, status, disabled: isPaneDisabled } = pane;\n const stepNumber = index + 1;\n const isCurrentStep = id === currentStepId;\n const labelId = label && `label-${id}`;\n const isLocked = status === 'locked';\n const stepLabel = label && loc(label);\n const descriptionId = label && description && `description-${id}`;\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n\n const childIds = pane.children.map(child => child.id);\n const isExpanded = isCurrentStep \|\| childIds.includes(currentStepId);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n\n {label && (\n <div>\n <div\n class=\"step-label\"\n id={labelId}\n >\n {stepLabel}\n </div>\n {description && (\n <div\n class=\"step-description\"\n id={descriptionId}\n >\n {loc(description)}\n </div>\n )}\n </div>\n )}\n </button>\n {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n </li>\n );\n }\n\n render() {\n return (\n <Fragment>\n <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n <div role=\"list\">\n <slot />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as a, F as r, g as i } from "./index-CGkHOjh1.js";
-import { o as s, i as c, c as n, l as o } from "./index-C4PILj1_.js";
+import { o as s, i as c, c as n, l as o } from "./index-C5gj0T_3.js";
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
@@ -338,15 +338,15 @@ const d = class {
   }
   render() {
     return a(r, {
-      key: "a790b8dd9980fb56e96b103dbb52b89df222e349"
+      key: "b74806bb316b43d35b187507dd784c91ecd9d145"
     }, a("ul", {
-      key: "25b087f9746601005b9591139f2c13387c75f76a",
+      key: "fc2bbe45f3001f32a0d43819aa1e6d6bab24864d",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), a("div", {
-      key: "ee1b1f825884fde53c3975c66c60523b28fb87c7",
+      key: "f9a80a02cade13ddf7ddbc4bc5f60d0b7dd6ebb1",
       role: "list"
     }, a("slot", {
-      key: "27b316593c07cd178d0d46f6cc4531ab3a7e89ec"
+      key: "ff6ea3a8a330c204aedd87f77c6cc7eda8bdbdb9"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["q2StepperVerticalCss","Q2StepperVertical","constructor","hostRef","this","scheduledAfterRender","structuredPanes","buildPaneList","allRootPanes","length","Array","from","reduce","accum","pane","children","_b","_a","querySelector","filter","tagName","map","extractDetails","push","determinePaneChanges","mutations","forEach","mutation","type","addedNodes","removedNodes","nodeType","Node","ELEMENT_NODE","onStepClick","event","stepId","stopPropagation","currentStepId","selectedStep","allPanes","find","id","mirrorEmit","selectedStepId","onStepKeyDown","key","preventDefault","getStepId","focusStepBtn","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","setDefaultPane","observer","MutationObserver","observerOptions","childList","observe","hostElement","childrenSlot","componentDidLoad","overrideFocus","setTimeout","showStep","componentWillUpdate","expandedStepChildrenList","componentDidRender","fn","openCurrentStepChildren","defaultChangeHandler","target","getAttribute","detail","contentChangeHandler","delegateFocus","isEventFromElement","statusChangeHandler","selectStep","stepperPane","shadowRoot","click","currentStepChanged","querySelectorAll","label","description","status","disabled","createGuid","forceFocus","stepBtn","isComponentActive","document","activeElement","focus","goTo","allEnabledStepBtns","currentStepIndex","findIndex","btn","nextStepIndex","Math","max","min","allSpacers","spacer","contains","style","height","clientHeight","classList","add","addEventListener","remove","resizeIframe","once","removeAttribute","window","TectonElements","call","firstEnabledStep","showStepPane","isActive","renderChildStepBtn","index","parentLabel","isPaneDisabled","stepNumber","labelId","isCurrentStep","isLocked","btnLabel","loc","statusIcon","stepClasses","h","role","class","join","tabIndex","onKeyDown","ev","onClick","renderSpacer","stepLabel","isExpanded","isLastStep","shouldRender","spacerClasses","ref","el","child","renderStepBtn","descriptionId","childIds","includes","render","Fragment"],"sources":["src/components/q2-stepper-vertical/q2-stepper-vertical.scss?tag=q2-stepper-vertical&encapsulation=shadow","src/components/q2-stepper-vertical/q2-stepper-vertical.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: grid;\n grid-template-columns: var-list(--tct-stepper-vertical-list-width, var-prefixer(advanced-stepper-list-width), 180px) 1fr;\n gap: var-list(--tct-stepper-vertical-layout-gap, var-prefixer(advanced-stepper-layout-gap), 120px);\n}\n\n.step-label,\n.step-child-label {\n color: var(--comp-btn-label-color);\n font-size: var(--comp-btn-label-font-size);\n font-weight: var(--comp-label-font-weight, 400);\n min-height: 1.5em;\n}\n\n.step-label {\n @include line-clamp(var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 2));\n\n [aria-selected='true'] & {\n font-weight: var-list(\n --tct-stepper-vertical-btn-active-font-weight,\n var-prefixer(advanced-stepper-btn-active-font-weight),\n 600\n );\n }\n\n [aria-describedby] & {\n @include line-clamp(\n var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 1)\n );\n }\n}\n\n.step-child-label {\n grid-area: content;\n color: var(--comp-btn-label-color);\n}\n\n.step-description {\n color: var-list(\n --tct-stepper-vertical-description-color,\n var-prefixer(advanced-stepper-description-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(\n --tct-stepper-vertical-description-font-size,\n var-prefixer(advanced-stepper-description-font-size),\n --app-font-size-small,\n 12px\n );\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n}\n\nul {\n --comp-top-btn-icon-size: #{var-list(\n --tct-stepper-vertical-btn-icon-size,\n var-prefixer(advanced-stepper-btn-icon-size),\n 24px\n )};\n --comp-btn-icon-size: #{var(--comp-top-btn-icon-size)};\n --comp-btn-icon-visibility: #{var(--tct-stepper-vertical-btn-icon-visibility, visible)};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-3x,\n 15px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-btn-label-font-size,\n var-prefixer(advanced-stepper-btn-label-font-size),\n 16px\n )};\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-label-color,\n var-prefixer(advanced-stepper-label-color),\n --t-text,\n #4d4d4d\n )};\n --comp-tween: #{var-list(\n --tct-stepper-vertical-tween,\n var-prefixer(advanced-stepper-tween),\n --app-tween-1,\n unquote('0.2s ease')\n )};\n --comp-bullet-bg: #{var-list(\n --tct-stepper-vertical-bullet-active-background,\n var-prefixer(advanced-stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n\n list-style: none;\n margin: 0;\n padding: 0;\n\n ul {\n --comp-btn-icon-size: #{var-list(\n --tct-stepper-vertical-child-btn-icon-size,\n var-prefixer(advanced-stepper-child-btn-icon-size),\n 12px\n )};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-2x,\n 10px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-child-btn-label-font-size,\n var-prefixer(advanced-stepper-child-btn-label-font-size),\n --app-font-size-small,\n 12px\n )};\n\n &[aria-hidden='true'] {\n display: none;\n }\n }\n}\n\n\n.step-btn,\n.step-child-btn {\n display: grid;\n grid-template-columns: var(--comp-btn-icon-size) 1fr;\n gap: var(--comp-btn-content-gap);\n text-align: var-list(--tct-stepper-vertical-btn-text-align, var-prefixer(advanced-stepper-btn-text-align), start);\n grid-template-areas: 'icon content';\n align-items: center;\n width: 100%;\n position: relative;\n background: transparent;\n border: 0;\n cursor: pointer;\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n border-radius: var(--tct-stepper-vertical-step-focus-visible-border-radius, 0);\n\n &[aria-disabled]:not(.pane-disabled) {\n cursor: default;\n --comp-label-font-weight: 300;\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-btn-locked-color,\n var-prefixer(advanced-stepper-btn-locked-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n )};\n }\n\n &.pane-disabled {\n cursor: not-allowed;\n }\n\n &[aria-selected='true'] {\n --comp-label-font-weight: 600;\n }\n\n &:focus-visible {\n box-shadow: var(--tct-stepper-vertical-step-focus-visible-box-shadow, --const-double-focus-ring);\n }\n}\n\n.step-btn {\n min-height: var-list(--tct-stepper-vertical-btn-height, var-prefixer(advanced-stepper-btn-height), 40px);\n font-size: var-list(--tct-stepper-vertical-btn-font-size, var-prefixer(advanced-stepper-btn-font-size), 16px);\n\n --comp-active-color: var(--comp-bullet-bg);\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n --tct-stoplight-success: var(--comp-active-color);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-child-btn {\n --comp-active-color: var(--comp-bullet-bg);\n\n min-height: var-list(\n --tct-stepper-vertical-child-btn-height,\n var-prefixer(advanced-stepper-child-btn-height),\n 30px\n );\n padding-left: var-list(\n --tct-stepper-vertical-child-btn-left-padding,\n var-prefixer(advanced-stepper-child-btn-left-padding),\n --app-scale-2x,\n 10px\n );\n font-size: var-list(\n --tct-stepper-vertical-child-btn-font-size,\n var-prefixer(advanced-stepper-child-btn-font-size),\n 12px\n );\n border-left-width: var-list(\n --tct-stepper-vertical-child-btn-left-border-width,\n var-prefixer(advanced-stepper-child-btn-left-border-width),\n 3px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-btn-left-border-style,\n var-prefixer(advanced-stepper-child-btn-left-border-style),\n solid\n );\n border-left-color: transparent;\n\n &[aria-selected='true'] {\n --comp-btn-label-color: var(--comp-active-color);\n border-left-color: var(--comp-active-color);\n }\n\n &.status-error {\n --comp-btn-label-color: var(--const-stoplight-alert, #d20a0a);\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n }\n\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-content {\n grid-area: content;\n}\n\n.step-icon,\n.step-bubble,\n.step-child-icon {\n visibility: var(--comp-btn-icon-visibility);\n grid-area: icon;\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n line-height: 0;\n\n q2-icon {\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n}\n\n.step-icon,\n.step-bubble {\n background: var(--comp-active-color);\n color: var(--t-base, #ffffff);\n border-radius: 50%;\n\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n\n q2-icon {\n &:before {\n content: '';\n display: block;\n background: var(--t-base, #ffffff);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n\n // Text-based statuses\n .status-locked & {\n background: var(--t-gray-12, #d9d9d9);\n color: var(--t-text, #4d4d4d);\n }\n\n [aria-selected='true'] & {\n box-shadow:\n 0 0 0 2px var(--t-base, #ffffff),\n 0 0 0 4px var(--comp-active-color);\n }\n}\n\n.step-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n}\n\n.step-child-icon {\n q2-icon {\n --tct-icon-stroke-primary: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--comp-active-color);\n }\n [aria-selected='true'] & {\n q2-icon {\n fill: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--t-base, #ffffff);\n }\n }\n}\n\n.spacer {\n height: 0;\n border-left-width: var-list(\n --tct-stepper-vertical-child-border-width,\n var-prefixer(advanced-stepaer-child-border-width),\n 1px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-border-style,\n var-prefixer(advanced-stepper-child-border-style),\n solid\n );\n border-left-color: var-list(\n --tct-stepper-vertical-child-border-color,\n var-prefixer(advanced-stepper-child-border-color),\n --t-gray-12,\n #d9d9d9\n );\n overflow: hidden;\n margin-left: calc(var(--comp-top-btn-icon-size) / 2);\n transition: height var(--comp-tween);\n\n &.has-sibling {\n height: var-list(\n --tct-stepper-vertical-spacer-height,\n var-prefixer(advanced-stepper-spacer-height),\n --app-scale-6x,\n 30px\n );\n }\n\n ul {\n opacity: 0;\n transition: opacity var(--comp-tween);\n }\n\n &.is-opening,\n &.is-open {\n ul {\n display: block;\n opacity: 1 !important;\n }\n }\n\n &.is-open {\n overflow: visible;\n }\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\ninterface BaseStructuredPane {\n id: string;\n label: string;\n description: string;\n isActive: boolean;\n status: string;\n disabled: boolean;\n}\n\ninterface StructuredPane extends BaseStructuredPane {\n children: BaseStructuredPane[];\n}\n\n/*\n @name Vertical Stepper\n * @category Display\n * @summary Use for guiding users through a multi-step workflow with vertical progress.\n /\n@Component({ tag: 'q2-stepper-vertical', shadow: true, styleUrl: 'q2-stepper-vertical.scss' })\nexport class Q2StepperVertical implements ComponentInterface {\n // #region Own Properties\n\n expandedStepChildrenList: HTMLUListElement;\n mutationObserver: MutationObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n structuredPanes: StructuredPane[] = [];\n\n // #endregion\n // #region Public Property API\n\n /* The `id` of the currently selected `q2-stepper-pane`. /\n @Prop({ reflect: true, mutable: true })\n currentStepId: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n this.setDefaultPane();\n this.buildPaneList();\n const observer = new MutationObserver(this.determinePaneChanges);\n const observerOptions = {\n childList: true,\n };\n observer.observe(this.hostElement, observerOptions);\n this.allRootPanes.forEach(pane => {\n const childrenSlot = pane.querySelector('[slot=children]');\n if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStepId), 0);\n }\n\n componentWillUpdate() {\n this.expandedStepChildrenList = null;\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n\n this.openCurrentStepChildren();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStepId = event.detail.selectedStepId;\n }\n }\n\n @Listen('contentChange')\n contentChangeHandler() {\n this.buildPaneList();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStepBtn(this.currentStepId, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler() {\n this.buildPaneList();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to select a step corresponding with the step id.\n \n @testOnly\n */\n @Method()\n async selectStep(stepId: string) {\n const stepperPane = this.hostElement.shadowRoot.querySelector(`button.step-btn#${stepId}`);\n (stepperPane as HTMLButtonElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('currentStepId')\n currentStepChanged(stepId: string) {\n this.showStep(stepId);\n }\n\n // #endregion\n // #region Local Methods\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n get allRootPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n }\n\n buildPaneList = () => {\n const { allRootPanes } = this;\n if (!allRootPanes.length) return;\n\n this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n .map(this.extractDetails);\n\n accum.push({ ...this.extractDetails(pane), children });\n return accum;\n }, []);\n };\n\n determinePaneChanges = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type !== 'childList') return;\n if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n if (\n mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n )\n return;\n this.buildPaneList();\n });\n };\n\n extractDetails(pane: HTMLQ2StepperPaneElement) {\n const { label, description, status, disabled } = pane;\n if (!pane.id) pane.id = `step-${createGuid()}`;\n return {\n id: pane.id,\n label,\n description,\n status,\n disabled,\n };\n }\n\n focusStepBtn(stepId: string, forceFocus?: boolean) {\n const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[id=\"${stepId}\"]`);\n const isComponentActive = document.activeElement === this.hostElement;\n if (!stepBtn) return;\n if (isComponentActive \|\| forceFocus) {\n stepBtn.focus();\n }\n }\n\n getStepId(currentStepId: string, goTo: string) {\n const allEnabledStepBtns = Array.from(\n this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n 'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n )\n );\n const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('id') === currentStepId);\n\n let nextStepIndex;\n switch (goTo) {\n case 'prev':\n nextStepIndex = Math.max(currentStepIndex - 1, 0);\n break;\n\n case 'next':\n nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n break;\n\n case 'first':\n nextStepIndex = 0;\n break;\n\n case 'last':\n nextStepIndex = allEnabledStepBtns.length - 1;\n break;\n }\n\n return allEnabledStepBtns[nextStepIndex].getAttribute('id');\n }\n\n onStepClick = (event, stepId: string) => {\n event.stopPropagation();\n const { currentStepId } = this;\n if (stepId === currentStepId) return;\n const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n mirrorEmit(this, ['change', 'tctChange'], {\n selectedStep,\n selectedStepId: stepId,\n currentStepId,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n const { key } = event;\n\n let selectedStepId;\n switch (key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'prev');\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'next');\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'first');\n break;\n\n case 'End':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'last');\n break;\n }\n\n if (!selectedStepId) return;\n this.focusStepBtn(selectedStepId, true);\n };\n\n openCurrentStepChildren() {\n const { expandedStepChildrenList } = this;\n const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n allSpacers.forEach(spacer => {\n if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n if (spacer.classList.contains('is-open')) return;\n spacer.classList.add('is-opening');\n spacer.addEventListener(\n 'transitionend',\n () => {\n spacer.classList.remove('is-opening');\n spacer.classList.add('is-open');\n this.resizeIframe();\n },\n { once: true }\n );\n } else {\n spacer.removeAttribute('style');\n spacer.classList.remove('is-open', 'is-opening');\n }\n });\n }\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n setDefaultPane() {\n if (this.currentStepId) return;\n const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n if (!firstEnabledStep) return;\n if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n this.currentStepId = firstEnabledStep.id;\n }\n\n showStep(stepId: string) {\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepId);\n this.focusStepBtn(stepId);\n }\n\n showStepPane(stepId: string) {\n this.allPanes.forEach(pane => {\n if (pane.isActive \|\| pane.id === stepId) {\n pane.isActive = stepId === pane.id;\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderChildStepBtn(pane: BaseStructuredPane, index: number, children: number, parentLabel: string) {\n const { currentStepId } = this;\n const { id, label, status, disabled: isPaneDisabled } = pane;\n const stepNumber = index + 1;\n const labelId = label && `label-${id}`;\n const isCurrentStep = id === currentStepId;\n const isLocked = status === 'locked';\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n let statusIcon;\n if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-child-btn'];\n if (status) stepClasses.push(`status-${status}`);\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon && (\n <div class=\"step-child-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n )}\n {label && (\n <div\n class=\"step-child-label\"\n id={labelId}\n >\n {loc(label)}\n </div>\n )}\n </button>\n </li>\n );\n }\n\n renderSpacer(pane: StructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n const shouldRender = (isLastStep && !!pane.children.length) \|\| !isLastStep;\n const spacerClasses = ['spacer'];\n if (!isLastStep) spacerClasses.push('has-sibling');\n return (\n shouldRender && (\n <div class={spacerClasses.join(' ')}>\n {!!pane.children.length && (\n <ul\n ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n aria-hidden={`${!isExpanded}`}\n >\n {pane.children.map((child, index, children) =>\n this.renderChildStepBtn(child, index, children.length, stepLabel)\n )}\n </ul>\n )}\n </div>\n )\n );\n }\n\n renderStepBtn(pane: StructuredPane, index: number) {\n const { currentStepId, structuredPanes } = this;\n const isLastStep = index === structuredPanes.length - 1;\n const { id, label, description, status, disabled: isPaneDisabled } = pane;\n const stepNumber = index + 1;\n const isCurrentStep = id === currentStepId;\n const labelId = label && `label-${id}`;\n const isLocked = status === 'locked';\n const stepLabel = label && loc(label);\n const descriptionId = label && description && `description-${id}`;\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n\n const childIds = pane.children.map(child => child.id);\n const isExpanded = isCurrentStep \|\| childIds.includes(currentStepId);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n\n {label && (\n <div>\n <div\n class=\"step-label\"\n id={labelId}\n >\n {stepLabel}\n </div>\n {description && (\n <div\n class=\"step-description\"\n id={descriptionId}\n >\n {loc(description)}\n </div>\n )}\n </div>\n )}\n </button>\n {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n </li>\n );\n }\n\n render() {\n return (\n <Fragment>\n <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n <div role=\"list\">\n <slot />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["q2StepperVerticalCss","Q2StepperVertical","constructor","hostRef","this","scheduledAfterRender","structuredPanes","buildPaneList","allRootPanes","length","Array","from","reduce","accum","pane","children","_b","_a","querySelector","filter","tagName","map","extractDetails","push","determinePaneChanges","mutations","forEach","mutation","type","addedNodes","removedNodes","nodeType","Node","ELEMENT_NODE","onStepClick","event","stepId","stopPropagation","currentStepId","selectedStep","allPanes","find","id","mirrorEmit","selectedStepId","onStepKeyDown","key","preventDefault","getStepId","focusStepBtn","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","setDefaultPane","observer","MutationObserver","observerOptions","childList","observe","hostElement","childrenSlot","componentDidLoad","overrideFocus","setTimeout","showStep","componentWillUpdate","expandedStepChildrenList","componentDidRender","fn","openCurrentStepChildren","defaultChangeHandler","target","getAttribute","detail","contentChangeHandler","delegateFocus","isEventFromElement","statusChangeHandler","selectStep","stepperPane","shadowRoot","click","currentStepChanged","querySelectorAll","label","description","status","disabled","createGuid","forceFocus","stepBtn","isComponentActive","document","activeElement","focus","goTo","allEnabledStepBtns","currentStepIndex","findIndex","btn","nextStepIndex","Math","max","min","allSpacers","spacer","contains","style","height","clientHeight","classList","add","addEventListener","remove","resizeIframe","once","removeAttribute","window","TectonElements","call","firstEnabledStep","showStepPane","isActive","renderChildStepBtn","index","parentLabel","isPaneDisabled","stepNumber","labelId","isCurrentStep","isLocked","btnLabel","loc","statusIcon","stepClasses","h","role","class","join","tabIndex","onKeyDown","ev","onClick","renderSpacer","stepLabel","isExpanded","isLastStep","shouldRender","spacerClasses","ref","el","child","renderStepBtn","descriptionId","childIds","includes","render","Fragment"],"sources":["src/components/q2-stepper-vertical/q2-stepper-vertical.scss?tag=q2-stepper-vertical&encapsulation=shadow","src/components/q2-stepper-vertical/q2-stepper-vertical.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: grid;\n grid-template-columns: var-list(--tct-stepper-vertical-list-width, var-prefixer(advanced-stepper-list-width), 180px) 1fr;\n gap: var-list(--tct-stepper-vertical-layout-gap, var-prefixer(advanced-stepper-layout-gap), 120px);\n}\n\n.step-label,\n.step-child-label {\n color: var(--comp-btn-label-color);\n font-size: var(--comp-btn-label-font-size);\n font-weight: var(--comp-label-font-weight, 400);\n min-height: 1.5em;\n}\n\n.step-label {\n @include line-clamp(var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 2));\n\n [aria-selected='true'] & {\n font-weight: var-list(\n --tct-stepper-vertical-btn-active-font-weight,\n var-prefixer(advanced-stepper-btn-active-font-weight),\n 600\n );\n }\n\n [aria-describedby] & {\n @include line-clamp(\n var-list(--tct-stepper-label-line-count, var-prefixer(advanced-stepper-label-line-count), 1)\n );\n }\n}\n\n.step-child-label {\n grid-area: content;\n color: var(--comp-btn-label-color);\n}\n\n.step-description {\n color: var-list(\n --tct-stepper-vertical-description-color,\n var-prefixer(advanced-stepper-description-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(\n --tct-stepper-vertical-description-font-size,\n var-prefixer(advanced-stepper-description-font-size),\n --app-font-size-small,\n 12px\n );\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n}\n\nul {\n --comp-top-btn-icon-size: #{var-list(\n --tct-stepper-vertical-btn-icon-size,\n var-prefixer(advanced-stepper-btn-icon-size),\n 24px\n )};\n --comp-btn-icon-size: #{var(--comp-top-btn-icon-size)};\n --comp-btn-icon-visibility: #{var(--tct-stepper-vertical-btn-icon-visibility, visible)};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-3x,\n 15px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-btn-label-font-size,\n var-prefixer(advanced-stepper-btn-label-font-size),\n 16px\n )};\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-label-color,\n var-prefixer(advanced-stepper-label-color),\n --t-text,\n #4d4d4d\n )};\n --comp-tween: #{var-list(\n --tct-stepper-vertical-tween,\n var-prefixer(advanced-stepper-tween),\n --app-tween-1,\n unquote('0.2s ease')\n )};\n --comp-bullet-bg: #{var-list(\n --tct-stepper-vertical-bullet-active-background,\n var-prefixer(advanced-stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n\n list-style: none;\n margin: 0;\n padding: 0;\n\n ul {\n --comp-btn-icon-size: #{var-list(\n --tct-stepper-vertical-child-btn-icon-size,\n var-prefixer(advanced-stepper-child-btn-icon-size),\n 12px\n )};\n --comp-btn-content-gap: #{var-list(\n --tct-stepper-vertical-btn-gap,\n var-prefixer(advanced-stepper-btn-gap),\n --app-scale-2x,\n 10px\n )};\n --comp-btn-label-font-size: #{var-list(\n --tct-stepper-vertical-child-btn-label-font-size,\n var-prefixer(advanced-stepper-child-btn-label-font-size),\n --app-font-size-small,\n 12px\n )};\n\n &[aria-hidden='true'] {\n display: none;\n }\n }\n}\n\n\n.step-btn,\n.step-child-btn {\n display: grid;\n grid-template-columns: var(--comp-btn-icon-size) 1fr;\n gap: var(--comp-btn-content-gap);\n text-align: var-list(--tct-stepper-vertical-btn-text-align, var-prefixer(advanced-stepper-btn-text-align), start);\n grid-template-areas: 'icon content';\n align-items: center;\n width: 100%;\n position: relative;\n background: transparent;\n border: 0;\n cursor: pointer;\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n border-radius: var(--tct-stepper-vertical-step-focus-visible-border-radius, 0);\n\n &[aria-disabled]:not(.pane-disabled) {\n cursor: default;\n --comp-label-font-weight: 300;\n --comp-btn-label-color: #{var-list(\n --tct-stepper-vertical-btn-locked-color,\n var-prefixer(advanced-stepper-btn-locked-color),\n --t-textA,\n rgba(77, 77, 77, 0.77)\n )};\n }\n\n &.pane-disabled {\n cursor: not-allowed;\n }\n\n &[aria-selected='true'] {\n --comp-label-font-weight: 600;\n }\n\n &:focus-visible {\n box-shadow: var(--tct-stepper-vertical-step-focus-visible-box-shadow, --const-double-focus-ring);\n }\n}\n\n.step-btn {\n min-height: var-list(--tct-stepper-vertical-btn-height, var-prefixer(advanced-stepper-btn-height), 40px);\n font-size: var-list(--tct-stepper-vertical-btn-font-size, var-prefixer(advanced-stepper-btn-font-size), 16px);\n\n --comp-active-color: var(--comp-bullet-bg);\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n --tct-stoplight-success: var(--comp-active-color);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-child-btn {\n --comp-active-color: var(--comp-bullet-bg);\n\n min-height: var-list(\n --tct-stepper-vertical-child-btn-height,\n var-prefixer(advanced-stepper-child-btn-height),\n 30px\n );\n padding-left: var-list(\n --tct-stepper-vertical-child-btn-left-padding,\n var-prefixer(advanced-stepper-child-btn-left-padding),\n --app-scale-2x,\n 10px\n );\n font-size: var-list(\n --tct-stepper-vertical-child-btn-font-size,\n var-prefixer(advanced-stepper-child-btn-font-size),\n 12px\n );\n border-left-width: var-list(\n --tct-stepper-vertical-child-btn-left-border-width,\n var-prefixer(advanced-stepper-child-btn-left-border-width),\n 3px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-btn-left-border-style,\n var-prefixer(advanced-stepper-child-btn-left-border-style),\n solid\n );\n border-left-color: transparent;\n\n &[aria-selected='true'] {\n --comp-btn-label-color: var(--comp-active-color);\n border-left-color: var(--comp-active-color);\n }\n\n &.status-error {\n --comp-btn-label-color: var(--const-stoplight-alert, #d20a0a);\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n }\n\n &.status-locked {\n cursor: not-allowed;\n }\n}\n\n.step-content {\n grid-area: content;\n}\n\n.step-icon,\n.step-bubble,\n.step-child-icon {\n visibility: var(--comp-btn-icon-visibility);\n grid-area: icon;\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n line-height: 0;\n\n q2-icon {\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n --tct-stoplight-warning: var(--comp-active-color);\n }\n}\n\n.step-icon,\n.step-bubble {\n background: var(--comp-active-color);\n color: var(--t-base, #ffffff);\n border-radius: 50%;\n\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n\n q2-icon {\n &:before {\n content: '';\n display: block;\n background: var(--t-base, #ffffff);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n\n // Text-based statuses\n .status-locked & {\n background: var(--t-gray-12, #d9d9d9);\n color: var(--t-text, #4d4d4d);\n }\n\n [aria-selected='true'] & {\n box-shadow:\n 0 0 0 2px var(--t-base, #ffffff),\n 0 0 0 4px var(--comp-active-color);\n }\n}\n\n.step-bubble {\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n}\n\n.step-child-icon {\n q2-icon {\n --tct-icon-stroke-primary: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--comp-active-color);\n }\n [aria-selected='true'] & {\n q2-icon {\n fill: var(--comp-active-color);\n --tct-icon-stroke-secondary: var(--t-base, #ffffff);\n }\n }\n}\n\n.spacer {\n height: 0;\n border-left-width: var-list(\n --tct-stepper-vertical-child-border-width,\n var-prefixer(advanced-stepaer-child-border-width),\n 1px\n );\n border-left-style: var-list(\n --tct-stepper-vertical-child-border-style,\n var-prefixer(advanced-stepper-child-border-style),\n solid\n );\n border-left-color: var-list(\n --tct-stepper-vertical-child-border-color,\n var-prefixer(advanced-stepper-child-border-color),\n --t-gray-12,\n #d9d9d9\n );\n overflow: hidden;\n margin-left: calc(var(--comp-top-btn-icon-size) / 2);\n transition: height var(--comp-tween);\n\n &.has-sibling {\n height: var-list(\n --tct-stepper-vertical-spacer-height,\n var-prefixer(advanced-stepper-spacer-height),\n --app-scale-6x,\n 30px\n );\n }\n\n ul {\n opacity: 0;\n transition: opacity var(--comp-tween);\n }\n\n &.is-opening,\n &.is-open {\n ul {\n display: block;\n opacity: 1 !important;\n }\n }\n\n &.is-open {\n overflow: visible;\n }\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Event,\n EventEmitter,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\ninterface BaseStructuredPane {\n id: string;\n label: string;\n description: string;\n isActive: boolean;\n status: string;\n disabled: boolean;\n}\n\ninterface StructuredPane extends BaseStructuredPane {\n children: BaseStructuredPane[];\n}\n\n/*\n @name Vertical Stepper\n * @category Display\n * @summary Use for guiding users through a multi-step workflow with vertical progress.\n /\n@Component({ tag: 'q2-stepper-vertical', shadow: true, styleUrl: 'q2-stepper-vertical.scss' })\nexport class Q2StepperVertical implements ComponentInterface {\n // #region Own Properties\n\n expandedStepChildrenList: HTMLUListElement;\n mutationObserver: MutationObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n structuredPanes: StructuredPane[] = [];\n\n // #endregion\n // #region Public Property API\n\n /* The `id` of the currently selected `q2-stepper-pane`. /\n @Prop({ reflect: true, mutable: true })\n currentStepId: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter<{\n selectedStep: HTMLQ2StepperPaneElement;\n selectedStepId: string;\n currentStepId: string;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n this.setDefaultPane();\n this.buildPaneList();\n const observer = new MutationObserver(this.determinePaneChanges);\n const observerOptions = {\n childList: true,\n };\n observer.observe(this.hostElement, observerOptions);\n this.allRootPanes.forEach(pane => {\n const childrenSlot = pane.querySelector('[slot=children]');\n if (childrenSlot) observer.observe(childrenSlot, observerOptions);\n });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStepId), 0);\n }\n\n componentWillUpdate() {\n this.expandedStepChildrenList = null;\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n\n this.openCurrentStepChildren();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStepId = event.detail.selectedStepId;\n }\n }\n\n @Listen('contentChange')\n contentChangeHandler() {\n this.buildPaneList();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStepBtn(this.currentStepId, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler() {\n this.buildPaneList();\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to select a step corresponding with the step id.\n \n @testOnly\n */\n @Method()\n async selectStep(stepId: string) {\n const stepperPane = this.hostElement.shadowRoot.querySelector(`button.step-btn#${stepId}`);\n (stepperPane as HTMLButtonElement)?.click();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('currentStepId')\n currentStepChanged(stepId: string) {\n this.showStep(stepId);\n }\n\n // #endregion\n // #region Local Methods\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n get allRootPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n }\n\n buildPaneList = () => {\n const { allRootPanes } = this;\n if (!allRootPanes.length) return;\n\n this.structuredPanes = Array.from(allRootPanes).reduce((accum, pane) => {\n const children = Array.from(pane.querySelector('[slot=children]')?.children ?? [])\n .filter(({ tagName }) => tagName === 'Q2-STEPPER-PANE')\n .map(this.extractDetails);\n\n accum.push({ ...this.extractDetails(pane), children });\n return accum;\n }, []);\n };\n\n determinePaneChanges = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type !== 'childList') return;\n if (!mutation.addedNodes.length && !mutation.removedNodes.length) return;\n if (\n mutation.addedNodes[0]?.nodeType !== Node.ELEMENT_NODE &&\n mutation.removedNodes[0]?.nodeType !== Node.ELEMENT_NODE\n )\n return;\n this.buildPaneList();\n });\n };\n\n extractDetails(pane: HTMLQ2StepperPaneElement) {\n const { label, description, status, disabled } = pane;\n if (!pane.id) pane.id = `step-${createGuid()}`;\n return {\n id: pane.id,\n label,\n description,\n status,\n disabled,\n };\n }\n\n focusStepBtn(stepId: string, forceFocus?: boolean) {\n const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[id=\"${stepId}\"]`);\n const isComponentActive = document.activeElement === this.hostElement;\n if (!stepBtn) return;\n if (isComponentActive \|\| forceFocus) {\n stepBtn.focus();\n }\n }\n\n getStepId(currentStepId: string, goTo: string) {\n const allEnabledStepBtns = Array.from(\n this.hostElement.shadowRoot.querySelectorAll<HTMLQ2StepperPaneElement>(\n 'ul:not([aria-hidden=\"true\"]) > li > button:not([aria-disabled=\"true\"])'\n )\n );\n const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('id') === currentStepId);\n\n let nextStepIndex;\n switch (goTo) {\n case 'prev':\n nextStepIndex = Math.max(currentStepIndex - 1, 0);\n break;\n\n case 'next':\n nextStepIndex = Math.min(currentStepIndex + 1, allEnabledStepBtns.length - 1);\n break;\n\n case 'first':\n nextStepIndex = 0;\n break;\n\n case 'last':\n nextStepIndex = allEnabledStepBtns.length - 1;\n break;\n }\n\n return allEnabledStepBtns[nextStepIndex].getAttribute('id');\n }\n\n onStepClick = (event, stepId: string) => {\n event.stopPropagation();\n const { currentStepId } = this;\n if (stepId === currentStepId) return;\n const selectedStep = this.allPanes.find(pane => pane.id === stepId);\n\n mirrorEmit(this, ['change', 'tctChange'], {\n selectedStep,\n selectedStepId: stepId,\n currentStepId,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepId: string) => {\n const { key } = event;\n\n let selectedStepId;\n switch (key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'prev');\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'next');\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'first');\n break;\n\n case 'End':\n event.preventDefault();\n selectedStepId = this.getStepId(stepId, 'last');\n break;\n }\n\n if (!selectedStepId) return;\n this.focusStepBtn(selectedStepId, true);\n };\n\n openCurrentStepChildren() {\n const { expandedStepChildrenList } = this;\n const allSpacers = this.hostElement.shadowRoot.querySelectorAll<HTMLDivElement>('.spacer');\n allSpacers.forEach(spacer => {\n if (expandedStepChildrenList && spacer.contains(expandedStepChildrenList)) {\n spacer.style.height = `${expandedStepChildrenList.clientHeight}px`;\n if (spacer.classList.contains('is-open')) return;\n spacer.classList.add('is-opening');\n spacer.addEventListener(\n 'transitionend',\n () => {\n spacer.classList.remove('is-opening');\n spacer.classList.add('is-open');\n this.resizeIframe();\n },\n { once: true }\n );\n } else {\n spacer.removeAttribute('style');\n spacer.classList.remove('is-open', 'is-opening');\n }\n });\n }\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n setDefaultPane() {\n if (this.currentStepId) return;\n const firstEnabledStep = this.hostElement.querySelector('q2-stepper-pane');\n if (!firstEnabledStep) return;\n if (!firstEnabledStep.id) firstEnabledStep.id = `step-${createGuid()}`;\n this.currentStepId = firstEnabledStep.id;\n }\n\n showStep(stepId: string) {\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepId);\n this.focusStepBtn(stepId);\n }\n\n showStepPane(stepId: string) {\n this.allPanes.forEach(pane => {\n if (pane.isActive \|\| pane.id === stepId) {\n pane.isActive = stepId === pane.id;\n }\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderChildStepBtn(pane: BaseStructuredPane, index: number, children: number, parentLabel: string) {\n const { currentStepId } = this;\n const { id, label, status, disabled: isPaneDisabled } = pane;\n const stepNumber = index + 1;\n const labelId = label && `label-${id}`;\n const isCurrentStep = id === currentStepId;\n const isLocked = status === 'locked';\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.childNumber', [`${stepNumber}`, `${children}`, parentLabel]);\n\n let statusIcon;\n if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-child-btn'];\n if (status) stepClasses.push(`status-${status}`);\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon && (\n <div class=\"step-child-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n )}\n {label && (\n <div\n class=\"step-child-label\"\n id={labelId}\n >\n {loc(label)}\n </div>\n )}\n </button>\n </li>\n );\n }\n\n renderSpacer(pane: StructuredPane, stepLabel: string, isExpanded: boolean, isLastStep: boolean) {\n const shouldRender = (isLastStep && !!pane.children.length) \|\| !isLastStep;\n const spacerClasses = ['spacer'];\n if (!isLastStep) spacerClasses.push('has-sibling');\n return (\n shouldRender && (\n <div class={spacerClasses.join(' ')}>\n {!!pane.children.length && (\n <ul\n ref={el => isExpanded && (this.expandedStepChildrenList = el)}\n aria-hidden={`${!isExpanded}`}\n >\n {pane.children.map((child, index, children) =>\n this.renderChildStepBtn(child, index, children.length, stepLabel)\n )}\n </ul>\n )}\n </div>\n )\n );\n }\n\n renderStepBtn(pane: StructuredPane, index: number) {\n const { currentStepId, structuredPanes } = this;\n const isLastStep = index === structuredPanes.length - 1;\n const { id, label, description, status, disabled: isPaneDisabled } = pane;\n const stepNumber = index + 1;\n const isCurrentStep = id === currentStepId;\n const labelId = label && `label-${id}`;\n const isLocked = status === 'locked';\n const stepLabel = label && loc(label);\n const descriptionId = label && description && `description-${id}`;\n const btnLabel =\n !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n\n const childIds = pane.children.map(child => child.id);\n const isExpanded = isCurrentStep \|\| childIds.includes(currentStepId);\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-expanded={!!pane.children.length ? `${isExpanded}` : null}\n id={id}\n aria-disabled={isLocked ? 'true' : null}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => !isLocked && this.onStepKeyDown(ev, id)}\n onClick={ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id)}\n >\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n\n {label && (\n <div>\n <div\n class=\"step-label\"\n id={labelId}\n >\n {stepLabel}\n </div>\n {description && (\n <div\n class=\"step-description\"\n id={descriptionId}\n >\n {loc(description)}\n </div>\n )}\n </div>\n )}\n </button>\n {this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)}\n </li>\n );\n }\n\n render() {\n return (\n <Fragment>\n <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n <div role=\"list\">\n <slot />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-stepper.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-stepper.entry.esm.js","sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n position: relative;\n}\n\nul {\n --comp-bullet-background: #{var-list(\n --tct-stepper-bullet-active-background,\n var-prefixer(stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n --comp-divider-color: #{var-list(--tct-stepper-bullet-active-divider-color, --comp-bullet-background)};\n --comp-bullet-font-color: #{var-list(\n var-prefixer(stepper-bullet-active-font-color),\n --t-primary-font-color,\n #ffffff\n )};\n --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n --comp-btn-icon-visibility: #{var(--tct-stepper-btn-icon-visibility, visible)};\n --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n overflow-x: auto;\n display: flex;\n justify-content: center;\n list-style: none;\n padding: 0;\n padding: var-list(var-prefixer(stepper-list-padding), 2px);\n margin: 0;\n gap: var(--comp-step-gap);\n @include tiny-scrollbar();\n\n .has-scroll & {\n justify-content: unset;\n }\n}\n\nli {\n min-height: var-list(var-prefixer(stepper-min-height), 50px);\n flex: 0 0 auto;\n position: relative;\n width: var(--comp-step-width);\n text-align: center;\n max-width: 150px;\n min-width: 80px;\n}\n\n.step-btn {\n position: relative;\n background: transparent;\n border: 0;\n border-radius: var(--tct-stepper-btn-border-radius, 0);\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: calc(100% - 4px);\n width: 100%;\n transition: var(--comp-tween);\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n margin-top: 2px;\n\n --comp-active-color: var(--comp-bullet-background);\n --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-active-box-shadow, --comp-default-box-shadow)};\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-complete-box-shadow, --comp-default-box-shadow)};\n --tct-stoplight-success: var(--comp-active-color);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-error-box-shadow, --comp-default-box-shadow)};\n --tct-stoplight-warning: var(--comp-active-color);\n }\n\n &:focus-visible {\n box-shadow: var-list(--tct-stepper-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &.pane-disabled {\n cursor: not-allowed;\n }\n\n &[aria-disabled='true'], &.pane-disabled {\n cursor: not-allowed;\n\n &:not(.pane-disabled),\n &:not(.pane-disabled) + .step-divider {\n --comp-bullet-font-color: #{var-list(\n --tct-stepper-bullet-disabled-font-color,\n var-prefixer(stepper-bullet-inactive-font-color),\n --t-text,\n #4d4d4d\n )};\n --comp-bullet-background: #{var-list(\n --tct-stepper-bullet-disabled-background,\n --tct-stepper-bullet-inactive-background,\n var-prefixer(stepper-bullet-inactive-bg),\n --t-gray-12,\n #d9d9d9\n )};\n --comp-divider-color: #{var-list(--tct-stepper-bullet-disabled-divider-color, --comp-bullet-background)};\n --comp-bullet-inactive-box-shadow: #{var-list(--tct-stepper-bullet-disabled-box-shadow, none)};\n }\n }\n}\n.step-icon,\n.step-bubble {\n visibility: var(--comp-btn-icon-visibility);\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n margin: var(--comp-bullet-gap) auto;\n color: var(--comp-bullet-font-color);\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n min-height: var(--comp-btn-icon-size);\n font-size: var(--comp-bullet-font-size);\n transition: var(--comp-tween);\n transition-property: background, color;\n border-radius: 50%;\n position: relative;\n box-shadow: var(--comp-bullet-inactive-box-shadow);\n\n q2-icon {\n --tct-icon-fill: var(--comp-active-color);\n &:before {\n content: '';\n display: block;\n background: var(--comp-bullet-font-color);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n [aria-selected='true'] & {\n box-shadow: var(--comp-bullet-active-box-shadow);\n font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n }\n}\n\n.step-bubble {\n background: var(--comp-bullet-background);\n}\n\n.step-divider {\n width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n border: 0;\n border-top: 1px solid var(--comp-divider-color);\n height: 0;\n position: absolute;\n margin: 0;\n transition: border var(--comp-tween);\n}\n\n.step-container {\n position: relative;\n}\n\n.step-label {\n color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n font-size: var-list(\n --tct-stepper-label-font-size,\n var-prefixer(stepper-title-font-size),\n --app-font-size-small,\n 12px\n );\n line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n @include line-clamp(var(--tct-stepper-label-line-count, 2));\n font-weight: var-list(--tct-stepper-label-font-weight, var-prefixer(stepper-active-font-weight), 600);\n\n [aria-describedby] & {\n -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n }\n}\n\n.step-description {\n color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n\n // For description slot on q2-stepper-pane\n .ellipsize {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: var(--comp-step-width);\n display: block;\n }\n}\n\n.gradient-left,\n.gradient-right {\n z-index: 1;\n position: absolute;\n top: 0;\n height: 100%;\n width: 18px;\n}\n\n.gradient-left {\n background-image: linear-gradient(\n to left,\n var(--t-base-a0, rgba(255, 255, 255, 0)),\n var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n var(--t-base, #ffffff) 100%\n );\n left: 0;\n}\n\n.gradient-right {\n background-image: linear-gradient(\n to right,\n var(--t-base-a0, rgba(255, 255, 255, 0)),\n var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n var(--t-base, #ffffff) 100%\n );\n right: 0;\n}\n\n.btn-left,\n.btn-right {\n --tct-icon-size: 18px;\n --tct-btn-icon-hover-background: transparent;\n --tct-btn-icon-width: 22px;\n --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n position: absolute;\n top: calc(50% - 22px);\n z-index: 2;\n q2-icon {\n --tct-icon-stroke-width: 3;\n }\n}\n\n.btn-left {\n left: 0;\n}\n\n.btn-right {\n right: 0;\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Method,\n Event,\n EventEmitter,\n Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Stepper\n * @category Display\n * @summary Use for guiding users through a multi-step workflow with horizontal progress.\n /\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n // #region Own Properties\n\n listElement: HTMLUListElement;\n resizeObserver: ResizeObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n contentChangeTriggerCount: number = 0;\n\n @State()\n scrollEnabled: boolean = false;\n\n @State()\n showScrollLeft: boolean = false;\n\n @State()\n showScrollRight: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /* The currently selected step. /\n @Prop({ reflect: true, mutable: true })\n currentStep: number;\n\n /\n The last step the user may navigate to.\n * @info\n * Will be managed automatically if not provided.\n /\n @Prop({ reflect: true, mutable: true })\n lastEnabledStep: number;\n\n /\n Used to determine the number of steps in the stepper.\n * @private\n /\n @Prop({ mutable: true })\n stepCount: number;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentWillLoad() {\n this.handleUndefinedStepProperties();\n if ('ResizeObserver' in window) {\n this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n }\n this.checkForPanes();\n }\n\n componentDidLoad() {\n this.resizeObserver?.observe(this.listElement);\n this.checkScrollState();\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStep \|\| 1), 0);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStep = event.detail.selectedStep \|\| this.currentStep;\n }\n }\n\n @Listen('contentChange')\n contentChangeHandler() {\n this.contentChangeTriggerCount += 1;\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStep(this.currentStep, true, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler(event: CustomEvent) {\n const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n if (index > -1) {\n this.allPanes[index].status = event.detail.status;\n this.renderStepBtn(index);\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking a step in the stepper and emitting the change event.\n \n You may provide either the step number or the stepper pane id.\n \n If the value is invalid or the step is locked, the method will do nothing.\n * @testOnly\n */\n @Method()\n async selectStep(value: number \| string) {\n let stepListItem;\n switch (typeof value) {\n case 'number':\n if (value > this.lastEnabledStep \|\| value < 1) break;\n stepListItem = this.listElement.children[value - 1];\n if (!stepListItem) return;\n (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n break;\n case 'string':\n const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n if (!pane) break;\n const stepIndex = this.allPanes.indexOf(pane);\n if (stepIndex + 1 > this.lastEnabledStep \|\| stepIndex < 0) break;\n stepListItem = this.listElement.children[stepIndex];\n if (!stepListItem) break;\n (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n break;\n default:\n break;\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('currentStep')\n currentStepChanged(stepNumber: number) {\n this.showStep(stepNumber);\n }\n\n @Watch('lastEnabledStep')\n @Watch('currentStep')\n lastEnabledStepChanged() {\n this.handleUndefinedStepProperties();\n }\n\n // #endregion\n // #region Local Methods\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n checkForPanes = () => {\n const { allPanes } = this;\n if (!allPanes.length) return;\n\n allPanes.forEach(pane => {\n if (!pane.id) pane.id = `step-${createGuid()}`;\n });\n this.stepCount = allPanes.length;\n };\n\n checkScrollState = () => {\n if (!this.listElement) return;\n const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n this.scrollEnabled = scrollWidth > clientWidth;\n this.showScrollLeft = !!scrollLeft;\n this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n };\n\n focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n const { listElement } = this;\n if (!listElement) return;\n\n const stepListItem = listElement.children[stepNumber - 1] as HTMLLIElement;\n const isActive = document.activeElement === this.hostElement;\n if (!stepListItem) return;\n if (isActive \|\| forceFocus) {\n (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n }\n\n if (scrollIntoView) {\n const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n this.listElement.scrollTo({\n left,\n behavior: 'smooth',\n });\n }\n }\n\n getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' \| 'label') {\n const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);\n return slot?.outerHTML ?? loc(pane[slotName]);\n }\n\n handleUndefinedStepProperties() {\n const { currentStep, lastEnabledStep } = this;\n if (currentStep && lastEnabledStep) return;\n if (!currentStep && lastEnabledStep) {\n this.currentStep = lastEnabledStep;\n } else if (currentStep && !lastEnabledStep) {\n this.lastEnabledStep = currentStep;\n } else if (!currentStep && !lastEnabledStep) {\n this.currentStep = 1;\n this.lastEnabledStep = 1;\n }\n }\n\n onScrollBtnClick = (direction: 'left' \| 'right') => {\n const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n this.listElement.scrollBy({\n left: direction === 'left' ? -scrollAmount : scrollAmount,\n behavior: 'smooth',\n });\n };\n\n onSlotChange = () => {\n this.checkForPanes();\n this.checkScrollState();\n };\n\n onStepClick = (event, selectedStep: number) => {\n event.stopPropagation();\n const { currentStep, stepCount, lastEnabledStep } = this;\n if (selectedStep > lastEnabledStep \|\| selectedStep === currentStep) return;\n\n mirrorEmit(this, ['change', 'tctChange'], {\n selectedStep,\n lastEnabledStep,\n currentStep,\n stepCount,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n const { lastEnabledStep, stepCount } = this;\n const { key } = event;\n\n let selectedStep;\n switch (key) {\n case 'ArrowLeft':\n event.preventDefault();\n selectedStep = Math.max(stepNumber - 1, 0);\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n selectedStep = Math.min(stepNumber + 1, stepCount);\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStep = 1;\n break;\n\n case 'End':\n event.preventDefault();\n selectedStep = lastEnabledStep;\n break;\n }\n\n if (!selectedStep) return;\n this.focusStep(selectedStep, true);\n };\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n showStep(stepNumber: number) {\n if (stepNumber > this.lastEnabledStep) {\n const { currentStep, stepCount } = this;\n this.lastEnabledStep = stepNumber;\n mirrorEmit(this, ['change', 'tctChange'], {\n selectedStep: null,\n lastEnabledStep: stepNumber,\n currentStep,\n stepCount,\n });\n }\n\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepNumber);\n this.focusStep(stepNumber, this.scrollEnabled);\n }\n\n showStepPane(stepNumber: number) {\n this.allPanes.forEach((pane, index) => {\n pane.isActive = stepNumber === index + 1;\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderStepBtn(stepIndex: number) {\n const { allPanes, stepCount, lastEnabledStep, currentStep } = this;\n const pane = allPanes?.[stepIndex] ?? null;\n const { id, status } = pane;\n const label = this.getPaneSlotOrProperty(pane, 'label');\n const description = this.getPaneSlotOrProperty(pane, 'description');\n\n const stepNumber = stepIndex + 1;\n const isCurrentStep = stepNumber === currentStep;\n const labelId = !!label && `label-${id}`;\n const descriptionId = !!label && !!description && `description-${id}`;\n const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n const isLocked = status === 'locked';\n const isPaneDisabled = pane.disabled;\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n const disabled = isLocked \|\| stepNumber > lastEnabledStep;\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-disabled={disabled ? 'true' : undefined}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n onClick={ev => !isPaneDisabled && !disabled && this.onStepClick(ev, stepNumber)}\n >\n <Fragment>\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n {labelId && (\n <div\n class=\"step-label\"\n id={labelId}\n innerHTML={label}\n ></div>\n )}\n {labelId && descriptionId && (\n <div\n class=\"step-description\"\n id={descriptionId}\n innerHTML={description}\n ></div>\n )}\n </Fragment>\n </button>\n {stepIndex ? <div class=\"step-divider\"></div> : ''}\n </li>\n );\n }\n\n render() {\n const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n const containerClasses = ['step-container'];\n if (scrollEnabled) containerClasses.push('has-scroll');\n\n return (\n <Fragment>\n <div class={containerClasses.join(' ')}>\n {scrollEnabled && (\n <Fragment>\n <div\n class=\"gradient-left\"\n hidden={!showScrollLeft}\n ></div>\n <div\n class=\"gradient-right\"\n hidden={!showScrollRight}\n ></div>\n\n <q2-btn\n class=\"btn-left\"\n hideLabel={true}\n hidden={!this.showScrollLeft}\n label={loc('tecton.element.stepper.scrollLeft')}\n onTctClick={() => this.onScrollBtnClick('left')}\n >\n <q2-icon type=\"chevron-left\"></q2-icon>\n </q2-btn>\n\n <q2-btn\n class=\"btn-right\"\n hideLabel={true}\n hidden={!this.showScrollRight}\n label={loc('tecton.element.stepper.scrollRight')}\n onTctClick={() => this.onScrollBtnClick('right')}\n >\n <q2-icon type=\"chevron-right\"></q2-icon>\n </q2-btn>\n </Fragment>\n )}\n\n <ul\n onScroll={this.checkScrollState}\n ref={el => (this.listElement = el)}\n role=\"tablist\"\n >\n {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n </ul>\n </div>\n <div role=\"list\">\n <slot onSlotchange={() => this.onSlotChange()} />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"q2-stepper.entry.esm.js","sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n display: block;\n position: relative;\n}\n\nul {\n --comp-bullet-background: #{var-list(\n --tct-stepper-bullet-active-background,\n var-prefixer(stepper-bullet-active-bg),\n --t-primary,\n #0079c1\n )};\n --comp-divider-color: #{var-list(--tct-stepper-bullet-active-divider-color, --comp-bullet-background)};\n --comp-bullet-font-color: #{var-list(\n var-prefixer(stepper-bullet-active-font-color),\n --t-primary-font-color,\n #ffffff\n )};\n --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n --comp-btn-icon-visibility: #{var(--tct-stepper-btn-icon-visibility, visible)};\n --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n overflow-x: auto;\n display: flex;\n justify-content: center;\n list-style: none;\n padding: 0;\n padding: var-list(var-prefixer(stepper-list-padding), 2px);\n margin: 0;\n gap: var(--comp-step-gap);\n @include tiny-scrollbar();\n\n .has-scroll & {\n justify-content: unset;\n }\n}\n\nli {\n min-height: var-list(var-prefixer(stepper-min-height), 50px);\n flex: 0 0 auto;\n position: relative;\n width: var(--comp-step-width);\n text-align: center;\n max-width: 150px;\n min-width: 80px;\n}\n\n.step-btn {\n position: relative;\n background: transparent;\n border: 0;\n border-radius: var(--tct-stepper-btn-border-radius, 0);\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: calc(100% - 4px);\n width: 100%;\n transition: var(--comp-tween);\n padding: 0;\n transition-property: box-shadow;\n outline: none;\n margin-top: 2px;\n\n --comp-active-color: var(--comp-bullet-background);\n --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-active-box-shadow, --comp-default-box-shadow)};\n &.status-complete {\n --comp-active-color: var(--const-stoplight-success, #0e8a00);\n --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-complete-box-shadow, --comp-default-box-shadow)};\n --tct-stoplight-success: var(--comp-active-color);\n }\n &.status-error {\n --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);\n --comp-bullet-active-box-shadow: #{var-list(--tct-stepper-bullet-error-box-shadow, --comp-default-box-shadow)};\n --tct-stoplight-warning: var(--comp-active-color);\n }\n\n &:focus-visible {\n box-shadow: var-list(--tct-stepper-btn-focus-visible-box-shadow, --const-double-focus-ring);\n }\n\n &.pane-disabled {\n cursor: not-allowed;\n }\n\n &[aria-disabled='true'], &.pane-disabled {\n cursor: not-allowed;\n\n &:not(.pane-disabled),\n &:not(.pane-disabled) + .step-divider {\n --comp-bullet-font-color: #{var-list(\n --tct-stepper-bullet-disabled-font-color,\n var-prefixer(stepper-bullet-inactive-font-color),\n --t-text,\n #4d4d4d\n )};\n --comp-bullet-background: #{var-list(\n --tct-stepper-bullet-disabled-background,\n --tct-stepper-bullet-inactive-background,\n var-prefixer(stepper-bullet-inactive-bg),\n --t-gray-12,\n #d9d9d9\n )};\n --comp-divider-color: #{var-list(--tct-stepper-bullet-disabled-divider-color, --comp-bullet-background)};\n --comp-bullet-inactive-box-shadow: #{var-list(--tct-stepper-bullet-disabled-box-shadow, none)};\n }\n }\n}\n.step-icon,\n.step-bubble {\n visibility: var(--comp-btn-icon-visibility);\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n margin: var(--comp-bullet-gap) auto;\n color: var(--comp-bullet-font-color);\n width: var(--comp-btn-icon-size);\n height: var(--comp-btn-icon-size);\n min-height: var(--comp-btn-icon-size);\n font-size: var(--comp-bullet-font-size);\n transition: var(--comp-tween);\n transition-property: background, color;\n border-radius: 50%;\n position: relative;\n box-shadow: var(--comp-bullet-inactive-box-shadow);\n\n q2-icon {\n --tct-icon-fill: var(--comp-active-color);\n &:before {\n content: '';\n display: block;\n background: var(--comp-bullet-font-color);\n position: absolute;\n width: 80%;\n height: 80%;\n left: 11%;\n top: 11%;\n border-radius: 50%;\n }\n }\n .status-complete &,\n .status-error & {\n background: var(--comp-active-color);\n }\n [aria-selected='true'] & {\n box-shadow: var(--comp-bullet-active-box-shadow);\n font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n }\n}\n\n.step-bubble {\n background: var(--comp-bullet-background);\n}\n\n.step-divider {\n width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n border: 0;\n border-top: 1px solid var(--comp-divider-color);\n height: 0;\n position: absolute;\n margin: 0;\n transition: border var(--comp-tween);\n}\n\n.step-container {\n position: relative;\n}\n\n.step-label {\n color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n font-size: var-list(\n --tct-stepper-label-font-size,\n var-prefixer(stepper-title-font-size),\n --app-font-size-small,\n 12px\n );\n line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n @include line-clamp(var(--tct-stepper-label-line-count, 2));\n font-weight: var-list(--tct-stepper-label-font-weight, var-prefixer(stepper-active-font-weight), 600);\n\n [aria-describedby] & {\n -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n }\n}\n\n.step-description {\n color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n // Add padding for descenders\n padding-bottom: 0.2em;\n\n // For description slot on q2-stepper-pane\n .ellipsize {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: var(--comp-step-width);\n display: block;\n }\n}\n\n.gradient-left,\n.gradient-right {\n z-index: 1;\n position: absolute;\n top: 0;\n height: 100%;\n width: 18px;\n}\n\n.gradient-left {\n background-image: linear-gradient(\n to left,\n var(--t-base-a0, rgba(255, 255, 255, 0)),\n var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n var(--t-base, #ffffff) 100%\n );\n left: 0;\n}\n\n.gradient-right {\n background-image: linear-gradient(\n to right,\n var(--t-base-a0, rgba(255, 255, 255, 0)),\n var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n var(--t-base, #ffffff) 100%\n );\n right: 0;\n}\n\n.btn-left,\n.btn-right {\n --tct-icon-size: 18px;\n --tct-btn-icon-hover-background: transparent;\n --tct-btn-icon-width: 22px;\n --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n position: absolute;\n top: calc(50% - 22px);\n z-index: 2;\n q2-icon {\n --tct-icon-stroke-width: 3;\n }\n}\n\n.btn-left {\n left: 0;\n}\n\n.btn-right {\n right: 0;\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n ComponentInterface,\n State,\n Watch,\n Listen,\n Method,\n Event,\n EventEmitter,\n Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement, createGuid } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/*\n @name Stepper\n * @category Display\n * @summary Use for guiding users through a multi-step workflow with horizontal progress.\n /\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n // #region Own Properties\n\n listElement: HTMLUListElement;\n resizeObserver: ResizeObserver;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n contentChangeTriggerCount: number = 0;\n\n @State()\n scrollEnabled: boolean = false;\n\n @State()\n showScrollLeft: boolean = false;\n\n @State()\n showScrollRight: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /* The currently selected step. /\n @Prop({ reflect: true, mutable: true })\n currentStep: number;\n\n /\n The last step the user may navigate to.\n * @info\n * Will be managed automatically if not provided.\n /\n @Prop({ reflect: true, mutable: true })\n lastEnabledStep: number;\n\n /\n Used to determine the number of steps in the stepper.\n * @private\n /\n @Prop({ mutable: true })\n stepCount: number;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter;\n\n /\n Emitted when the selected step changes.\n * @legacyEvent\n /\n @Event()\n tctChange: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentWillLoad() {\n this.handleUndefinedStepProperties();\n if ('ResizeObserver' in window) {\n this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n }\n this.checkForPanes();\n }\n\n componentDidLoad() {\n this.resizeObserver?.observe(this.listElement);\n this.checkScrollState();\n overrideFocus(this.hostElement);\n setTimeout(() => this.showStep(this.currentStep \|\| 1), 0);\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n const { hostElement } = this;\n if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n this.currentStep = event.detail.selectedStep \|\| this.currentStep;\n }\n }\n\n @Listen('contentChange')\n contentChangeHandler() {\n this.contentChangeTriggerCount += 1;\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusStep(this.currentStep, true, true);\n }\n\n @Listen('statusChange')\n statusChangeHandler(event: CustomEvent) {\n const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n if (index > -1) {\n this.allPanes[index].status = event.detail.status;\n this.renderStepBtn(index);\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking a step in the stepper and emitting the change event.\n \n You may provide either the step number or the stepper pane id.\n \n If the value is invalid or the step is locked, the method will do nothing.\n * @testOnly\n */\n @Method()\n async selectStep(value: number \| string) {\n let stepListItem;\n switch (typeof value) {\n case 'number':\n if (value > this.lastEnabledStep \|\| value < 1) break;\n stepListItem = this.listElement.children[value - 1];\n if (!stepListItem) return;\n (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n break;\n case 'string':\n const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n if (!pane) break;\n const stepIndex = this.allPanes.indexOf(pane);\n if (stepIndex + 1 > this.lastEnabledStep \|\| stepIndex < 0) break;\n stepListItem = this.listElement.children[stepIndex];\n if (!stepListItem) break;\n (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n break;\n default:\n break;\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('currentStep')\n currentStepChanged(stepNumber: number) {\n this.showStep(stepNumber);\n }\n\n @Watch('lastEnabledStep')\n @Watch('currentStep')\n lastEnabledStepChanged() {\n this.handleUndefinedStepProperties();\n }\n\n // #endregion\n // #region Local Methods\n\n get allPanes() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n }\n\n checkForPanes = () => {\n const { allPanes } = this;\n if (!allPanes.length) return;\n\n allPanes.forEach(pane => {\n if (!pane.id) pane.id = `step-${createGuid()}`;\n });\n this.stepCount = allPanes.length;\n };\n\n checkScrollState = () => {\n if (!this.listElement) return;\n const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n this.scrollEnabled = scrollWidth > clientWidth;\n this.showScrollLeft = !!scrollLeft;\n this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n };\n\n focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n const { listElement } = this;\n if (!listElement) return;\n\n const stepListItem = listElement.children[stepNumber - 1] as HTMLLIElement;\n const isActive = document.activeElement === this.hostElement;\n if (!stepListItem) return;\n if (isActive \|\| forceFocus) {\n (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n }\n\n if (scrollIntoView) {\n const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n this.listElement.scrollTo({\n left,\n behavior: 'smooth',\n });\n }\n }\n\n getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' \| 'label') {\n const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);\n return slot?.outerHTML ?? loc(pane[slotName]);\n }\n\n handleUndefinedStepProperties() {\n const { currentStep, lastEnabledStep } = this;\n if (currentStep && lastEnabledStep) return;\n if (!currentStep && lastEnabledStep) {\n this.currentStep = lastEnabledStep;\n } else if (currentStep && !lastEnabledStep) {\n this.lastEnabledStep = currentStep;\n } else if (!currentStep && !lastEnabledStep) {\n this.currentStep = 1;\n this.lastEnabledStep = 1;\n }\n }\n\n onScrollBtnClick = (direction: 'left' \| 'right') => {\n const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n this.listElement.scrollBy({\n left: direction === 'left' ? -scrollAmount : scrollAmount,\n behavior: 'smooth',\n });\n };\n\n onSlotChange = () => {\n this.checkForPanes();\n this.checkScrollState();\n };\n\n onStepClick = (event, selectedStep: number) => {\n event.stopPropagation();\n const { currentStep, stepCount, lastEnabledStep } = this;\n if (selectedStep > lastEnabledStep \|\| selectedStep === currentStep) return;\n\n mirrorEmit(this, ['change', 'tctChange'], {\n selectedStep,\n lastEnabledStep,\n currentStep,\n stepCount,\n });\n };\n\n onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n const { lastEnabledStep, stepCount } = this;\n const { key } = event;\n\n let selectedStep;\n switch (key) {\n case 'ArrowLeft':\n event.preventDefault();\n selectedStep = Math.max(stepNumber - 1, 0);\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n selectedStep = Math.min(stepNumber + 1, stepCount);\n break;\n\n case 'Home':\n event.preventDefault();\n selectedStep = 1;\n break;\n\n case 'End':\n event.preventDefault();\n selectedStep = lastEnabledStep;\n break;\n }\n\n if (!selectedStep) return;\n this.focusStep(selectedStep, true);\n };\n\n resizeIframe() {\n return window?.TectonElements?.resizeIframe?.();\n }\n\n showStep(stepNumber: number) {\n if (stepNumber > this.lastEnabledStep) {\n const { currentStep, stepCount } = this;\n this.lastEnabledStep = stepNumber;\n mirrorEmit(this, ['change', 'tctChange'], {\n selectedStep: null,\n lastEnabledStep: stepNumber,\n currentStep,\n stepCount,\n });\n }\n\n this.scheduledAfterRender.push(this.resizeIframe);\n this.showStepPane(stepNumber);\n this.focusStep(stepNumber, this.scrollEnabled);\n }\n\n showStepPane(stepNumber: number) {\n this.allPanes.forEach((pane, index) => {\n pane.isActive = stepNumber === index + 1;\n });\n }\n\n // #endregion\n // #region Render Methods\n\n renderStepBtn(stepIndex: number) {\n const { allPanes, stepCount, lastEnabledStep, currentStep } = this;\n const pane = allPanes?.[stepIndex] ?? null;\n const { id, status } = pane;\n const label = this.getPaneSlotOrProperty(pane, 'label');\n const description = this.getPaneSlotOrProperty(pane, 'description');\n\n const stepNumber = stepIndex + 1;\n const isCurrentStep = stepNumber === currentStep;\n const labelId = !!label && `label-${id}`;\n const descriptionId = !!label && !!description && `description-${id}`;\n const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n let statusIcon;\n if (status === 'complete') statusIcon = 'success-filled';\n else if (status === 'error') statusIcon = 'warning-filled';\n\n const stepClasses = ['step-btn'];\n if (status) stepClasses.push(`status-${status}`);\n const isLocked = status === 'locked';\n const isPaneDisabled = pane.disabled;\n if (isPaneDisabled) stepClasses.push('pane-disabled');\n const disabled = isLocked \|\| stepNumber > lastEnabledStep;\n\n return (\n <li role=\"presentation\">\n <button\n class={stepClasses.join(' ')}\n type=\"button\"\n aria-labelledby={labelId}\n aria-describedBy={descriptionId}\n aria-label={btnLabel}\n aria-selected={`${isCurrentStep}`}\n aria-disabled={disabled ? 'true' : undefined}\n role=\"tab\"\n tabIndex={isCurrentStep ? 0 : -1}\n onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n onClick={ev => !isPaneDisabled && !disabled && this.onStepClick(ev, stepNumber)}\n >\n <Fragment>\n {statusIcon ? (\n <div class=\"step-icon\">\n <q2-icon type={statusIcon}></q2-icon>\n </div>\n ) : (\n <div class=\"step-bubble\">{stepNumber}</div>\n )}\n {labelId && (\n <div\n class=\"step-label\"\n id={labelId}\n innerHTML={label}\n ></div>\n )}\n {labelId && descriptionId && (\n <div\n class=\"step-description\"\n id={descriptionId}\n innerHTML={description}\n ></div>\n )}\n </Fragment>\n </button>\n {stepIndex ? <div class=\"step-divider\"></div> : ''}\n </li>\n );\n }\n\n render() {\n const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n const containerClasses = ['step-container'];\n if (scrollEnabled) containerClasses.push('has-scroll');\n\n return (\n <Fragment>\n <div class={containerClasses.join(' ')}>\n {scrollEnabled && (\n <Fragment>\n <div\n class=\"gradient-left\"\n hidden={!showScrollLeft}\n ></div>\n <div\n class=\"gradient-right\"\n hidden={!showScrollRight}\n ></div>\n\n <q2-btn\n class=\"btn-left\"\n hideLabel={true}\n hidden={!this.showScrollLeft}\n label={loc('tecton.element.stepper.scrollLeft')}\n onTctClick={() => this.onScrollBtnClick('left')}\n >\n <q2-icon type=\"chevron-left\"></q2-icon>\n </q2-btn>\n\n <q2-btn\n class=\"btn-right\"\n hideLabel={true}\n hidden={!this.showScrollRight}\n label={loc('tecton.element.stepper.scrollRight')}\n onTctClick={() => this.onScrollBtnClick('right')}\n >\n <q2-icon type=\"chevron-right\"></q2-icon>\n </q2-btn>\n </Fragment>\n )}\n\n <ul\n onScroll={this.checkScrollState}\n ref={el => (this.listElement = el)}\n role=\"tablist\"\n >\n {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n </ul>\n </div>\n <div role=\"list\">\n <slot onSlotchange={() => this.onSlotChange()} />\n </div>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"names":[],"mappings":"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"}