q2-tecton-elements 1.60.2 → 1.61.0

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

@@ -0,0 +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 { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\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@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     */\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    // #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        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        this.change.emit({\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                this.change.emit({ 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                                onClick={() => 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                                onClick={() => 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

@@ -0,0 +1,348 @@
+import { r as t, c as a, h as e, F as i, g as r } from "./index-CGkHOjh1.js";
+
+import { c as o, l as n, o as s, a as c } from "./index-LNnzUeDP.js";
+
+const l = "*{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:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom-width:var(--tct-tab-container-border-width, 1px);border-bottom-style:var(--tct-tab-container-border-style, solid);border-bottom-color:var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs)}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:var(--tct-tab-section-font-size, inherit);padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-container-content-padding, var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding))));background:var(--tct-tab-container-content-backgrond, none)}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";
+
+const d = class {
+  constructor(e) {
+    t(this, e);
+    this.change = a(this, "change", 7);
+    this.settled = a(this, "settled", 7);
+    // #region Own Properties
+        this.guid = o();
+    this.hasValidTab = false;
+    this.lastScrolled = new Date(null).getTime();
+    this.scheduledAfterRender = [];
+    // #endregion
+    // #region State Properties
+        this.hasLeft = false;
+    this.hasRight = false;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
+    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */    this.noPrint = false;
+    this.checkScrollState = () => {
+      if (!this.listElement) return;
+      const {scrollLeft: t, scrollWidth: a, clientWidth: e} = this.listElement;
+      this.scrollEnabled = a > e;
+      this.showScrollLeft = t > 0;
+      this.showScrollRight = a > Math.ceil(t) + e;
+    };
+    this.moveToAdjacentTab = (t, a) => {
+      const e = this.tabs.map((({value: t}) => t)).indexOf(t);
+      let i;
+      switch (a) {
+       case "next":
+        i = Math.min(e + 1, this.tabs.length - 1);
+        break;
+
+       case "prev":
+        i = Math.max(e - 1, 0);
+        break;
+
+       case "first":
+        i = 0;
+        break;
+
+       case "last":
+        i = this.tabs.length - 1;
+        break;
+      }
+      if (e === i) return;
+      this.moveToTab(i, true);
+    };
+    this.moveToTab = (t, a = true) => {
+      const e = this.tabs[t].value;
+      const i = this.listElement.querySelector(`[data-value="${e}"]`);
+      if (a) {
+        i.focus({
+          preventScroll: true
+        });
+      }
+      const r = i.offsetLeft - this.listElement.clientWidth / 2;
+      this.listElement.scrollTo({
+        left: r,
+        behavior: "smooth"
+      });
+    };
+    this.onScrollBtnClick = t => {
+      const {scrollLeft: a, scrollWidth: e, clientWidth: i} = this.listElement;
+      const r = Math.floor(i / 2);
+      let o = 0;
+      if (t === "left") {
+        o = -Math.min(r, Math.abs(a));
+      } else {
+        o = Math.min(r, Math.abs(e - a - i));
+      }
+      this.listElement.scrollBy({
+        left: o,
+        behavior: "smooth"
+      });
+    };
+    this.onSlotChange = () => {
+      this.checkScrollState();
+    };
+    this.onTabClick = t => {
+      const a = t.target.closest('button[role="tab"]').dataset.value;
+      const e = this.value === a;
+      if (e) return;
+      this.change.emit({
+        value: a
+      });
+    };
+    this.onTabKeyDown = t => {
+      const a = t.target.dataset.value;
+      switch (t.key) {
+       case "ArrowRight":
+        t.preventDefault();
+        this.moveToAdjacentTab(a, "next");
+        break;
+
+       case "ArrowLeft":
+        t.preventDefault();
+        this.moveToAdjacentTab(a, "prev");
+        break;
+
+       case "Home":
+        t.preventDefault();
+        this.moveToAdjacentTab(a, "first");
+        break;
+
+       case "End":
+        t.preventDefault();
+        this.moveToAdjacentTab(a, "last");
+        break;
+
+       case "Space":
+       case "Enter":
+        t.preventDefault();
+        this.change.emit({
+          value: a
+        });
+        break;
+      }
+    };
+    this.setTabs = () => {
+      this.tabs = this.tabPanes.map((({label: t, value: a, badgeCount: e, badgeDescription: i, badgeTheme: r, badgeStatus: o}) => ({
+        label: t && n(t) || "",
+        value: a,
+        badgeCount: e,
+        badgeDescription: i,
+        badgeTheme: r,
+        badgeStatus: o
+      })));
+    };
+    this.updateTabPaneProps = () => {
+      this.tabPanes.forEach(((t, a) => {
+        t.selected = t.value === this.selectedTabValue;
+        t.guid = this.guid;
+        t.index = a;
+      }));
+    };
+    this.updateTabs = () => {
+      const t = this.hasValidTab;
+      this.updateTabPaneProps();
+      this.setTabs();
+      // Check if we now have a valid tab
+            this.hasValidTab = this.tabs.some((t => t.value === this.value));
+      // Only move if we didn't have a valid tab before but do now
+            if (!t && this.hasValidTab) {
+        this.scheduledAfterRender.push((() => this.determineTabMove()));
+      }
+    };
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    var t, a;
+    (t = this.resizeObserver) === null || t === void 0 ? void 0 : t.disconnect();
+    this.resizeObserver = null;
+    (a = this.mutationObserver) === null || a === void 0 ? void 0 : a.disconnect();
+    this.mutationObserver = null;
+  }
+  componentWillLoad() {
+    const t = new MutationObserver((() => this.updateTabs()));
+    t.observe(this.hostElement, {
+      childList: true,
+      attributes: true
+    });
+    this.mutationObserver = t;
+    this.resizeObserver = new ResizeObserver((() => this.checkScrollState()));
+    this.updateTabs();
+  }
+  componentDidLoad() {
+    var t;
+    (t = this.resizeObserver) === null || t === void 0 ? void 0 : t.observe(this.listElement);
+    this.checkScrollState();
+    s(this.hostElement);
+    this.scheduledAfterRender.push((() => this.determineTabMove()));
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach((t => t()));
+    this.scheduledAfterRender = [];
+    this.settled.emit();
+  }
+  // #endregion
+  // #region Listeners
+  onBadge() {
+    this.setTabs();
+  }
+  defaultChangeHandler(t) {
+    if (t.target === this.hostElement && !this.hostElement.onchange) {
+      this.value = t.detail.value;
+    }
+  }
+  onFocus(t) {
+    if (!c(t, this.hostElement)) return;
+    const a = this.tabs.findIndex((t => t.value === this.selectedTabValue));
+    this.moveToTab(a, true);
+  }
+  onResize() {
+    this.checkScrollState();
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * A method to select a tab pane corresponding with the value.
+     *
+     * @testOnly
+     */
+  async selectTab(t) {
+    const a = this.hostElement.shadowRoot.querySelector(`[test-id="tabLink"][data-value="${t}"]`);
+    a === null || a === void 0 ? void 0 : a.click();
+  }
+  // #endregion
+  // #region Watchers
+  nameObserver() {
+    this.updateTabs();
+  }
+  valueObserver() {
+    this.updateTabs();
+    this.scheduledAfterRender.push(this.resizeIframe);
+    const t = this.tabs.findIndex((t => t.value === this.value));
+    if (t > -1) {
+      this.scheduledAfterRender.push((() => this.moveToTab(t, false)));
+    }
+  }
+  // #endregion
+  // #region Local Methods
+  get selectedTabValue() {
+    return this.value || "";
+  }
+  get tabList() {
+    return this.hostElement.shadowRoot.querySelector(".tab-list");
+  }
+  get tabPanes() {
+    const t = this.hostElement.querySelectorAll("q2-tab-pane, tecton-tab-pane");
+    if (t.length === 0) {
+      return [];
+    }
+    return Array.from(t).filter((t => t.name === this.name));
+  }
+  determineTabMove() {
+    if (!this.tabs) return;
+    const t = this.tabs.findIndex((t => t.value === this.value));
+    if (t === -1) return;
+    this.moveToTab(t, false);
+  }
+  resizeIframe() {
+    var t, a;
+    return (a = (t = window.TectonElements) === null || t === void 0 ? void 0 : t.resizeIframe) === null || a === void 0 ? void 0 : a.call(t);
+  }
+  // #endregion
+  // #region Render Methods
+  renderTab(t, a) {
+    const {label: i, value: r} = t;
+    const o = this.selectedTabValue === r;
+    return e("li", {
+      role: "presentation"
+    }, e("button", {
+      id: `tab-${this.guid}-${a}`,
+      "data-value": r,
+      "test-id": "tabLink",
+      tabIndex: o ? 0 : -1,
+      role: "tab",
+      "aria-selected": `${o}`,
+      onClick: this.onTabClick,
+      onKeyDown: this.onTabKeyDown
+    }, t.badgeCount === undefined ? i : this.renderTabWithBadge(t, o)));
+  }
+  renderTabWithBadge(t, a) {
+    let i;
+    if (!t.badgeStatus && a) i = t.badgeTheme || "primary";
+    let r;
+    if (t.badgeDescription) r = n(t.badgeDescription); else if (t.badgeStatus) r = n(`tecton.element.tab.pane.${t.badgeStatus}`, [ t.badgeCount ]); else r = n("tecton.element.tab.pane.new");
+    return e("div", {
+      class: "tab-pane-badge",
+      "aria-label": `${t.label}, ${t.badgeCount} ${r}`
+    }, t.label, e("q2-badge", {
+      value: t.badgeCount,
+      theme: i,
+      status: t.badgeStatus
+    }));
+  }
+  render() {
+    return e(i, {
+      key: "762d04f0f182bb1c074ab8fa51897a9583d897ea"
+    }, e("div", {
+      key: "f328679f7222610f537dba4b3ac4a04b1dc68a79",
+      class: "tab-container"
+    }, this.scrollEnabled && e(i, {
+      key: "ede52a5b98c1d3ac4efc57a546988f25aceb312f"
+    }, e("div", {
+      key: "2e7dc40ca1ecadb8a9c27d36e0e9d7b50dac278d",
+      class: "gradient-left",
+      hidden: !this.showScrollLeft
+    }), e("div", {
+      key: "0ac25be348208afa6e191adf5b12a84ca278d22b",
+      class: "gradient-right",
+      hidden: !this.showScrollRight
+    }), e("q2-btn", {
+      key: "cd6258a841f3cbef8a662e51c02ac7e77f426844",
+      class: "btn-left",
+      hidden: !this.showScrollLeft,
+      onClick: () => this.onScrollBtnClick("left")
+    }, e("q2-icon", {
+      key: "8b9555da8497629377545c870affa9f003cdc723",
+      type: "chevron-left",
+      label: "scroll left"
+    })), e("q2-btn", {
+      key: "cd2b0e1a29317acc5cf7206081613140a9474bdf",
+      class: "btn-right",
+      hidden: !this.showScrollRight,
+      onClick: () => this.onScrollBtnClick("right")
+    }, e("q2-icon", {
+      key: "09bc80286945ae75904edff5da82305d494a450c",
+      type: "chevron-right",
+      label: "scroll right"
+    }))), e("ul", {
+      key: "3eab5691f08e2136d75ad3d389ac96719a49c8fd",
+      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: "a16d971aa49d025326c01889180f88941c7eeb97",
+      class: "tab-content"
+    }, e("slot", {
+      key: "27e202d2e6a5cb3d2da941fba4e8e9fec180bd9d",
+      onSlotchange: () => this.onSlotChange()
+    })));
+  }
+  get hostElement() {
+    return r(this);
+  }
+  static get watchers() {
+    return {
+      name: [ "nameObserver" ],
+      value: [ "valueObserver" ]
+    };
+  }
+};
+
+d.style = l;
+
+export { d as q2_tab_container };
+//# sourceMappingURL=q2-tab-container.entry.esm.js.map
+//# sourceMappingURL=q2-tab-container.entry.js.map

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

@@ -0,0 +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","change","emit","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","observer","MutationObserver","observe","hostElement","childList","attributes","ResizeObserver","componentDidLoad","overrideFocus","componentDidRender","fn","settled","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","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 { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\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@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     */\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    // #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        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        this.change.emit({\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                this.change.emit({ 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                                onClick={() => 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                                onClick={() => 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-tab-pane.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-tab-pane.entry.esm.js","sources":["src/components/q2-tab-pane/q2-tab-pane.scss?tag=q2-tab-pane&encapsulation=shadow","src/components/q2-tab-pane/q2-tab-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n.tab-pane[aria-hidden='true'] {\n    display: none;\n}\n\n.tab-pane:focus {\n    outline: none;\n    box-shadow: none;\n}\n\n","import { Component, ComponentInterface, Prop, Event, EventEmitter, Watch, h } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\n@Component({ tag: 'q2-tab-pane', shadow: true, styleUrl: 'q2-tab-pane.scss' })\nexport class Q2TabPane implements ComponentInterface {\n    // #region Public Property API\n\n    /** Adds a `q2-badge` component with the number provided right next to the tab pane label. */\n    @Prop({ reflect: true })\n    badgeCount: number;\n\n    /**\n     * The text that will be pronounced alongside `badgeCount` when the screen reader presents the tab.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    badgeDescription: string;\n\n    /** Allows you to specify the status of the tab, which is always visible. */\n    @Prop({ reflect: true })\n    badgeStatus: Q2Badge['status'];\n\n    /** Allows you to specify the color of the badge when the tab is active. */\n    @Prop({ reflect: true })\n    badgeTheme: Q2Badge['theme'];\n\n    /**\n     * Used by q2-tab-container to apply a unique id to each tab pane\n     * @private\n     */\n    @Prop()\n    guid: number;\n\n    /**\n     * Used by q2-tab-container to indicate the pane's index\n     * @private\n     */\n    @Prop()\n    index: number;\n\n    /**\n     * Serves as the text that will be visible in the tab control provided by `q2-tab-container`.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by q2-tab-container to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Used by q2-tab-container to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /** Serves as the pane's value. Should correspond to the `q2-tab-container` value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the badge count, description, theme, or status changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    badge: EventEmitter<boolean>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                <slot />\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,uvBAAuvB;;MCI/vB,SAAS,GAAA,MAAA;;;;;;;IA8ElB,aAAa,GAAA;AACT,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;;;;IAMrB,MAAM,GAAA;AACF,QAAA,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAA,CAAE,EACzC,KAAK,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,SAAS,CAAA,CAAE,EAClD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAC,IAAI,EAAA,aAAA,EACA,CAAG,EAAA,CAAC,IAAI,CAAC,QAAQ,CAAE,CAAA,EAAA,iBAAA,EACf,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAEjD,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN;;;;;;;;;;;;;"}

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

@@ -0,0 +1,44 @@
+import { r as e, c as t, h as i } from "./index-CGkHOjh1.js";
+
+const n = "*{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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}";
+
+const a = class {
+  constructor(i) {
+    e(this, i);
+    this.badge = t(this, "badge", 7);
+  }
+  // #endregion
+  // #region Watchers
+  badgeObserver() {
+    this.badge.emit();
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return i("div", {
+      key: "a2b84ea531c8a9f62d89513d982184a797fdd792",
+      id: `tab-pane-${this.guid}-${this.index}`,
+      class: `tab-pane${this.selected ? "" : " hidden"}`,
+      role: "tabpanel",
+      tabindex: "-1",
+      "aria-hidden": `${!this.selected}`,
+      "aria-labelledby": `tab-${this.guid}-${this.index}`
+    }, i("slot", {
+      key: "9b7c7451d9ce7054858748617b896c995395456f"
+    }));
+  }
+  static get watchers() {
+    return {
+      badgeCount: [ "badgeObserver" ],
+      badgeDescription: [ "badgeObserver" ],
+      badgeTheme: [ "badgeObserver" ],
+      badgeStatus: [ "badgeObserver" ]
+    };
+  }
+};
+
+a.style = n;
+
+export { a as q2_tab_pane };
+//# sourceMappingURL=q2-tab-pane.entry.esm.js.map
+//# sourceMappingURL=q2-tab-pane.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2TabPaneCss","Q2TabPane","badgeObserver","this","badge","emit","render","h","key","id","guid","index","class","selected","role","tabindex"],"sources":["src/components/q2-tab-pane/q2-tab-pane.scss?tag=q2-tab-pane&encapsulation=shadow","src/components/q2-tab-pane/q2-tab-pane.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n.tab-pane[aria-hidden='true'] {\n    display: none;\n}\n\n.tab-pane:focus {\n    outline: none;\n    box-shadow: none;\n}\n\n","import { Component, ComponentInterface, Prop, Event, EventEmitter, Watch, h } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\n@Component({ tag: 'q2-tab-pane', shadow: true, styleUrl: 'q2-tab-pane.scss' })\nexport class Q2TabPane implements ComponentInterface {\n    // #region Public Property API\n\n    /** Adds a `q2-badge` component with the number provided right next to the tab pane label. */\n    @Prop({ reflect: true })\n    badgeCount: number;\n\n    /**\n     * The text that will be pronounced alongside `badgeCount` when the screen reader presents the tab.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    badgeDescription: string;\n\n    /** Allows you to specify the status of the tab, which is always visible. */\n    @Prop({ reflect: true })\n    badgeStatus: Q2Badge['status'];\n\n    /** Allows you to specify the color of the badge when the tab is active. */\n    @Prop({ reflect: true })\n    badgeTheme: Q2Badge['theme'];\n\n    /**\n     * Used by q2-tab-container to apply a unique id to each tab pane\n     * @private\n     */\n    @Prop()\n    guid: number;\n\n    /**\n     * Used by q2-tab-container to indicate the pane's index\n     * @private\n     */\n    @Prop()\n    index: number;\n\n    /**\n     * Serves as the text that will be visible in the tab control provided by `q2-tab-container`.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Used by q2-tab-container to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Used by q2-tab-container to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /** Serves as the pane's value. Should correspond to the `q2-tab-container` value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the badge count, description, theme, or status changes.\n     * @private\n     */\n    @Event({ bubbles: true })\n    badge: EventEmitter<boolean>;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('badgeCount')\n    @Watch('badgeDescription')\n    @Watch('badgeTheme')\n    @Watch('badgeStatus')\n    badgeObserver() {\n        this.badge.emit();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                id={`tab-pane-${this.guid}-${this.index}`}\n                class={`tab-pane${this.selected ? '' : ' hidden'}`}\n                role=\"tabpanel\"\n                tabindex=\"-1\"\n                aria-hidden={`${!this.selected}`}\n                aria-labelledby={`tab-${this.guid}-${this.index}`}\n            >\n                <slot />\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAe;;MCIRC,IAAS;;;;;;;EA8ElB,aAAAC;IACIC,KAAKC,MAAMC;;;;EAMf,MAAAC;IACI,OACIC,EACI;MAAAC,KAAA;MAAAC,IAAI,YAAYN,KAAKO,QAAQP,KAAKQ;MAClCC,OAAO,WAAWT,KAAKU,WAAW,KAAK;MACvCC,MAAK;MACLC,UAAS;MAAI,eACA,IAAIZ,KAAKU;MAAU,mBACf,OAAOV,KAAKO,QAAQP,KAAKQ;OAE1CJ,EAAQ;MAAAC,KAAA","ignoreList":[]}