q2-tecton-elements 1.65.0 → 1.66.1

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

@@ -1 +1 @@
-{"version":3,"names":["q2PaginationCss","Q2Pagination","constructor","hostRef","this","alignment","autoSize","disabled","checkSize","hostElement","containerElement","isOverflowing","containerWidth","clientWidth","isSmall","nextPaint","containerWidthHasNotChanged","handlePageChange","page","totalPages","inputField","parseInt","isNaN","value","onchange","mirrorEmit","handlePerPageChange","event","perPage","detail","disconnectedCallback","removeResizeObserver","componentWillLoad","checkDisplayTypes","manageResizeObserver","componentDidLoad","overrideFocus","onHostElementFocus","isEventFromElement","isFullViewHidden","_a","querySelector","focus","clickFirstPage","button","firstPageBtn","click","clickLastPage","lastPageBtn","clickNextPage","nextPageBtn","clickPreviousPage","prevPageBtn","selectPerPageIncrementValue","showPerPageSelect","perPageIncrementsArray","includes","perPageSelect","options","Array","from","querySelectorAll","find","option","setPageValue","_b","blur","resizeObserver","ResizeObserver","observe","window","addEventListener","pagesOnly","recordsOnly","stacked","containerClasses","classes","push","currentRange","perPageWithDefault","totalWithDefault","total","pageWithDefault","start","end","Math","min","nextRange","isArray","perPageIncrements","map","num","Number","trim","replace","split","prevRange","max","recordTypeWithDefault","recordType","loc","length","pages","ceil","disconnect","removeEventListener","renderPerPage","increments","sort","a","b","undefined","join","h","ref","el","onTctChange","display","render","onFirstPage","onLastPage","nextButtonLabel","prevButtonLabel","next","range","toLowerCase","key","class","current","toLocaleString","label","hidden","onTctClick","type","onClick","dispatchEvent","FocusEvent","hideLabel","optional","stopPropagation"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    display: flex;\n    width: 100%;\n}\n\n:host([alignment='right']) {\n    justify-content: flex-end;\n}\n\n:host([alignment='center']) {\n    justify-content: center;\n}\n\n:host([alignment='left']) {\n    justify-content: flex-start;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.container {\n    display: inline-flex;\n    column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n    align-items: center;\n    height: var-list(var-prefixer(pagination-height), 44px);\n\n    &.stacked {\n        flex-direction: column;\n        column-gap: 0;\n        row-gap: var-list(--tct-pagination-row-gap, --app-scale-2x, 10px);\n        height: auto;\n        align-items: stretch;\n\n        .description {\n            text-align: center;\n        }\n\n        .controls {\n            justify-content: center;\n        }\n\n        .per-page {\n            display: flex;\n            justify-content: center;\n        }\n\n        q2-select {\n            --tct-select-margin: 0;\n            width: var(--tct-pagination-perpage-width, 60%);\n        }\n    }\n}\n\n.controls {\n    display: flex;\n}\n\n.btn-group {\n    display: flex;\n    gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.input-display {\n    white-space: nowrap;\n}\n\n.input-display {\n    display: grid;\n    grid-template-columns: auto var(--tct-pagination-input-width, 50px) auto;\n    align-items: center;\n    gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n    &[hidden] {\n        display: none;\n    }\n}\n\n.input-wrapper {\n    height: var-list(var-prefixer(pagination-height), 44px);\n    display: flex;\n    align-items: center;\n}\n\nq2-btn {\n    --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n    --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n    --tct-btn-icon-hover-background: #{var-list(--tct-pagination-btn-hover-background, --app-gray-l3, #f2f2f2)};\n    --tct-icon-stroke-primary: #{var-list(--tct-pagination-btn-icon-stroke-primary, --app-gray, #747474)};\n    --tct-icon-stroke-secondary: #{var-list(--tct-pagination-btn-icon-stroke-secondary, --app-gray, #747474)};\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n    color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n    --tct-input-margin-top: 0;\n    --tct-input-margin-bottom: 0;\n    --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n    --tct-input-min-height: var(--tct-input-height);\n    --tct-input-align: center;\n}\n\nq2-select {\n    --tct-select-input-min-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    --tct-select-input-max-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    width: #{var-list(var-prefixer(pagination-perpage-width), 100%)};\n    min-width: #{var-list(var-prefixer(pagination-perpage-min-width), 110px)};\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Method,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Pagination\n * @category Display\n * @summary Use for navigating between pages of content like search results or tables.\n */\n@Component({ tag: 'q2-pagination', shadow: true, styleUrl: 'q2-pagination.scss' })\nexport class Q2Pagination implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLElement;\n    containerWidth: number;\n    firstPageBtn: HTMLQ2BtnElement;\n    inputField: HTMLQ2InputElement;\n    lastPageBtn: HTMLQ2BtnElement;\n    nextPageBtn: HTMLQ2BtnElement;\n    perPageSelect: HTMLQ2SelectElement;\n    prevPageBtn: HTMLQ2BtnElement;\n    resizeObserver: ResizeObserver;\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    isSmall: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Indicates the horizontal alignment of pagination elements */\n    @Prop()\n    alignment: 'left' | 'center' | 'right' = 'right';\n\n    /** Determines whether the component uses dynamic resizing behavior. This is disabled when `pagesOnly`, `recordsOnly`, or `stacked` is true. */\n    @Prop({ reflect: true, mutable: true })\n    autoSize: boolean = true;\n\n    /** Allows the component to be disabled should the state of the page require this  */\n    @Prop({ reflect: true, mutable: true })\n    disabled: boolean = false;\n\n    /** The current page that is being displayed. */\n    @Prop({ reflect: true, mutable: true })\n    page: number;\n\n    /**\n     * The number of pages that can be displayed.\n     * @info\n     * Only referenced when `pagesOnly` is true.\n     */\n    @Prop({ reflect: true, mutable: true })\n    pages: number;\n\n    /** Indicates to display only the current and total pages. This disables the `autoSize` feature. */\n    @Prop({ reflect: true, mutable: true })\n    pagesOnly: boolean;\n\n    /** The total number of records displayed on each page. This disables the `autoSize` feature. */\n    @Prop({ reflect: true, mutable: true })\n    perPage: number;\n\n    /**\n     * A list of perPage values.\n     * This generates a [Select](https://tecton.q2developer.com/design-system/q2-select/) element that allows the user to modify the `perPage` value.\n     * @info\n     * `pagesOnly` or `recordsOnly` being true disables this feature.\n     *\n     * **Example:**\n     * @snippet\n     * this.perPageIncrements = [10, 25, 50];\n     */\n    @Prop({ reflect: true, mutable: true })\n    perPageIncrements: number[] | string[] | string | undefined;\n\n    /** Indicates to display only the current and total records. */\n    @Prop({ reflect: true, mutable: true })\n    recordsOnly: boolean;\n\n    /** Description of the record type to be displayed alongside the record count. */\n    @Prop()\n    recordType: string;\n\n    /** Allows the component to be displayed in a stacked layout. This disables the `autoSize` feature. */\n    @Prop({ reflect: true })\n    stacked: boolean;\n\n    /** The total number of records to paginate. */\n    @Prop({ reflect: true })\n    total: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the page is changed.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ page: number }>;\n\n    /**\n     * Emitted when the page is changed.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ page: number }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeResizeObserver();\n    }\n\n    componentWillLoad(): void {\n        this.checkDisplayTypes();\n        this.manageResizeObserver();\n    }\n\n    componentDidLoad(): void {\n        this.containerWidth = this.containerElement.clientWidth;\n\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (this.disabled) return;\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const { isFullViewHidden, containerElement, inputField } = this;\n        if (isFullViewHidden) {\n            containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n        } else {\n            inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the button that controls moving to the first page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickFirstPage() {\n        if (this.disabled) return;\n        const button = this.firstPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates clicking the button that controls moving to the last page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickLastPage() {\n        if (this.disabled) return;\n        const button = this.lastPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates clicking the button that controls moving to the next page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickNextPage() {\n        if (this.disabled) return;\n        const button = this.nextPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates clicking the button that controls moving to the previous page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickPreviousPage() {\n        if (this.disabled) return;\n        const button = this.prevPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates selecting a `perPage` value from the `perPageIncrements` dropdown,\n     * and updates the value of the `perPage` property.\n     *\n     * If `value` is not in the `perPageIncrements` array, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectPerPageIncrementValue(value: number) {\n        if (this.disabled) return;\n        if (isNaN(value) || !this.showPerPageSelect || !this.perPageIncrementsArray.includes(value)) return;\n        this.perPageSelect.focus();\n        this.perPageSelect.click();\n        const options = Array.from(this.perPageSelect.querySelectorAll('q2-option'));\n        options.find(option => option.value === `${value}`)?.click();\n    }\n\n    /**\n     * Emulates setting the page value in the `<input>` field,\n     * and emitting a change event with the updated page number.\n     *\n     * If `value` is invalid, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async setPageValue(value: number) {\n        if (this.disabled) return;\n        if (!this.inputField || isNaN(value) || value < 1 || value > this.totalPages) return;\n        this.inputField?.focus();\n        this.inputField.value = `${value}`;\n        this.inputField?.blur();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('autoSize')\n    manageResizeObserver() {\n        if (this.autoSize) {\n            if (this.resizeObserver) return;\n            this.resizeObserver = new ResizeObserver(() => this.checkSize());\n            this.resizeObserver.observe(this.hostElement);\n            window.addEventListener('resize', this.checkSize);\n        } else {\n            this.isSmall = false;\n            this.removeResizeObserver();\n        }\n    }\n\n    @Watch('recordsOnly')\n    @Watch('pagesOnly')\n    @Watch('stacked')\n    checkDisplayTypes() {\n        if (this.pagesOnly || this.recordsOnly || this.stacked) this.autoSize = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get containerClasses() {\n        const classes = ['container'];\n        if (this.stacked) classes.push('stacked');\n        return classes;\n    }\n\n    get currentRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = total > 0 ? (page - 1) * perPage + 1 : 0;\n        const end = Math.min(page * perPage, total);\n        return `${start} - ${end}`;\n    }\n\n    get isFullViewHidden() {\n        return this.isSmall || this.recordsOnly || this.pagesOnly;\n    }\n\n    get nextRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = page * perPage + 1;\n        const end = Math.min((page + 1) * perPage, total);\n        return `${start} - ${end}`;\n    }\n\n    get pageWithDefault() {\n        return this.total > 0 ? this.page || 1 : 0;\n    }\n\n    get perPageIncrementsArray() {\n        if (Array.isArray(this.perPageIncrements)) {\n            return this.perPageIncrements.map(num => Number(num));\n        } else if (typeof this.perPageIncrements === 'string') {\n            return this.perPageIncrements\n                .trim()\n                .replace(/[\\[\\]\\\"\\']/g, '')\n                .split(',')\n                .map(num => Number(num));\n        } else {\n            return [];\n        }\n    }\n\n    get perPageWithDefault() {\n        return this.perPage || 10;\n    }\n\n    get prevRange() {\n        const { perPageWithDefault: perPage, pageWithDefault: page } = this;\n        const start = Math.max(1, (page - 2) * perPage + 1);\n        const end = (page - 1) * perPage;\n        return `${start} - ${end}`;\n    }\n\n    get recordTypeWithDefault() {\n        return this.recordType || loc('tecton.element.pagination.defaultRecordType');\n    }\n\n    get showPerPageSelect() {\n        return this.perPageIncrements?.length > 1;\n    }\n\n    get totalPages() {\n        const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n        if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n        return Math.ceil(total / perPage);\n    }\n\n    get totalWithDefault() {\n        return this.total || 0;\n    }\n\n    checkSize = () => {\n        const { hostElement, containerElement } = this;\n        const isOverflowing = this.containerWidth > hostElement.clientWidth;\n        this.isSmall = isOverflowing;\n        if (isOverflowing) return;\n\n        nextPaint(() => {\n            const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n            if (containerWidthHasNotChanged) return;\n            this.containerWidth = containerElement.clientWidth;\n            this.checkSize();\n        });\n    };\n\n    handlePageChange = (page: number | string) => {\n        if (this.disabled) return;\n        const { totalPages, inputField } = this;\n        page = parseInt(`${page}`);\n        if (isNaN(page) || page < 1) {\n            page = 1;\n        } else if (page > totalPages) {\n            page = totalPages;\n        }\n\n        if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n        if (!this.hostElement.onchange) {\n            this.page = page;\n        }\n\n        mirrorEmit(this, ['change', 'tctChange'], { page });\n    };\n\n    handlePerPageChange = (event: CustomEvent) => {\n        if (this.disabled) return;\n        this.perPage = event.detail.value * 1;\n    };\n\n    removeResizeObserver() {\n        if (this.resizeObserver) {\n            this.resizeObserver?.disconnect();\n            this.resizeObserver = null;\n            window.removeEventListener('resize', this.checkSize);\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderPerPage() {\n        const increments = this.perPageIncrementsArray.sort((a, b) => a - b);\n        if (this.perPage === undefined) this.perPage = increments[0];\n        this.perPageIncrements = `[${increments.join(',')}]`;\n        return (\n            <q2-select\n                ref={el => (this.perPageSelect = el)}\n                onTctChange={this.handlePerPageChange}\n                value={this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined}\n                disabled={this.disabled}\n            >\n                {increments.map(perPage => (\n                    <q2-option\n                        value={`${perPage}`}\n                        display={`${loc('tecton.element.pagination.view')} ${perPage}`}\n                    >{`${loc('tecton.element.pagination.view')} ${perPage}`}</q2-option>\n                ))}\n            </q2-select>\n        );\n    }\n\n    render() {\n        const {\n            pagesOnly,\n            recordsOnly,\n            isFullViewHidden,\n            recordTypeWithDefault: recordType,\n            totalPages,\n            totalWithDefault: total,\n            pageWithDefault: page,\n            currentRange,\n            nextRange,\n            prevRange,\n            showPerPageSelect,\n            disabled,\n        } = this;\n        const onFirstPage = page < 2;\n        const onLastPage = page === totalPages;\n\n        let nextButtonLabel: string = loc('tecton.element.pagination.goToNext');\n        let prevButtonLabel: string = loc('tecton.element.pagination.goToPrevious');\n        if (pagesOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToPages', { next: page - 1, total: totalPages });\n            nextButtonLabel = loc('tecton.element.pagination.goToPages', { next: page + 1, total: totalPages });\n        } else if (recordsOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: prevRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n            nextButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: nextRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n        }\n\n        return (\n            <nav\n                class={this.containerClasses.join(' ')}\n                ref={el => (this.containerElement = el)}\n                aria-label={loc('tecton.element.pagination.title')}\n            >\n                <div\n                    class=\"description\"\n                    test-id=\"description\"\n                >\n                    {pagesOnly\n                        ? loc('tecton.element.pagination.pages', {\n                              current: page,\n                              total: totalPages,\n                          })\n                        : loc('tecton.element.pagination.description', {\n                              range: currentRange,\n                              recordType: recordType.toLowerCase(),\n                              total: total.toLocaleString(),\n                          })}\n                </div>\n                <div class=\"controls\">\n                    <div class=\"btn-group\">\n                        <q2-btn\n                            ref={el => (this.firstPageBtn = el)}\n                            label={loc('tecton.element.pagination.goToFirstPage')}\n                            disabled={disabled || onFirstPage}\n                            hidden={isFullViewHidden}\n                            onTctClick={() => this.handlePageChange(1)}\n                            test-id=\"firstPageBtn\"\n                            hide-label\n                        >\n                            <q2-icon type=\"chevron-double-left\" />\n                        </q2-btn>\n                        <q2-btn\n                            ref={el => (this.prevPageBtn = el)}\n                            label={prevButtonLabel}\n                            disabled={disabled || onFirstPage}\n                            onTctClick={() => this.handlePageChange(page - 1)}\n                            test-id=\"prevPageBtn\"\n                            hide-label\n                        >\n                            <q2-icon type=\"chevron-left\" />\n                        </q2-btn>\n                    </div>\n                    <div\n                        class=\"input-display\"\n                        hidden={isFullViewHidden}\n                    >\n                        <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n                        <div\n                            class=\"input-wrapper\"\n                            onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n                        >\n                            <q2-input\n                                ref={el => (this.inputField = el)}\n                                type=\"number\"\n                                value={`${page}`}\n                                min={1}\n                                max={this.totalPages}\n                                hideLabel\n                                optional\n                                label={`${loc('tecton.element.pagination.page')} (${loc(\n                                    'tecton.element.pagination.ofPages',\n                                    [totalPages.toLocaleString()]\n                                )})`}\n                                onTctChange={event => {\n                                    event.stopPropagation();\n                                    this.handlePageChange(event.detail.value);\n                                }}\n                                test-id=\"pageInput\"\n                                current=\"page\"\n                                disabled={disabled}\n                            ></q2-input>\n                        </div>\n                        <span aria-hidden=\"true\">\n                            {loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])}\n                        </span>\n                    </div>\n                    <div class=\"btn-group\">\n                        <q2-btn\n                            ref={el => (this.nextPageBtn = el)}\n                            label={nextButtonLabel}\n                            disabled={disabled || onLastPage}\n                            onTctClick={() => this.handlePageChange(page + 1)}\n                            test-id=\"nextPageBtn\"\n                            hide-label\n                        >\n                            <q2-icon type=\"chevron-right\" />\n                        </q2-btn>\n                        <q2-btn\n                            ref={el => (this.lastPageBtn = el)}\n                            label=\"tecton.element.pagination.goToLastPage\"\n                            disabled={disabled || onLastPage}\n                            hidden={isFullViewHidden}\n                            onTctClick={() => this.handlePageChange(totalPages)}\n                            test-id=\"lastPageBtn\"\n                            hide-label\n                        >\n                            <q2-icon type=\"chevron-double-right\" />\n                        </q2-btn>\n                    </div>\n                </div>\n                <div\n                    class=\"per-page\"\n                    hidden={isFullViewHidden || !this.perPageIncrements?.length}\n                >\n                    {showPerPageSelect && this.renderPerPage()}\n                </div>\n            </nav>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2PaginationCss","Q2Pagination","constructor","hostRef","this","autoSize","disabled","checkSize","hostElement","containerElement","isOverflowing","containerWidth","clientWidth","isSmall","nextPaint","containerWidthHasNotChanged","handlePageChange","page","totalPages","inputField","parseInt","isNaN","value","onchange","mirrorEmit","handlePerPageChange","event","perPage","_a","detail","disconnectedCallback","removeResizeObserver","componentWillLoad","checkDisplayTypes","manageResizeObserver","alignment","stacked","componentDidLoad","overrideFocus","onHostElementFocus","isEventFromElement","isFullViewHidden","querySelector","focus","clickFirstPage","button","firstPageBtn","click","clickLastPage","lastPageBtn","clickNextPage","nextPageBtn","clickPreviousPage","prevPageBtn","selectPerPageIncrementValue","showPerPageSelect","perPageIncrementsArray","includes","perPageSelect","options","Array","from","querySelectorAll","find","option","setPageValue","_b","blur","resizeObserver","ResizeObserver","observe","window","addEventListener","pagesOnly","recordsOnly","containerClasses","classes","push","currentRange","perPageWithDefault","totalWithDefault","total","pageWithDefault","start","end","Math","min","nextRange","isArray","perPageIncrements","map","num","Number","trim","replace","split","prevRange","max","recordTypeWithDefault","recordType","loc","length","pages","ceil","disconnect","removeEventListener","renderPerPage","increments","sort","a","b","undefined","join","h","ref","el","onTctChange","display","render","onFirstPage","onLastPage","nextButtonLabel","prevButtonLabel","next","range","toLowerCase","key","class","current","toLocaleString","label","hidden","onTctClick","type","onClick","dispatchEvent","FocusEvent","hideLabel","optional","stopPropagation"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    display: flex;\n    width: 100%;\n}\n\n:host([alignment='right']) {\n    justify-content: flex-end;\n}\n\n:host([alignment='center']) {\n    justify-content: center;\n}\n\n:host([alignment='left']) {\n    justify-content: flex-start;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.container {\n    display: inline-flex;\n    column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n    align-items: center;\n    height: var-list(var-prefixer(pagination-height), 44px);\n    color: var(--tct-pagination-color, inherit);\n    font-size: var(--tct-pagination-font-size, inherit);\n    font-weight: var(--tct-pagination-font-weight, inherit);\n\n    &.stacked {\n        flex-direction: column;\n        column-gap: 0;\n        row-gap: var-list(--tct-pagination-row-gap, --app-scale-2x, 10px);\n        height: auto;\n        align-items: stretch;\n\n        .description {\n            text-align: center;\n        }\n\n        .controls {\n            justify-content: center;\n        }\n\n        .per-page {\n            display: flex;\n            justify-content: center;\n        }\n\n        q2-select {\n            --tct-select-margin: 0;\n            width: var(--tct-pagination-perpage-width, 60%);\n        }\n    }\n}\n\n.controls {\n    display: flex;\n}\n\n.btn-group {\n    display: flex;\n    gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.input-display {\n    white-space: nowrap;\n}\n\n.input-display {\n    display: grid;\n    grid-template-columns: auto var(--tct-pagination-input-width, 50px) auto;\n    align-items: center;\n    gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n    &[hidden] {\n        display: none;\n    }\n}\n\n.input-wrapper {\n    height: var-list(var-prefixer(pagination-height), 44px);\n    display: flex;\n    align-items: center;\n}\n\nq2-btn {\n    --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n    --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n    --tct-btn-icon-hover-background: #{var-list(--tct-pagination-btn-hover-background, --app-gray-l3, #f2f2f2)};\n    --tct-icon-stroke-primary: #{var-list(--tct-pagination-btn-icon-stroke-primary, --app-gray, #747474)};\n    --tct-icon-stroke-secondary: #{var-list(--tct-pagination-btn-icon-stroke-secondary, --app-gray, #747474)};\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n    color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n    --tct-input-margin-top: 0;\n    --tct-input-margin-bottom: 0;\n    --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n    --tct-input-min-height: var(--tct-input-height);\n    --tct-input-align: center;\n}\n\nq2-select {\n    --tct-select-input-min-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    --tct-select-input-max-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    width: #{var-list(var-prefixer(pagination-perpage-width), 100%)};\n    min-width: #{var-list(var-prefixer(pagination-perpage-min-width), 110px)};\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Method,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Pagination\n * @category Display\n * @summary Use for navigating between pages of content like search results or tables.\n */\n@Component({ tag: 'q2-pagination', shadow: true, styleUrl: 'q2-pagination.scss' })\nexport class Q2Pagination implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLElement;\n    containerWidth: number;\n    firstPageBtn: HTMLQ2BtnElement;\n    inputField: HTMLQ2InputElement;\n    lastPageBtn: HTMLQ2BtnElement;\n    nextPageBtn: HTMLQ2BtnElement;\n    perPageSelect: HTMLQ2SelectElement;\n    prevPageBtn: HTMLQ2BtnElement;\n    resizeObserver: ResizeObserver;\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    isSmall: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Indicates the horizontal alignment of pagination elements\n     * @info\n     * When using the 'stacked' version, the default alignment is 'center'. When using the unstacked version, the default alignment is 'right'.\n     */\n    @Prop({ reflect: true, mutable: true })\n    alignment?: 'left' | 'center' | 'right';\n\n    /** Determines whether the component uses dynamic resizing behavior. This is disabled when `pagesOnly`, `recordsOnly`, or `stacked` is true. */\n    @Prop({ reflect: true, mutable: true })\n    autoSize: boolean = true;\n\n    /** Allows the component to be disabled should the state of the page require this  */\n    @Prop({ reflect: true, mutable: true })\n    disabled: boolean = false;\n\n    /** The current page that is being displayed. */\n    @Prop({ reflect: true, mutable: true })\n    page: number;\n\n    /**\n     * The number of pages that can be displayed.\n     * @info\n     * Only referenced when `pagesOnly` is true.\n     */\n    @Prop({ reflect: true, mutable: true })\n    pages: number;\n\n    /** Indicates to display only the current and total pages. This disables the `autoSize` feature. */\n    @Prop({ reflect: true, mutable: true })\n    pagesOnly: boolean;\n\n    /** The total number of records displayed on each page. This disables the `autoSize` feature. */\n    @Prop({ reflect: true, mutable: true })\n    perPage: number;\n\n    /**\n     * A list of perPage values.\n     * This generates a [Select](https://tecton.q2developer.com/design-system/q2-select/) element that allows the user to modify the `perPage` value.\n     * @info\n     * `pagesOnly` or `recordsOnly` being true disables this feature.\n     *\n     * **Example:**\n     * @snippet\n     * this.perPageIncrements = [10, 25, 50];\n     */\n    @Prop({ reflect: true, mutable: true })\n    perPageIncrements: number[] | string[] | string | undefined;\n\n    /** Indicates to display only the current and total records. */\n    @Prop({ reflect: true, mutable: true })\n    recordsOnly: boolean;\n\n    /** Description of the record type to be displayed alongside the record count. */\n    @Prop()\n    recordType: string;\n\n    /**\n     * Allows the component to be displayed in a stacked layout. This disables the `autoSize` feature.\n     * @info\n     * When set to true, the default alignment will be 'center'. When false, the default alignment is 'right'.\n     */\n    @Prop({ reflect: true })\n    stacked: boolean;\n\n    /** The total number of records to paginate. */\n    @Prop({ reflect: true })\n    total: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the page is changed.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ page: number }>;\n\n    /**\n     * Emitted when the page is changed.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ page: number }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeResizeObserver();\n    }\n\n    componentWillLoad(): void {\n        this.checkDisplayTypes();\n        this.manageResizeObserver();\n        if (!this.alignment) {\n            this.alignment = this.stacked ? 'center' : 'right';\n        }\n    }\n\n    componentDidLoad(): void {\n        this.containerWidth = this.containerElement.clientWidth;\n\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (this.disabled) return;\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const { isFullViewHidden, containerElement, inputField } = this;\n        if (isFullViewHidden) {\n            containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n        } else {\n            inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the button that controls moving to the first page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickFirstPage() {\n        if (this.disabled) return;\n        const button = this.firstPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates clicking the button that controls moving to the last page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickLastPage() {\n        if (this.disabled) return;\n        const button = this.lastPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates clicking the button that controls moving to the next page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickNextPage() {\n        if (this.disabled) return;\n        const button = this.nextPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates clicking the button that controls moving to the previous page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickPreviousPage() {\n        if (this.disabled) return;\n        const button = this.prevPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates selecting a `perPage` value from the `perPageIncrements` dropdown,\n     * and updates the value of the `perPage` property.\n     *\n     * If `value` is not in the `perPageIncrements` array, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectPerPageIncrementValue(value: number) {\n        if (this.disabled) return;\n        if (isNaN(value) || !this.showPerPageSelect || !this.perPageIncrementsArray.includes(value)) return;\n        this.perPageSelect.focus();\n        this.perPageSelect.click();\n        const options = Array.from(this.perPageSelect.querySelectorAll('q2-option'));\n        options.find(option => option.value === `${value}`)?.click();\n    }\n\n    /**\n     * Emulates setting the page value in the `<input>` field,\n     * and emitting a change event with the updated page number.\n     *\n     * If `value` is invalid, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async setPageValue(value: number) {\n        if (this.disabled) return;\n        if (!this.inputField || isNaN(value) || value < 1 || value > this.totalPages) return;\n        this.inputField?.focus();\n        this.inputField.value = `${value}`;\n        this.inputField?.blur();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('autoSize')\n    manageResizeObserver() {\n        if (this.autoSize) {\n            if (this.resizeObserver) return;\n            this.resizeObserver = new ResizeObserver(() => this.checkSize());\n            this.resizeObserver.observe(this.hostElement);\n            window.addEventListener('resize', this.checkSize);\n        } else {\n            this.isSmall = false;\n            this.removeResizeObserver();\n        }\n    }\n\n    @Watch('recordsOnly')\n    @Watch('pagesOnly')\n    @Watch('stacked')\n    checkDisplayTypes() {\n        if (this.pagesOnly || this.recordsOnly || this.stacked) this.autoSize = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get containerClasses() {\n        const classes = ['container'];\n        if (this.stacked) classes.push('stacked');\n        return classes;\n    }\n\n    get currentRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = total > 0 ? (page - 1) * perPage + 1 : 0;\n        const end = Math.min(page * perPage, total);\n        return `${start} - ${end}`;\n    }\n\n    get isFullViewHidden() {\n        return this.isSmall || this.recordsOnly || this.pagesOnly;\n    }\n\n    get nextRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = page * perPage + 1;\n        const end = Math.min((page + 1) * perPage, total);\n        return `${start} - ${end}`;\n    }\n\n    get pageWithDefault() {\n        return this.total > 0 ? this.page || 1 : 0;\n    }\n\n    get perPageIncrementsArray() {\n        if (Array.isArray(this.perPageIncrements)) {\n            return this.perPageIncrements.map(num => Number(num));\n        } else if (typeof this.perPageIncrements === 'string') {\n            return this.perPageIncrements\n                .trim()\n                .replace(/[\\[\\]\\\"\\']/g, '')\n                .split(',')\n                .map(num => Number(num));\n        } else {\n            return [];\n        }\n    }\n\n    get perPageWithDefault() {\n        return this.perPage || 10;\n    }\n\n    get prevRange() {\n        const { perPageWithDefault: perPage, pageWithDefault: page } = this;\n        const start = Math.max(1, (page - 2) * perPage + 1);\n        const end = (page - 1) * perPage;\n        return `${start} - ${end}`;\n    }\n\n    get recordTypeWithDefault() {\n        return this.recordType || loc('tecton.element.pagination.defaultRecordType');\n    }\n\n    get showPerPageSelect() {\n        return this.perPageIncrements?.length > 1;\n    }\n\n    get totalPages() {\n        const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n        if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n        return Math.ceil(total / perPage);\n    }\n\n    get totalWithDefault() {\n        return this.total || 0;\n    }\n\n    checkSize = () => {\n        const { hostElement, containerElement } = this;\n        const isOverflowing = this.containerWidth > hostElement.clientWidth;\n        this.isSmall = isOverflowing;\n\n        nextPaint(() => {\n            const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n            if (containerWidthHasNotChanged) return;\n            this.containerWidth = containerElement.clientWidth;\n            this.checkSize();\n        });\n    };\n\n    handlePageChange = (page: number | string) => {\n        if (this.disabled) return;\n        const { totalPages, inputField } = this;\n        page = parseInt(`${page}`);\n        if (isNaN(page) || page < 1) {\n            page = 1;\n        } else if (page > totalPages) {\n            page = totalPages;\n        }\n\n        if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n        if (!this.hostElement.onchange) {\n            this.page = page;\n        }\n\n        mirrorEmit(this, ['change', 'tctChange'], { page });\n    };\n\n    handlePerPageChange = (event: CustomEvent) => {\n        if (this.disabled) return;\n        this.perPage = (event.detail?.value || this.perPage) * 1;\n    };\n\n    removeResizeObserver() {\n        if (this.resizeObserver) {\n            this.resizeObserver?.disconnect();\n            this.resizeObserver = null;\n            window.removeEventListener('resize', this.checkSize);\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderPerPage() {\n        const increments = this.perPageIncrementsArray.sort((a, b) => a - b);\n        if (this.perPage === undefined || isNaN(this.perPage)) this.perPage = increments[0];\n        this.perPageIncrements = `[${increments.join(',')}]`;\n        return (\n            <q2-select\n                ref={el => (this.perPageSelect = el)}\n                onTctChange={this.handlePerPageChange}\n                value={this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined}\n                disabled={this.disabled}\n            >\n                {increments.map(perPage => (\n                    <q2-option\n                        value={`${perPage}`}\n                        display={`${loc('tecton.element.pagination.view')} ${perPage}`}\n                    >{`${loc('tecton.element.pagination.view')} ${perPage}`}</q2-option>\n                ))}\n            </q2-select>\n        );\n    }\n\n    render() {\n        const {\n            pagesOnly,\n            recordsOnly,\n            isFullViewHidden,\n            recordTypeWithDefault: recordType,\n            totalPages,\n            totalWithDefault: total,\n            pageWithDefault: page,\n            currentRange,\n            nextRange,\n            prevRange,\n            showPerPageSelect,\n            disabled,\n        } = this;\n        const onFirstPage = page < 2;\n        const onLastPage = page === totalPages;\n\n        let nextButtonLabel: string = loc('tecton.element.pagination.goToNext');\n        let prevButtonLabel: string = loc('tecton.element.pagination.goToPrevious');\n        if (pagesOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToPages', { next: page - 1, total: totalPages });\n            nextButtonLabel = loc('tecton.element.pagination.goToPages', { next: page + 1, total: totalPages });\n        } else if (recordsOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: prevRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n            nextButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: nextRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n        }\n\n        return (\n            <nav\n                class={this.containerClasses.join(' ')}\n                ref={el => (this.containerElement = el)}\n                aria-label={loc('tecton.element.pagination.title')}\n            >\n                <div\n                    class=\"description\"\n                    test-id=\"description\"\n                >\n                    {pagesOnly\n                        ? loc('tecton.element.pagination.pages', {\n                              current: page,\n                              total: totalPages,\n                          })\n                        : loc('tecton.element.pagination.description', {\n                              range: currentRange,\n                              recordType: recordType.toLowerCase(),\n                              total: total.toLocaleString(),\n                          })}\n                </div>\n                <div class=\"controls\">\n                    <div class=\"btn-group\">\n                        <q2-btn\n                            ref={el => (this.firstPageBtn = el)}\n                            label={loc('tecton.element.pagination.goToFirstPage')}\n                            disabled={disabled || onFirstPage}\n                            hidden={isFullViewHidden}\n                            onTctClick={() => this.handlePageChange(1)}\n                            test-id=\"firstPageBtn\"\n                            hide-label\n                        >\n                            <q2-icon type=\"chevron-double-left\" />\n                        </q2-btn>\n                        <q2-btn\n                            ref={el => (this.prevPageBtn = el)}\n                            label={prevButtonLabel}\n                            disabled={disabled || onFirstPage}\n                            onTctClick={() => this.handlePageChange(page - 1)}\n                            test-id=\"prevPageBtn\"\n                            hide-label\n                        >\n                            <q2-icon type=\"chevron-left\" />\n                        </q2-btn>\n                    </div>\n                    <div\n                        class=\"input-display\"\n                        hidden={isFullViewHidden}\n                    >\n                        <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n                        <div\n                            class=\"input-wrapper\"\n                            onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n                        >\n                            <q2-input\n                                ref={el => (this.inputField = el)}\n                                type=\"number\"\n                                value={`${page}`}\n                                min={1}\n                                max={this.totalPages}\n                                hideLabel\n                                optional\n                                label={`${loc('tecton.element.pagination.page')} (${loc(\n                                    'tecton.element.pagination.ofPages',\n                                    [totalPages.toLocaleString()]\n                                )})`}\n                                onTctChange={event => {\n                                    event.stopPropagation();\n                                    this.handlePageChange(event.detail.value);\n                                }}\n                                test-id=\"pageInput\"\n                                current=\"page\"\n                                disabled={disabled}\n                            ></q2-input>\n                        </div>\n                        <span aria-hidden=\"true\">\n                            {loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])}\n                        </span>\n                    </div>\n                    <div class=\"btn-group\">\n                        <q2-btn\n                            ref={el => (this.nextPageBtn = el)}\n                            label={nextButtonLabel}\n                            disabled={disabled || onLastPage}\n                            onTctClick={() => this.handlePageChange(page + 1)}\n                            test-id=\"nextPageBtn\"\n                            hide-label\n                        >\n                            <q2-icon type=\"chevron-right\" />\n                        </q2-btn>\n                        <q2-btn\n                            ref={el => (this.lastPageBtn = el)}\n                            label=\"tecton.element.pagination.goToLastPage\"\n                            disabled={disabled || onLastPage}\n                            hidden={isFullViewHidden}\n                            onTctClick={() => this.handlePageChange(totalPages)}\n                            test-id=\"lastPageBtn\"\n                            hide-label\n                        >\n                            <q2-icon type=\"chevron-double-right\" />\n                        </q2-btn>\n                    </div>\n                </div>\n                <div\n                    class=\"per-page\"\n                    hidden={isFullViewHidden || !this.perPageIncrements?.length}\n                >\n                    {showPerPageSelect && this.renderPerPage()}\n                </div>\n            </nav>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,10 +1,10 @@
 import { r as t, c as i, h as o, g as e } from "./index-CGkHOjh1.js";
 
-import { a, o as r, i as n, w as c, l as s } from "./index-B4WYBDS9.js";
+import { a as r, o as a, i as n, w as c, l as s } from "./index-B4WYBDS9.js";
 
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
 
-import { a as p, s as d } from "./action-sheet-WwoBwnIp.js";
+import { a as p, s as d } from "./action-sheet-B7adb3xs.js";
 
 const h = "*{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-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-btn-box-shadow:var(--tct-pill-btn-box-shadow, none);--comp-btn-backdrop-filter:var(--tct-pill-btn-backdrop-filter, none);--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--tct-pill-active-btn-color, var(--comp-btn-background));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-box-shadow:var(--tct-pill-active-btn-box-shadow, var(--tct-pill-btn-box-shadow, none));--comp-active-btn-backdrop-filter:var(--tct-pill-active-btn-backdrop-filter, none);--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]:not([active=false])) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-box-shadow:var(--tct-pill-primary-active-btn-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-primary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-box-shadow:var(--tct-pill-secondary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-secondary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-box-shadow:var(--tct-pill-tertiary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-tertiary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);box-shadow:var(--comp-btn-box-shadow);backdrop-filter:var(--comp-btn-backdrop-filter);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]:not([active=false])) .btn-primary{background:var(--comp-active-btn-background);box-shadow:var(--comp-active-btn-box-shadow);backdrop-filter:var(--comp-active-btn-backdrop-filter);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]:not([active=false])) .btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]:not([active=false])) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--tct-icon-stroke-primary:var(--tct-pill-icon-stroke, currentcolor);--tct-icon-stroke-width:var(--tct-pill-icon-stroke-width, inherit);width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]:not([active=false])) button.btn-close:focus,:host([active]:not([active=false])) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}";
 
@@ -39,7 +39,7 @@ const v = class {
         values: [],
         active: false
       });
-      this.scheduledAfterRender.push(a);
+      this.scheduledAfterRender.push(r);
     };
     this.determineOptionCount = async () => {
       if (this.optionList) {
@@ -123,7 +123,7 @@ const v = class {
     this.handleSelectionChanges = async t => {
       const {multiple: i} = this;
       const {value: o = "", values: e = []} = t;
-      const a = i ? !!e.length : !!o;
+      const r = i ? !!e.length : !!o;
       if (!this.hostElement.onchange) {
         if (i) {
           this.selectedOptions = e;
@@ -140,7 +140,7 @@ const v = class {
       l(this, [ "change", "tctChange" ], {
         value: i ? undefined : o,
         values: e,
-        active: a
+        active: r
       });
     };
     this.handleWrapperClick = () => {
@@ -190,10 +190,10 @@ const v = class {
     this.updateSlotState = () => {
       const {hostElement: t, hasPopoverTop: i, hasPopoverBottom: o} = this;
       const e = t.shadowRoot.querySelector('slot[name="popover-top"]');
-      const a = t.shadowRoot.querySelector('slot[name="popover-bottom"]');
-      const r = (e === null || e === void 0 ? void 0 : e.assignedNodes().length) > 0;
-      const n = (a === null || a === void 0 ? void 0 : a.assignedNodes().length) > 0;
-      if (i !== r) this.hasPopoverTop = r;
+      const r = t.shadowRoot.querySelector('slot[name="popover-bottom"]');
+      const a = (e === null || e === void 0 ? void 0 : e.assignedNodes().length) > 0;
+      const n = (r === null || r === void 0 ? void 0 : r.assignedNodes().length) > 0;
+      if (i !== a) this.hasPopoverTop = a;
       if (o !== n) this.hasPopoverBottom = n;
     };
   }
@@ -213,7 +213,7 @@ const v = class {
     this.mutationObserver = t;
   }
   componentDidLoad() {
-    r(this.hostElement);
+    a(this.hostElement);
     this.syncValueProperties();
   }
   componentDidRender() {
@@ -284,23 +284,23 @@ const v = class {
   selectedOptionsChanged(t) {
     var i, o;
     const {multiple: e} = this;
-    const a = (o = (i = t === null || t === void 0 ? void 0 : t[0]) === null || i === void 0 ? void 0 : i.value) !== null && o !== void 0 ? o : null;
+    const r = (o = (i = t === null || t === void 0 ? void 0 : t[0]) === null || i === void 0 ? void 0 : i.value) !== null && o !== void 0 ? o : null;
     if (e) {
       if (this.value) this.value = null;
       this.updateSelectedOptionElements();
-    } else if (this.value === a) {
+    } else if (this.value === r) {
       this.updateSelectedOptionElements();
     } else {
-      this.value = a;
+      this.value = r;
     }
   }
   async valueChanged(t, i, o) {
-    var e, a;
-    const {label: r, multiple: n, selectedOptions: c, value: s} = this;
+    var e, r;
+    const {label: a, multiple: n, selectedOptions: c, value: s} = this;
     const l = o === "value" ? t : s;
-    const p = o === "label" ? t : r;
+    const p = o === "label" ? t : a;
     if (n) return;
-    const d = (a = (e = c === null || c === void 0 ? void 0 : c[0]) === null || e === void 0 ? void 0 : e.value) !== null && a !== void 0 ? a : null;
+    const d = (r = (e = c === null || c === void 0 ? void 0 : c[0]) === null || e === void 0 ? void 0 : e.value) !== null && r !== void 0 ? r : null;
     if (o === "value" && t === d) this.updateSelectedOptionElements(); else {
       const i = await this.getOption(t);
       const {value: o, display: e} = i || {
@@ -344,37 +344,37 @@ const v = class {
   renderIcon() {
     const {optionCount: t, active: i} = this;
     const e = t && i;
-    const a = e ? "button" : "div";
-    const r = e || !t ? "close" : "chevron-down";
-    return o(a, {
+    const r = e ? "button" : "div";
+    const a = e || !t ? "close" : "chevron-down";
+    return o(r, {
       class: "btn-close",
       onClick: e && this.clearSelectedOptions || undefined,
       disabled: e && this.disabled || undefined,
       "aria-label": e && s("tecton.element.pill.clearSelection") || undefined,
       type: e && "button" || undefined
     }, o("q2-icon", {
-      type: r
+      type: a
     }));
   }
   render() {
     const {optionCount: t, active: i, open: e} = this;
-    const a = [ "btn-wrapper" ];
-    if (t || i) a.push("has-icon");
-    if (t) a.push("has-options");
+    const r = [ "btn-wrapper" ];
+    if (t || i) r.push("has-icon");
+    if (t) r.push("has-options");
     return o("click-elsewhere", {
-      key: "f633d1531a06684fb3c4b2c37e7abcd968996cea",
+      key: "91addb6ad7da4eb7fd3a97fe2c4302ad5161d2e3",
       onChange: this.onClickElsewhere
     }, o("div", {
-      key: "dfd7cdf322fb8f8a9fe430b8d7f59a53b320df69",
-      class: a.join(" ")
+      key: "dfb6eb41e00e01731a4fce7127a4f1976f77d46f",
+      class: r.join(" ")
     }, o("div", {
-      key: "d37b0c55c3343ba10dc073dd0b9585aca2e03dfb",
+      key: "fc37efbf4e08c403bfe6c1e35e3104c7c1c012dc",
       class: "btn-height-wrapper",
       ref: t => this.primaryBtnWrapper = t,
       onClick: this.handleWrapperClick,
       tabIndex: -1
     }, o("button", {
-      key: "df67ea6e3b9b9d82cc4f2ec9d1dd1d4c45467b6e",
+      key: "0636ba4cee4e0e822599c3394909bb539c1f7f0b",
       class: "btn-primary",
       "test-id": "btn-control",
       type: "button",
@@ -390,7 +390,7 @@ const v = class {
       "aria-label": `${this.buttonContent}${!t && i ? ` ${s("tecton.element.pill.active")}` : ""}`,
       "aria-describedby": t && "option-description" || undefined
     }, this.truncatedButtonContent)), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && o("q2-popover", {
-      key: "f35f2f9e71b78aa65eb3f2afc5abc5ff2b351a40",
+      key: "8c39c09df3cbbbd7b9cc39b93535d087c3b406cd",
       ref: t => this.popoverElement = t,
       controlElement: this.primaryBtn,
       open: this.open,
@@ -400,20 +400,20 @@ const v = class {
       align: this.popoverAlignment,
       onFocusout: this.handleFocusOut
     }, o("div", {
-      key: "d4031d3a80234ca2c9e8ae6cc85cdce1b3ca6c6b",
+      key: "1d6bc4e841d5e722fe9ded9f76cd7784242f8c16",
       class: "popover-content"
     }, o("div", {
-      key: "f67874cdcf2dccf61c9e1db68c0593a77b071bb1",
+      key: "17389fd5ca5eb6f676e274b6b27d786e55b94790",
       ref: t => this.popoverTopContainer = t,
       class: "popover-top-container",
       tabindex: "-1",
       hidden: !this.hasPopoverTop,
       onKeyDown: this.handleKeydown
     }, o("slot", {
-      key: "b72a8a3ddce5e30bcb6ff97a5b57989216883eba",
+      key: "d51f6148515907a7f2271fae9935f38f9a577b4b",
       name: "popover-top"
     })), o("q2-option-list", {
-      key: "ce8b6c023d13149af9cfdb5ad41b76321b0e6211",
+      key: "3b1762582597ea9f56358301ecb8543b83c50858",
       type: "listbox",
       ref: t => this.optionList = t,
       id: "option-list",
@@ -424,16 +424,16 @@ const v = class {
       onPopoverState: this.onPopoverState,
       label: s("tecton.element.optionList.label", [ this.optionListLabel ])
     }, o("slot", {
-      key: "c13bf87a979fea4781369c4b664ac3c2c13a4a7f"
+      key: "b813df162daaa546c705042065c3b4d168381423"
     })), o("div", {
-      key: "de4f524a1f1a8cb121b54c5dd6fec6cdb4558462",
+      key: "cdf545308a7e9b85a1388c681c4d9198b97ce623",
       ref: t => this.popoverBottomContainer = t,
       class: "popover-bottom-container",
       tabindex: "-1",
       hidden: !this.hasPopoverBottom,
       onKeyDown: this.handleKeydown
     }, o("slot", {
-      key: "5393f524dfd4e53072455b879afa804427bbdd88",
+      key: "daf5ab50500a1572cd645475e5788932ed3ab360",
       name: "popover-bottom"
     })))));
   }

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

@@ -1 +1 @@
-{"version":3,"file":"q2-radio.entry.esm.js","sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.radio-container {\n    --comp-radio-margin: #{var-list(\n            --tct-radio-margin,\n            unquote(\n                '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n            )\n        )};\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n        font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n        align-items: center;\n        cursor: pointer;\n        margin-right: var-list(--tct-radio-label-margin-right, 1rem);\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n\n        &.label-hidden {\n            grid-template-columns: var(--tct-radio-label-hidden-columns, 18px 1fr);\n        }\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        outline: 0;\n        width: 100%;\n        box-shadow: var-list(--tct-radio-box-shadow, none);\n    }\n\n    circle:nth-child(1) {\n        stroke-width: var-list(--tct-radio-stroke-width, 2);\n        stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        fill: var-list(--tct-radio-background-fill, transparent);\n        transition: fill var-list(--tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'));\n    }\n\n    input {\n        &:checked {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-checked-background-fill, --tct-radio-checked-bg, transparent);\n                stroke: var-list(\n                    --tct-radio-checked-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                font-weight: var-list(--tct-radio-checked-label-font-weight, --tct-checkbox-selected-font-weight, 600);\n                letter-spacing: var-list(\n                    --tct-radio-checked-label-letter-spacing,\n                    --tct-checkbox-selected-letter-spacing,\n                    0.25\n                );\n                color: var-list(--tct-radio-checked-label-font-color, --tct-radio-checked-label-color, inherit);\n            }\n            & + label circle:nth-child(2) {\n                fill: var-list(--tct-radio-checked-fill, --tct-checkbox-check-stroke-color, --t-checkbox-fill, #2e2e2e);\n            }\n        }\n\n        &:hover {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-hover-background-fill, transparent);\n                stroke: var-list(\n                    --tct-radio-hover-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                color: var-list(--tct-radio-hover-label-color, inherit);\n            }\n        }\n\n        &:focus {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-focus-background-fill, transparent);\n                stroke: var-list(\n                    --tct-radio-focus-stroke-color,\n                    --tct-checkbox-check-stroke-color,\n                    --t-checkbox-fill,\n                    #2e2e2e\n                );\n            }\n            & + label .label-content {\n                color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n            }\n        }\n\n        &:focus-visible {\n            & + label svg {\n                box-shadow: var(--tct-radio-focus-box-shadow, --const-double-focus-ring);\n            }\n        }\n    }\n}\n\n.radio-tile {\n    flex-basis: 100px;\n    flex-grow: 0;\n    flex-wrap: wrap;\n\n    label[for] {\n        color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n        align-items: center;\n        border-radius: 3px;\n        border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        background: var-list(--tct-radio-background-fill, transparent);\n        cursor: pointer;\n        display: block;\n        padding: 10px;\n        position: relative;\n        text-align: center;\n        transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        white-space: nowrap;\n    }\n\n    input {\n        &:checked + label {\n            border-color: var-list(\n                --tct-radio-checked-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            box-shadow: inset 0 0 0 2px #ffffff;\n            background: var-list(--tct-radio-checked-background-fill, transparent);\n            color: var-list(--tct-radio-checked-label-color, inherit);\n\n            &:after {\n                border-bottom-width: 3px;\n                border-bottom: 5px solid\n                    var-list(\n                        --tct-radio-checked-stroke-color,\n                        var-prefixer(checkbox-check-stroke-color),\n                        --t-checkbox-fill,\n                        #2e2e2e\n                    );\n                border-left-width: 5px;\n                border-left: 8px solid transparent;\n                border-right-width: 5px;\n                border-right: 8px solid transparent;\n                bottom: 0;\n                content: '';\n                height: 0;\n                left: 50%;\n                margin-left: -5px;\n                position: absolute;\n                width: 0;\n            }\n        }\n\n        &:hover + label {\n            border-color: var-list(\n                --tct-radio-hover-stroke-color,\n                --tct-radio-stroke-color,\n                --t-a11y-gray-color-AA,\n                #949494\n            );\n            background: var-list(--tct-radio-hover-background-fill, transparent);\n            color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n        }\n\n        &:focus + label,\n        &:focus:checked + label {\n            border-color: var-list(\n                --tct-radio-focus-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            background: var-list(--tct-radio-focus-background-fill, transparent);\n            box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n            color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n        }\n    }\n}\n\ninput:disabled + label[for] {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n */\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => {\n            this.inputField.focus();\n            this.inputField.click();\n        };\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        } else if (this.groupReadonly) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            this.inputField.focus();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('checked')\n    checkedObserver() {\n        if (!this.isLoaded) return;\n        if (!this.checked) return;\n        mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n                <input\n                    ref={el => (this.inputField = el)}\n                    class=\"sr\"\n                    id={this._id}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled || this.groupDisabled}\n                    checked={this.checked}\n                    aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n                    onChange={this.inputChange}\n                    test-id=\"q2RadioInnerRadioBox\"\n                ></input>\n\n                <label\n                    htmlFor={this._id}\n                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"4\"\n                            />\n                        </svg>\n                    )}\n                    {!this.hideLabel && (\n                        <div class=\"label-content\">\n                            {(this.label && loc(this.label)) || ''}\n                            <slot></slot>\n                        </div>\n                    )}\n                </label>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-radio.entry.esm.js","sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.radio-container {\n    --comp-radio-margin: #{var-list(\n            --tct-radio-margin,\n            unquote(\n                '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n            )\n        )};\n\n    //Default State\n    --comp-big-circle-fill: #{var-list(--tct-radio-background-fill, transparent)};\n    --comp-big-circle-stroke: #{var-list(\n            --tct-radio-background-stroke,\n            --tct-radio-stroke-color,\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-big-circle-stroke-width: #{var-list(--tct-radio-background-stroke-width, --tct-radio-stroke-width, 2)};\n    --comp-big-circle-transition: #{fill\n        var-list(--tct-radio-background-transition, --tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'))};\n    --comp-small-circle-fill: #{var-list(--tct-radio-select-fill-default, transparent)};\n    --comp-label-content-color: #{var-list(\n            --tct-radio-label-color,\n            --tct-radio-label-font-color,\n            --tct-radio-label-color,\n            inherit\n        )};\n    --comp-label-content-font-weight: #{var-list(\n            --tct-radio-label-font-weight,\n            --tct-radio-font-weight,\n            --tct-checkbox-font-weight,\n            400\n        )};\n    --comp-label-content-letter-spacing: #{var-list(--tct-radio-label-letter-spacing, 0.25)};\n    --comp-label-content-margin-right: #{var-list(--tct-radio-label-margin-right, 1rem)};\n    --comp-label-content-gap: #{var-list(--tct-radio-label-gap, --tct-scale-1, --app-scale-1x, 5px)};\n    --comp-label-hidden-columns: #{var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr)};\n    --comp-svg-transition: #{box-shadow\n        var-list(--tct-radio-transition, --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-svg-box-shadow: #{var-list(--tct-radio-box-shadow, none)};\n\n    //Checked State\n    --comp-big-circle-fill-checked: #{var-list(--tct-radio-checked-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-checked: #{var-list(--tct-radio-checked-stroke-color, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-checked: #{var-list(\n            --tct-radio-select-fill-checked,\n            --tct-radio-checked-fill,\n            --tct-checkbox-check-stroke-color,\n            --t-checkbox-fill,\n            #2e2e2e\n        )};\n    --comp-label-content-font-weight-checked: #{var-list(\n            --tct-radio-label-font-weight-checked,\n            --tct-radio-checked-label-font-weight,\n            --tct-checkbox-selected-font-weight,\n            600\n        )};\n    --comp-label-content-letter-spacing-checked: #{var-list(\n            --tct-radio-label-letter-spacing-checked,\n            --tct-radio-checked-label-letter-spacing,\n            --tct-checkbox-selected-letter-spacing,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-checked: #{var-list(\n            --tct-radio-label-font-color-checked,\n            --tct-radio-checked-label-font-color,\n            --tct-radio-checked-label-color,\n            inherit\n        )};\n\n    // Active State\n    --comp-big-circle-fill-active: #{var-list(--tct-radio-background-fill-active, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-active: #{var-list(--tct-radio-background-stroke-active, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-active: #{var-list(--tct-radio-selected-fill-active, --comp-small-circle-fill-checked)};\n    --comp-label-content-font-weight-active: #{var-list(\n            --tct-radio-label-font-weight-active,\n            --comp-label-content-font-weight\n        )};\n    --comp-label-content-letter-spacing-active: #{var-list(\n            --tct-radio-label-letter-spacing-active,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-active: #{var-list(--tct-radio-label-color-active, --comp-label-content-color)};\n\n    // Hover State\n    --comp-big-circle-fill-hover: #{var-list(--tct-radio-hover-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-hover: #{var-list(--tct-radio-hover-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-hover: #{var-list(--tct-radio-hover-label-color, --comp-label-content-color)};\n\n    // Focus State\n    --comp-big-circle-fill-focus: #{var-list(--tct-radio-focus-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-focus: #{var-list(--tct-radio-focus-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-focus: #{var-list(--tct-radio-focus-label-color, --comp-label-content-color)};\n\n    // Focus Visible\n    --comp-svg-box-shadow-focus-visible: #{var(\n            --tct-radio-box-shadow-focus-visible,\n            --tct-radio-focus-box-shadow,\n            --const-double-focus-ring\n        )};\n\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var(---comp-label-content-color);\n        font-weight: var(---comp-label-content-font-weight);\n        font-size: var(--tct-radio-label-font-size, 14px);\n        align-items: center;\n        cursor: pointer;\n        margin-right: var(---comp-label-content-margin-right);\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var(--comp-label-content-gap);\n        letter-spacing: var(--comp-label-content-letter-spacing);\n\n        &.label-hidden {\n            grid-template-columns: var(--comp-label-hidden-columns);\n        }\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: var(--comp-svg-transition);\n        outline: 0;\n        width: 100%;\n        box-shadow: var(--comp-svg-box-shadow);\n    }\n\n    .big-circle {\n        fill: var(--comp-big-circle-fill);\n        stroke: var(--comp-big-circle-stroke);\n        stroke-width: var(--comp-big-circle-stroke-width);\n        transition: var(--comp-big-circle-transition);\n    }\n    .small-circle {\n        fill: var(--comp-small-circle-fill);\n    }\n\n    input {\n        &:checked {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-checked);\n                    stroke: var(--comp-big-circle-stroke-checked);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-checked);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-checked);\n                    letter-spacing: var(--comp-label-content-letter-spacing-checked);\n                    color: var(--comp-label-content-color-checked);\n                }\n            }\n        }\n\n        &:hover {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-hover);\n                    stroke: var(--comp-big-circle-stroke-hover);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-active);\n                    stroke: var(--comp-big-circle-stroke-active);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-active);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-active);\n                    letter-spacing: var(--comp-label-content-letter-spacing-active);\n                    color: var(--comp-label-content-color-active);\n                }\n            }\n        }\n\n        &:focus {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-focus);\n                    stroke: var(--comp-big-circle-stroke-focus);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-focus);\n                }\n            }\n        }\n    }\n}\n\n.radio-tile {\n    flex-basis: 100px;\n    flex-grow: 0;\n    flex-wrap: wrap;\n\n    label[for] {\n        color: var-list(--tct-radio-label-font-color, --tct-radio-label-color, inherit);\n        align-items: center;\n        border-radius: var-list(--tct-radio-tile-border-radius, --app-border-radius-1, 3px);\n        border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        background: var-list(--tct-radio-background-fill, transparent);\n        cursor: pointer;\n        display: block;\n        font-size: var-list(--tct-radio-tile-label-font-size, --tct-radio-label-font-size, 14px); \n        padding: 10px;\n        position: relative;\n        text-align: center;\n        transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        white-space: nowrap;\n    }\n\n    input {\n        &:checked + label {\n            border-color: var-list(\n                --tct-radio-tile-checked-stroke-color,\n                --tct-radio-checked-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            box-shadow: inset 0 0 0 2px #ffffff;\n            background: var-list(--tct-radio-checked-background-fill, transparent);\n            color: var-list(--tct-radio-checked-label-color, inherit);\n\n            &:after {\n                border-bottom-width: 3px;\n                border-bottom: 5px solid\n                    var-list(\n                        --tct-radio-tile-checked-stroke-color,\n                        --tct-radio-checked-stroke-color,\n                        var-prefixer(checkbox-check-stroke-color),\n                        --t-checkbox-fill,\n                        #2e2e2e\n                    );\n                border-left-width: 5px;\n                border-left: 8px solid transparent;\n                border-right-width: 5px;\n                border-right: 8px solid transparent;\n                bottom: 0;\n                content: '';\n                height: 0;\n                left: 50%;\n                margin-left: -5px;\n                position: absolute;\n                width: 0;\n            }\n        }\n\n        &:hover + label {\n            border-color: var-list(\n                --tct-radio-hover-stroke-color,\n                --tct-radio-stroke-color,\n                --t-a11y-gray-color-AA,\n                #949494\n            );\n            background: var-list(--tct-radio-hover-background-fill, transparent);\n            color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n        }\n\n        &:focus + label,\n        &:focus:checked + label {\n            border-color: var-list(\n                --tct-radio-focus-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            background: var-list(--tct-radio-focus-background-fill, transparent);\n            box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n            color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n        }\n\n        &:focus:checked + label:after {\n            border-bottom: 5px solid var(--tct-radio-focus-stroke-color, #2e2e2e);\n        }\n    }\n}\n\ninput:disabled + label[for] {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n */\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => {\n            this.inputField.focus();\n            this.inputField.click();\n        };\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        } else if (this.groupReadonly) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            this.inputField.focus();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('checked')\n    checkedObserver() {\n        if (!this.isLoaded) return;\n        if (!this.checked) return;\n        mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n                <input\n                    ref={el => (this.inputField = el)}\n                    class=\"sr\"\n                    id={this._id}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled || this.groupDisabled}\n                    checked={this.checked}\n                    aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n                    onChange={this.inputChange}\n                    test-id=\"q2RadioInnerRadioBox\"\n                ></input>\n\n                <label\n                    htmlFor={this._id}\n                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                class=\"big-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                class=\"small-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"4\"\n                            />\n                        </svg>\n                    )}\n                    {!this.hideLabel && (\n                        <div class=\"label-content\">\n                            {(this.label && loc(this.label)) || ''}\n                            <slot></slot>\n                        </div>\n                    )}\n                </label>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}