q2-tecton-elements 1.60.2 → 1.61.0

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

@@ -1 +1 @@
-{"version":3,"file":"q2-pagination.entry.esm.js","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    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\n.btn-group {\n    display: flex;\n    gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n    white-space: nowrap;\n}\n\n.controls {\n    display: grid;\n    grid-template-columns: auto 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}\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\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';\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 children elements */\n    @Prop()\n    alignment: string;\n\n    /** Determines whether the component uses the dynamic resizing behavior. */\n    @Prop({ reflect: true, mutable: true })\n    autoSize: boolean = true;\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. */\n    @Prop({ reflect: true, mutable: true })\n    pagesOnly: boolean;\n\n    /** The total number of records displayed on each page. */\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     *\n     * **Example:**\n     * @snippet\n     * this.perPageIncrements = [10, 25, 50];\n     */\n    @Prop()\n    perPageIncrements: number[];\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    /** 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     */\n    @Event()\n    change: EventEmitter<{ page: number }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeResizeObserver();\n    }\n\n    componentWillLoad(): void {\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 (!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        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        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        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        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 (isNaN(value) || !this.showPerPageSelect || !this.perPageIncrements.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.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('recordsOnly')\n    @Watch('pagesOnly')\n    @Watch('autoSize')\n    manageResizeObserver() {\n        if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\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    // #endregion\n    // #region Local Methods\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 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) => {\n        const { totalPages, inputField } = this;\n        page = parseInt(`${page}`);\n        if (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        this.change.emit({ page });\n    };\n\n    handlePerPageChange = (event: CustomEvent) => {\n        this.perPage = event.detail.value * 1;\n    };\n\n    removeResizeObserver() {\n        if (this.resizeObserver) {\n            this.resizeObserver?.unobserve(this.hostElement);\n            this.resizeObserver = null;\n            window.removeEventListener('resize', this.checkSize);\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderPerPage() {\n        this.perPageIncrements = this.perPageIncrements\n            .filter(perPage => !isNaN(perPage))\n            .map(perPage => perPage * 1)\n            .sort((a, b) => a - b);\n        if (this.perPage === undefined) this.perPage = this.perPageIncrements[0];\n        return (\n            <q2-select\n                ref={el => (this.perPageSelect = el)}\n                onChange={this.handlePerPageChange}\n                value={this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined}\n            >\n                {this.perPageIncrements.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        } = 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=\"container\"\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=\"btn-group\">\n                    <q2-btn\n                        ref={el => (this.firstPageBtn = el)}\n                        label={loc('tecton.element.pagination.goToFirstPage')}\n                        disabled={onFirstPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => 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={onFirstPage}\n                        onClick={() => 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=\"controls\"\n                    hidden={isFullViewHidden}\n                    test-id=\"controls\"\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                            onChange={event => {\n                                event.stopPropagation();\n                                this.handlePageChange(event.detail.value);\n                            }}\n                            test-id=\"pageInput\"\n                            current=\"page\"\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={onLastPage}\n                        onClick={() => 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={onLastPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => 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                    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"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-pagination.entry.esm.js","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    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\n.btn-group {\n    display: flex;\n    gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n    white-space: nowrap;\n}\n\n.controls {\n    display: grid;\n    grid-template-columns: auto 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}\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\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';\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 children elements */\n    @Prop()\n    alignment: string;\n\n    /** Determines whether the component uses the dynamic resizing behavior. */\n    @Prop({ reflect: true, mutable: true })\n    autoSize: boolean = true;\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. */\n    @Prop({ reflect: true, mutable: true })\n    pagesOnly: boolean;\n\n    /** The total number of records displayed on each page. */\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     *\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    /** 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     */\n    @Event()\n    change: EventEmitter<{ page: number }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeResizeObserver();\n    }\n\n    componentWillLoad(): void {\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 (!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        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        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        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        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 (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.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('recordsOnly')\n    @Watch('pagesOnly')\n    @Watch('autoSize')\n    manageResizeObserver() {\n        if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\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    // #endregion\n    // #region Local Methods\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 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    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    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) => {\n        const { totalPages, inputField } = this;\n        page = parseInt(`${page}`);\n        if (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        this.change.emit({ page });\n    };\n\n    handlePerPageChange = (event: CustomEvent) => {\n        this.perPage = event.detail.value * 1;\n    };\n\n    removeResizeObserver() {\n        if (this.resizeObserver) {\n            this.resizeObserver?.unobserve(this.hostElement);\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                onChange={this.handlePerPageChange}\n                value={this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined}\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        } = 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=\"container\"\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=\"btn-group\">\n                    <q2-btn\n                        ref={el => (this.firstPageBtn = el)}\n                        label={loc('tecton.element.pagination.goToFirstPage')}\n                        disabled={onFirstPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => 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={onFirstPage}\n                        onClick={() => 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=\"controls\"\n                    hidden={isFullViewHidden}\n                    test-id=\"controls\"\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                            onChange={event => {\n                                event.stopPropagation();\n                                this.handlePageChange(event.detail.value);\n                            }}\n                            test-id=\"pageInput\"\n                            current=\"page\"\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={onLastPage}\n                        onClick={() => 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={onLastPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => 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                    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"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, g as n } from "./index-CGkHOjh1.js";
 
-import { n as a, o, a as s, l as r } from "./index-xCuy-dFb.js";
+import { n as a, o, a as s, l as r } from "./index-LNnzUeDP.js";
 
 const c = "*{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:flex;width:100%;justify-content:flex-end}:host([alignment=center]){justify-content:center}:host([alignment=left]){justify-content:flex-start}:host([hidden]){display:none}.container{display:inline-flex;column-gap:var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));align-items:center;height:var(--tct-pagination-height, var(--t-pagination-height, 44px))}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.controls{white-space:nowrap}.controls{display:grid;grid-template-columns:auto 50px auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.controls[hidden]{display:none}.input-wrapper{height:var(--tct-pagination-height, var(--t-pagination-height, 44px));display:flex;align-items:center}q2-btn{--tct-btn-border-radius:var(--tct-pagination-btn-border-radius, var(--t-pagination-btn-border-radius));--tct-btn-border:var(--tct-pagination-btn-border, var(--t-pagination-btn-border))}q2-icon{--tct-icon-size:var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));color:var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)))}q2-input{--tct-input-margin-top:0;--tct-input-margin-bottom:0;--tct-input-height:var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));--tct-input-min-height:var(--tct-input-height);--tct-input-align:center}q2-select{--tct-select-input-min-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));--tct-select-input-max-height:var(--tct-pagination-select-height, var(--t-pagination-select-height, 30px));width:var(--tct-pagination-perpage-width, var(--t-pagination-perpage-width, 100%));min-width:var(--tct-pagination-perpage-min-width, var(--t-pagination-perpage-min-width, 110px))}";
 
@@ -116,7 +116,7 @@ const l = class {
      * @testOnly
      */  async selectPerPageIncrementValue(t) {
     var e;
-    if (isNaN(t) || !this.showPerPageSelect || !this.perPageIncrements.includes(t)) return;
+    if (isNaN(t) || !this.showPerPageSelect || !this.perPageIncrementsArray.includes(t)) return;
     this.perPageSelect.focus();
     this.perPageSelect.click();
     const i = Array.from(this.perPageSelect.querySelectorAll("q2-option"));
@@ -192,6 +192,15 @@ const l = class {
   get totalWithDefault() {
     return this.total || 0;
   }
+  get perPageIncrementsArray() {
+    if (Array.isArray(this.perPageIncrements)) {
+      return this.perPageIncrements.map((t => Number(t)));
+    } else if (typeof this.perPageIncrements === "string") {
+      return this.perPageIncrements.trim().replace(/[\[\]\"\']/g, "").split(",").map((t => Number(t)));
+    } else {
+      return [];
+    }
+  }
   removeResizeObserver() {
     var t;
     if (this.resizeObserver) {
@@ -203,22 +212,23 @@ const l = class {
   // #endregion
   // #region Render Methods
   renderPerPage() {
-    this.perPageIncrements = this.perPageIncrements.filter((t => !isNaN(t))).map((t => t * 1)).sort(((t, e) => t - e));
-    if (this.perPage === undefined) this.perPage = this.perPageIncrements[0];
+    const t = this.perPageIncrementsArray.sort(((t, e) => t - e));
+    if (this.perPage === undefined) this.perPage = t[0];
+    this.perPageIncrements = `[${t.join(",")}]`;
     return i("q2-select", {
       ref: t => this.perPageSelect = t,
       onChange: this.handlePerPageChange,
-      value: this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined
-    }, this.perPageIncrements.map((t => i("q2-option", {
+      value: this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined
+    }, t.map((t => i("q2-option", {
       value: `${t}`,
       display: `${r("tecton.element.pagination.view")} ${t}`
     }, `${r("tecton.element.pagination.view")} ${t}`))));
   }
   render() {
     var t;
-    const {pagesOnly: e, recordsOnly: n, isFullViewHidden: a, recordTypeWithDefault: o, totalPages: s, totalWithDefault: c, pageWithDefault: l, currentRange: d, nextRange: h, prevRange: p, showPerPageSelect: g} = this;
-    const f = l < 2;
-    const u = l === s;
+    const {pagesOnly: e, recordsOnly: n, isFullViewHidden: a, recordTypeWithDefault: o, totalPages: s, totalWithDefault: c, pageWithDefault: l, currentRange: h, nextRange: d, prevRange: p, showPerPageSelect: g} = this;
+    const u = l < 2;
+    const f = l === s;
     let b = r("tecton.element.pagination.goToNext");
     let v = r("tecton.element.pagination.goToPrevious");
     if (e) {
@@ -237,67 +247,67 @@ const l = class {
         total: c
       });
       b = r("tecton.element.pagination.goToRecords", {
-        range: h,
+        range: d,
         recordType: o.toLowerCase(),
         total: c
       });
     }
     return i("nav", {
-      key: "c24a21c5e719a9e9e47afd86ade29fe8a88e21dd",
+      key: "7bd02afffb025ea40269a9257dc7103cea69922f",
       class: "container",
       ref: t => this.containerElement = t,
       "aria-label": r("tecton.element.pagination.title")
     }, i("div", {
-      key: "53456b24c196327207d67f7e40d41ea87dfff6c1",
+      key: "2773c9fb23bfb480de3d6061dad13ce9156c45f7",
       class: "description",
       "test-id": "description"
     }, e ? r("tecton.element.pagination.pages", {
       current: l,
       total: s
     }) : r("tecton.element.pagination.description", {
-      range: d,
+      range: h,
       recordType: o.toLowerCase(),
       total: c.toLocaleString()
     })), i("div", {
-      key: "d95976f63270ef4eb260c7344e2db34d26658479",
+      key: "60afe4b7b5c69febe906f1fc70dcdaf71cc93310",
       class: "btn-group"
     }, i("q2-btn", {
-      key: "2206c1d88963f1f854b94cfc54cfc4ccd043cf3b",
+      key: "c3a7677df89475c4f3f95474e12fbada68e378e2",
       ref: t => this.firstPageBtn = t,
       label: r("tecton.element.pagination.goToFirstPage"),
-      disabled: f,
+      disabled: u,
       hidden: a,
       onClick: () => this.handlePageChange(1),
       "test-id": "firstPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "418740d4abe9a9c28d8c3c553e5f59d025a1e860",
+      key: "dfdc6ac8bd1df197856063fe8ec02f74042987be",
       type: "chevron-double-left"
     })), i("q2-btn", {
-      key: "a322a566f575016a995080a4c4908075e4651ea6",
+      key: "52f86588a9afa644d28190c77ff126babad624d2",
       ref: t => this.prevPageBtn = t,
       label: v,
-      disabled: f,
+      disabled: u,
       onClick: () => this.handlePageChange(l - 1),
       "test-id": "prevPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "a3d3fe6acb3a6ef4eac422a2a089f3bcde8d5f21",
+      key: "c53624fb4971cb2425b6800d6ad7beb67dd7e0ad",
       type: "chevron-left"
     }))), i("div", {
-      key: "3647355d457e0238ad31dff59f94fc4a78964944",
+      key: "3d154be9025420663037691631aed5fbae975a7f",
       class: "controls",
       hidden: a,
       "test-id": "controls"
     }, i("span", {
-      key: "cafaf1d703e717dbdd3fa4ecf5b7de6d17243efc",
+      key: "83e4145ed4b2cbb8bd096cd54daa83bc127ec425",
       "aria-hidden": "true"
     }, r("tecton.element.pagination.page")), i("div", {
-      key: "3becfeb17468e3928760e0fcb92d71bd6d8f0b12",
+      key: "afa6a8b2729d353ee94821debe60b217ce221e55",
       class: "input-wrapper",
       onClick: () => this.inputField.dispatchEvent(new FocusEvent("focus"))
     }, i("q2-input", {
-      key: "77b0c536077b9a87ee0fc9073559c9ec89728eb5",
+      key: "25990f6c82647a481479a9581253192ed210bef6",
       ref: t => this.inputField = t,
       type: "number",
       value: `${l}`,
@@ -313,36 +323,36 @@ const l = class {
       "test-id": "pageInput",
       current: "page"
     })), i("span", {
-      key: "073dce90e84e8b4d4aa9f887a3746ab8942578ed",
+      key: "a38cdcf1e67c9c03b6130e992729256874b81059",
       "aria-hidden": "true"
     }, r("tecton.element.pagination.ofPages", [ s.toLocaleString() ]))), i("div", {
-      key: "f26ddef1e53d02cc9d048ed1ead2a28d8b84e71f",
+      key: "c2d2f1f04054281feb017edbbb0f56a97905127c",
       class: "btn-group"
     }, i("q2-btn", {
-      key: "1731620fb0caaa015f126c52329fdfc5feb0f7c4",
+      key: "317d26da8c4c790a66ecb975317f45992fd068c4",
       ref: t => this.nextPageBtn = t,
       label: b,
-      disabled: u,
+      disabled: f,
       onClick: () => this.handlePageChange(l + 1),
       "test-id": "nextPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "4f80a62db321a2f9563365f3278f643b278b893e",
+      key: "c63c6b9c9876554a5f0b0b79d309cea5dbb73e64",
       type: "chevron-right"
     })), i("q2-btn", {
-      key: "c72a35e4faf2c23eb024d73de7bd0d9c16c4755c",
+      key: "80320e0962e76dd5a2ccb9da23f4531e911d896e",
       ref: t => this.lastPageBtn = t,
       label: "tecton.element.pagination.goToLastPage",
-      disabled: u,
+      disabled: f,
       hidden: a,
       onClick: () => this.handlePageChange(s),
       "test-id": "lastPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "5519600de69d5f22f3e5882051b69a4753fcda0b",
+      key: "2627f2119a1ecac530d7d16345b5f5384977c130",
       type: "chevron-double-right"
     }))), i("div", {
-      key: "fde704f4e6c00dac13427cf0f1380be63d12b649",
+      key: "3acca6c1b920be9325b7abe891aa63363ebc8200",
       class: "per-page",
       hidden: a || !((t = this.perPageIncrements) === null || t === void 0 ? void 0 : t.length)
     }, g && this.renderPerPage()));

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

@@ -1 +1 @@
-{"version":3,"names":["q2PaginationCss","Q2Pagination","constructor","hostRef","this","autoSize","checkSize","hostElement","containerElement","isOverflowing","containerWidth","clientWidth","isSmall","nextPaint","containerWidthHasNotChanged","handlePageChange","page","totalPages","inputField","parseInt","value","onchange","change","emit","handlePerPageChange","event","perPage","detail","disconnectedCallback","removeResizeObserver","componentWillLoad","manageResizeObserver","componentDidLoad","overrideFocus","onHostElementFocus","isEventFromElement","isFullViewHidden","_a","querySelector","focus","clickFirstPage","button","firstPageBtn","disabled","click","clickLastPage","lastPageBtn","clickNextPage","nextPageBtn","clickPreviousPage","prevPageBtn","selectPerPageIncrementValue","isNaN","showPerPageSelect","perPageIncrements","includes","perPageSelect","options","Array","from","querySelectorAll","find","option","setPageValue","_b","blur","recordsOnly","pagesOnly","resizeObserver","ResizeObserver","observe","window","addEventListener","currentRange","perPageWithDefault","totalWithDefault","total","pageWithDefault","start","end","Math","min","nextRange","prevRange","max","recordTypeWithDefault","recordType","loc","length","pages","ceil","unobserve","removeEventListener","renderPerPage","filter","map","sort","a","b","undefined","h","ref","el","onChange","display","render","onFirstPage","onLastPage","nextButtonLabel","prevButtonLabel","next","range","toLowerCase","key","class","current","toLocaleString","label","hidden","onClick","type","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    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\n.btn-group {\n    display: flex;\n    gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n    white-space: nowrap;\n}\n\n.controls {\n    display: grid;\n    grid-template-columns: auto 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}\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\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';\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 children elements */\n    @Prop()\n    alignment: string;\n\n    /** Determines whether the component uses the dynamic resizing behavior. */\n    @Prop({ reflect: true, mutable: true })\n    autoSize: boolean = true;\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. */\n    @Prop({ reflect: true, mutable: true })\n    pagesOnly: boolean;\n\n    /** The total number of records displayed on each page. */\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     *\n     * **Example:**\n     * @snippet\n     * this.perPageIncrements = [10, 25, 50];\n     */\n    @Prop()\n    perPageIncrements: number[];\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    /** 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     */\n    @Event()\n    change: EventEmitter<{ page: number }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeResizeObserver();\n    }\n\n    componentWillLoad(): void {\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 (!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        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        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        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        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 (isNaN(value) || !this.showPerPageSelect || !this.perPageIncrements.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.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('recordsOnly')\n    @Watch('pagesOnly')\n    @Watch('autoSize')\n    manageResizeObserver() {\n        if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\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    // #endregion\n    // #region Local Methods\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 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) => {\n        const { totalPages, inputField } = this;\n        page = parseInt(`${page}`);\n        if (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        this.change.emit({ page });\n    };\n\n    handlePerPageChange = (event: CustomEvent) => {\n        this.perPage = event.detail.value * 1;\n    };\n\n    removeResizeObserver() {\n        if (this.resizeObserver) {\n            this.resizeObserver?.unobserve(this.hostElement);\n            this.resizeObserver = null;\n            window.removeEventListener('resize', this.checkSize);\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderPerPage() {\n        this.perPageIncrements = this.perPageIncrements\n            .filter(perPage => !isNaN(perPage))\n            .map(perPage => perPage * 1)\n            .sort((a, b) => a - b);\n        if (this.perPage === undefined) this.perPage = this.perPageIncrements[0];\n        return (\n            <q2-select\n                ref={el => (this.perPageSelect = el)}\n                onChange={this.handlePerPageChange}\n                value={this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined}\n            >\n                {this.perPageIncrements.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        } = 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=\"container\"\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=\"btn-group\">\n                    <q2-btn\n                        ref={el => (this.firstPageBtn = el)}\n                        label={loc('tecton.element.pagination.goToFirstPage')}\n                        disabled={onFirstPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => 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={onFirstPage}\n                        onClick={() => 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=\"controls\"\n                    hidden={isFullViewHidden}\n                    test-id=\"controls\"\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                            onChange={event => {\n                                event.stopPropagation();\n                                this.handlePageChange(event.detail.value);\n                            }}\n                            test-id=\"pageInput\"\n                            current=\"page\"\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={onLastPage}\n                        onClick={() => 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={onLastPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => 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                    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","checkSize","hostElement","containerElement","isOverflowing","containerWidth","clientWidth","isSmall","nextPaint","containerWidthHasNotChanged","handlePageChange","page","totalPages","inputField","parseInt","value","onchange","change","emit","handlePerPageChange","event","perPage","detail","disconnectedCallback","removeResizeObserver","componentWillLoad","manageResizeObserver","componentDidLoad","overrideFocus","onHostElementFocus","isEventFromElement","isFullViewHidden","_a","querySelector","focus","clickFirstPage","button","firstPageBtn","disabled","click","clickLastPage","lastPageBtn","clickNextPage","nextPageBtn","clickPreviousPage","prevPageBtn","selectPerPageIncrementValue","isNaN","showPerPageSelect","perPageIncrementsArray","includes","perPageSelect","options","Array","from","querySelectorAll","find","option","setPageValue","_b","blur","recordsOnly","pagesOnly","resizeObserver","ResizeObserver","observe","window","addEventListener","currentRange","perPageWithDefault","totalWithDefault","total","pageWithDefault","start","end","Math","min","nextRange","prevRange","max","recordTypeWithDefault","recordType","loc","perPageIncrements","length","pages","ceil","isArray","map","num","Number","trim","replace","split","unobserve","removeEventListener","renderPerPage","increments","sort","a","b","undefined","join","h","ref","el","onChange","display","render","onFirstPage","onLastPage","nextButtonLabel","prevButtonLabel","next","range","toLowerCase","key","class","current","toLocaleString","label","hidden","onClick","type","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    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\n.btn-group {\n    display: flex;\n    gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n    white-space: nowrap;\n}\n\n.controls {\n    display: grid;\n    grid-template-columns: auto 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}\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\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';\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 children elements */\n    @Prop()\n    alignment: string;\n\n    /** Determines whether the component uses the dynamic resizing behavior. */\n    @Prop({ reflect: true, mutable: true })\n    autoSize: boolean = true;\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. */\n    @Prop({ reflect: true, mutable: true })\n    pagesOnly: boolean;\n\n    /** The total number of records displayed on each page. */\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     *\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    /** 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     */\n    @Event()\n    change: EventEmitter<{ page: number }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeResizeObserver();\n    }\n\n    componentWillLoad(): void {\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 (!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        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        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        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        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 (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.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('recordsOnly')\n    @Watch('pagesOnly')\n    @Watch('autoSize')\n    manageResizeObserver() {\n        if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\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    // #endregion\n    // #region Local Methods\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 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    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    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) => {\n        const { totalPages, inputField } = this;\n        page = parseInt(`${page}`);\n        if (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        this.change.emit({ page });\n    };\n\n    handlePerPageChange = (event: CustomEvent) => {\n        this.perPage = event.detail.value * 1;\n    };\n\n    removeResizeObserver() {\n        if (this.resizeObserver) {\n            this.resizeObserver?.unobserve(this.hostElement);\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                onChange={this.handlePerPageChange}\n                value={this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined}\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        } = 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=\"container\"\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=\"btn-group\">\n                    <q2-btn\n                        ref={el => (this.firstPageBtn = el)}\n                        label={loc('tecton.element.pagination.goToFirstPage')}\n                        disabled={onFirstPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => 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={onFirstPage}\n                        onClick={() => 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=\"controls\"\n                    hidden={isFullViewHidden}\n                    test-id=\"controls\"\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                            onChange={event => {\n                                event.stopPropagation();\n                                this.handlePageChange(event.detail.value);\n                            }}\n                            test-id=\"pageInput\"\n                            current=\"page\"\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={onLastPage}\n                        onClick={() => 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={onLastPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => 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                    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":";;;;AAAA,MAAMA,IAAkB;;MCgBXC,IAAY;EADzB,WAAAC,CAAAC;;;mFAmCIC,KAAQC,WAAY;IAoQpBD,KAASE,YAAG;MACR,OAAMC,aAAEA,GAAWC,kBAAEA,KAAqBJ;MAC1C,MAAMK,IAAgBL,KAAKM,iBAAiBH,EAAYI;MACxDP,KAAKQ,UAAUH;MACf,IAAIA,GAAe;MAEnBI,GAAU;QACN,MAAMC,IAA8BV,KAAKM,mBAAmBF,EAAiBG;QAC7E,IAAIG,GAA6B;QACjCV,KAAKM,iBAAiBF,EAAiBG;QACvCP,KAAKE;AAAW;AAClB;IAGNF,KAAAW,mBAAoBC;MAChB,OAAMC,YAAEA,GAAUC,YAAEA,KAAed;MACnCY,IAAOG,SAAS,GAAGH;MACnB,IAAIA,IAAO,GAAG;QACVA,IAAO;aACJ,IAAIA,IAAOC,GAAY;QAC1BD,IAAOC;;MAGX,IAAIC,EAAWE,UAAU,GAAGJ,KAAQE,EAAWE,QAAQ,GAAGJ;MAE1D,KAAKZ,KAAKG,YAAYc,UAAU;QAC5BjB,KAAKY,OAAOA;;MAGhBZ,KAAKkB,OAAOC,KAAK;QAAEP;;AAAO;IAG9BZ,KAAAoB,sBAAuBC;MACnBrB,KAAKsB,UAAUD,EAAME,OAAOP,QAAQ;AAAC;AAqL5C;;;EAhaG,oBAAAQ;IACIxB,KAAKyB;;EAGT,iBAAAC;IACI1B,KAAK2B;;EAGT,gBAAAC;IACI5B,KAAKM,iBAAiBN,KAAKI,iBAAiBG;IAE5CsB,EAAc7B,KAAKG;;;;EAOvB,kBAAA2B,CAAmBT;;IACf,KAAKU,EAAmBV,GAAOrB,KAAKG,cAAc;IAClD,OAAM6B,kBAAEA,GAAgB5B,kBAAEA,GAAgBU,YAAEA,KAAed;IAC3D,IAAIgC,GAAkB;OAClBC,IAAA7B,EAAiB8B,cAA2B,+BAAyB,QAAAD,WAAA,aAAAA,EAAEE;WACpE;MACHrB,EAAWqB;;;;;;;;;;;EAcnB,oBAAMC;IACF,MAAMC,IAASrC,KAAKsC;IACpB,IAAID,MAAA,QAAAA,WAAA,aAAAA,EAAQE,UAAU;IACtBF,EAAOG;;;;;;;SAUX,mBAAMC;IACF,MAAMJ,IAASrC,KAAK0C;IACpB,IAAIL,MAAA,QAAAA,WAAA,aAAAA,EAAQE,UAAU;IACtBF,EAAOG;;;;;;;SAUX,mBAAMG;IACF,MAAMN,IAASrC,KAAK4C;IACpB,IAAIP,MAAA,QAAAA,WAAA,aAAAA,EAAQE,UAAU;IACtBF,EAAOG;;;;;;;SAUX,uBAAMK;IACF,MAAMR,IAASrC,KAAK8C;IACpB,IAAIT,MAAA,QAAAA,WAAA,aAAAA,EAAQE,UAAU;IACtBF,EAAOG;;;;;;;;SAWX,iCAAMO,CAA4B/B;;IAC9B,IAAIgC,MAAMhC,OAAWhB,KAAKiD,sBAAsBjD,KAAKkD,uBAAuBC,SAASnC,IAAQ;IAC7FhB,KAAKoD,cAAcjB;IACnBnC,KAAKoD,cAAcZ;IACnB,MAAMa,IAAUC,MAAMC,KAAKvD,KAAKoD,cAAcI,iBAAiB;KAC/DvB,IAAAoB,EAAQI,MAAKC,KAAUA,EAAO1C,UAAU,GAAGA,WAAU,QAAAiB,WAAA,aAAAA,EAAAO;;;;;;;;SAWzD,kBAAMmB,CAAa3C;;IACf,KAAKhB,KAAKc,cAAckC,MAAMhC,MAAUA,IAAQ,KAAKA,IAAQhB,KAAKa,YAAY;KAC9EoB,IAAAjC,KAAKc,gBAAY,QAAAmB,WAAA,aAAAA,EAAAE;IACjBnC,KAAKc,WAAWE,QAAQ,GAAGA;KAC3B4C,IAAA5D,KAAKc,gBAAY,QAAA8C,WAAA,aAAAA,EAAAC;;;;EASrB,oBAAAlC;IACI,IAAI3B,KAAKC,aAAaD,KAAK8D,gBAAgB9D,KAAK+D,WAAW;MACvD,IAAI/D,KAAKgE,gBAAgB;MACzBhE,KAAKgE,iBAAiB,IAAIC,gBAAe,MAAMjE,KAAKE;MACpDF,KAAKgE,eAAeE,QAAQlE,KAAKG;MACjCgE,OAAOC,iBAAiB,UAAUpE,KAAKE;WACpC;MACHF,KAAKQ,UAAU;MACfR,KAAKyB;;;;;EAOb,gBAAI4C;IACA,OAAQC,oBAAoBhD,GAASiD,kBAAkBC,GAAOC,iBAAiB7D,KAASZ;IACxF,MAAM0E,IAAQF,IAAQ,KAAK5D,IAAO,KAAKU,IAAU,IAAI;IACrD,MAAMqD,IAAMC,KAAKC,IAAIjE,IAAOU,GAASkD;IACrC,OAAO,GAAGE,OAAWC;;EAGzB,oBAAI3C;IACA,OAAOhC,KAAKQ,WAAWR,KAAK8D,eAAe9D,KAAK+D;;EAGpD,aAAIe;IACA,OAAQR,oBAAoBhD,GAASiD,kBAAkBC,GAAOC,iBAAiB7D,KAASZ;IACxF,MAAM0E,IAAQ9D,IAAOU,IAAU;IAC/B,MAAMqD,IAAMC,KAAKC,KAAKjE,IAAO,KAAKU,GAASkD;IAC3C,OAAO,GAAGE,OAAWC;;EAGzB,mBAAIF;IACA,OAAOzE,KAAKwE,QAAQ,IAAIxE,KAAKY,QAAQ,IAAI;;EAG7C,sBAAI0D;IACA,OAAOtE,KAAKsB,WAAW;;EAG3B,aAAIyD;IACA,OAAQT,oBAAoBhD,GAASmD,iBAAiB7D,KAASZ;IAC/D,MAAM0E,IAAQE,KAAKI,IAAI,IAAIpE,IAAO,KAAKU,IAAU;IACjD,MAAMqD,KAAO/D,IAAO,KAAKU;IACzB,OAAO,GAAGoD,OAAWC;;EAGzB,yBAAIM;IACA,OAAOjF,KAAKkF,cAAcC,EAAI;;EAGlC,qBAAIlC;;IACA,SAAOhB,IAAAjC,KAAKoF,uBAAmB,QAAAnD,WAAA,aAAAA,EAAAoD,UAAS;;EAG5C,cAAIxE;IACA,OAAMkD,WAAEA,GAAWQ,kBAAkBC,GAAOF,oBAAoBhD,GAAOgE,OAAEA,KAAUtF;IAEnF,IAAI+D,KAAauB,MAAUtC,MAAMjC,SAAS,GAAGuE,OAAW,OAAOA;IAE/D,OAAOV,KAAKW,KAAKf,IAAQlD;;EAG7B,oBAAIiD;IACA,OAAOvE,KAAKwE,SAAS;;EAGzB,0BAAItB;IACA,IAAII,MAAMkC,QAAQxF,KAAKoF,oBAAoB;MACvC,OAAOpF,KAAKoF,kBAAkBK,KAAIC,KAAOC,OAAOD;WAC7C,WAAW1F,KAAKoF,sBAAsB,UAAU;MACnD,OAAOpF,KAAKoF,kBACPQ,OACAC,QAAQ,eAAe,IACvBC,MAAM,KACNL,KAAIC,KAAOC,OAAOD;WACpB;MACH,OAAO;;;EAwCf,oBAAAjE;;IACI,IAAIzB,KAAKgE,gBAAgB;OACrB/B,IAAAjC,KAAKgE,oBAAgB,QAAA/B,WAAA,aAAAA,EAAA8D,UAAU/F,KAAKG;MACpCH,KAAKgE,iBAAiB;MACtBG,OAAO6B,oBAAoB,UAAUhG,KAAKE;;;;;EAOlD,aAAA+F;IACI,MAAMC,IAAalG,KAAKkD,uBAAuBiD,MAAK,CAACC,GAAGC,MAAMD,IAAIC;IAClE,IAAIrG,KAAKsB,YAAYgF,WAAWtG,KAAKsB,UAAU4E,EAAW;IAC1DlG,KAAKoF,oBAAoB,IAAIc,EAAWK,KAAK;IAC7C,OACIC,EACI;MAAAC,KAAKC,KAAO1G,KAAKoD,gBAAgBsD;MACjCC,UAAU3G,KAAKoB;MACfJ,OAAOhB,KAAKkD,uBAAuBC,SAASnD,KAAKsB,WAAW,GAAGtB,KAAKsB,YAAYgF;OAE/EJ,EAAWT,KAAInE,KACZkF,EAAA;MACIxF,OAAO,GAAGM;MACVsF,SAAS,GAAGzB,EAAI,qCAAqC7D;OACvD,GAAG6D,EAAI,qCAAqC7D;;EAM9D,MAAAuF;;IACI,OAAM9C,WACFA,GAASD,aACTA,GAAW9B,kBACXA,GACAiD,uBAAuBC,GAAUrE,YACjCA,GACA0D,kBAAkBC,GAClBC,iBAAiB7D,GAAIyD,cACrBA,GAAYS,WACZA,GAASC,WACTA,GAAS9B,mBACTA,KACAjD;IACJ,MAAM8G,IAAclG,IAAO;IAC3B,MAAMmG,IAAanG,MAASC;IAE5B,IAAImG,IAA0B7B,EAAI;IAClC,IAAI8B,IAA0B9B,EAAI;IAClC,IAAIpB,GAAW;MACXkD,IAAkB9B,EAAI,uCAAuC;QAAE+B,MAAMtG,IAAO;QAAG4D,OAAO3D;;MACtFmG,IAAkB7B,EAAI,uCAAuC;QAAE+B,MAAMtG,IAAO;QAAG4D,OAAO3D;;WACnF,IAAIiD,GAAa;MACpBmD,IAAkB9B,EAAI,yCAAyC;QAC3DgC,OAAOpC;QACPG,YAAYA,EAAWkC;QACvB5C;;MAEJwC,IAAkB7B,EAAI,yCAAyC;QAC3DgC,OAAOrC;QACPI,YAAYA,EAAWkC;QACvB5C;;;IAIR,OACIgC,EAAA;MAAAa,KAAA;MACIC,OAAM;MACNb,KAAKC,KAAO1G,KAAKI,mBAAmBsG;MACxB,cAAAvB,EAAI;OAEhBqB,EAAA;MAAAa,KAAA;MACIC,OAAM;MACE;OAEPvD,IACKoB,EAAI,mCAAmC;MACnCoC,SAAS3G;MACT4D,OAAO3D;SAEXsE,EAAI,yCAAyC;MACzCgC,OAAO9C;MACPa,YAAYA,EAAWkC;MACvB5C,OAAOA,EAAMgD;SAG3BhB,EAAK;MAAAa,KAAA;MAAAC,OAAM;OACPd,EAAA;MAAAa,KAAA;MACIZ,KAAKC,KAAO1G,KAAKsC,eAAeoE;MAChCe,OAAOtC,EAAI;MACX5C,UAAUuE;MACVY,QAAQ1F;MACR2F,SAAS,MAAM3H,KAAKW,iBAAiB;MAAE,WAC/B;MAAc;OAGtB6F,EAAA;MAAAa,KAAA;MAASO,MAAK;SAElBpB,EAAA;MAAAa,KAAA;MACIZ,KAAKC,KAAO1G,KAAK8C,cAAc4D;MAC/Be,OAAOR;MACP1E,UAAUuE;MACVa,SAAS,MAAM3H,KAAKW,iBAAiBC,IAAO;MAAE,WACtC;MAAa;OAGrB4F,EAAA;MAAAa,KAAA;MAASO,MAAK;UAGtBpB,EACI;MAAAa,KAAA;MAAAC,OAAM;MACNI,QAAQ1F;MAAgB,WAChB;OAERwE,EAAA;MAAAa,KAAA;MAAA,eAAkB;OAAQlC,EAAI,oCAC9BqB,EACI;MAAAa,KAAA;MAAAC,OAAM;MACNK,SAAS,MAAM3H,KAAKc,WAAW+G,cAAc,IAAIC,WAAW;OAE5DtB,EAAA;MAAAa,KAAA;MACIZ,KAAKC,KAAO1G,KAAKc,aAAa4F;MAC9BkB,MAAK;MACL5G,OAAO,GAAGJ;MACViE,KAAK;MACLG,KAAKhF,KAAKa;MACVkH,WACA;MAAAC,UACA;MAAAP,OAAO,GAAGtC,EAAI,sCAAsCA,EAChD,qCACA,EAACtE,EAAW2G;MAEhBb,UAAUtF;QACNA,EAAM4G;QACNjI,KAAKW,iBAAiBU,EAAME,OAAOP;AAAM;MAC5C,WACO;MACRuG,SAAQ;SAGhBf,EAAA;MAAAa,KAAA;MAAA,eAAkB;OACblC,EAAI,qCAAqC,EAACtE,EAAW2G,uBAG9DhB,EAAK;MAAAa,KAAA;MAAAC,OAAM;OACPd,EAAA;MAAAa,KAAA;MACIZ,KAAKC,KAAO1G,KAAK4C,cAAc8D;MAC/Be,OAAOT;MACPzE,UAAUwE;MACVY,SAAS,MAAM3H,KAAKW,iBAAiBC,IAAO;MAAE,WACtC;MAAa;OAGrB4F,EAAA;MAAAa,KAAA;MAASO,MAAK;SAElBpB,EAAA;MAAAa,KAAA;MACIZ,KAAKC,KAAO1G,KAAK0C,cAAcgE;MAC/Be,OAAM;MACNlF,UAAUwE;MACVW,QAAQ1F;MACR2F,SAAS,MAAM3H,KAAKW,iBAAiBE;MAAW,WACxC;MAAa;OAGrB2F,EAAA;MAAAa,KAAA;MAASO,MAAK;UAGtBpB,EACI;MAAAa,KAAA;MAAAC,OAAM;MACNI,QAAQ1F,QAAqBC,IAAAjC,KAAKoF,uBAAiB,QAAAnD,WAAA,aAAAA,EAAEoD;OAEpDpC,KAAqBjD,KAAKiG","ignoreList":[]}