q2-tecton-elements 1.45.1 → 1.45.3

package/dist/q2-tecton-elements/p-4f7e2c8a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2StepperVerticalCss","Q2StepperVerticalStyle0","Q2StepperVertical","this","scheduledAfterRender","determinePaneChanges","mutations","forEach","mutation","type","addedNodes","length","removedNodes","_a","nodeType","Node","ELEMENT_NODE","_b","buildPaneList","allRootPanes","structuredPanes","Array","from","reduce","accum","pane","children","querySelector","filter","tagName","map","extractDetails","push","Object","assign","onStepClick","event","stepId","stopPropagation","currentStepId","selectedStep","allPanes","find","id","change","emit","selectedStepId","onStepKeyDown","key","preventDefault","getStepId","focusStepBtn","componentWillLoad","setDefaultPane","observer","MutationObserver","observerOptions","childList","observe","hostElement","childrenSlot","mutationObserver","componentDidLoad","overrideFocus","setTimeout","showStep","componentWillUpdate","expandedStepChildrenList","componentDidRender","fn","openCurrentStepChildren","disconnectedCallback","disconnect","querySelectorAll","firstEnabledStep","createGuid","goTo","allEnabledStepBtns","shadowRoot","currentStepIndex","findIndex","btn","getAttribute","nextStepIndex","Math","max","min","resizeIframe","showStepPane","label","description","status","window","TectonElements","call","allSpacers","spacer","contains","style","height","clientHeight","classList","add","addEventListener","remove","once","removeAttribute","isActive","forceFocus","stepBtn","isComponentActive","document","activeElement","focus","defaultChangeHandler","target","detail","delegateFocus","isEventFromElement","statusChangeHandler","currentStepChanged","renderStepBtn","index","isLastStep","stepNumber","isCurrentStep","labelId","isLocked","stepLabel","loc","descriptionId","btnLabel","statusIcon","stepClasses","childIds","child","isExpanded","includes","h","role","class","join","tabIndex","onKeyDown","ev","onClick","renderSpacer","shouldRender","spacerClasses","ref","el","renderChildStepBtn","parentLabel","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    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\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-icon-fill: 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        --tct-icon-fill: var(--comp-active-color);\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} 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    /** The `id` of the currently selected `q2-stepper-pane`. */\n    @Prop({ reflect: true, mutable: true }) currentStepId: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{\n        selectedStep: HTMLQ2StepperPaneElement;\n        selectedStepId: string;\n        currentStepId: string;\n    }>;\n    @State() structuredPanes: IStructuredPane[] = [];\n    mutationObserver: MutationObserver;\n    expandedStepChildrenList: HTMLUListElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    /// LifeCycle Hooks ///\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    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n    get allRootPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>(':scope > q2-stepper-pane'));\n    }\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    /// Helpers ///\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    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    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(\n            btn => btn.getAttribute('aria-controls') === currentStepId\n        );\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('aria-controls');\n    }\n\n    showStep(stepId: string) {\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepId);\n        this.focusStepBtn(stepId);\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    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    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\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    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    focusStepBtn(stepId: string, forceFocus?: boolean) {\n        const stepBtn = this.hostElement.shadowRoot.querySelector<HTMLElement>(`button[aria-controls=\"${stepId}\"]`);\n        const isComponentActive = document.activeElement === this.hostElement;\n        if (!stepBtn) return;\n        if (isComponentActive || forceFocus) {\n            stepBtn.focus();\n        }\n    }\n\n    /// Listeners ///\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    /// Watchers ///\n    @Watch('currentStepId')\n    currentStepChanged(stepId: string) {\n        this.showStep(stepId);\n    }\n\n    /// Event Handlers ///\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    /// DOM ///\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                    aria-controls={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    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    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                    aria-controls={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    render() {\n        return (\n            <Fragment>\n                <ul role=\"tablist\">{this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))}</ul>\n                <div>\n                    <slot />\n                </div>\n            </Fragment>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-7f663376.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,F as i,g as n}from"./p-a5f18e27.js";import{w as s,a as o,h as r,i as d,o as h,l as a}from"./p-42302f6f.js";const l="*{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:inline-flex}:host([block]){display:block}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";const c=l;const u=class{constructor(e){t(this,e);this.dropdownItemSelector="q2-dropdown-item:not([disabled]):not([separator])";this.focusToggle=()=>{this.controlElement.shadowRoot.querySelector("button").focus()};this.openDropdown=()=>{if(this.open)return;this.open=true};this.closeDropdown=()=>{if(!this.open)return;this.open=false};this.onClickElsewhere=t=>{const e=t.target;if(e.localName==="click-elsewhere"){t.stopPropagation();const{popoverElement:e}=this;if(!e)return;e.open=false}};this.onToggleClick=()=>{if(this.open){this.closeDropdown()}else{this.openDropdown()}};this.onToggleKeydown=t=>{if(["ArrowUp","Up"].includes(t.key)){t.preventDefault();this.openDropdown();this.focusLastItem();return}if(["ArrowDown","Down"].includes(t.key)){t.preventDefault();this.openDropdown();this.focusFirstItem();return}if(["Escape","Esc"].includes(t.key)){t.preventDefault();this.focusToggle();this.closeDropdown();return}};this.onDropdownMenuClick=async t=>{if(t.target.localName!=="q2-dropdown-item"){return}const e=t.target;if(!e.disabled&&!e.separator){this.closeDropdown();await s();this.focusToggle()}};this.onDropdownMenuKeydown=t=>{if(["Escape","Esc"].includes(t.key)){this.closeDropdown();this.focusToggle();return}if(t.target.localName!=="q2-dropdown-item"){return}const e=t.target;if(["ArrowUp","Up"].includes(t.key)){t.preventDefault();this.focusAdjacentItem(e,"prev");return}if(["ArrowDown","Down"].includes(t.key)){t.preventDefault();this.focusAdjacentItem(e,"next");return}if(t.key==="Tab"){t.preventDefault()}};this.additionalContext=undefined;this.block=undefined;this.context=undefined;this.contextValue=undefined;this.disabled=undefined;this.hideLabel=undefined;this.icon=undefined;this.label=undefined;this.name=undefined;this.open=undefined;this.popoverDirection=undefined;this.popoverAlignment="left";this.popoverMinHeight=150;this.resolvedType=undefined;this.type="icon";this.alignment=undefined;this.popDirection=undefined;this.ariaLabel=undefined}resolveMenu(){return this.name&&window.TectonElements&&window.TectonElements.resolveMenu(this.name,this.contextValue,this.resolvedType,this.additionalContext)}orchestrateResolvedMenuItems(){if(!this.name||!this.context){this.removeResolvedElements();return}this.resolveMenuItemElements().then((t=>{this.removeResolvedElements();t.forEach((t=>{this.hostElement.appendChild(t)}))})).catch((t=>{this.removeResolvedElements();throw t}))}removeResolvedElements(){const t=this.hostElement.querySelectorAll("q2-dropdown-item.resolved-menu-item");t.forEach((t=>this.hostElement.removeChild(t)))}resolveMenuItemElements(){return this.resolveMenu().then((t=>t.map((t=>{let e;let i;if(t["tct-ctxid"]){i={};i[t.contextIdParamName]=t["tct-ctxid"]}switch(t.action){case"navigateTo":e=()=>this.navigateTo(t.featureName,t.moduleName,i);break;case"showOverpanel":e=()=>this.showOverpanel(`${t.featureName}.${t.moduleName}`,i);break}const n=document.createElement("q2-dropdown-item");n.setAttribute("value",t.itemLabel);n.classList.add("resolved-menu-item");n.innerHTML=t.itemLabel;n.onclick=e;return n}))))}navigateTo(t,e,i){var n,s;return(s=(n=window.TectonElements)===null||n===void 0?void 0:n.navigateTo)===null||s===void 0?void 0:s.call(n,t,e,i)}showOverpanel(t,e){var i,n;return(n=(i=window.TectonElements)===null||i===void 0?void 0:i.showOverpanel)===null||n===void 0?void 0:n.call(i,t,e,undefined,true)}get hasCustomButton(){return!!this.hostElement.querySelector("[slot=custom-dropdown-button]")}get determineDropdownItemCount(){return this.hostElement.querySelectorAll(this.dropdownItemSelector).length}get toggleButtonProps(){const t=["primary","secondary","neutral"];const e=["icon","fab","custom",...t];const i=e.includes(this.type)?this.type:"";const n=i==="icon";const s=i==="fab";const o=i==="custom";let r;if(t.includes(i)){r=i==="neutral"?i:`workflow-${i}`}const d=this.open;const h=!!this.disabled;const a=this.open;const l=!n&&!s&&!r?"unstyled":"";return{icon:n,fab:s,intent:r,active:d,disabled:h,ariaExpanded:a,className:l,custom:o}}popDirectionHandler(){o(this,"popDirection","popoverDirection")}alignmentHandler(){o(this,"alignment","popoverAlignment")}ariaLabelHandler(){r(this)}nameHandler(){this.orchestrateResolvedMenuItems()}contextHandler(){this.orchestrateResolvedMenuItems()}contextValueHandler(){this.orchestrateResolvedMenuItems()}resolvedTypeHandler(){this.orchestrateResolvedMenuItems()}additionalContextHandler(){this.orchestrateResolvedMenuItems()}delegateFocus(t){if(!d(t,this.hostElement))return;this.focusToggle()}popoverStateHandler({detail:{open:t}}){var e;if(this.open!==t)this.open=t;(e=this.popoverElement)===null||e===void 0?void 0:e.scrollContainerTo({top:0})}componentWillLoad(){this.popDirectionHandler();this.alignmentHandler();this.ariaLabelHandler()}componentDidLoad(){this.orchestrateResolvedMenuItems();h(this.hostElement)}focusFirstItem(){const t=this.hostElement.querySelector(`${this.dropdownItemSelector}:first-child`);t===null||t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}focusLastItem(){const t=this.hostElement.querySelector(`${this.dropdownItemSelector}:last-child`);t===null||t===void 0?void 0:t.dispatchEvent(new FocusEvent("focus"))}focusAdjacentItem(t,e){const i=Array.from(this.hostElement.querySelectorAll(this.dropdownItemSelector));const n=i.indexOf(t);if(n===-1){return}let s=0;if(e==="next"){s=n<i.length-1?n+1:0}else if(e==="prev"){if(n>0){s=n-1}else{s=i.length-1}}const o=i[s];o&&o.dispatchEvent(new Event("focus"))}render(){const t=this.toggleButtonProps;return e("click-elsewhere",{key:"0c11f21a4a10e67045909c02074b1bdf647f82e4",class:this.open?"dropdown-open":"",onChange:this.onClickElsewhere,"test-id":"dropdownContainer"},e("q2-btn",{key:"2849dbdeb3d50ad1f76a16134c0528f27591ff2a",ref:t=>this.controlElement=t,class:t.className,onClick:this.onToggleClick,onKeyDown:this.onToggleKeydown,fab:t.fab,intent:t.intent,active:t.active,disabled:t.disabled,ariaExpanded:`${!!t.ariaExpanded}`,label:this.hideLabel&&this.label?a(this.label):undefined,hideLabel:this.hideLabel,ariaHasPopup:"menu","test-id":"dropdownButton",block:this.block,description:a("tecton.element.dropdown.itemCount",[this.determineDropdownItemCount])},this.hasCustomButton?e("div",{"test-id":"dropdownCustom",class:t.custom?"":"hidden"},e("slot",{name:"custom-dropdown-button"})):e(i,null,this.icon?e("q2-icon",{type:this.icon}):" ",this.label&&!this.hideLabel&&e("span",{class:"dropdown-button-text"},a(this.label)))),e("q2-popover",{key:"445eb5a0221757d40b28cd33ff365d07462c2fcd",ref:t=>this.popoverElement=t,controlElement:this.controlElement,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:this.popoverAlignment,block:this.block},e("div",{key:"129f4938bdbe29fc6165fb79e6d419b82c8bc388",onClick:this.onDropdownMenuClick,onKeyDown:this.onDropdownMenuKeydown},e("slot",{key:"d39e2a0ee1f3f1c9cfc1d36f4473bbf0be153834"}),this.open&&e("q2-btn",{key:"0fd75e7ff87fc18b802a1fd406625b16221e25e1",class:"sr close-dropdown",onFocus:this.closeDropdown}))))}get hostElement(){return n(this)}static get watchers(){return{popDirection:["popDirectionHandler"],alignment:["alignmentHandler"],ariaLabel:["ariaLabelHandler"],name:["nameHandler"],context:["contextHandler"],contextValue:["contextValueHandler"],resolvedType:["resolvedTypeHandler"],additionalContext:["additionalContextHandler"]}}};u.style=c;export{u as q2_dropdown};
-//# sourceMappingURL=p-7f663376.entry.js.map

