npm - q2-tecton-elements - Versions diffs - 1.50.1 → 1.51.1 - Mend

q2-tecton-elements 1.50.1 → 1.51.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (578) hide show

package/dist/components/q2-pagination.js CHANGED Viewed

@@ -91,6 +91,87 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
         }
     }
     // #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) {
@@ -137,6 +218,10 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
     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}`)))
@@ -157,21 +242,17 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
     // #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');
@@ -192,7 +273,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 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,
@@ -201,7 +282,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 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())));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -216,12 +297,18 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
         "page": [1538],
         "pages": [1538],
         "pagesOnly": [1540, "pages-only"],
-        "perPage": [2, "per-page"],
+        "perPage": [1538, "per-page"],
         "perPageIncrements": [16],
         "recordsOnly": [1540, "records-only"],
         "recordType": [1, "record-type"],
         "total": [514],
-        "isSmall": [32]
+        "isSmall": [32],
+        "clickFirstPage": [64],
+        "clickLastPage": [64],
+        "clickNextPage": [64],
+        "clickPreviousPage": [64],
+        "selectPerPageIncrementValue": [64],
+        "setPageValue": [64]
     }, [[0, "focus", "onHostElementFocus"]], {
         "recordsOnly": ["manageResizeObserver"],
         "pagesOnly": ["manageResizeObserver"],

package/dist/components/q2-pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-pagination.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,6+EAA6+E,CAAC;AACtgF,2BAAe,eAAe;;MCcjBA,cAAY;;;;;;QAkLrB,cAAS,GAAG;YACR,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;YAC/C,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,WAAW,CAAC;YACpE,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;YAC7B,IAAI,aAAa;gBAAE,OAAO;YAE1B,SAAS,CAAC;gBACN,MAAM,2BAA2B,GAAG,IAAI,CAAC,cAAc,KAAK,gBAAgB,CAAC,WAAW,CAAC;gBACzF,IAAI,2BAA2B;oBAAE,OAAO;gBACxC,IAAI,CAAC,cAAc,GAAG,gBAAgB,CAAC,WAAW,CAAC;gBACnD,IAAI,CAAC,SAAS,EAAE,CAAC;aACpB,CAAC,CAAC;SACN,CAAC;QAEF,qBAAgB,GAAG,CAAC,IAAY;YAC5B,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;YACxC,IAAI,IAAI,GAAG,CAAC,EAAE;gBACV,IAAI,GAAG,CAAC,CAAC;aACZ;iBAAM,IAAI,IAAI,GAAG,UAAU,EAAE;gBAC1B,IAAI,GAAG,UAAU,CAAC;aACrB;YAED,IAAI,UAAU,CAAC,KAAK,KAAK,GAAG,IAAI,EAAE;gBAAE,UAAU,CAAC,KAAK,GAAG,GAAG,IAAI,EAAE,CAAC;YAEjE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;gBAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;aACpB;YAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;SAC9B,CAAC;QAEF,wBAAmB,GAAG,CAAC,KAAkB;YACrC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;SACzC,CAAC;;;wBAtLkB,IAAI;;;;;;;;;;;;IAmDxB,oBAAoB;QAChB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;IAED,iBAAiB;QACb,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;IAED,gBAAgB;QACZ,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;QAExD,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACnC;;;IAMD,kBAAkB,CAAC,KAAK;;QACpB,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAChE,IAAI,gBAAgB,EAAE;YAClB,MAAA,gBAAgB,CAAC,aAAa,CAAc,wBAAwB,CAAC,0CAAE,KAAK,EAAE,CAAC;SAClF;aAAM;YACH,UAAU,CAAC,KAAK,EAAE,CAAC;SACtB;KACJ;;;IAQD,oBAAoB;QAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACvD,IAAI,IAAI,CAAC,cAAc;gBAAE,OAAO;YAChC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;YACjE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC9C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SACrD;aAAM;YACH,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC/B;KACJ;;;IAKD,IAAI,YAAY;QACZ,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAC7F,MAAM,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,OAAO,GAAG,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,EAAE,KAAK,CAAC,CAAC;QAC5C,OAAO,GAAG,KAAK,MAAM,GAAG,EAAE,CAAC;KAC9B;IAED,IAAI,gBAAgB;QAChB,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC;KAC7D;IAED,IAAI,SAAS;QACT,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAC7F,MAAM,KAAK,GAAG,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;QACjC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,IAAI,OAAO,EAAE,KAAK,CAAC,CAAC;QAClD,OAAO,GAAG,KAAK,MAAM,GAAG,EAAE,CAAC;KAC9B;IAED,IAAI,eAAe;QACf,OAAO,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;KACzB;IAED,IAAI,kBAAkB;QAClB,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC;KAC7B;IAED,IAAI,SAAS;QACT,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACpE,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC;QACpD,MAAM,GAAG,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,OAAO,CAAC;QACjC,OAAO,GAAG,KAAK,MAAM,GAAG,EAAE,CAAC;KAC9B;IAED,IAAI,qBAAqB;QACrB,OAAO,IAAI,CAAC,UAAU,IAAI,GAAG,CAAC,6CAA6C,CAAC,CAAC;KAChF;IAED,IAAI,UAAU;QACV,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAExF,IAAI,SAAS,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;YAAE,OAAO,KAAK,CAAC;QAErE,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC;KACrC;IAED,IAAI,gBAAgB;QAChB,OAAO,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;KAC1B;IAqCD,oBAAoB;;QAChB,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACjD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SACxD;KACJ;;;IAKD,aAAa;;QACT,IAAI,EAAC,MAAA,IAAI,CAAC,iBAAiB,0CAAE,MAAM,CAAA,EAAE;YACjC,OAAO,EAAE,CAAC;SACb;QACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB;aAC1C,MAAM,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aAClC,GAAG,CAAC,OAAO,IAAI,OAAO,GAAG,CAAC,CAAC;aAC3B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;QAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;YAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACzE,QACI,iBACI,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAClC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,SAAS,IAEnF,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,OAAO,KAC/B,iBACI,KAAK,EAAE,GAAG,OAAO,EAAE,EACnB,OAAO,EAAE,GAAG,GAAG,CAAC,gCAAgC,CAAC,IAAI,OAAO,EAAE,IAChE,GAAG,GAAG,CAAC,gCAAgC,CAAC,IAAI,OAAO,EAAE,CAAa,CACvE,CAAC,CACM,EACd;KACL;IAED,MAAM;;QACF,MAAM,EACF,SAAS,EACT,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EAAE,UAAU,EACjC,UAAU,EACV,gBAAgB,EAAE,KAAK,EACvB,eAAe,EAAE,IAAI,EACrB,YAAY,EACZ,SAAS,EACT,SAAS,GACZ,GAAG,IAAI,CAAC;QACT,MAAM,WAAW,GAAG,IAAI,KAAK,CAAC,CAAC;QAC/B,MAAM,UAAU,GAAG,IAAI,KAAK,UAAU,CAAC;QAEvC,IAAI,eAAe,GAAW,GAAG,CAAC,oCAAoC,CAAC,CAAC;QACxE,IAAI,eAAe,GAAW,GAAG,CAAC,wCAAwC,CAAC,CAAC;QAC5E,IAAI,SAAS,EAAE;YACX,eAAe,GAAG,GAAG,CAAC,qCAAqC,EAAE,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;YACpG,eAAe,GAAG,GAAG,CAAC,qCAAqC,EAAE,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;SACvG;aAAM,IAAI,WAAW,EAAE;YACpB,eAAe,GAAG,GAAG,CAAC,uCAAuC,EAAE;gBAC3D,KAAK,EAAE,SAAS;gBAChB,UAAU,EAAE,UAAU,CAAC,WAAW,EAAE;gBACpC,KAAK;aACR,CAAC,CAAC;YACH,eAAe,GAAG,GAAG,CAAC,uCAAuC,EAAE;gBAC3D,KAAK,EAAE,SAAS;gBAChB,UAAU,EAAE,UAAU,CAAC,WAAW,EAAE;gBACpC,KAAK;aACR,CAAC,CAAC;SACN;QAED,QACI,4DACI,KAAK,EAAC,WAAW,EACjB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,gBAC3B,GAAG,CAAC,iCAAiC,CAAC,IAElD,4DACI,KAAK,EAAC,aAAa,aACX,aAAa,IAEpB,SAAS;cACJ,GAAG,CAAC,iCAAiC,EAAE;gBACnC,OAAO,EAAE,IAAI;gBACb,KAAK,EAAE,UAAU;aACpB,CAAC;cACF,GAAG,CAAC,uCAAuC,EAAE;gBACzC,KAAK,EAAE,YAAY;gBACnB,UAAU,EAAE,UAAU,CAAC,WAAW,EAAE;gBACpC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE;aAChC,CAAC,CACN,EACN,4DAAK,KAAK,EAAC,WAAW,IAClB,+DACI,KAAK,EAAE,GAAG,CAAC,yCAAyC,CAAC,EACrD,QAAQ,EAAE,WAAW,EACrB,MAAM,EAAE,gBAAgB,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAC/B,cAAc,wBAGtB,gEAAS,IAAI,EAAC,qBAAqB,GAAG,CACjC,EACT,+DACI,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,CAAC,CAAC,aACtC,aAAa,wBAGrB,gEAAS,IAAI,EAAC,cAAc,GAAG,CAC1B,CACP,EACN,4DACI,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE,gBAAgB,aAChB,UAAU,IAElB,4EAAkB,MAAM,IAAE,GAAG,CAAC,gCAAgC,CAAC,CAAQ,EACvE,4DACI,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,IAErE,iEACI,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,GAAG,IAAI,EAAE,EAChB,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,SAAS,QACT,QAAQ,QACR,KAAK,EAAE,GAAG,GAAG,CAAC,gCAAgC,CAAC,KAAK,GAAG,CACnD,mCAAmC,EACnC,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC,CAChC,GAAG,EACJ,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,aACpD,WAAW,EACnB,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,GACzB,CACV,EACN,4EAAkB,MAAM,IACnB,GAAG,CAAC,mCAAmC,EAAE,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC,CAAC,CACrE,CACL,EACN,4DAAK,KAAK,EAAC,WAAW,IAClB,+DACI,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,CAAC,CAAC,aACtC,aAAa,wBAGrB,gEAAS,IAAI,EAAC,eAAe,GAAG,CAC3B,EACT,+DACI,KAAK,EAAC,wCAAwC,EAC9C,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,gBAAgB,EACxB,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,aACxC,aAAa,wBAGrB,gEAAS,IAAI,EAAC,sBAAsB,GAAG,CAClC,CACP,EACN,4DACI,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE,gBAAgB,IAAI,EAAC,MAAA,IAAI,CAAC,iBAAiB,0CAAE,MAAM,CAAA,IAE1D,IAAI,CAAC,aAAa,EAAE,CACnB,CACJ,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Pagination"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n display: flex;\n width: 100%;\n justify-content: flex-end;\n}\n\n:host([alignment=\"center\"]) {\n justify-content: center;\n}\n\n:host([alignment=\"left\"]) {\n justify-content: flex-start;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.container {\n display: inline-flex;\n column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n align-items: center;\n height: var-list(var-prefixer(pagination-height), 44px);\n}\n\n.btn-group {\n display: flex;\n gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n white-space: nowrap;\n}\n\n.controls {\n display: grid;\n grid-template-columns: auto 50px auto;\n align-items: center;\n gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n &[hidden] {\n display: none;\n }\n}\n\n.input-wrapper {\n height: var-list(var-prefixer(pagination-height), 44px);\n display: flex;\n align-items: center;\n}\n\nq2-btn {\n --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n}\n\nq2-icon {\n --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n --tct-input-margin-top: 0;\n --tct-input-margin-bottom: 0;\n --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n --tct-input-min-height: var(--tct-input-height);\n --tct-input-align: center;\n}\n\nq2-select {\n --tct-select-input-min-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n --tct-select-input-max-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n width: #{var-list(var-prefixer(pagination-perpage-width), 100%)};\n min-width: #{var-list(var-prefixer(pagination-perpage-min-width), 110px)};\n}\n\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Listen,\n Element,\n 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}
1	+ {"file":"q2-pagination.js","mappings":"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","names":["Q2Pagination"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n display: flex;\n width: 100%;\n justify-content: flex-end;\n}\n\n:host([alignment=\"center\"]) {\n justify-content: center;\n}\n\n:host([alignment=\"left\"]) {\n justify-content: flex-start;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.container {\n display: inline-flex;\n column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n align-items: center;\n height: var-list(var-prefixer(pagination-height), 44px);\n}\n\n.btn-group {\n display: flex;\n gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.controls {\n white-space: nowrap;\n}\n\n.controls {\n display: grid;\n grid-template-columns: auto 50px auto;\n align-items: center;\n gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n &[hidden] {\n display: none;\n }\n}\n\n.input-wrapper {\n height: var-list(var-prefixer(pagination-height), 44px);\n display: flex;\n align-items: center;\n}\n\nq2-btn {\n --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n}\n\nq2-icon {\n --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n --tct-input-margin-top: 0;\n --tct-input-margin-bottom: 0;\n --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n --tct-input-min-height: var(--tct-input-height);\n --tct-input-align: center;\n}\n\nq2-select {\n --tct-select-input-min-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n --tct-select-input-max-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n width: #{var-list(var-prefixer(pagination-perpage-width), 100%)};\n min-width: #{var-list(var-prefixer(pagination-perpage-min-width), 110px)};\n}\n\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Listen,\n Element,\n Method,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-pagination', shadow: true, styleUrl: 'q2-pagination.scss' })\nexport class Q2Pagination implements ComponentInterface {\n // #region Own Properties\n\n containerElement: HTMLElement;\n containerWidth: number;\n firstPageBtn: HTMLQ2BtnElement;\n inputField: HTMLQ2InputElement;\n lastPageBtn: HTMLQ2BtnElement;\n nextPageBtn: HTMLQ2BtnElement;\n perPageSelect: HTMLQ2SelectElement;\n prevPageBtn: HTMLQ2BtnElement;\n resizeObserver: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n isSmall: boolean;\n\n // #endregion\n // #region Public Property API\n\n /** Indicates the horizontal alignment of children elements /\n @Prop()\n alignment: string;\n\n /* Determines whether the component uses the dynamic resizing behavior. /\n @Prop({ reflect: true, mutable: true })\n autoSize: boolean = true;\n\n /* The current page that is being displayed. /\n @Prop({ reflect: true, mutable: true })\n page: number;\n\n /\n The number of pages that can be displayed.\n * @info\n * Only referenced when `pagesOnly` is true.\n /\n @Prop({ reflect: true, mutable: true })\n pages: number;\n\n /* Indicates to display only the current and total pages. /\n @Prop({ reflect: true, mutable: true })\n pagesOnly: boolean;\n\n /* The total number of records displayed on each page. /\n @Prop({ reflect: true, mutable: true })\n perPage: number;\n\n /\n A list of perPage values.\n * This generates a [Select](https://tecton.q2developer.com/design-system/q2-select/) element that allows the user to modify the `perPage` value.\n \n Example:\n * @snippet\n * this.perPageIncrements = [10, 25, 50];\n /\n @Prop()\n perPageIncrements: number[];\n\n /* Indicates to display only the current and total records. /\n @Prop({ reflect: true, mutable: true })\n recordsOnly: boolean;\n\n /* Description of the record type to be displayed alongside the record count. /\n @Prop()\n recordType: string;\n\n /* The total number of records to paginate. /\n @Prop({ reflect: true })\n total: number;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the page is changed.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ page: number }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.removeResizeObserver();\n }\n\n componentWillLoad(): void {\n this.manageResizeObserver();\n }\n\n componentDidLoad(): void {\n this.containerWidth = this.containerElement.clientWidth;\n\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const { isFullViewHidden, containerElement, inputField } = this;\n if (isFullViewHidden) {\n containerElement.querySelector<HTMLElement>('q2-btn:not([disabled])')?.focus();\n } else {\n inputField.focus();\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the button that controls moving to the first page, and emitting a change event with the updated page number.\n \n If the `<button>` is disabled, this method does nothing.\n * @testOnly\n /\n @Method()\n async clickFirstPage() {\n const button = this.firstPageBtn;\n if (button?.disabled) return;\n button.click();\n }\n\n /\n Emulates clicking the button that controls moving to the last page, and emitting a change event with the updated page number.\n \n If the `<button>` is disabled, this method does nothing.\n * @testOnly\n /\n @Method()\n async clickLastPage() {\n const button = this.lastPageBtn;\n if (button?.disabled) return;\n button.click();\n }\n\n /\n Emulates clicking the button that controls moving to the next page, and emitting a change event with the updated page number.\n \n If the `<button>` is disabled, this method does nothing.\n * @testOnly\n /\n @Method()\n async clickNextPage() {\n const button = this.nextPageBtn;\n if (button?.disabled) return;\n button.click();\n }\n\n /\n Emulates clicking the button that controls moving to the previous page, and emitting a change event with the updated page number.\n \n If the `<button>` is disabled, this method does nothing.\n * @testOnly\n /\n @Method()\n async clickPreviousPage() {\n const button = this.prevPageBtn;\n if (button?.disabled) return;\n button.click();\n }\n\n /\n Emulates selecting a `perPage` value from the `perPageIncrements` dropdown,\n * and updates the value of the `perPage` property.\n \n If `value` is not in the `perPageIncrements` array, this method does nothing.\n * @testOnly\n /\n @Method()\n async selectPerPageIncrementValue(value: number) {\n if (isNaN(value) \|\| !this.showPerPageSelect \|\| !this.perPageIncrements.includes(value)) return;\n this.perPageSelect.focus();\n this.perPageSelect.click();\n const options = Array.from(this.perPageSelect.querySelectorAll('q2-option'));\n options.find(option => option.value === `${value}`)?.click();\n }\n\n /\n Emulates setting the page value in the `<input>` field,\n * and emitting a change event with the updated page number.\n \n If `value` is invalid, this method does nothing.\n * @testOnly\n /\n @Method()\n async setPageValue(value: number) {\n if (!this.inputField \|\| isNaN(value) \|\| value < 1 \|\| value > this.totalPages) return;\n this.inputField?.focus();\n this.inputField.value = `${value}`;\n this.inputField?.blur();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('recordsOnly')\n @Watch('pagesOnly')\n @Watch('autoSize')\n manageResizeObserver() {\n if (this.autoSize && !this.recordsOnly && !this.pagesOnly) {\n if (this.resizeObserver) return;\n this.resizeObserver = new ResizeObserver(() => this.checkSize());\n this.resizeObserver.observe(this.hostElement);\n window.addEventListener('resize', this.checkSize);\n } else {\n this.isSmall = false;\n this.removeResizeObserver();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get currentRange() {\n const { perPageWithDefault: perPage, totalWithDefault: total, pageWithDefault: page } = this;\n const start = (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"],"version":3}

package/dist/components/q2-pill.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index2.js';
+import { e as resizeIframe, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index2.js';
 import { s as showActionSheetList, a as shouldShowActionSheet } from './action-sheet.js';
 import { d as defineCustomElement$5 } from './click-elsewhere2.js';
 import { d as defineCustomElement$4 } from './q2-icon2.js';
 import { d as defineCustomElement$3 } from './q2-option-list2.js';
 import { d as defineCustomElement$2 } from './q2-popover2.js';
-const q2PillCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentcolor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}";
+const q2PillCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentcolor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}";
 const Q2PillStyle0 = q2PillCss;
 const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLElement {
@@ -90,7 +90,9 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             if (!this.optionCount || this.disabled || isTabMetaOrCtrl)
                 return;
             event.preventDefault();
-            if (shouldShowActionSheet(this, event)) {
+            const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;
+            // slots are incompatible with action sheet
+            if (shouldShowActionSheet(this, event) && !hasSlot) {
                 this.executeActionSheet(event);
             }
             else {
@@ -134,6 +136,22 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
                 popoverElement.open = false;
             }
         };
+        this.onMutationObserved = () => {
+            this.updateSlotState();
+            this.determineOptionCount();
+            this.updateSelectedOptionElements();
+        };
+        this.updateSlotState = () => {
+            const { hostElement, hasPopoverTop, hasPopoverBottom } = this;
+            const popTopSlot = hostElement.shadowRoot.querySelector('slot[name="popover-top"]');
+            const popBottomSlot = hostElement.shadowRoot.querySelector('slot[name="popover-bottom"]');
+            const topSlotHasNode = (popTopSlot === null || popTopSlot === void 0 ? void 0 : popTopSlot.assignedNodes().length) > 0;
+            const bottomSlotHasNode = (popBottomSlot === null || popBottomSlot === void 0 ? void 0 : popBottomSlot.assignedNodes().length) > 0;
+            if (hasPopoverTop !== topSlotHasNode)
+                this.hasPopoverTop = topSlotHasNode;
+            if (hasPopoverBottom !== bottomSlotHasNode)
+                this.hasPopoverBottom = bottomSlotHasNode;
+        };
         this.syncValueProperties = () => {
             const { value, selectedOptions } = this;
             if (!!(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length))
@@ -150,6 +168,8 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
                 this.active = !!selectedValues.length;
             this.selectedOptionElements = (options === null || options === void 0 ? void 0 : options.filter(option => selectedValues.includes(option.value))) || [];
         };
+        this.hasPopoverTop = false;
+        this.hasPopoverBottom = false;
         this.optionCount = undefined;
         this.selectedOptionElements = [];
         this.active = undefined;
@@ -163,6 +183,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
         this.optionListLabel = undefined;
         this.popoverAlignment = 'right';
         this.popoverDirection = undefined;
+        this.popoverMaxHeight = undefined;
         this.popoverMinHeight = 150;
         this.selectedOptions = [];
         this.theme = undefined;
@@ -175,7 +196,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
         this.mutationObserver = null;
     }
     componentWillLoad() {
-        const observer = new MutationObserver(this.determineOptionCount);
+        const observer = new MutationObserver(this.onMutationObserved);
         observer.observe(this.hostElement, { childList: true, attributes: true });
         this.mutationObserver = observer;
     }
@@ -327,7 +348,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: 'c13fc91239e60f6feb038acef719afdd6c6dee78', onChange: this.onClickElsewhere }, h("div", { key: 'a05c6dfa1b6be1c3c682a92510f74702170056da', class: wrapperClassNames.join(' ') }, h("div", { key: 'cfc60ca20a17198f112aa8dc391c102e1f5c4014', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '7db4fbe5c58c61eb40a62aa7ed08b978019d38c9', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '9bfe0ffa3adf0f1303fc788ff1a851a03a4f4ad4', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '7f316ab503f416a7c24bee557de55ded46821cd3', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '1434a3c21edf2627085f614b59b0127b386e243d', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: 'bb360ea7e004a891d7980f7e4c3fff10d0fa3803' }))))));
+        return (h("click-elsewhere", { key: '02e7f5f616daeb2b0e40259c1c99ac142f86b553', onChange: this.onClickElsewhere }, h("div", { key: '13ece1982239e075de4911cc76c806b9f30dc84b', class: wrapperClassNames.join(' ') }, h("div", { key: 'afff34dc889240fbbf32cb2401359f51ce5feee4', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '5f9b91813e5f4006137534fe5fe1820adf35d2f6', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '084fb2e933da3e3f281a5480c74e917ebac38015', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '5fcab5d95192479ac7f0e2e911d51327044500ef', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("div", { key: 'b5d7756b724d76aa0cf487324c6790d7ca529293', class: "popover-content" }, h("div", { key: 'e191b41fcfa2a9f2fefc66dde961a24a867c73d8', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '8078c79efc74285ce9db259c28a1c6b2e957a09f', name: "popover-top" })), h("q2-option-list", { key: '1cd2a521a30af647a4ba5008f11d927209454061', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '432d785fe233aaf875a1b601522bb5189edf1b82' })), h("div", { key: '22d1406b38ae6f991c7253f5b10b70f7fa6744e7', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '7619b7dabfaae3dea23363d7769e350a7f2ed51f', name: "popover-bottom" })))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -347,10 +368,13 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
         "optionListLabel": [1, "option-list-label"],
         "popoverAlignment": [1025, "popover-alignment"],
         "popoverDirection": [1, "popover-direction"],
+        "popoverMaxHeight": [2, "popover-max-height"],
         "popoverMinHeight": [2, "popover-min-height"],
         "selectedOptions": [1040],
         "theme": [513],
         "value": [1537],
+        "hasPopoverTop": [32],
+        "hasPopoverBottom": [32],
         "optionCount": [32],
         "selectedOptionElements": [32],
         "closePopover": [64],