q2-tecton-elements 1.51.1 → 1.52.1

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2StepperVerticalCss","Q2StepperVerticalStyle0","Q2StepperVertical","this","scheduledAfterRender","buildPaneList","allRootPanes","length","structuredPanes","Array","from","reduce","accum","pane","children","_b","_a","querySelector","filter","tagName","map","extractDetails","push","Object","assign","determinePaneChanges","mutations","forEach","mutation","type","addedNodes","removedNodes","nodeType","Node","ELEMENT_NODE","onStepClick","event","stepId","stopPropagation","currentStepId","selectedStep","allPanes","find","id","change","emit","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","delegateFocus","isEventFromElement","statusChangeHandler","currentStepChanged","querySelectorAll","label","description","status","createGuid","forceFocus","stepBtn","shadowRoot","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","selectStep","stepperPane","click","renderChildStepBtn","index","parentLabel","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-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.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\n    &[aria-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    &[aria-selected='true'] {\n        --comp-label-font-weight: 600;\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    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';\n\ninterface IBaseStructuredPane {\n    id: string;\n    label: string;\n    description: string;\n    isActive: boolean;\n    status: string;\n}\n\ninterface IStructuredPane extends IBaseStructuredPane {\n    children: IBaseStructuredPane[];\n}\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: IStructuredPane[] = [];\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     */\n    @Event()\n    change: 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('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 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 } = pane;\n        if (!pane.id) pane.id = `step-${createGuid()}`;\n        return {\n            id: pane.id,\n            label,\n            description,\n            status,\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        this.change.emit({\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 Test 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    // #endregion\n    // #region Render Methods\n\n    renderChildStepBtn(pane: IBaseStructuredPane, index: number, children: number, parentLabel: string) {\n        const { currentStepId } = this;\n        const { id, label, status } = 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\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 => !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: IStructuredPane, 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: IStructuredPane, index: number) {\n        const { currentStepId, structuredPanes } = this;\n        const isLastStep = index === structuredPanes.length - 1;\n        const { id, label, description, status } = 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\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 => !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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"}

package/dist/q2-tecton-elements/q2-stepper.entry.js

@@ -0,0 +1,332 @@
+import { r as t, c as e, h as r, F as i, g as o } from "./index-7a5365e2.js";
+
+import { o as s, i as a, l } from "./index-d18e2a20.js";
+
+const n = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled]{cursor:not-allowed}.step-btn[aria-disabled],.step-btn[aria-disabled]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-background:var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected] .step-icon,[aria-selected] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-background);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}';
+
+const c = n;
+
+const p = class {
+  constructor(r) {
+    t(this, r);
+    this.change = e(this, "change", 7);
+    this.scheduledAfterRender = [];
+    this.checkForPanes = () => {
+      const {allPanes: t} = this;
+      if (!t.length) return;
+      this.stepCount = t.length;
+    };
+    this.checkScrollState = () => {
+      if (!this.listElement) return;
+      const {scrollLeft: t, scrollWidth: e, clientWidth: r} = this.listElement;
+      this.scrollEnabled = e > r;
+      this.showScrollLeft = !!t;
+      this.showScrollRight = e !== t + r;
+    };
+    this.onScrollBtnClick = t => {
+      const e = Math.floor(this.listElement.clientWidth / 2);
+      this.listElement.scrollBy({
+        left: t === "left" ? -e : e,
+        behavior: "smooth"
+      });
+    };
+    this.onSlotChange = () => {
+      this.checkForPanes();
+      this.checkScrollState();
+    };
+    this.onStepClick = (t, e) => {
+      t.stopPropagation();
+      const {currentStep: r, stepCount: i, lastEnabledStep: o} = this;
+      if (e > o || e === r) return;
+      this.change.emit({
+        selectedStep: e,
+        lastEnabledStep: o,
+        currentStep: r,
+        stepCount: i
+      });
+    };
+    this.onStepKeyDown = (t, e) => {
+      const {lastEnabledStep: r, stepCount: i} = this;
+      const {key: o} = t;
+      let s;
+      switch (o) {
+       case "ArrowLeft":
+        t.preventDefault();
+        s = Math.max(e - 1, 0);
+        break;
+
+       case "ArrowRight":
+        t.preventDefault();
+        s = Math.min(e + 1, i);
+        break;
+
+       case "Home":
+        t.preventDefault();
+        s = 1;
+        break;
+
+       case "End":
+        t.preventDefault();
+        s = r;
+        break;
+      }
+      if (!s) return;
+      this.focusStep(s, true);
+    };
+    this.contentChangeTriggerCount = 0;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
+    this.currentStep = 1;
+    this.lastEnabledStep = undefined;
+    this.stepCount = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    var t;
+    (t = this.resizeObserver) === null || t === void 0 ? void 0 : t.disconnect();
+    this.resizeObserver = null;
+  }
+  componentWillLoad() {
+    if (!this.lastEnabledStep) this.lastEnabledStep = this.currentStep || 1;
+    this.resizeObserver = new ResizeObserver((() => this.checkScrollState()));
+    this.checkForPanes();
+  }
+  componentDidLoad() {
+    this.resizeObserver.observe(this.listElement);
+    this.checkScrollState();
+    s(this.hostElement);
+    setTimeout((() => this.showStep(this.currentStep || 1)), 0);
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach((t => t()));
+    this.scheduledAfterRender = [];
+  }
+  // #endregion
+  // #region Listeners
+  defaultChangeHandler(t) {
+    const {hostElement: e} = this;
+    if (t.target === e && !e.getAttribute("onchange") && !!t.detail) {
+      this.currentStep = t.detail.selectedStep;
+    }
+  }
+  contentChangeHandler() {
+    this.contentChangeTriggerCount += 1;
+  }
+  delegateFocus(t) {
+    if (!a(t, this.hostElement)) return;
+    this.focusStep(this.currentStep, true, true);
+  }
+  statusChangeHandler(t) {
+    const e = Array.from(this.allPanes).findIndex((e => t.detail.id === e.id));
+    if (e > -1) {
+      this.allPanes[e].status = t.detail.status;
+      this.renderStepBtn(e);
+    }
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * Emulates clicking a step in the stepper and emitting the change event.
+     *
+     * You may provide either the step number or the stepper pane id.
+     *
+     * If the value is invalid or the step is locked, the method will do nothing.
+     * @testOnly
+     */
+  async selectStep(t) {
+    var e, r;
+    let i;
+    switch (typeof t) {
+     case "number":
+      if (t > this.lastEnabledStep || t < 1) break;
+      i = this.listElement.children[t - 1];
+      if (!i) return;
+      (e = i.firstElementChild) === null || e === void 0 ? void 0 : e.click();
+      break;
+
+     case "string":
+      const o = this.hostElement.querySelector(`#${t}`);
+      if (!o) break;
+      const s = this.allPanes.indexOf(o);
+      if (s + 1 > this.lastEnabledStep || s < 0) break;
+      i = this.listElement.children[s];
+      if (!i) break;
+      (r = i.firstElementChild) === null || r === void 0 ? void 0 : r.click();
+      break;
+    }
+  }
+  // #endregion
+  // #region Watchers
+  currentStepChanged(t) {
+    this.showStep(t);
+  }
+  // #endregion
+  // #region Local Methods
+  get allPanes() {
+    return Array.from(this.hostElement.querySelectorAll("q2-stepper-pane"));
+  }
+  focusStep(t, e, r) {
+    var i;
+    const o = this.listElement.children[t - 1];
+    const s = document.activeElement === this.hostElement;
+    if (!o) return;
+    if (s || r) {
+      (i = o.firstElementChild) === null || i === void 0 ? void 0 : i.focus();
+    }
+    if (e) {
+      const t = o.offsetLeft - this.listElement.clientWidth / 2;
+      this.listElement.scrollTo({
+        left: t,
+        behavior: "smooth"
+      });
+    }
+  }
+  getPaneSlotOrProperty(t, e) {
+    var r;
+    const i = t.querySelector(`:scope > [slot="${e}"]`);
+    return (r = i === null || i === void 0 ? void 0 : i.outerHTML) !== null && r !== void 0 ? r : l(t[e]);
+  }
+  resizeIframe() {
+    var t, e;
+    return (e = (t = window === null || window === void 0 ? void 0 : window.TectonElements) === null || t === void 0 ? void 0 : t.resizeIframe) === null || e === void 0 ? void 0 : e.call(t);
+  }
+  showStep(t) {
+    if (t > this.lastEnabledStep) {
+      const {currentStep: e, stepCount: r} = this;
+      this.lastEnabledStep = t;
+      this.change.emit({
+        selectedStep: null,
+        lastEnabledStep: t,
+        currentStep: e,
+        stepCount: r
+      });
+    }
+    this.scheduledAfterRender.push(this.resizeIframe);
+    this.showStepPane(t);
+    this.focusStep(t, this.scrollEnabled);
+  }
+  showStepPane(t) {
+    this.allPanes.forEach(((e, r) => {
+      e.isActive = t === r + 1;
+    }));
+  }
+  // #endregion
+  // #region Render Methods
+  renderStepBtn(t) {
+    var e;
+    const {allPanes: o, stepCount: s, currentStep: a, lastEnabledStep: n} = this;
+    const c = (e = o === null || o === void 0 ? void 0 : o[t]) !== null && e !== void 0 ? e : null;
+    const {id: p, status: d} = c;
+    const b = this.getPaneSlotOrProperty(c, "label");
+    const h = this.getPaneSlotOrProperty(c, "description");
+    const v = t + 1;
+    const u = v === a;
+    const f = !!b && `label-${p}`;
+    const g = !!b && !!h && `description-${p}`;
+    const m = !b && l("tecton.element.stepper.number", [ `${v}`, `${s}` ]);
+    let w;
+    if (d === "complete") w = "success-filled"; else if (d === "error") w = "warning-filled";
+    const x = [ "step-btn" ];
+    if (d) x.push(`status-${d}`);
+    const k = d === "locked";
+    const y = k || v > n;
+    return r("li", {
+      role: "presentation"
+    }, r("button", {
+      class: x.join(" "),
+      type: "button",
+      "aria-labelledby": f,
+      "aria-describedBy": g,
+      "aria-label": m,
+      "aria-selected": u,
+      "aria-disabled": y ? "true" : null,
+      role: "tab",
+      tabIndex: u ? 0 : -1,
+      onKeyDown: t => this.onStepKeyDown(t, v),
+      onClick: t => !k && this.onStepClick(t, v)
+    }, r(i, null, w ? r("div", {
+      class: "step-icon"
+    }, r("q2-icon", {
+      type: w
+    })) : r("div", {
+      class: "step-bubble"
+    }, v), f && r("div", {
+      class: "step-label",
+      id: f,
+      innerHTML: b
+    }), f && g && r("div", {
+      class: "step-description",
+      id: g,
+      innerHTML: h
+    }))), t ? r("div", {
+      class: "step-divider"
+    }) : "");
+  }
+  render() {
+    const {stepCount: t, scrollEnabled: e, showScrollLeft: o, showScrollRight: s} = this;
+    const a = [ "step-container" ];
+    if (e) a.push("has-scroll");
+    return r(i, {
+      key: "6d0d42f27d4436e93b7db71d712ae3e5bf7cadef"
+    }, r("div", {
+      key: "2952abf0254fee877c0a01410566b6565a70aece",
+      class: a.join(" ")
+    }, e && r(i, {
+      key: "78b2987cba124bb01dc0750a730cbc565faf84fe"
+    }, r("div", {
+      key: "279b093250a1fe4c9ec691d11925bc4d93623e51",
+      class: "gradient-left",
+      hidden: !o
+    }), r("div", {
+      key: "d3f2cbd219c30d6cdfc5d5ea65b9c3499797c586",
+      class: "gradient-right",
+      hidden: !s
+    }), r("q2-btn", {
+      key: "bd12aacdf58cd14fe08cc1ecd685601b4c26f819",
+      class: "btn-left",
+      hideLabel: true,
+      hidden: !this.showScrollLeft,
+      label: l("tecton.element.stepper.scrollLeft"),
+      onClick: () => this.onScrollBtnClick("left")
+    }, r("q2-icon", {
+      key: "49de401623341d7bca00bab0c73b37060721fba8",
+      type: "chevron-left"
+    })), r("q2-btn", {
+      key: "86f643a3ef1941d90e21fc91fb48e8777eb76cc0",
+      class: "btn-right",
+      hideLabel: true,
+      hidden: !this.showScrollRight,
+      label: l("tecton.element.stepper.scrollRight"),
+      onClick: () => this.onScrollBtnClick("right")
+    }, r("q2-icon", {
+      key: "1513aa1fe84ad10a18736ba55ea0d566047e6198",
+      type: "chevron-right"
+    }))), r("ul", {
+      key: "849990a3dfeda33180c820f1cc1ee9712707fce5",
+      onScroll: this.checkScrollState,
+      ref: t => this.listElement = t,
+      role: "tablist"
+    }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), r("div", {
+      key: "91abf7d1621b76b80fb698543d9f63af4a81f22b",
+      role: "list"
+    }, r("slot", {
+      key: "da162b8adde663dd483300f868679dcabde0cf09",
+      onSlotchange: () => this.onSlotChange()
+    })));
+  }
+  get hostElement() {
+    return o(this);
+  }
+  static get watchers() {
+    return {
+      currentStep: [ "currentStepChanged" ]
+    };
+  }
+};
+
+p.style = c;
+
+export { p as q2_stepper };
+//# sourceMappingURL=q2-stepper.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2StepperCss","Q2StepperStyle0","Q2Stepper","this","scheduledAfterRender","checkForPanes","allPanes","length","stepCount","checkScrollState","listElement","scrollLeft","scrollWidth","clientWidth","scrollEnabled","showScrollLeft","showScrollRight","onScrollBtnClick","direction","scrollAmount","Math","floor","scrollBy","left","behavior","onSlotChange","onStepClick","event","selectedStep","stopPropagation","currentStep","lastEnabledStep","change","emit","onStepKeyDown","stepNumber","key","preventDefault","max","min","focusStep","disconnectedCallback","_a","resizeObserver","disconnect","componentWillLoad","ResizeObserver","componentDidLoad","observe","overrideFocus","hostElement","setTimeout","showStep","componentDidRender","forEach","fn","defaultChangeHandler","target","getAttribute","detail","contentChangeHandler","contentChangeTriggerCount","delegateFocus","isEventFromElement","statusChangeHandler","index","Array","from","findIndex","el","id","status","renderStepBtn","selectStep","value","stepListItem","children","firstElementChild","click","pane","querySelector","stepIndex","indexOf","_b","currentStepChanged","querySelectorAll","scrollIntoView","forceFocus","isActive","document","activeElement","focus","offsetLeft","scrollTo","getPaneSlotOrProperty","slotName","slot","outerHTML","loc","resizeIframe","window","TectonElements","call","push","showStepPane","label","description","isCurrentStep","labelId","descriptionId","btnLabel","statusIcon","stepClasses","isLocked","disabled","h","role","class","join","type","tabIndex","onKeyDown","ev","onClick","Fragment","innerHTML","render","containerClasses","hidden","hideLabel","onScroll","ref","keys","map","onSlotchange"],"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-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-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    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    &.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\n    &[aria-disabled] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\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\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] & {\n        box-shadow:\n            0 0 0 2px var(--t-base, #ffffff),\n            0 0 0 4px var(--comp-active-color);\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-bullet-background);\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\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\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 } from 'src/utils';\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 = 1;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ 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     */\n    @Event()\n    change: 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        if (!this.lastEnabledStep) this.lastEnabledStep = this.currentStep || 1;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\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;\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    // #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        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 stepListItem = this.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 = pane.querySelector<HTMLElement>(`:scope > [slot=\"${slotName}\"]`);\n        return slot?.outerHTML ?? loc(pane[slotName]);\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        this.change.emit({\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            this.change.emit({\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, currentStep, lastEnabledStep } = 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 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' : null}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && 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                                onClick={() => 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                                onClick={() => 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"],"mappings":"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"}