q2-tecton-elements 1.66.2 → 1.67.0

package/dist/cjs/q2-modal.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-modal.entry.cjs.js","sources":["src/components/q2-modal/q2-modal.scss?tag=q2-modal&encapsulation=shadow","src/components/q2-modal/q2-modal.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-modal-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px);\n    --comp-border-radius: #{var-list(--tct-modal-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-modal-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-modal-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-modal-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-modal-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-modal-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-modal-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-modal-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-modal-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-modal-max-width, 600px)};\n    --comp-dialog-max-height: #{var-list(--tct-modal-max-height, 100vh)}; // should not use vh in the extension\n    --comp-dialog-min-height: #{var-list(--tct-modal-min-height, 40vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-modal-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-modal-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 1;\n\n        &.is-opening,\n        &.is-open {\n            opacity: 1;\n            transform: translateY(0);\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n\n    .icon {\n        height: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        margin: var-list(--tct-modal-icon-margin, --app-scale-2x, 10px);\n        display: flex;\n        justify-content: center;\n        q2-icon {\n            width: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        }\n    }\n    .image {\n        display: flex;\n        justify-content: center;\n        img {\n            width: 100%;\n            border-radius: var-list(--tct-modal-image-border-radius, --app-border-radius-2, 8px);\n        }\n    }\n    .message {\n        font-size: 1rem;\n    }\n    &.more-gradient {\n        -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n        mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n    }\n}\n\n.interior {\n    display: grid;\n    min-height: var(--comp-dialog-min-height);\n    grid-template-rows: auto 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: flex;\n    justify-content: space-between;\n    .title {\n        @include line-clamp(3);\n        text-align: left;\n        font-weight: var-list(--tct-modal-title-font-weight, 400);\n        margin: 0;\n        padding-top: 0.5rem;\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n","import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\nimport type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';\n\n/**\n * @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\n * @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n */\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of the close button in the top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it will be sanitized for security purposes.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * A plain text description of the modal. Use this to provide context or information to the user.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * The icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconFillColor: string;\n\n    /**\n     * The icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokePrimary: string;\n\n    /**\n     * The icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeSecondary: string;\n\n    /**\n     * The icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeWidth: string;\n\n    /**\n     * An image URL to be displayed beneath the title. It renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * A plain text title of the modal displayed at the top.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action buttons is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when the modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.iconStrokePrimary = option?.iconStrokePrimary || this.iconStrokePrimary;\n            this.iconStrokeSecondary = option?.imageSrc || this.imageSrc;\n            this.iconFillColor = option?.iconFillColor || this.iconFillColor;\n            this.iconStrokeWidth = option?.iconStrokeWidth || this.iconStrokeWidth;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    // to be removed\n\n    iconStyle = () => {\n        const styleObject = {};\n        if (this.iconStrokePrimary) styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;\n        if (this.iconStrokeSecondary) styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;\n        if (this.iconFillColor) styleObject['--tct-icon-fill'] = this.iconFillColor;\n        if (this.iconStrokeWidth) styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;\n        return styleObject;\n    };\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon\n                                    type={this.icon}\n                                    style={this.iconStyle()}\n                                ></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"names":["debounce","waitForNextPaint","h","hasSlotContent","sanitizeHTMLString"],"mappings":"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"}
+{"version":3,"file":"q2-modal.entry.cjs.js","sources":["src/components/q2-modal/q2-modal.scss?tag=q2-modal&encapsulation=shadow","src/components/q2-modal/q2-modal.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-modal-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px);\n    --comp-border-radius: #{var-list(--tct-modal-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-modal-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-modal-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-modal-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-modal-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-modal-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-modal-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-modal-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-modal-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-modal-max-width, 600px)};\n    --comp-dialog-max-height: #{var-list(--tct-modal-max-height, 100vh)}; // should not use vh in the extension\n    --comp-dialog-min-height: #{var-list(--tct-modal-min-height, 40vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-modal-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-modal-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 1;\n\n        &.is-opening,\n        &.is-open {\n            opacity: 1;\n            transform: translateY(0);\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n\n    .icon {\n        height: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        margin: var-list(--tct-modal-icon-margin, --app-scale-2x, 10px);\n        display: flex;\n        justify-content: center;\n        q2-icon {\n            width: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        }\n    }\n    .image {\n        display: flex;\n        justify-content: center;\n        img {\n            width: 100%;\n            border-radius: var-list(--tct-modal-image-border-radius, --app-border-radius-2, 8px);\n        }\n    }\n    .description {\n        font-size: var-list(--tct-modal-description-font-size, 14px);\n    }\n    &.more-gradient {\n        -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n        mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n    }\n}\n\n.interior {\n    display: grid;\n    min-height: var(--comp-dialog-min-height);\n    grid-template-rows: auto 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    .title {\n        @include line-clamp(3);\n        text-align: left;\n        font-weight: var-list(--tct-modal-title-font-weight, 400);\n        margin: 0;\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n","import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\nimport type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';\n\n/**\n * @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\n * @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n */\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of the close button in the top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it will be sanitized for security purposes.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * A plain text description of the modal. Use this to provide context or information to the user.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * An image URL to be displayed beneath the title. It renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * A plain text title of the modal displayed at the top.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action buttons is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when the modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon type={this.icon}></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"names":["debounce","waitForNextPaint","h","hasSlotContent","sanitizeHTMLString"],"mappings":"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"}

package/dist/cjs/q2-month-picker.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-DyAq0y0v.js');
+var index$1 = require('./index-YvKoRT-t.js');
 
 const q2MonthPickerCss = "*{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}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 
@@ -142,10 +142,10 @@ const Q2MonthPicker = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '6c9a7ca40d2a597f21e289b540f07900f2588cac', class: "month-container", onKeyDown: this.onMonthKeydown }, index.h("div", { key: 'bf2a873e6a183df04920eb603ef507eff82c89bd', class: "navigation" }, index.h("q2-btn", { key: '4eff95a05e80cfe5c0593d638fd82ca2a7954765', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (index.h("div", { key: 'a79408285992125baf4ab6771f6501d79a6245df', class: "month-container", onKeyDown: this.onMonthKeydown }, index.h("div", { key: '857185b3278ee9b9f346686e587a39250130e532', class: "navigation" }, index.h("q2-btn", { key: 'f698f8ea247ba18ecd40d22c74c4247fa300cf3d', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, index.h("span", { key: '69f3247510f67d368e1f15ce054cbfdb3d56901c', class: "year" }, this.year), index.h("q2-icon", { key: '281bdf4e671b05ea28aea658ae05ab11d3c4667d', class: "year-icon off", type: "chevron-down" })), index.h("div", { key: '9528cc408878d4f4839bed485fe5a46cb005f139', class: "month-controller" }, index.h("div", { key: '8d7330c4e3951a001203c5f08af7495b320da5c9', class: "cal-year-prev-next" }, index.h("q2-btn", { key: 'e725c2476177186c83ecdf31ca8ebfabb3c132c7', label: index$1.loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, index.h("q2-icon", { key: '4a6b9d629c98cbdc248cfd66694cf610f2ca4423', type: "arrow-left" })), index.h("q2-btn", { key: '797eb8389dbffd0e1e2588d68799be8dc425ef85', label: index$1.loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, index.h("q2-icon", { key: 'c75dfb662cf8cf336b059650d24e8f22397dd9d5', type: "arrow-right" }))))), index.h("div", { key: '18b5c98c2bc3d4c9f353b79b99fbc76c91942724', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index$1) => (index.h("div", { class: "month" }, index.h("span", { role: "button", class: "month-button", "data-index": index$1, "aria-label": month.label, tabindex: index$1 === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (index.h("div", { key: '96451bd771873ee8643221db902dcf70bfa8df1c', class: "today-label" }, index$1.loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, index.h("span", { key: 'fc467f87579a2a1c90c72e22aa49715ed4130d22', class: "year" }, this.year), index.h("q2-icon", { key: '545d4a90b2c57ef0109475746f963a879c4d69d8', class: "year-icon off", type: "chevron-down" })), index.h("div", { key: '1b1c130e07944ab988e981f41b3351237a638f7e', class: "month-controller" }, index.h("div", { key: '5967309b329f2f0697a26a69d91dfb50b0a6d526', class: "cal-year-prev-next" }, index.h("q2-btn", { key: '23295dbba205dd04a809511501b49b74bd845f16', label: index$1.loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, index.h("q2-icon", { key: '845a1a049fe80fd08470cbaf1b530bcf41734c39', type: "arrow-left" })), index.h("q2-btn", { key: '2074d486e8a0d00cee2ac874230ff2411444f669', label: index$1.loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, index.h("q2-icon", { key: '97699d8fa0378afa468bbb71e8bce6ccb9e78423', type: "arrow-right" }))))), index.h("div", { key: 'f373f6a783137aca3691fdfdc70bea04d487b63e', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index$1) => (index.h("div", { class: "month" }, index.h("span", { role: "button", class: "month-button", "data-index": index$1, "aria-label": month.label, tabindex: index$1 === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (index.h("div", { key: 'b85641400c0c17171278735aa8e8b81f2497ac27', class: "today-label" }, index$1.loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-mutation-observer.cjs.entry.js

@@ -92,7 +92,7 @@ const Q2MutationObserver = class {
     // #endregion
     // #region Render Methods
     render() {
-        return index.h("slot", { key: '882a16f7f965dd3c85869936ecdab64217efa25b', onSlotchange: this.handleSlotChange });
+        return index.h("slot", { key: 'b383eb3c2f5d2983f3658f776bd52736b4b6f9a5', onSlotchange: this.handleSlotChange });
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-optgroup.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-BYXz4owL.js');
 var component = require('./component-DRAntnCA.js');
-var index$1 = require('./index-DyAq0y0v.js');
+var index$1 = require('./index-YvKoRT-t.js');
 
 const q2OptgroupCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--t-base, #FFFFFF))));color:var(--tct-optgroup-header-color, inherit);font-size:var(--tct-optgroup-header-font-size, 14px);font-weight:var(--tct-optgroup-header-font-weight, 600);letter-spacing:var(--tct-optgroup-header-letter-spacing, inherit);position:var(--tct-optgroup-header-position, sticky);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, none));top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 
@@ -56,7 +56,7 @@ const Q2Optgroup = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '7ac63412ab9d8377d9d3c7a21220ceabc81ff2a1', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: '090eb5417eb5a1d90328a54e30ef58b5f6bc89ca', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: '30c5b85521eb8b9415f7e98e6c7cbc9ec0eece6d', class: "q2-optgroup-options" }, index.h("slot", { key: '46b22bd31621cb7380479adb650aed10db2151ad' }))));
+        return (index.h("div", { key: '03ea146fc88b43ccd10050cffb20c95bcc64c565', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, index.h("div", { key: '4738ff37a955e7d742a634ce7f043bdfc9f9720d', class: "q2-optgroup-header", id: this.headerId }, (this.label && index$1.loc(this.label)) || ''), index.h("div", { key: '5f387ec9d47194ee11415a3c91f01ea5b2107822', class: "q2-optgroup-options" }, index.h("slot", { key: '765abe9037d131fa65f5c4ace78de0282c2e17a1' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-option.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-DyAq0y0v.js');
+var index$1 = require('./index-YvKoRT-t.js');
 var component = require('./component-DRAntnCA.js');
 
 const q2OptionCss = "*{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(:not([separator]):not([separator=false])){--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;align-items:center}:host(:focus),:host(:not([separator]):not([separator=false]):hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_hide-selected-block]:not([_hide-selected-block=false])){grid-template-columns:1fr;grid-template-areas:\"content\"}:host(:not([_hide-selected-block])){grid-template-areas:\"icon content\";grid-template-columns:var(--comp-selected-icon-size) 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host([separator]:not([separator=false])){display:block}:host(:not([aria-disabled]):not([separator]):not([separator=false]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus-visible){box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}::slotted(q2-item){padding:var(--app-scale-1x, 5px) 0}.content{display:block;grid-area:content;font-size:var(--tct-option-content-font-size, inherit)}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}";

package/dist/cjs/q2-pagination.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-DyAq0y0v.js');
+var index$1 = require('./index-YvKoRT-t.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 
 const q2PaginationCss = "*{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%}:host([alignment=right]){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));color:var(--tct-pagination-color, inherit);font-size:var(--tct-pagination-font-size, inherit);font-weight:var(--tct-pagination-font-weight, inherit)}.container.stacked{flex-direction:column;column-gap:0;row-gap:var(--tct-pagination-row-gap, var(--app-scale-2x, 10px));height:auto;align-items:stretch}.container.stacked .description{text-align:center}.container.stacked .controls{justify-content:center}.container.stacked .per-page{display:flex;justify-content:center}.container.stacked q2-select{--tct-select-margin:0;width:var(--tct-pagination-perpage-width, 60%)}.controls{display:flex}.btn-group{display:flex;gap:var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0))}.description,.input-display{white-space:nowrap}.input-display{display:grid;grid-template-columns:auto var(--tct-pagination-input-width, 50px) auto;align-items:center;gap:var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)))}.input-display[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));--tct-btn-icon-hover-background:var(--tct-pagination-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-pagination-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-pagination-btn-icon-stroke-secondary, var(--app-gray, #747474))}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))}";
@@ -43,13 +43,15 @@ const Q2Pagination = class {
             if (!this.hostElement.onchange) {
                 this.page = page;
             }
-            mirrorEmit.mirrorEmit(this, ['change', 'tctChange'], { page });
+            mirrorEmit.mirrorEmit(this, ['change', 'tctChange'], { page, perPage: this.perPageWithDefault });
         };
         this.handlePerPageChange = (event) => {
             var _a;
             if (this.disabled)
                 return;
-            this.perPage = (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.value) || this.perPage) * 1;
+            const perPage = (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.value) || this.perPage) * 1;
+            this.perPage = perPage;
+            mirrorEmit.mirrorEmit(this, ['change', 'tctChange'], { page: this.pageWithDefault, perPage });
         };
     }
     // #endregion
@@ -277,7 +279,10 @@ const Q2Pagination = class {
         if (this.perPage === undefined || isNaN(this.perPage))
             this.perPage = increments[0];
         this.perPageIncrements = `[${increments.join(',')}]`;
-        return (index.h("q2-select", { ref: el => (this.perPageSelect = el), onTctChange: this.handlePerPageChange, value: this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined, disabled: this.disabled }, increments.map(perPage => (index.h("q2-option", { value: `${perPage}`, display: `${index$1.loc('tecton.element.pagination.view')} ${perPage}` }, `${index$1.loc('tecton.element.pagination.view')} ${perPage}`)))));
+        return (index.h("q2-select", { ref: el => (this.perPageSelect = el), onChange: e => e.stopImmediatePropagation(), onTctChange: event => {
+                event.stopPropagation();
+                this.handlePerPageChange(event);
+            }, value: this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined, disabled: this.disabled }, increments.map(perPage => (index.h("q2-option", { value: `${perPage}`, display: `${index$1.loc('tecton.element.pagination.view')} ${perPage}` }, `${index$1.loc('tecton.element.pagination.view')} ${perPage}`)))));
     }
     render() {
         var _a;
@@ -302,7 +307,7 @@ const Q2Pagination = class {
                 total,
             });
         }
-        return (index.h("nav", { key: 'f4e39c1ce3dc25c39562e845cf5ff7ba1d609b56', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: 'aa881258550b4067150811d7cd30a0031dd64e6a', class: "description", "test-id": "description" }, pagesOnly
+        return (index.h("nav", { key: 'f99b44d19603ae3981ef849748ef6163fc45919b', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": index$1.loc('tecton.element.pagination.title') }, index.h("div", { key: 'd1643de16462d1f16fc252eeed2e568e246648a1', class: "description", "test-id": "description" }, pagesOnly
             ? index$1.loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -311,10 +316,10 @@ const Q2Pagination = class {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), index.h("div", { key: '52bd34c12ea01bd9a83e69cc35508e17fe40ce45', class: "controls" }, index.h("div", { key: 'e57c54c60820b4df9a6badb8e55c4632fe7d0d04', class: "btn-group" }, index.h("q2-btn", { key: 'e77ad67216aa245359649019a3d258175b2d27a0', ref: el => (this.firstPageBtn = el), label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'c6f055bca0eca35e3c47c4c92512f6bb1ca3fbdd', type: "chevron-double-left" })), index.h("q2-btn", { key: 'd248cba128baece5cee143bb27855cefad77d5c2', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: '6069dc7e9f1ce2555607c3016df4a531af75f0c5', type: "chevron-left" }))), index.h("div", { key: '3df46a7091a37782cfab31fd71c74618cb2cb312', class: "input-display", hidden: isFullViewHidden }, index.h("span", { key: 'd35ade02558182338e28e07e5844c82e05097f87', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: '0c39a6f581d8c13919cfd24c26579d8847512d97', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: '362f1e33bed25340f8e3885ad88b525121173cfa', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onTctChange: event => {
+            })), index.h("div", { key: '6ffec6ee2128172163a381f76d9e06fe82c7316b', class: "controls" }, index.h("div", { key: 'decc2ca51ad2365a07ffd112c1d1726e174b5d0c', class: "btn-group" }, index.h("q2-btn", { key: '7b85578c7595c4285c995c5e5359f6c441bdda51', ref: el => (this.firstPageBtn = el), label: index$1.loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, index.h("q2-icon", { key: '550559c6d68876121fb3aaa87414e4adb11f4429', type: "chevron-double-left" })), index.h("q2-btn", { key: '6bf47805cabef90404a66317fc4bff10921818bd', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'cd7e55771f9de549a7729236df927274745825b9', type: "chevron-left" }))), index.h("div", { key: '730078a28d7d555bfed57381b972e54c8059a556', class: "input-display", hidden: isFullViewHidden }, index.h("span", { key: '35b93b8034569d72bf0670d73f7ce1ec0fef826e', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.page')), index.h("div", { key: 'd28c27c41044573a0fb1adf2b8a89ef582c5aa98', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, index.h("q2-input", { key: '28bf16274c57944a7a7132dd29a2e606d9f6c108', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${index$1.loc('tecton.element.pagination.page')} (${index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), index.h("span", { key: '311db5a963079c39e94add265fe99674b3003f60', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: '474293c51d17f20e9919135a868e81947d51bf25', class: "btn-group" }, index.h("q2-btn", { key: 'c6b4fbc3b37c1b5cf408681b016b6fd5fcc206ac', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: '5b14a31c4ebf2af1b5fb4d5b06c15f24ffe0d5db', type: "chevron-right" })), index.h("q2-btn", { key: 'cc65d89ff1193c506106e3375b5b495c28f590df', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: '48a061a715ca19b8bac38866c6c24d1eaf6d7e93', type: "chevron-double-right" })))), index.h("div", { key: '5e7767e6f8c05ff0be869499e0d4753fd7edc91c', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), index.h("span", { key: '5fc845812367d39bf91826657da31f39436fc670', "aria-hidden": "true" }, index$1.loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), index.h("div", { key: '73183db09f66cad393b33571260579720f2e8c12', class: "btn-group" }, index.h("q2-btn", { key: 'c3daf5fd49273bede94ce2a9994309d282f1bdbf', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, index.h("q2-icon", { key: '427474ab8f77a0e314a687bb00d199858234f30d', type: "chevron-right" })), index.h("q2-btn", { key: '607732d95674f7620423817e7394ec4e88ac6e9b', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, index.h("q2-icon", { key: 'ff871b93e2f4932eddde86761f126fb6937b43fb', type: "chevron-double-right" })))), index.h("div", { key: '506a9fd9aa1790d1a2efb7b8a744a8fc1d76a409', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-pagination.cjs.entry.js.map

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