package/dist/q2-tecton-elements/p-7f663376.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","focusToggle","controlElement","shadowRoot","querySelector","focus","openDropdown","open","closeDropdown","onClickElsewhere","event","target","localName","stopPropagation","popoverElement","onToggleClick","onToggleKeydown","includes","key","preventDefault","focusLastItem","focusFirstItem","onDropdownMenuClick","async","item","disabled","separator","waitForNextPaint","onDropdownMenuKeydown","focusAdjacentItem","resolveMenu","name","window","TectonElements","contextValue","resolvedType","additionalContext","orchestrateResolvedMenuItems","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","hostElement","appendChild","catch","err","resolvedElements","querySelectorAll","removeChild","datas","map","menuItemData","onClickFn","queryParams","contextIdParamName","action","navigateTo","featureName","moduleName","showOverpanel","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","innerHTML","onclick","_b","_a","call","overpanelPath","params","undefined","hasCustomButton","determineDropdownItemCount","length","toggleButtonProps","allowedIntents","allowedTypes","type","icon","fab","custom","intent","active","ariaExpanded","className","popDirectionHandler","handleRenamedProp","alignmentHandler","ariaLabelHandler","handleAriaLabel","nameHandler","contextHandler","contextValueHandler","resolvedTypeHandler","additionalContextHandler","delegateFocus","isEventFromElement","popoverStateHandler","detail","scrollContainerTo","top","componentWillLoad","componentDidLoad","overrideFocus","firstItem","dispatchEvent","FocusEvent","lastItem","activeItem","direction","dropdownItems","Array","from","activeIndex","indexOf","targetIndex","targetItem","Event","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","minHeight","popoverMinHeight","popoverDirection","align","popoverAlignment","onFocus"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-flex;\n}\n\n:host([block]) {\n    display: block;\n}\n\nclick-elsewhere {\n    position: relative;\n    display: block;\n}\n\nq2-popover {\n    --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { Component, ComponentInterface, Prop, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    @Prop({ reflect: true }) additionalContext: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true }) block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true }) icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) name: string;\n\n    /** Determine whether the popover is open or closed. */\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true }) popoverDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /** @deprecated */\n    @Prop() popoverMinHeight: number = 150;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true }) resolvedType: string;\n\n    /** The type of button used as the menu toggle. */\n    @Prop({ reflect: true }) type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    /** @deprecated */\n    @Prop({ reflect: true }) alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true }) popDirection: 'up' | 'down';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    privatePopDirection: 'down' | 'up';\n    controlElement?: HTMLQ2BtnElement;\n    popoverElement?: HTMLQ2PopoverElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = () =>\n                            this.navigateTo(menuItemData.featureName, menuItemData.moduleName, queryParams);\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = () =>\n                            this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`, queryParams);\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.innerHTML = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    navigateTo(featureName: string, moduleName?: string, queryParams?: IDict<string>) {\n        return window.TectonElements?.navigateTo?.(featureName, moduleName, queryParams);\n    }\n\n    showOverpanel(overpanelPath: string, params: IDict<string>) {\n        return window.TectonElements?.showOverpanel?.(overpanelPath, params, undefined, true);\n    }\n\n    get hasCustomButton() {\n        return !!this.hostElement.querySelector('[slot=custom-dropdown-button]');\n    }\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    //////// Observers //////////\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        this.popoverElement?.scrollContainerTo({ top: 0 });\n    }\n\n    ///// Lifecycle Hooks ////////\n    componentWillLoad() {\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    ///// Actions ////////\n    focusToggle = () => {\n        this.controlElement.shadowRoot.querySelector<HTMLButtonElement>('button').focus();\n    };\n\n    openDropdown = () => {\n        if (this.open) return;\n        this.open = true;\n    };\n\n    closeDropdown = () => {\n        if (!this.open) return;\n        this.open = false;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onToggleClick = () => {\n        if (this.open) {\n            this.closeDropdown();\n        } else {\n            this.openDropdown();\n        }\n    };\n\n    onToggleKeydown = (event: KeyboardEvent) => {\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusLastItem();\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.openDropdown();\n            this.focusFirstItem();\n            return;\n        }\n\n        if (['Escape', 'Esc'].includes(event.key)) {\n            event.preventDefault();\n            this.focusToggle();\n            this.closeDropdown();\n            return;\n        }\n    };\n\n    onDropdownMenuClick = async (event: MouseEvent | CustomEvent) => {\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (!item.disabled && !item.separator) {\n            this.closeDropdown();\n            await waitForNextPaint();\n            this.focusToggle();\n        }\n    };\n\n    focusFirstItem() {\n        const firstItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:first-child`\n        );\n\n        firstItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusLastItem() {\n        const lastItem = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}:last-child`\n        );\n        lastItem?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusAdjacentItem(activeItem: HTMLQ2DropdownItemElement, direction: 'next' | 'prev') {\n        const dropdownItems: HTMLQ2DropdownItemElement[] = Array.from(\n            this.hostElement.querySelectorAll(this.dropdownItemSelector)\n        );\n\n        const activeIndex = dropdownItems.indexOf(activeItem);\n\n        if (activeIndex === -1) {\n            return;\n        }\n\n        let targetIndex: number = 0;\n        if (direction === 'next') {\n            targetIndex = activeIndex < dropdownItems.length - 1 ? activeIndex + 1 : 0;\n        } else if (direction === 'prev') {\n            if (activeIndex > 0) {\n                targetIndex = activeIndex - 1;\n            } else {\n                targetIndex = dropdownItems.length - 1;\n            }\n        }\n        const targetItem = dropdownItems[targetIndex];\n        targetItem && targetItem.dispatchEvent(new Event('focus'));\n    }\n\n    onDropdownMenuKeydown = (event: KeyboardEvent) => {\n        if (['Escape', 'Esc'].includes(event.key)) {\n            this.closeDropdown();\n            this.focusToggle();\n            return;\n        }\n\n        if ((event.target as HTMLElement).localName !== 'q2-dropdown-item') {\n            return;\n        }\n\n        const item = event.target as HTMLQ2DropdownItemElement;\n        if (['ArrowUp', 'Up'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'prev');\n            return;\n        }\n\n        if (['ArrowDown', 'Down'].includes(event.key)) {\n            event.preventDefault();\n            this.focusAdjacentItem(item, 'next');\n            return;\n        }\n        if (event.key === 'Tab') {\n            event.preventDefault();\n        }\n    };\n\n    /// DOM ///\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomButton ? (\n                        <div\n                            test-id=\"dropdownCustom\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"custom-dropdown-button\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    block={this.block}\n                >\n                    <div\n                        onClick={this.onDropdownMenuClick}\n                        onKeyDown={this.onDropdownMenuKeydown}\n                    >\n                        <slot />\n                        {this.open && (\n                            <q2-btn\n                                class=\"sr close-dropdown\"\n                                onFocus={this.closeDropdown}\n                            />\n                        )}\n                    </div>\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-bf125cdf.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as r,F as i,g as o}from"./p-a5f18e27.js";import{o as s,i as a,l as n}from"./p-42302f6f.js";const l='*{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-list(var-prefixer(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-list(var-prefixer(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, 3px)));--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)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.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=l;const p=class{constructor(r){t(this,r);this.change=e(this,"change",7);this.scheduledAfterRender=[];this.onSlotChange=()=>{this.checkForPanes();this.checkScrollState()};this.onScrollBtnClick=t=>{const e=Math.floor(this.listElement.clientWidth/2);this.listElement.scrollBy({left:t==="left"?-e:e,behavior:"smooth"})};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.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.currentStep=1;this.stepCount=undefined;this.lastEnabledStep=undefined;this.contentChangeTriggerCount=0;this.scrollEnabled=false;this.showScrollLeft=false;this.showScrollRight=false}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=[]}disconnectedCallback(){this.resizeObserver.disconnect()}currentStepChanged(t){this.showStep(t)}defaultChangeHandler(t){const{hostElement:e}=this;if(t.target===e&&!e.getAttribute("onchange")&&!!t.detail){this.currentStep=t.detail.selectedStep}}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)}}contentChangeHandler(){this.contentChangeTriggerCount+=1}get allPanes(){return this.hostElement.querySelectorAll("q2-stepper-pane")}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)}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)}showStepPane(t){this.allPanes.forEach(((e,r)=>{e.isActive=t===r+1}))}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(`[slot="${e}"]`);return(r=i===null||i===void 0?void 0:i.outerHTML)!==null&&r!==void 0?r:n(t[e])}renderStepBtn(t){var e;const{allPanes:o,stepCount:s,currentStep:a,lastEnabledStep:l}=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&&n("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>l;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-controls":p,"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:"0725d44fe3643cf8cfa22615c2e84c1b2d94c73a"},r("div",{key:"cce4ed1010c247e4a73a9875fd3ca3d2aff40308",class:a.join(" ")},e&&r(i,{key:"3308619f909ba2d72587e285502c1e5bde37eec1"},r("div",{key:"d41c11095e7710bd23a59dba23d1730c9a129782",class:"gradient-left",hidden:!o}),r("div",{key:"9537b4b2b45e388be063e623b01b271e6b6f952c",class:"gradient-right",hidden:!s}),r("q2-btn",{key:"4d6cc7e82d6ead7bcd5ec2a9cadb6c224bf54644",class:"btn-left",hidden:!this.showScrollLeft,onClick:()=>this.onScrollBtnClick("left")},r("q2-icon",{key:"cd9eb6d9868eafd32c84d3b60b6f798d3327e3f8",type:"chevron-left"})),r("q2-btn",{key:"61ef838d8648d998e5d69ee1b2b4d14659dcd43c",class:"btn-right",hidden:!this.showScrollRight,onClick:()=>this.onScrollBtnClick("right")},r("q2-icon",{key:"b6542d47f5eeb4c1208c1405d03b49199d7245f6",type:"chevron-right"}))),r("ul",{key:"3065e3524afc7071ec57260511c30bb769218998",onScroll:this.checkScrollState,ref:t=>this.listElement=t,role:"tablist"},t>0&&[...Array(t).keys()].map((t=>this.renderStepBtn(t))))),r("div",{key:"66838a87e2dcebe837fccc32557e1639a1f961fc"},r("slot",{key:"bdda7acf5353fd55e3f643826e30619f0b6f9bdf",onSlotchange:()=>this.onSlotChange()})))}get hostElement(){return o(this)}static get watchers(){return{currentStep:["currentStepChanged"]}}};p.style=c;export{p as q2_stepper};
-//# sourceMappingURL=p-bf125cdf.entry.js.map

