q2-tecton-elements 1.66.0 → 1.66.2

package/dist/q2-tecton-elements/q2-tab-container.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-tab-container.entry.esm.js","sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom-width: var-list(--tct-tab-container-border-width, 1px);\n    border-bottom-style: var-list(--tct-tab-container-border-style, solid);\n    border-bottom-color: var-list(\n        var-prefixer(tab-container-border-color),\n        --tct-gray-11,\n        --t-gray-11,\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\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\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\nimport { filterChildren, hasValidChildren } from '@/utils/component';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n/**\n * @name Tab Container\n * @category Display\n * @summary Use for switching between multiple views within the same context.\n */\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    hasValidTab: boolean = false;\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        if (!hasValidChildren(this.hostElement, 'q2-tab-pane')) {\n            filterChildren(this.hostElement, 'q2-tab-pane');\n        }\n        const observer = new MutationObserver(() => this.updateTabs());\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabs();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        this.scheduledAfterRender.push(() => this.determineTabMove());\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async selectTab(value: string) {\n        const paneButton = this.hostElement.shadowRoot.querySelector(`[test-id=\"tabLink\"][data-value=\"${value}\"]`);\n        (paneButton as HTMLButtonElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabs();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabs();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\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 > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    determineTabMove() {\n        if (!this.tabs) return;\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index === -1) return;\n        this.moveToTab(index, false);\n    }\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                mirrorEmit(this, ['change', 'tctChange'], { value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    updateTabs = () => {\n        const validTabPreUpdate = this.hasValidTab;\n        this.updateTabPaneProps();\n        this.setTabs();\n        // Check if we now have a valid tab\n        this.hasValidTab = this.tabs.some(tab => tab.value === this.value);\n        // Only move if we didn't have a valid tab before but do now\n        if (!validTabPreUpdate && this.hasValidTab) {\n            this.scheduledAfterRender.push(() => this.determineTabMove());\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={`${isSelected}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onTctClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onTctClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-tab-container.entry.esm.js","sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom-width: var-list(--tct-tab-container-border-width, 1px);\n    border-bottom-style: var-list(--tct-tab-container-border-style, solid);\n    border-bottom-color: var-list(\n        var-prefixer(tab-container-border-color),\n        --tct-gray-11,\n        --t-gray-11,\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\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\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\nimport { filterChildren, hasValidChildren } from '@/utils/component';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n/**\n * @name Tab Container\n * @category Display\n * @summary Use for switching between multiple views within the same context.\n */\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    hasValidTab: boolean = false;\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        if (!hasValidChildren(this.hostElement, ['q2-tab-pane', 'tecton-tab-pane'])) {\n            filterChildren(this.hostElement, ['q2-tab-pane', 'tecton-tab-pane']);\n        }\n        const observer = new MutationObserver(() => this.updateTabs());\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabs();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        this.scheduledAfterRender.push(() => this.determineTabMove());\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async selectTab(value: string) {\n        const paneButton = this.hostElement.shadowRoot.querySelector(`[test-id=\"tabLink\"][data-value=\"${value}\"]`);\n        (paneButton as HTMLButtonElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabs();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabs();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\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 > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    determineTabMove() {\n        if (!this.tabs) return;\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index === -1) return;\n        this.moveToTab(index, false);\n    }\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                mirrorEmit(this, ['change', 'tctChange'], { value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    updateTabs = () => {\n        const validTabPreUpdate = this.hasValidTab;\n        this.updateTabPaneProps();\n        this.setTabs();\n        // Check if we now have a valid tab\n        this.hasValidTab = this.tabs.some(tab => tab.value === this.value);\n        // Only move if we didn't have a valid tab before but do now\n        if (!validTabPreUpdate && this.hasValidTab) {\n            this.scheduledAfterRender.push(() => this.determineTabMove());\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={`${isSelected}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onTctClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onTctClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-tab-container.entry.js

@@ -167,8 +167,8 @@ const v = class {
     this.mutationObserver = null;
   }
   componentWillLoad() {
-    if (!b(this.hostElement, "q2-tab-pane")) {
-      d(this.hostElement, "q2-tab-pane");
+    if (!b(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ])) {
+      d(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]);
     }
     const t = new MutationObserver((() => this.updateTabs()));
     t.observe(this.hostElement, {
@@ -292,49 +292,49 @@ const v = class {
   }
   render() {
     return e(i, {
-      key: "55766935610a03910ff95ca8d3282b887b36abcd"
+      key: "2181b2505b4d48d9812b61d5414264425ff7f4af"
     }, e("div", {
-      key: "add7a9817e22c04eb3426ff6716ba83784a1e3b4",
+      key: "0901678c9f074277414bf0dfd1b73cb3ec93cd6f",
       class: "tab-container"
     }, this.scrollEnabled && e(i, {
-      key: "49c3f671268794a4c7f37b14b62e07b3ac436aa1"
+      key: "3cc265f40d308947e07bb2ca7cf2496bf1f74d44"
     }, e("div", {
-      key: "361822a9c78adc12798eecd3556d9dd2154c798e",
+      key: "8b0606af29da80fb969e94b2708077bf2e4ef7e2",
       class: "gradient-left",
       hidden: !this.showScrollLeft
     }), e("div", {
-      key: "a25e15c2d6ae4a732a61e08215b3b34b81750b7d",
+      key: "2412d226cf903beae013965e345f0f56ca9991d6",
       class: "gradient-right",
       hidden: !this.showScrollRight
     }), e("q2-btn", {
-      key: "58e807848868226a666e9ce3f0218d0cb76ff569",
+      key: "edf2bf63eebe24832e529178fa185ad27c3a45ba",
       class: "btn-left",
       hidden: !this.showScrollLeft,
       onTctClick: () => this.onScrollBtnClick("left")
     }, e("q2-icon", {
-      key: "d907438b963235ebe69275171a586486e13675f5",
+      key: "7900b5426d1ec51880fe8c36d33a59873b1be508",
       type: "chevron-left",
       label: "scroll left"
     })), e("q2-btn", {
-      key: "cac533264a7f0486694079d8ce209b7c73ee30d2",
+      key: "001628dae8b16b4c5aff651c8515cce25d08bbf2",
       class: "btn-right",
       hidden: !this.showScrollRight,
       onTctClick: () => this.onScrollBtnClick("right")
     }, e("q2-icon", {
-      key: "638b0241ff186d3fccd054a6a04090752152ae88",
+      key: "f4579ca37dd0e2908e3f68dc60eb923d4a3f314e",
       type: "chevron-right",
       label: "scroll right"
     }))), e("ul", {
-      key: "09fc2659537414f3ced6fdaf2a22aed4095206fc",
+      key: "53efc8ffaaf29dc1dfd9b86ee4105a87350aebfb",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       class: this.noPrint ? "no-print" : null,
       role: "tablist"
     }, this.tabs.map(((t, a) => this.renderTab(t, a))))), e("div", {
-      key: "fce5bca2e6d8b552dece318d212f65b5bafa33f0",
+      key: "1e3d76467f667d04a488aacd5a51b641a0acbabc",
       class: "tab-content"
     }, e("slot", {
-      key: "4771f24d669715a2859b39976c77081ab9dc8f35",
+      key: "4384593fb9579c4187c50eee288517aba22c9ace",
       onSlotchange: () => this.onSlotChange()
     })));
   }

package/dist/q2-tecton-elements/q2-tab-container.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2TabContainerCss","Q2TabContainer","constructor","hostRef","this","guid","createGuid","hasValidTab","lastScrolled","Date","getTime","scheduledAfterRender","hasLeft","hasRight","scrollEnabled","showScrollLeft","showScrollRight","noPrint","checkScrollState","listElement","scrollLeft","scrollWidth","clientWidth","Math","ceil","moveToAdjacentTab","value","direction","index","tabs","map","indexOf","newIndex","min","length","max","moveToTab","shouldFocus","focusedValue","focusedTab","querySelector","focus","preventScroll","left","offsetLeft","scrollTo","behavior","onScrollBtnClick","halfWidth","floor","scrollAmount","abs","scrollBy","onSlotChange","onTabClick","event","targetValue","target","closest","dataset","isAlreadySelected","mirrorEmit","onTabKeyDown","key","preventDefault","setTabs","tabPanes","label","badgeCount","badgeDescription","badgeTheme","badgeStatus","loc","updateTabPaneProps","forEach","tab","selected","selectedTabValue","updateTabs","validTabPreUpdate","some","push","determineTabMove","disconnectedCallback","_a","resizeObserver","disconnect","_b","mutationObserver","componentWillLoad","hasValidChildren","hostElement","filterChildren","observer","MutationObserver","observe","childList","attributes","ResizeObserver","componentDidLoad","overrideFocus","componentDidRender","fn","settled","emit","onBadge","defaultChangeHandler","onchange","detail","onFocus","isEventFromElement","findIndex","el","onResize","selectTab","paneButton","shadowRoot","click","nameObserver","valueObserver","resizeIframe","tabList","querySelectorAll","Array","from","filter","pane","name","window","TectonElements","call","renderTab","isSelected","h","role","id","tabIndex","onClick","onKeyDown","undefined","renderTabWithBadge","theme","description","class","status","render","Fragment","hidden","onTctClick","type","onScroll","ref","onSlotchange"],"sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom-width: var-list(--tct-tab-container-border-width, 1px);\n    border-bottom-style: var-list(--tct-tab-container-border-style, solid);\n    border-bottom-color: var-list(\n        var-prefixer(tab-container-border-color),\n        --tct-gray-11,\n        --t-gray-11,\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\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\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\nimport { filterChildren, hasValidChildren } from '@/utils/component';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n/**\n * @name Tab Container\n * @category Display\n * @summary Use for switching between multiple views within the same context.\n */\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    hasValidTab: boolean = false;\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        if (!hasValidChildren(this.hostElement, 'q2-tab-pane')) {\n            filterChildren(this.hostElement, 'q2-tab-pane');\n        }\n        const observer = new MutationObserver(() => this.updateTabs());\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabs();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        this.scheduledAfterRender.push(() => this.determineTabMove());\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async selectTab(value: string) {\n        const paneButton = this.hostElement.shadowRoot.querySelector(`[test-id=\"tabLink\"][data-value=\"${value}\"]`);\n        (paneButton as HTMLButtonElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabs();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabs();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\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 > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    determineTabMove() {\n        if (!this.tabs) return;\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index === -1) return;\n        this.moveToTab(index, false);\n    }\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                mirrorEmit(this, ['change', 'tctChange'], { value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    updateTabs = () => {\n        const validTabPreUpdate = this.hasValidTab;\n        this.updateTabPaneProps();\n        this.setTabs();\n        // Check if we now have a valid tab\n        this.hasValidTab = this.tabs.some(tab => tab.value === this.value);\n        // Only move if we didn't have a valid tab before but do now\n        if (!validTabPreUpdate && this.hasValidTab) {\n            this.scheduledAfterRender.push(() => this.determineTabMove());\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={`${isSelected}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onTctClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onTctClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2TabContainerCss","Q2TabContainer","constructor","hostRef","this","guid","createGuid","hasValidTab","lastScrolled","Date","getTime","scheduledAfterRender","hasLeft","hasRight","scrollEnabled","showScrollLeft","showScrollRight","noPrint","checkScrollState","listElement","scrollLeft","scrollWidth","clientWidth","Math","ceil","moveToAdjacentTab","value","direction","index","tabs","map","indexOf","newIndex","min","length","max","moveToTab","shouldFocus","focusedValue","focusedTab","querySelector","focus","preventScroll","left","offsetLeft","scrollTo","behavior","onScrollBtnClick","halfWidth","floor","scrollAmount","abs","scrollBy","onSlotChange","onTabClick","event","targetValue","target","closest","dataset","isAlreadySelected","mirrorEmit","onTabKeyDown","key","preventDefault","setTabs","tabPanes","label","badgeCount","badgeDescription","badgeTheme","badgeStatus","loc","updateTabPaneProps","forEach","tab","selected","selectedTabValue","updateTabs","validTabPreUpdate","some","push","determineTabMove","disconnectedCallback","_a","resizeObserver","disconnect","_b","mutationObserver","componentWillLoad","hasValidChildren","hostElement","filterChildren","observer","MutationObserver","observe","childList","attributes","ResizeObserver","componentDidLoad","overrideFocus","componentDidRender","fn","settled","emit","onBadge","defaultChangeHandler","onchange","detail","onFocus","isEventFromElement","findIndex","el","onResize","selectTab","paneButton","shadowRoot","click","nameObserver","valueObserver","resizeIframe","tabList","querySelectorAll","Array","from","filter","pane","name","window","TectonElements","call","renderTab","isSelected","h","role","id","tabIndex","onClick","onKeyDown","undefined","renderTabWithBadge","theme","description","class","status","render","Fragment","hidden","onTctClick","type","onScroll","ref","onSlotchange"],"sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom-width: var-list(--tct-tab-container-border-width, 1px);\n    border-bottom-style: var-list(--tct-tab-container-border-style, solid);\n    border-bottom-color: var-list(\n        var-prefixer(tab-container-border-color),\n        --tct-gray-11,\n        --t-gray-11,\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs),\n            border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\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\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\nimport { filterChildren, hasValidChildren } from '@/utils/component';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n/**\n * @name Tab Container\n * @category Display\n * @summary Use for switching between multiple views within the same context.\n */\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    hasValidTab: boolean = false;\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        if (!hasValidChildren(this.hostElement, ['q2-tab-pane', 'tecton-tab-pane'])) {\n            filterChildren(this.hostElement, ['q2-tab-pane', 'tecton-tab-pane']);\n        }\n        const observer = new MutationObserver(() => this.updateTabs());\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabs();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        this.scheduledAfterRender.push(() => this.determineTabMove());\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async selectTab(value: string) {\n        const paneButton = this.hostElement.shadowRoot.querySelector(`[test-id=\"tabLink\"][data-value=\"${value}\"]`);\n        (paneButton as HTMLButtonElement)?.click();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabs();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabs();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\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 > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    determineTabMove() {\n        if (!this.tabs) return;\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index === -1) return;\n        this.moveToTab(index, false);\n    }\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], {\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                mirrorEmit(this, ['change', 'tctChange'], { value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    updateTabs = () => {\n        const validTabPreUpdate = this.hasValidTab;\n        this.updateTabPaneProps();\n        this.setTabs();\n        // Check if we now have a valid tab\n        this.hasValidTab = this.tabs.some(tab => tab.value === this.value);\n        // Only move if we didn't have a valid tab before but do now\n        if (!validTabPreUpdate && this.hasValidTab) {\n            this.scheduledAfterRender.push(() => this.determineTabMove());\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={`${isSelected}`}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onTctClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onTctClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -2,9 +2,9 @@ import { r as t, c as r, h as i, F as o, H as a, g as e } from "./index-CGkHOjh1
 
 import { o as s, i as c, w as n, l } from "./index-B4WYBDS9.js";
 
-import { m as d } from "./mirror-emit-DUjY_ucm.js";
+import { m as h } from "./mirror-emit-DUjY_ucm.js";
 
-import { s as h, a as p } from "./action-sheet-B7adb3xs.js";
+import { s as d, a as p } from "./action-sheet-B7adb3xs.js";
 
 const g = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));--comp-tag-border-color:var(--tct-tag-border-color, transparent);background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 4px)));border-width:var(--tct-tag-border-width, 0);border-style:var(--tct-tag-border-style, 0);border-color:var(--comp-tag-border-color);font-size:var(--tct-tag-font-size, inherit);font-weight:var(--tct-tag-font-weight, inherit);position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff));--comp-tag-border-color:var(--tct-tag-primary-border-color, var(--t-primary, #0079c1))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414));--comp-tag-border-color:var(--tct-tag-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414));--comp-tag-border-color:var(--tct-tag-tertiary-border-color, var(--t-tertiary, #e8f5fc))}.tag{display:flex;align-items:center;width:max-content;gap:6px;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-tag-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-decorator-icon-secondary-stroke)}:host([theme=primary]) .tag ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-tag-primary-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-primary-decorator-icon-secondary-stroke)}.tag ::slotted(q2-badge[slot=decorator]){--tct-badge-height:1em;--tct-badge-line-height:30px}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";
 
@@ -50,17 +50,17 @@ const v = class {
       t.stopPropagation();
       if (!this.optionCount) return;
       const {value: r} = t.detail;
-      d(this, [ "click", "tctClick" ], {
+      h(this, [ "click", "tctClick" ], {
         value: r
       });
     };
     this.handleClick = async t => {
       t.stopPropagation();
       this.popoverElement.controlElement = this.dropdownBtn;
-      if (h(this)) {
+      if (d(this)) {
         const {value: r} = await p(this, t);
         this.dropdownBtn.focus();
-        d(this, [ "click", "tctClick" ], {
+        h(this, [ "click", "tctClick" ], {
           value: r
         });
       } else {
@@ -72,10 +72,10 @@ const v = class {
       if (r) return;
       t.preventDefault();
       this.popoverElement.controlElement = this.dropdownBtn;
-      if (h(this, t)) {
+      if (d(this, t)) {
         const {value: r} = await p(this, t);
         this.dropdownBtn.focus();
-        d(this, [ "click", "tctClick" ], {
+        h(this, [ "click", "tctClick" ], {
           value: r
         });
       } else {
@@ -191,9 +191,9 @@ const v = class {
     if (this.optionCount) r.push("has-options");
     const e = this.optionCount > 0;
     return i(a, {
-      key: "b4ccb2b4f42b78a95ca1f1b78a470d400ad1fd7a"
+      key: "2ce592e9fc8db8d547cad71623270837ec0539d6"
     }, i("click-elsewhere", {
-      key: "fe66f307e25a6281536c87f24555b934c0c13528",
+      key: "b0a0ad314e84ccae1e06b197bc6fec8f1c333349",
       onChange: this.onClickElsewhere
     }, e ? i(o, null, i("div", {
       class: "btn-wrapper",
@@ -223,7 +223,7 @@ const v = class {
     }, i("slot", {
       name: "decorator"
     }), l(this.label))), e && i("q2-popover", {
-      key: "06d32a5195dff2969b1d3ead632cc8339a6c953c",
+      key: "d67e1d087a62530ef3c013f070ae522531acd508",
       ref: t => this.popoverElement = t,
       controlElement: this.dropdownBtn,
       open: this.open,
@@ -232,7 +232,7 @@ const v = class {
       direction: this.popoverDirection,
       align: this.popoverAlignment
     }, i("q2-option-list", {
-      key: "b5fd2634e7d1355582f7e94b7f5395b235e675af",
+      key: "6c2484d7110eeff81dfebef4c05dec99adffe935",
       id: "option-list",
       ref: t => this.optionList = t,
       onChange: this.handleChange,
@@ -241,7 +241,7 @@ const v = class {
       label: l("tecton.element.optionList.label", [ this.optionListLabel ]),
       "no-select": true
     }, i("slot", {
-      key: "9d882126946d4dd076a0e6796b0ddc02e7926878"
+      key: "db0c912240b4e2425c16bce894abb8be42ab67e2"
     })))));
   }
   get hostElement() {

package/dist/q2-tecton-elements/tecton-tab-pane.entry.js

@@ -52,7 +52,7 @@ const a = class {
   // #region Render Methods
   render() {
     return i("div", {
-      key: "51dae9e2bcc0885b2d0687982c1f2d518119644c",
+      key: "ace595f724970ba699a0ca62c27b393de637d9ea",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: `tab-pane${this.selected ? "" : " hidden"}`,
       role: "tabpanel",
@@ -60,12 +60,12 @@ const a = class {
       "aria-hidden": `${!this.selected}`,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
     }, this.selected && this.provided !== undefined && !this.provided && i("div", {
-      key: "c7bfbe6c6478863c5a526d4b7d596f0b28c3ff9e"
+      key: "ee8fe1eda2ed564d8afbfcbc2a80b9aa93b68d93"
     }, i("slot", {
-      key: "2a63200ea55be0558a48ffcd1c8a6341b99562da",
+      key: "9da63a65b251f15c84508eccf89c5457b4412de4",
       name: "loading-wrapper"
     }), i("iframe", {
-      key: "ce01a75531961497e5b7c9a7f60348e022093c9b",
+      key: "dd0b576edfa8ce64d864ab0215d6c51995841d57",
       hidden: true,
       name: this.moduleId,
       scrolling: "no",
@@ -88,11 +88,11 @@ const a = class {
       value: e.value,
       name: e.key
     })))) : ""), i("div", {
-      key: "f87931763b09d6d335e520b8d82a839c934cbd20",
+      key: "8a160438d70d8e488fa43815949cd4990dea2f5e",
       class: "slot-wrapper",
       hidden: this.selected && this.provided !== undefined && !this.provided
     }, i("slot", {
-      key: "051bc1d2eb4c2305efc00c2aa37829e187ddadac"
+      key: "ac6d5a0e507221c1f2efa6b26506ebdb5eed7de1"
     })));
   }
   get hostElement() {