q2-tecton-elements 1.50.1 → 1.51.1

package/dist/collection/components/q2-pagination/q2-pagination.js

@@ -73,6 +73,87 @@ export class Q2Pagination {
         }
     }
     // #endregion
+    // #region Public Methods API
+    /**
+     * Emulates clicking the button that controls moving to the first page, and emitting a change event with the updated page number.
+     *
+     * If the `<button>` is disabled, this method does nothing.
+     * @testOnly
+     */
+    async clickFirstPage() {
+        const button = this.firstPageBtn;
+        if (button === null || button === void 0 ? void 0 : button.disabled)
+            return;
+        button.click();
+    }
+    /**
+     * Emulates clicking the button that controls moving to the last page, and emitting a change event with the updated page number.
+     *
+     * If the `<button>` is disabled, this method does nothing.
+     * @testOnly
+     */
+    async clickLastPage() {
+        const button = this.lastPageBtn;
+        if (button === null || button === void 0 ? void 0 : button.disabled)
+            return;
+        button.click();
+    }
+    /**
+     * Emulates clicking the button that controls moving to the next page, and emitting a change event with the updated page number.
+     *
+     * If the `<button>` is disabled, this method does nothing.
+     * @testOnly
+     */
+    async clickNextPage() {
+        const button = this.nextPageBtn;
+        if (button === null || button === void 0 ? void 0 : button.disabled)
+            return;
+        button.click();
+    }
+    /**
+     * Emulates clicking the button that controls moving to the previous page, and emitting a change event with the updated page number.
+     *
+     * If the `<button>` is disabled, this method does nothing.
+     * @testOnly
+     */
+    async clickPreviousPage() {
+        const button = this.prevPageBtn;
+        if (button === null || button === void 0 ? void 0 : button.disabled)
+            return;
+        button.click();
+    }
+    /**
+     * Emulates selecting a `perPage` value from the `perPageIncrements` dropdown,
+     * and updates the value of the `perPage` property.
+     *
+     * If `value` is not in the `perPageIncrements` array, this method does nothing.
+     * @testOnly
+     */
+    async selectPerPageIncrementValue(value) {
+        var _a;
+        if (isNaN(value) || !this.showPerPageSelect || !this.perPageIncrements.includes(value))
+            return;
+        this.perPageSelect.focus();
+        this.perPageSelect.click();
+        const options = Array.from(this.perPageSelect.querySelectorAll('q2-option'));
+        (_a = options.find(option => option.value === `${value}`)) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    /**
+     * Emulates setting the page value in the `<input>` field,
+     * and emitting a change event with the updated page number.
+     *
+     * If `value` is invalid, this method does nothing.
+     * @testOnly
+     */
+    async setPageValue(value) {
+        var _a, _b;
+        if (!this.inputField || isNaN(value) || value < 1 || value > this.totalPages)
+            return;
+        (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.focus();
+        this.inputField.value = `${value}`;
+        (_b = this.inputField) === null || _b === void 0 ? void 0 : _b.blur();
+    }
+    // #endregion
     // #region Watchers
     manageResizeObserver() {
         if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {
@@ -119,6 +200,10 @@ export class Q2Pagination {
     get recordTypeWithDefault() {
         return this.recordType || loc('tecton.element.pagination.defaultRecordType');
     }
+    get showPerPageSelect() {
+        var _a;
+        return ((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) > 1;
+    }
     get totalPages() {
         const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;
         if (pagesOnly && pages && !isNaN(parseInt(`${pages}`)))
@@ -139,21 +224,17 @@ export class Q2Pagination {
     // #endregion
     // #region Render Methods
     renderPerPage() {
-        var _a;
-        if (!((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length)) {
-            return '';
-        }
         this.perPageIncrements = this.perPageIncrements
             .filter(perPage => !isNaN(perPage))
             .map(perPage => perPage * 1)
             .sort((a, b) => a - b);
         if (this.perPage === undefined)
             this.perPage = this.perPageIncrements[0];
-        return (h("q2-select", { onChange: this.handlePerPageChange, value: this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined }, this.perPageIncrements.map(perPage => (h("q2-option", { value: `${perPage}`, display: `${loc('tecton.element.pagination.view')} ${perPage}` }, `${loc('tecton.element.pagination.view')} ${perPage}`)))));
+        return (h("q2-select", { ref: el => (this.perPageSelect = el), onChange: this.handlePerPageChange, value: this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined }, this.perPageIncrements.map(perPage => (h("q2-option", { value: `${perPage}`, display: `${loc('tecton.element.pagination.view')} ${perPage}` }, `${loc('tecton.element.pagination.view')} ${perPage}`)))));
     }
     render() {
         var _a;
-        const { pagesOnly, recordsOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange, nextRange, prevRange, } = this;
+        const { pagesOnly, recordsOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange, nextRange, prevRange, showPerPageSelect, } = this;
         const onFirstPage = page === 1;
         const onLastPage = page === totalPages;
         let nextButtonLabel = loc('tecton.element.pagination.goToNext');
@@ -174,7 +255,7 @@ export class Q2Pagination {
                 total,
             });
         }
-        return (h("nav", { key: 'e501aad97cfb7e43c4126bdd18902f0c1b1f77c6', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '268b28bc350d718b66ece79418564dd2235fea93', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '417a7242c4873c1f2d4c12382f63f5e7534bda04', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '5234d2c6d9f2249788d52970f69be1a0d38ad52e', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -183,7 +264,7 @@ export class Q2Pagination {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '8e27861cab2a435ede48ab2650033616b9d09d53', class: "btn-group" }, h("q2-btn", { key: '9cdd1187767349a5645d9463aedc56685ffe02bf', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: 'bb60151a25cf029fb4dec2aa5ae3596cf10d9fcf', type: "chevron-double-left" })), h("q2-btn", { key: '36d57ac9a5e65e7e19ce55dbac6d05d4975d733b', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'f2f7e0cadd9d9c5a8dee3f4d8b07b4a556457cbf', type: "chevron-left" }))), h("div", { key: 'bf92ddcd317f0422135b197216349f85463fa25f', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '22ebbb53459423fa8adb8730c0a4113161a905e8', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '15c79963fb6dc7d5065e914131b258a348689292', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '47050a9a458b5ef7bd21637f6e3cad0d395afe64', type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: '0ff4acfb55fba8dee282afb378d2dc72b472cf4e', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'd9b8b4b6631df6d4520b68dcb516af262b2b9136', class: "btn-group" }, h("q2-btn", { key: 'b53b81c0613122be511d943624d6242fed3576a8', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'a09c849be760fb2f1ff91375ea13c94a2b593c88', type: "chevron-right" })), h("q2-btn", { key: '6d2f35af70859cd5c3b383d3b99a7462d5c15c17', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'a46d892e6acf87af73121feb0a132e9f4b379a0c', type: "chevron-double-right" }))), h("div", { key: '583cde036e73427c99b1187917b81b66ca3e2e7f', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, this.renderPerPage())));
+            })), h("div", { key: 'f1809000bd2d37a8eedad140329ef72ad326bb6b', class: "btn-group" }, h("q2-btn", { key: '62612892b86508d1a834f18e9c242812ac339a21', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '2ff44c03d569a60d28b411b233818e8a8ed09af6', type: "chevron-double-left" })), h("q2-btn", { key: 'e36a4f8c021fd18248f4fc864aff5f194f248095', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'd103f86c52b8ed6809552126de4d3b52cda6b724', type: "chevron-left" }))), h("div", { key: 'e6f515d392ddb8e4a97b6406e6c7ed09503c4f9f', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '1ad86adf8bd04f8c658b8035d6f4c878b7214e38', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '3d701869101717b2c4f73478e33013a923fd8f44', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '63cf49a1292cc983fba7214116b73d423cabc64c', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page" })), h("span", { key: '526fd412a6dd8312d6bcf7a5c8baff1257642e4a', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '069656ae8ee3523040eed22b8f2436fdde926358', class: "btn-group" }, h("q2-btn", { key: 'f215824b3c39eaf84cb6e974912ad2cd3e0ea71a', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'd6d32de9af991e629b00632514ed2a96be42b825', type: "chevron-right" })), h("q2-btn", { key: '74ad02e29e5fadb2bff39cee2d7c6d2f62139bb7', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '970487bac61e8ad48acc77ce34f67a16f2d57dda', type: "chevron-double-right" }))), h("div", { key: 'dbd712331f2f14a3db1c8a247d36d7457fedeb8e', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     static get is() { return "q2-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -283,14 +364,14 @@ export class Q2Pagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates to only display the current and total pages."
+                    "text": "Indicates to display only the current and total pages."
                 },
                 "attribute": "pages-only",
                 "reflect": true
             },
             "perPage": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -303,7 +384,7 @@ export class Q2Pagination {
                     "text": "The total number of records displayed on each page."
                 },
                 "attribute": "per-page",