package/dist/q2-tecton-elements/p-bf125cdf.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2StepperCss","Q2StepperStyle0","Q2Stepper","this","scheduledAfterRender","onSlotChange","checkForPanes","checkScrollState","onScrollBtnClick","direction","scrollAmount","Math","floor","listElement","clientWidth","scrollBy","left","behavior","onStepClick","event","selectedStep","stopPropagation","currentStep","stepCount","lastEnabledStep","change","emit","onStepKeyDown","stepNumber","key","preventDefault","max","min","focusStep","allPanes","length","scrollLeft","scrollWidth","scrollEnabled","showScrollLeft","showScrollRight","componentWillLoad","resizeObserver","ResizeObserver","componentDidLoad","observe","overrideFocus","hostElement","setTimeout","showStep","componentDidRender","forEach","fn","disconnectedCallback","disconnect","currentStepChanged","defaultChangeHandler","target","getAttribute","detail","delegateFocus","isEventFromElement","statusChangeHandler","index","Array","from","findIndex","el","id","status","renderStepBtn","contentChangeHandler","contentChangeTriggerCount","querySelectorAll","push","resizeIframe","showStepPane","_b","_a","window","TectonElements","call","pane","isActive","scrollIntoView","forceFocus","stepListItem","children","document","activeElement","firstElementChild","focus","offsetLeft","scrollTo","getPaneSlotOrProperty","slotName","slot","querySelector","outerHTML","loc","stepIndex","label","description","isCurrentStep","labelId","descriptionId","btnLabel","statusIcon","stepClasses","isLocked","disabled","h","role","class","join","type","tabIndex","onKeyDown","ev","onClick","Fragment","innerHTML","render","containerClasses","hidden","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    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\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: 0 0 0 2px var(--t-base, #ffffff), 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    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    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true }) currentStep: number = 1;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true }) stepCount: 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({ mutable: true }) lastEnabledStep: number;\n\n    @Element() hostElement: HTMLElement;\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter;\n    @State() contentChangeTriggerCount: number = 0;\n    @State() scrollEnabled: boolean = false;\n    @State() showScrollLeft: boolean = false;\n    @State() showScrollRight: boolean = false;\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    ////////// LIFECYCLE HOOKS ////////\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    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n    }\n\n    ////////// WATCHER METHODS ////////\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    ////////// HOST EVENTS ////////\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('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    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    ////////// GETTER METHODS ////////\n\n    get allPanes() {\n        return this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane');\n    }\n\n    ////////// EVENT HANDLERS ////////\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\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    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    ////////// HELPER METHODS ////////\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    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    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\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    ////////// RENDER METHODS ////////\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = pane.querySelector<HTMLElement>(`[slot=\"${slotName}\"]`);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\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-controls={id}\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                                hidden={!this.showScrollLeft}\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                                hidden={!this.showScrollRight}\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>\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/p-c4c458b7.entry.js

@@ -1,2 +0,0 @@
-import{r as t,a,h as r,F as s,g as e}from"./p-a5f18e27.js";import{c as n}from"./p-42302f6f.js";const d="standard";const o="standard";const c="standard";const i="standard";const l="legacy";const p="standard";const g="standard";const h="standard";const u="standard";const y="standard";const f="standard";const m="standard";const b="standard";const v="standard";const w="standard";const k="standard";const x="standard";const z="standard";const $="standard";const N="standard";const j="standard";const E="standard";const C="standard";const F="cards";const I="standard";const S="standard";const q="standard";const B="communication";const V="standard";const D="standard";const G="standard";const A="standard";const L="standard";const O="standard";const R="standard";const W="standard";const _="standard";const H="standard";const J="system";const K="standard";const M="standard";const P="standard";const Q="standard";const T="standard";const U="standard";const X="status";const Y="standard";const Z="standard";const tt="standard";const at="standard";const rt="standard";const st="standard";const et="standard";const nt="standard";const dt="standard";const ot="standard";const ct="standard";const it="standard";const lt="standard";const pt="standard";const gt="standard";const ht="standard";const ut="standard";const yt="status";const ft="legacy";const mt="standard";const bt="system";const vt="standard";const wt="standard";const kt="standard";const xt="standard";const zt="standard";const $t="standard";const Nt="standard";const jt="standard";const Et="standard";const Ct="standard";const Ft="standard";const It="standard";const St="standard";const qt="standard";const Bt="standard";const Vt="standard";const Dt="standard";const Gt="standard";const At="standard";const Lt="standard";const Ot="standard";const Rt="standard";const Wt="standard";const _t="standard";const Ht="standard";const Jt="standard";const Kt="standard";const Mt="standard";const Pt="standard";const Qt="standard";const Tt="mobile";const Ut="standard";const Xt="standard";const Yt="standard";const Zt="standard";const ta="standard";const aa="standard";const ra="standard";const sa="standard";const ea="standard";const na="standard";const da="legacy";const oa="standard";const ca="standard";const ia="standard";const la="standard";const pa="standard";const ga="standard";const ha="standard";const ua="standard";const ya="standard";const fa="standard";const ma="standard";const ba="standard";const va="standard";const wa="standard";const ka="standard";const xa="standard";const za="standard";const $a="standard";const Na="status";const ja="mobile";const Ea="standard";const Ca="standard";const Fa="standard";const Ia="standard";const Sa="standard";const qa="standard";const Ba="standard";const Va="standard";const Da="standard";const Ga="standard";const Aa="standard";const La="standard";const Oa="standard";const Ra="standard";const Wa="status";const _a="standard";const Ha="standard";const Ja={a11y:d,add:o,airplane:c,"alarm-clock":"standard",ambulance:i,android:l,apple:p,"arrow-down":"standard","arrow-left":"standard","arrow-right":"standard","arrow-up":"standard",arts:g,atv:h,backpack:u,bank:y,barchart:f,"barchart-trend":"standard",bed:m,bell:b,bicycle:v,boat:w,box:k,"brand-autobooks-color":"legacy","brand-autobooks-filled":"legacy","brand-facebook-color":"legacy","brand-facebook-filled":"legacy","brand-instagram-color":"legacy","brand-instagram-filled":"legacy","brand-linkedin-color":"legacy","brand-linkedin-filled":"legacy","brand-messenger-color":"legacy","brand-messenger-filled":"legacy","brand-payrecs-color":"legacy","brand-payrecs-filled":"legacy","brand-snapchat-color":"legacy","brand-snapchat-filled":"legacy","brand-twitter-color":"legacy","brand-twitter-filled":"legacy","brand-vimeo-color":"legacy","brand-vimeo-filled":"legacy","brand-x-color":"legacy","brand-x-filled":"legacy","brand-youtube-color":"legacy","brand-youtube-filled":"legacy","brand-zelle-color":"legacy","brand-zelle-filled":"legacy",briefcase:x,"browser-chrome":"legacy","browser-chrome-color":"legacy","browser-chrome-filled":"legacy","browser-edge":"legacy","browser-edge-color":"legacy","browser-edge-filled":"legacy","browser-firefox":"legacy","browser-firefox-color":"legacy","browser-firefox-filled":"legacy","browser-ie":"legacy","browser-ie-color":"legacy","browser-ie-filled":"legacy","browser-opera":"legacy","browser-opera-color":"legacy","browser-opera-filled":"legacy","browser-safari":"legacy","browser-safari-color":"legacy","browser-safari-filled":"legacy","bubble-graph":"standard",bug:z,buildings:$,"buildings-2":"standard",calculator:N,calendar:j,"calendar-confirm":"legacy","calendar-create":"standard","calendar-pay":"standard","calendar-remove":"standard","calendar-repeat":"standard","calendar-skip":"standard","calendar-time":"standard","call-color":"legacy","call-filled":"legacy",camera:E,car:C,"car-front":"standard",card:F,"card-add":"cards","card-amazon":"cards","card-amazon-color":"legacy","card-amex":"cards","card-amex-color":"legacy","card-applepay":"cards","card-applepay-color":"legacy","card-bitcoin":"cards","card-bitcoin-color":"legacy","card-dinersclub":"cards","card-dinersclub-color":"legacy","card-discover":"cards","card-discover-color":"legacy","card-edit":"cards","card-gift":"cards","card-googlepay":"cards","card-googlepay-color":"legacy","card-heart":"cards","card-in-hand":"cards","card-insert":"cards","card-jcb":"cards","card-jcb-color":"legacy","card-join":"cards","card-locked":"cards","card-maestro":"cards","card-maestro-color":"legacy","card-mastercard":"cards","card-mastercard-color":"legacy","card-more":"cards","card-paypal":"cards","card-paypal-color":"legacy","card-prohibited":"cards","card-remove":"cards","card-scissors":"cards","card-star":"cards","card-stripe":"cards","card-stripe-color":"legacy","card-success":"cards","card-unknown":"cards","card-update":"cards","card-visa":"cards","card-visa-color":"legacy",cart:I,"cart-moving":"standard",cash:S,"cash-bills":"standard","cash-coins":"standard","cash-in-hand":"standard","cash-register":"standard",certificate:q,chat:B,"chat-bubbles":"communication","chat-question":"communication","chat-round":"communication",check:V,"check-add":"standard","check-dollar":"standard","check-edit":"standard","check-remove":"standard","check-shield":"standard",checkmark:D,"checkmark-outline":"standard","chevron-double-left":"standard","chevron-double-right":"standard","chevron-down":"standard","chevron-left":"standard","chevron-right":"standard","chevron-up":"standard",clipboard:G,close:A,coins:L,compass:O,conversation:R,copy:W,coupon:_,"credit-score":"standard","currency-dollar":"currencies","currency-dollar-circle":"currencies","currency-euro":"currencies","currency-pound":"currencies","currency-yen":"currencies",dashboard:H,"delivery-truck":"standard",desktop:J,diploma:K,divider:M,document:P,"document-add":"standard","document-checklist":"standard","document-remove":"standard",download:Q,"drag-handle":"standard",edit:T,ellipsis:U,error:X,"error-filled":"status","external-link":"standard","eye-hide":"standard","eye-show":"standard","face-id":"standard",factory:Y,failed:Z,filebox:tt,"filetype-csv":"filetypes","filetype-doc":"filetypes","filetype-docx":"filetypes","filetype-generic":"filetypes","filetype-gif":"filetypes","filetype-iso":"filetypes","filetype-jpg":"filetypes","filetype-otf":"filetypes","filetype-pdf":"filetypes","filetype-png":"filetypes","filetype-ppt":"filetypes","filetype-svg":"filetypes","filetype-txt":"filetypes","filetype-xls":"filetypes","filetype-xlsx":"filetypes","filetype-xml":"filetypes",filter:at,fingerprint:rt,flag:st,gear:et,"gesture-hand":"gestures","gesture-scroll-horizontal":"gestures","gesture-scroll-vertical":"gestures","gesture-stretch":"gestures","gesture-swipe-down":"gestures","gesture-swipe-left":"gestures","gesture-swipe-right":"gestures","gesture-swipe-up":"gestures","gesture-tap":"gestures",gift:nt,"gold-bars":"standard",government:dt,gps:ot,"graduation-cap":"standard","grid-x2":"standard","grid-x3":"standard","hamburger-menu":"standard",hand:ct,"hand-with-coins":"standard","hand-with-key":"standard",handshake:it,headset:lt,health:pt,heart:gt,"heart-add":"standard","heart-remove":"standard",home:ht,"home-chimney":"standard","home-gear":"standard","id-badge":"standard",inbox:ut,"inbox-checked":"standard","inbox-full":"standard",info:yt,"info-filled":"status",ios:ft,key:mt,laptop:bt,law:vt,leaf:wt,lightbulb:kt,linechart:xt,"linechart-trend":"standard",link:zt,list:$t,location:Nt,"location-base":"standard","location-prohibited":"standard",lock:jt,logout:Et,loop:Ct,mail:Ft,math:It,medal:St,megaphone:qt,"message-forward":"standard","message-reply":"standard","message-response":"standard",microscope:Bt,"mobile-button":"mobile","mobile-edit":"mobile","mobile-fast-dollar":"standard","mobile-heart":"mobile","mobile-location":"mobile","mobile-lock":"mobile","mobile-remove":"mobile","mobile-rotate":"mobile","mobile-search":"mobile","mobile-settings":"mobile","mobile-time":"mobile","money-time":"standard",mortgage:Vt,motorcycle:Dt,motorhome:Gt,mountains:At,movie:Lt,music:Ot,"nest-egg":"standard",newspaper:Rt,options:Wt,"os-android":"legacy","os-android-color":"legacy","os-android-filled":"legacy","os-apple":"legacy","os-apple-color":"legacy","os-apple-filled":"legacy","os-windows":"legacy","os-windows-color":"legacy","os-windows-filled":"legacy",palette:_t,"paper-plane":"standard",paperclip:Ht,pause:Jt,paw:Kt,people:Mt,"people-group":"standard",percent:Pt,person:Qt,"person-add":"standard","person-lock":"standard","person-remove":"standard","person-settings":"standard","person-to-person":"standard","personal-care":"standard",phone:Tt,piechart:Ut,"piechart-expanded":"standard","piggy-bank":"standard",play:Xt,pricetag:Yt,"pricetag-blank":"standard","pricetag-time":"standard",print:Zt,prohibited:ta,question:aa,receipt:ra,"receipt-list":"standard","receipt-list-top":"standard","receipt-top":"standard",refresh:sa,remove:ea,repeat:na,"repeat-time":"standard",revert:da,ribbon:oa,ring:ca,roadblock:ia,"rss-color":"legacy","rss-filled":"legacy",save:la,school:pa,search:ga,section:ha,service:ua,shield:ya,sign:fa,"sign-closed":"standard","sign-open":"standard","sign-sale":"standard","sign-sold":"standard",silverware:ma,skip:ba,"sms-color":"legacy","sms-filled":"legacy",sort:va,speedometer:wa,split:ka,star:xa,"star-add":"standard","star-remove":"standard",statements:za,"steering-wheel":"standard","stop-payment":"standard",storefront:$a,"storefront-add":"standard","storefront-prohibited":"standard","storefront-remove":"standard","storefront-settings":"standard",success:Na,"success-filled":"status",tablet:ja,target:Ea,taxi:Ca,time:Fa,todo:Ia,tools:Sa,tractor:qa,transfer:Ba,"transfer-receive":"standard","transfer-send":"standard",trash:Va,tree:Da,"truck-with-lock":"standard",umbrella:Ga,unlink:Aa,upload:La,"venmo-colored":"legacy","venmo-filled":"legacy",virus:Oa,wallet:Ra,warning:Wa,"warning-filled":"status",watch:_a,world:Ha,"zoom-in":"standard","zoom-out":"standard"};const Ka="*{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:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round));transition:var(--tct-icon-transition, none)}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.fill-secondary{fill:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)));transition:var(--tct-icon-fill-transition, none)}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentcolor));transition:var(--tct-icon-stroke-primary-transition, none)}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a))}";const Ma=Ka;const Pa=class{constructor(a){t(this,a);this.inline=undefined;this.label=undefined;this.type=undefined;this.iconClone=undefined}componentWillLoad(){this.handleIcon()}componentDidRender(){var t,a,r;if(!this.iconClone)return;(a=(t=this.spriteGroup)===null||t===void 0?void 0:t.firstElementChild)===null||a===void 0?void 0:a.remove();(r=this.spriteGroup)===null||r===void 0?void 0:r.appendChild(this.iconClone)}handleIcon(){var t,a;if(this.isCustom){this.setCustomSVGAttrs()}else if(this.type){this.fetchSprite()}else{this.iconClone=null;(a=(t=this.spriteGroup)===null||t===void 0?void 0:t.firstElementChild)===null||a===void 0?void 0:a.remove()}}get isCustom(){return this.type==="custom"}get spriteFileName(){if(this.isCustom)return;return Ja[this.type]}get spriteId(){const{spriteFileName:t}=this;if(!t)return;return`tecton-sprite-${t}`}get spriteElement(){const{spriteId:t}=this;if(!t)return;return document.querySelector(`#${t}`)}get spriteEventName(){const{spriteFileName:t}=this;if(!t)return;return`tct-loaded-${t}`}get iconCloneViewBox(){var t,a;return(a=(t=this.iconClone)===null||t===void 0?void 0:t.getAttribute("viewBox"))!==null&&a!==void 0?a:"0 0 24 24"}getOrCreateSpriteContainer(){const t="tecton-sprites";let a=document.querySelector(`#${t}`);if(a)return a;a=document.createElement("div");a.id=t;a.style.display="none";document.body.appendChild(a);return a}checkForSprite(){var t;const{spriteId:a,spriteEventName:r}=this;const s=this.getOrCreateSpriteContainer();let e=document.querySelector(`#${a}`);if((t=e===null||e===void 0?void 0:e.hasAttribute("data-loaded"))!==null&&t!==void 0?t:false){this.cloneSpriteNode();return true}s.addEventListener(r,(()=>{this.cloneSpriteNode()}),{once:true});if(e)return true;e=document.createElement("div");e.id=a;s.appendChild(e);return false}async fetchSprite(){const{spriteFileName:t,spriteId:r,spriteEventName:s}=this;const e=this.checkForSprite();if(e)return;if(!t)return;const n=a(`assets/${t}.symbol.svg`);const d=await fetch(n);const o=await d.text();const c=document.createElement("div");c.innerHTML=o;const i=c.querySelector("svg");i.id=r;i.setAttribute("data-loaded","");let{spriteElement:l}=this;if((l===null||l===void 0?void 0:l.tagName)==="SVG")return;if(typeof l.replaceWith==="function"){l.replaceWith(i)}else{l.parentNode.replaceChild(i,l)}l=document.querySelector(`#${r}`);l.dispatchEvent(new CustomEvent(s,{bubbles:true}))}cloneSpriteNode(){const t=this.getOrCreateSpriteContainer();const a=t.querySelector(`#tct-${this.type}`);this.iconClone=a?a.cloneNode(true):undefined}setCustomSVGAttrs(){const t=this.hostElement.querySelector("svg");if(!t)return;t.setAttribute("role","img");t.setAttribute("xmlns","http://www.w3.org/2000/svg");const{label:a}=this;if(a){const r=document.createElement("title");const s=`label-${n()}`;r.id=s;r.textContent=a;t.appendChild(r);t.setAttribute("aria-labelledby",s)}else{t.setAttribute("aria-hidden","true")}}render(){const{label:t,type:a}=this;return this.isCustom?r("slot",null):r("svg",{"aria-hidden":t?undefined:"true",role:"img","aria-labelledby":t?"label":undefined,viewBox:this.iconCloneViewBox,xmlns:"http://www.w3.org/2000/svg"},t&&r("title",{id:"label"},t),r(s,null,!!a&&r("use",{href:`#tct-${a}`}),r("g",{ref:t=>this.spriteGroup=t})))}static get assetsDirs(){return["assets"]}get hostElement(){return e(this)}static get watchers(){return{type:["handleIcon"]}}};Pa.style=Ma;export{Pa as q2_icon};
-//# sourceMappingURL=p-c4c458b7.entry.js.map

package/dist/q2-tecton-elements/p-c4c458b7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["q2IconCss","Q2IconStyle0","Q2Icon","componentWillLoad","this","handleIcon","componentDidRender","iconClone","_b","_a","spriteGroup","firstElementChild","remove","_c","appendChild","isCustom","setCustomSVGAttrs","type","fetchSprite","spriteFileName","iconMap","spriteId","spriteElement","document","querySelector","spriteEventName","iconCloneViewBox","getAttribute","getOrCreateSpriteContainer","spriteContainerId","spriteContainer","createElement","id","style","display","body","checkForSprite","hasAttribute","cloneSpriteNode","addEventListener","once","spriteExists","spritePath","getAssetPath","response","fetch","data","text","wrappingDiv","innerHTML","svg","setAttribute","tagName","replaceWith","parentNode","replaceChild","dispatchEvent","CustomEvent","bubbles","spriteNode","cloneNode","undefined","innerSVG","hostElement","label","title","labelId","createGuid","textContent","render","h","role","viewBox","xmlns","Fragment","href","ref","el"],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    position: relative;\n    fill: none;\n}\n\n:host([inline]) {\n    height: 1em;\n    width: 1em;\n}\n\nsvg {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n    stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n    stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n    transition: var(--tct-icon-transition, none);\n}\n\n.stroke-primary {\n    stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n    stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n    fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n    fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State, Fragment } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true }) inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true }) label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true }) type: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() iconClone: SVGSymbolElement;\n\n    spriteGroup: SVGElement;\n\n    componentWillLoad() {\n        this.handleIcon();\n    }\n\n    componentDidRender(): void {\n        if (!this.iconClone) return;\n        this.spriteGroup?.firstElementChild?.remove();\n        this.spriteGroup?.appendChild(this.iconClone);\n    }\n\n    @Watch('type')\n    handleIcon() {\n        if (this.isCustom) {\n            this.setCustomSVGAttrs();\n        } else if (this.type) {\n            this.fetchSprite();\n        } else {\n            this.iconClone = null;\n            this.spriteGroup?.firstElementChild?.remove();\n        }\n    }\n\n    get isCustom() {\n        return this.type === 'custom';\n    }\n\n    get spriteFileName() {\n        if (this.isCustom) return;\n        return iconMap[this.type];\n    }\n\n    get spriteId() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tecton-sprite-${spriteFileName}`;\n    }\n\n    get spriteElement() {\n        const { spriteId } = this;\n        if (!spriteId) return;\n        return document.querySelector<HTMLElement>(`#${spriteId}`);\n    }\n\n    get spriteEventName() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tct-loaded-${spriteFileName}`;\n    }\n\n    get iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    /**\n     * Checks for the sprite container element in the global DOM\n     * If it does not exist, it creates and appends it to the body\n     */\n    getOrCreateSpriteContainer() {\n        const spriteContainerId = 'tecton-sprites';\n        let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n        if (spriteContainer) return spriteContainer;\n        spriteContainer = document.createElement('div');\n        spriteContainer.id = spriteContainerId;\n        spriteContainer.style.display = 'none';\n        document.body.appendChild(spriteContainer);\n        return spriteContainer;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.querySelector(`#${spriteId}`);\n\n        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n            this.cloneSpriteNode();\n            return true;\n        }\n\n        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the sprite is loaded\n        spriteContainer.addEventListener(\n            spriteEventName,\n            () => {\n                this.cloneSpriteNode();\n            },\n            { once: true }\n        );\n\n        // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n        if (spriteElement) return true;\n\n        // If sprite element does not exist, create a placeholder\n        // This will let other icons know the sprite is being loaded\n        spriteElement = document.createElement('div');\n        spriteElement.id = spriteId;\n        spriteContainer.appendChild(spriteElement);\n        return false;\n    }\n\n    async fetchSprite() {\n        const { spriteFileName, spriteId, spriteEventName } = this;\n\n        const spriteExists = this.checkForSprite();\n        if (spriteExists) return;\n\n        if (!spriteFileName) return;\n        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n        const response = await fetch(spritePath);\n        const data = await response.text();\n        const wrappingDiv = document.createElement('div');\n        wrappingDiv.innerHTML = data;\n        const svg = wrappingDiv.querySelector('svg');\n\n        svg.id = spriteId;\n        svg.setAttribute('data-loaded', '');\n\n        let { spriteElement } = this;\n        if (spriteElement?.tagName === 'SVG') return;\n\n        if (typeof spriteElement.replaceWith === 'function') {\n            spriteElement.replaceWith(svg);\n        } else {\n            spriteElement.parentNode.replaceChild(svg, spriteElement);\n        }\n\n        spriteElement = document.querySelector(`#${spriteId}`);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    cloneSpriteNode() {\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n    }\n\n    setCustomSVGAttrs() {\n        const innerSVG = this.hostElement.querySelector('svg');\n\n        if (!innerSVG) return;\n\n        innerSVG.setAttribute('role', 'img');\n        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n        const { label } = this;\n        if (label) {\n            const title = document.createElement('title');\n            const labelId = `label-${createGuid()}`;\n            title.id = labelId;\n            title.textContent = label;\n            innerSVG.appendChild(title);\n            innerSVG.setAttribute('aria-labelledby', labelId);\n        } else {\n            innerSVG.setAttribute('aria-hidden', 'true');\n        }\n    }\n\n    render() {\n        const { label, type } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={label ? undefined : 'true'}\n                role=\"img\"\n                aria-labelledby={label ? 'label' : undefined}\n                viewBox={this.iconCloneViewBox}\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                {label && <title id=\"label\">{label}</title>}\n                <Fragment>\n                    {!!type && <use href={`#tct-${type}`} />}\n                    <g ref={el => (this.spriteGroup = el)}></g>\n                </Fragment>\n            </svg>\n        );\n    }\n}\n"],"mappings":"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"}