-                "reflect": false
+                "reflect": true
             },
             "perPageIncrements": {
                 "type": "unknown",
@@ -316,8 +397,11 @@ export class Q2Pagination {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The list of perPage to operate pagination. e.g.) [10, 25, 50]"
+                    "tags": [{
+                            "name": "snippet",
+                            "text": "this.perPageIncrements = [10, 25, 50];"
+                        }],
+                    "text": "A list of perPage values.\nThis generates a [Select](https://tecton.q2developer.com/design-system/q2-select/) element that allows the user to modify the `perPage` value.\n\n**Example:**"
                 }
             },
             "recordsOnly": {
@@ -332,7 +416,7 @@ export class Q2Pagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates to only display the current and total records."
+                    "text": "Indicates to display only the current and total records."
                 },
                 "attribute": "records-only",
                 "reflect": true
@@ -399,6 +483,138 @@ export class Q2Pagination {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "clickFirstPage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Emulates clicking the button that controls moving to the first page, and emitting a change event with the updated page number.\n\nIf the `<button>` is disabled, this method does nothing.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            },
+            "clickLastPage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Emulates clicking the button that controls moving to the last page, and emitting a change event with the updated page number.\n\nIf the `<button>` is disabled, this method does nothing.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            },
+            "clickNextPage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Emulates clicking the button that controls moving to the next page, and emitting a change event with the updated page number.\n\nIf the `<button>` is disabled, this method does nothing.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            },
+            "clickPreviousPage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Emulates clicking the button that controls moving to the previous page, and emitting a change event with the updated page number.\n\nIf the `<button>` is disabled, this method does nothing.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            },
+            "selectPerPageIncrementValue": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Emulates selecting a `perPage` value from the `perPageIncrements` dropdown,\nand updates the value of the `perPage` property.\n\nIf `value` is not in the `perPageIncrements` array, this method does nothing.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            },
+            "setPageValue": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Emulates setting the page value in the `<input>` field,\nand emitting a change event with the updated page number.\n\nIf `value` is invalid, this method does nothing.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{

package/dist/collection/components/q2-pagination/q2-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-pagination.js","sourceRoot":"","sources":["../../../src/components/q2-pagination/q2-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-pagination', shadow: true, styleUrl: 'q2-pagination.scss' })\nexport class Q2Pagination implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLElement;\n    containerWidth: number;\n    inputField: HTMLQ2InputElement;\n    resizeObserver: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isSmall: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Indicates the horizontal alignment of children elements */\n    @Prop()\n    alignment: string;\n\n    /** Determines whether the component uses the dynamic resizing behavior. */\n    @Prop({ reflect: true, mutable: true })\n    autoSize: boolean = true;\n\n    /** The current page that is being displayed. */\n    @Prop({ reflect: true, mutable: true })\n    page: number;\n\n    /**\n     * The number of pages that can be displayed.\n     * @info\n     * Only referenced when `pagesOnly` is true.\n     */\n    @Prop({ reflect: true, mutable: true })\n    pages: number;\n\n    /** Indicates to only display the current and total pages. */\n    @Prop({ reflect: true, mutable: true })\n    pagesOnly: boolean;\n\n    /** The total number of records displayed on each page. */\n    @Prop()\n    perPage: number;\n\n    /** The list of perPage to operate pagination. e.g.) [10, 25, 50] */\n    @Prop()\n    perPageIncrements: number[];\n\n    /** Indicates to only display the current and total records. */\n    @Prop({ reflect: true, mutable: true })\n    recordsOnly: boolean;\n\n    /** Description of the record type to be displayed alongside the record count. */\n    @Prop()\n    recordType: string;\n\n    /** The total number of records to paginate. */\n    @Prop({ reflect: true })\n    total: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the page is changed.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ page: number }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeResizeObserver();\n    }\n\n    componentWillLoad(): void {\n        this.manageResizeObserver();\n    }\n\n    componentDidLoad(): void {\n        this.containerWidth = this.containerElement.clientWidth;\n\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const { isFullViewHidden, containerElement, inputField } = this;\n        if (isFullViewHidden) {\n            containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n        } else {\n            inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('recordsOnly')\n    @Watch('pagesOnly')\n    @Watch('autoSize')\n    manageResizeObserver() {\n        if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\n            if (this.resizeObserver) return;\n            this.resizeObserver = new ResizeObserver(() => this.checkSize());\n            this.resizeObserver.observe(this.hostElement);\n            window.addEventListener('resize', this.checkSize);\n        } else {\n            this.isSmall = false;\n            this.removeResizeObserver();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get currentRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = (page - 1) * perPage + 1;\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.page || 1;\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 totalPages() {\n        const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n        if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n        return Math.ceil(total / perPage);\n    }\n\n    get totalWithDefault() {\n        return this.total || 0;\n    }\n\n    checkSize = () => {\n        const { hostElement, containerElement } = this;\n        const isOverflowing = this.containerWidth > hostElement.clientWidth;\n        this.isSmall = isOverflowing;\n        if (isOverflowing) return;\n\n        nextPaint(() => {\n            const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n            if (containerWidthHasNotChanged) return;\n            this.containerWidth = containerElement.clientWidth;\n            this.checkSize();\n        });\n    };\n\n    handlePageChange = (page: number) => {\n        const { totalPages, inputField } = this;\n        if (page < 1) {\n            page = 1;\n        } else if (page > totalPages) {\n            page = totalPages;\n        }\n\n        if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n        if (!this.hostElement.onchange) {\n            this.page = page;\n        }\n\n        this.change.emit({ page });\n    };\n\n    handlePerPageChange = (event: CustomEvent) => {\n        this.perPage = event.detail.value * 1;\n    };\n\n    removeResizeObserver() {\n        if (this.resizeObserver) {\n            this.resizeObserver?.unobserve(this.hostElement);\n            this.resizeObserver = null;\n            window.removeEventListener('resize', this.checkSize);\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderPerPage() {\n        if (!this.perPageIncrements?.length) {\n            return '';\n        }\n        this.perPageIncrements = this.perPageIncrements\n            .filter(perPage => !isNaN(perPage))\n            .map(perPage => perPage * 1)\n            .sort((a, b) => a - b);\n        if (this.perPage === undefined) this.perPage = this.perPageIncrements[0];\n        return (\n            <q2-select\n                onChange={this.handlePerPageChange}\n                value={this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined}\n            >\n                {this.perPageIncrements.map(perPage => (\n                    <q2-option\n                        value={`${perPage}`}\n                        display={`${loc('tecton.element.pagination.view')} ${perPage}`}\n                    >{`${loc('tecton.element.pagination.view')} ${perPage}`}</q2-option>\n                ))}\n            </q2-select>\n        );\n    }\n\n    render() {\n        const {\n            pagesOnly,\n            recordsOnly,\n            isFullViewHidden,\n            recordTypeWithDefault: recordType,\n            totalPages,\n            totalWithDefault: total,\n            pageWithDefault: page,\n            currentRange,\n            nextRange,\n            prevRange,\n        } = this;\n        const onFirstPage = page === 1;\n        const onLastPage = page === totalPages;\n\n        let nextButtonLabel: string = loc('tecton.element.pagination.goToNext');\n        let prevButtonLabel: string = loc('tecton.element.pagination.goToPrevious');\n        if (pagesOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToPages', { next: page - 1, total: totalPages });\n            nextButtonLabel = loc('tecton.element.pagination.goToPages', { next: page + 1, total: totalPages });\n        } else if (recordsOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: prevRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n            nextButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: nextRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n        }\n\n        return (\n            <nav\n                class=\"container\"\n                ref={el => (this.containerElement = el)}\n                aria-label={loc('tecton.element.pagination.title')}\n            >\n                <div\n                    class=\"description\"\n                    test-id=\"description\"\n                >\n                    {pagesOnly\n                        ? loc('tecton.element.pagination.pages', {\n                              current: page,\n                              total: totalPages,\n                          })\n                        : loc('tecton.element.pagination.description', {\n                              range: currentRange,\n                              recordType: recordType.toLowerCase(),\n                              total: total.toLocaleString(),\n                          })}\n                </div>\n                <div class=\"btn-group\">\n                    <q2-btn\n                        label={loc('tecton.element.pagination.goToFirstPage')}\n                        disabled={onFirstPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => this.handlePageChange(1)}\n                        test-id=\"firstPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-double-left\" />\n                    </q2-btn>\n                    <q2-btn\n                        label={prevButtonLabel}\n                        disabled={onFirstPage}\n                        onClick={() => this.handlePageChange(page - 1)}\n                        test-id=\"prevPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-left\" />\n                    </q2-btn>\n                </div>\n                <div\n                    class=\"controls\"\n                    hidden={isFullViewHidden}\n                    test-id=\"controls\"\n                >\n                    <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n                    <div\n                        class=\"input-wrapper\"\n                        onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n                    >\n                        <q2-input\n                            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 => this.handlePageChange(event.detail.value)}\n                            test-id=\"pageInput\"\n                            current=\"page\"\n                            ref={el => (this.inputField = el)}\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                        label={nextButtonLabel}\n                        disabled={onLastPage}\n                        onClick={() => this.handlePageChange(page + 1)}\n                        test-id=\"nextPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-right\" />\n                    </q2-btn>\n                    <q2-btn\n                        label=\"tecton.element.pagination.goToLastPage\"\n                        disabled={onLastPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => this.handlePageChange(totalPages)}\n                        test-id=\"lastPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-double-right\" />\n                    </q2-btn>\n                </div>\n                <div\n                    class=\"per-page\"\n                    hidden={isFullViewHidden || !this.perPageIncrements?.length}\n                >\n                    {this.renderPerPage()}\n                </div>\n            </nav>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-pagination.js","sourceRoot":"","sources":["../../../src/components/q2-pagination/q2-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Method,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-pagination', shadow: true, styleUrl: 'q2-pagination.scss' })\nexport class Q2Pagination implements ComponentInterface {\n    // #region Own Properties\n\n    containerElement: HTMLElement;\n    containerWidth: number;\n    firstPageBtn: HTMLQ2BtnElement;\n    inputField: HTMLQ2InputElement;\n    lastPageBtn: HTMLQ2BtnElement;\n    nextPageBtn: HTMLQ2BtnElement;\n    perPageSelect: HTMLQ2SelectElement;\n    prevPageBtn: HTMLQ2BtnElement;\n    resizeObserver: ResizeObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isSmall: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Indicates the horizontal alignment of children elements */\n    @Prop()\n    alignment: string;\n\n    /** Determines whether the component uses the dynamic resizing behavior. */\n    @Prop({ reflect: true, mutable: true })\n    autoSize: boolean = true;\n\n    /** The current page that is being displayed. */\n    @Prop({ reflect: true, mutable: true })\n    page: number;\n\n    /**\n     * The number of pages that can be displayed.\n     * @info\n     * Only referenced when `pagesOnly` is true.\n     */\n    @Prop({ reflect: true, mutable: true })\n    pages: number;\n\n    /** Indicates to display only the current and total pages. */\n    @Prop({ reflect: true, mutable: true })\n    pagesOnly: boolean;\n\n    /** The total number of records displayed on each page. */\n    @Prop({ reflect: true, mutable: true })\n    perPage: number;\n\n    /**\n     * A list of perPage values.\n     * This generates a [Select](https://tecton.q2developer.com/design-system/q2-select/) element that allows the user to modify the `perPage` value.\n     *\n     * **Example:**\n     * @snippet\n     * this.perPageIncrements = [10, 25, 50];\n     */\n    @Prop()\n    perPageIncrements: number[];\n\n    /** Indicates to display only the current and total records. */\n    @Prop({ reflect: true, mutable: true })\n    recordsOnly: boolean;\n\n    /** Description of the record type to be displayed alongside the record count. */\n    @Prop()\n    recordType: string;\n\n    /** The total number of records to paginate. */\n    @Prop({ reflect: true })\n    total: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the page is changed.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ page: number }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeResizeObserver();\n    }\n\n    componentWillLoad(): void {\n        this.manageResizeObserver();\n    }\n\n    componentDidLoad(): void {\n        this.containerWidth = this.containerElement.clientWidth;\n\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const { isFullViewHidden, containerElement, inputField } = this;\n        if (isFullViewHidden) {\n            containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n        } else {\n            inputField.focus();\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the button that controls moving to the first page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickFirstPage() {\n        const button = this.firstPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates clicking the button that controls moving to the last page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickLastPage() {\n        const button = this.lastPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates clicking the button that controls moving to the next page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickNextPage() {\n        const button = this.nextPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates clicking the button that controls moving to the previous page, and emitting a change event with the updated page number.\n     *\n     * If the `<button>` is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async clickPreviousPage() {\n        const button = this.prevPageBtn;\n        if (button?.disabled) return;\n        button.click();\n    }\n\n    /**\n     * Emulates selecting a `perPage` value from the `perPageIncrements` dropdown,\n     * and updates the value of the `perPage` property.\n     *\n     * If `value` is not in the `perPageIncrements` array, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectPerPageIncrementValue(value: number) {\n        if (isNaN(value) || !this.showPerPageSelect || !this.perPageIncrements.includes(value)) return;\n        this.perPageSelect.focus();\n        this.perPageSelect.click();\n        const options = Array.from(this.perPageSelect.querySelectorAll('q2-option'));\n        options.find(option => option.value === `${value}`)?.click();\n    }\n\n    /**\n     * Emulates setting the page value in the `<input>` field,\n     * and emitting a change event with the updated page number.\n     *\n     * If `value` is invalid, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async setPageValue(value: number) {\n        if (!this.inputField || isNaN(value) || value < 1 || value > this.totalPages) return;\n        this.inputField?.focus();\n        this.inputField.value = `${value}`;\n        this.inputField?.blur();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('recordsOnly')\n    @Watch('pagesOnly')\n    @Watch('autoSize')\n    manageResizeObserver() {\n        if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\n            if (this.resizeObserver) return;\n            this.resizeObserver = new ResizeObserver(() => this.checkSize());\n            this.resizeObserver.observe(this.hostElement);\n            window.addEventListener('resize', this.checkSize);\n        } else {\n            this.isSmall = false;\n            this.removeResizeObserver();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get currentRange() {\n        const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n        const start = (page - 1) * perPage + 1;\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.page || 1;\n    }\n\n    get perPageWithDefault() {\n        return this.perPage || 10;\n    }\n\n    get prevRange() {\n        const { perPageWithDefault: perPage, pageWithDefault: page } = this;\n        const start = Math.max(1, (page - 2) * perPage + 1);\n        const end = (page - 1) * perPage;\n        return `${start} - ${end}`;\n    }\n\n    get recordTypeWithDefault() {\n        return this.recordType || loc('tecton.element.pagination.defaultRecordType');\n    }\n\n    get showPerPageSelect() {\n        return this.perPageIncrements?.length > 1;\n    }\n\n    get totalPages() {\n        const { pagesOnly, totalWithDefault: total, perPageWithDefault: perPage, pages } = this;\n\n        if (pagesOnly && pages && !isNaN(parseInt(`${pages}`))) return pages;\n\n        return Math.ceil(total / perPage);\n    }\n\n    get totalWithDefault() {\n        return this.total || 0;\n    }\n\n    checkSize = () => {\n        const { hostElement, containerElement } = this;\n        const isOverflowing = this.containerWidth > hostElement.clientWidth;\n        this.isSmall = isOverflowing;\n        if (isOverflowing) return;\n\n        nextPaint(() => {\n            const containerWidthHasNotChanged = this.containerWidth === containerElement.clientWidth;\n            if (containerWidthHasNotChanged) return;\n            this.containerWidth = containerElement.clientWidth;\n            this.checkSize();\n        });\n    };\n\n    handlePageChange = (page: number) => {\n        const { totalPages, inputField } = this;\n        if (page < 1) {\n            page = 1;\n        } else if (page > totalPages) {\n            page = totalPages;\n        }\n\n        if (inputField.value !== `${page}`) inputField.value = `${page}`;\n\n        if (!this.hostElement.onchange) {\n            this.page = page;\n        }\n\n        this.change.emit({ page });\n    };\n\n    handlePerPageChange = (event: CustomEvent) => {\n        this.perPage = event.detail.value * 1;\n    };\n\n    removeResizeObserver() {\n        if (this.resizeObserver) {\n            this.resizeObserver?.unobserve(this.hostElement);\n            this.resizeObserver = null;\n            window.removeEventListener('resize', this.checkSize);\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderPerPage() {\n        this.perPageIncrements = this.perPageIncrements\n            .filter(perPage => !isNaN(perPage))\n            .map(perPage => perPage * 1)\n            .sort((a, b) => a - b);\n        if (this.perPage === undefined) this.perPage = this.perPageIncrements[0];\n        return (\n            <q2-select\n                ref={el => (this.perPageSelect = el)}\n                onChange={this.handlePerPageChange}\n                value={this.perPageIncrements.includes(this.perPage) ? `${this.perPage}` : undefined}\n            >\n                {this.perPageIncrements.map(perPage => (\n                    <q2-option\n                        value={`${perPage}`}\n                        display={`${loc('tecton.element.pagination.view')} ${perPage}`}\n                    >{`${loc('tecton.element.pagination.view')} ${perPage}`}</q2-option>\n                ))}\n            </q2-select>\n        );\n    }\n\n    render() {\n        const {\n            pagesOnly,\n            recordsOnly,\n            isFullViewHidden,\n            recordTypeWithDefault: recordType,\n            totalPages,\n            totalWithDefault: total,\n            pageWithDefault: page,\n            currentRange,\n            nextRange,\n            prevRange,\n            showPerPageSelect,\n        } = this;\n        const onFirstPage = page === 1;\n        const onLastPage = page === totalPages;\n\n        let nextButtonLabel: string = loc('tecton.element.pagination.goToNext');\n        let prevButtonLabel: string = loc('tecton.element.pagination.goToPrevious');\n        if (pagesOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToPages', { next: page - 1, total: totalPages });\n            nextButtonLabel = loc('tecton.element.pagination.goToPages', { next: page + 1, total: totalPages });\n        } else if (recordsOnly) {\n            prevButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: prevRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n            nextButtonLabel = loc('tecton.element.pagination.goToRecords', {\n                range: nextRange,\n                recordType: recordType.toLowerCase(),\n                total,\n            });\n        }\n\n        return (\n            <nav\n                class=\"container\"\n                ref={el => (this.containerElement = el)}\n                aria-label={loc('tecton.element.pagination.title')}\n            >\n                <div\n                    class=\"description\"\n                    test-id=\"description\"\n                >\n                    {pagesOnly\n                        ? loc('tecton.element.pagination.pages', {\n                              current: page,\n                              total: totalPages,\n                          })\n                        : loc('tecton.element.pagination.description', {\n                              range: currentRange,\n                              recordType: recordType.toLowerCase(),\n                              total: total.toLocaleString(),\n                          })}\n                </div>\n                <div class=\"btn-group\">\n                    <q2-btn\n                        ref={el => (this.firstPageBtn = el)}\n                        label={loc('tecton.element.pagination.goToFirstPage')}\n                        disabled={onFirstPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => this.handlePageChange(1)}\n                        test-id=\"firstPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-double-left\" />\n                    </q2-btn>\n                    <q2-btn\n                        ref={el => (this.prevPageBtn = el)}\n                        label={prevButtonLabel}\n                        disabled={onFirstPage}\n                        onClick={() => this.handlePageChange(page - 1)}\n                        test-id=\"prevPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-left\" />\n                    </q2-btn>\n                </div>\n                <div\n                    class=\"controls\"\n                    hidden={isFullViewHidden}\n                    test-id=\"controls\"\n                >\n                    <span aria-hidden=\"true\">{loc('tecton.element.pagination.page')}</span>\n                    <div\n                        class=\"input-wrapper\"\n                        onClick={() => this.inputField.dispatchEvent(new FocusEvent('focus'))}\n                    >\n                        <q2-input\n                            ref={el => (this.inputField = el)}\n                            type=\"number\"\n                            value={`${page}`}\n                            min={1}\n                            max={this.totalPages}\n                            hideLabel\n                            optional\n                            label={`${loc('tecton.element.pagination.page')} (${loc(\n                                'tecton.element.pagination.ofPages',\n                                [totalPages.toLocaleString()]\n                            )})`}\n                            onChange={event => this.handlePageChange(event.detail.value)}\n                            test-id=\"pageInput\"\n                            current=\"page\"\n                        ></q2-input>\n                    </div>\n                    <span aria-hidden=\"true\">\n                        {loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])}\n                    </span>\n                </div>\n                <div class=\"btn-group\">\n                    <q2-btn\n                        ref={el => (this.nextPageBtn = el)}\n                        label={nextButtonLabel}\n                        disabled={onLastPage}\n                        onClick={() => this.handlePageChange(page + 1)}\n                        test-id=\"nextPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-right\" />\n                    </q2-btn>\n                    <q2-btn\n                        ref={el => (this.lastPageBtn = el)}\n                        label=\"tecton.element.pagination.goToLastPage\"\n                        disabled={onLastPage}\n                        hidden={isFullViewHidden}\n                        onClick={() => this.handlePageChange(totalPages)}\n                        test-id=\"lastPageBtn\"\n                        hide-label\n                    >\n                        <q2-icon type=\"chevron-double-right\" />\n                    </q2-btn>\n                </div>\n                <div\n                    class=\"per-page\"\n                    hidden={isFullViewHidden || !this.perPageIncrements?.length}\n                >\n                    {showPerPageSelect && this.renderPerPage()}\n                </div>\n            </nav>\n        );\n    }\n\n    // #endregion\n}\n"]}