npm - q2-tecton-elements - Versions diffs - 1.60.2 → 1.61.0 - Mend

q2-tecton-elements 1.60.2 → 1.61.0

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 (315) hide show

package/dist/collection/components/q2-meter/q2-meter.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"q2-meter.js","sourceRoot":"","sources":["../../../../src/components/q2-meter/q2-meter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { loc } from '@/utils';\nimport { Component, Prop, h, ComponentInterface, Element } from '@stencil/core';\n@Component({ tag: 'q2-meter', shadow: true, styleUrl: 'q2-meter.scss' })\nexport class Q2Meter implements ComponentInterface {\n // #region Own Properties\n\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /**\n * Shows loading animation for bars, default is true.\n */\n @Prop({ reflect: true })\n animated: boolean = true;\n\n /**\n * Defines the label for the completed bar, which appears at the bottom in the legend section.\n * @localizable\n */\n @Prop({ reflect: true })\n completedLabel: string;\n\n /**\n * Defines the value for the completed bar.\n */\n @Prop({ reflect: true })\n completedValue: string;\n\n /**\n * Defines the description for the meter, which appears at the top just below the label.\n * @localizable\n */\n @Prop({ reflect: true })\n description: string;\n\n /**\n * Shows a circle shaped dot indicator on completed bar, default is true.\n */\n @Prop({ reflect: true })\n dotted: boolean = true;\n\n /**\n * Defines the label for the meter, which appears at the top.\n * @localizable\n */\n @Prop({ reflect: true })\n label: string;\n\n /**\n * Defines the label for the base bar, which appears at the bottom in the legend.\n * @localizable\n */\n @Prop({ reflect: true })\n maxLabel: string;\n\n /**\n * Defines the value for the base bar.\n */\n @Prop({ reflect: true })\n maxValue: string;\n\n /**\n * Shows thin tick bars based on the number of segments provided.\n */\n @Prop({ reflect: true })\n segments: number;\n\n /**\n * Defines the label for the suggested bar, which appears at the bottom in the legend.\n * @localizable\n */\n @Prop({ reflect: true })\n suggestedLabel: string;\n\n /**\n * Defines the value for the suggested bar.\n */\n @Prop({ reflect: true })\n suggestedValue: string;\n\n /**\n * Defines custom text for the completed bar tooltip.\n * @localizable\n */\n @Prop({ reflect: true })\n tooltipCompleted: string;\n\n /**\n * Defines custom text for the suggested bar tooltip.\n * @localizable\n */\n @Prop({ reflect: true })\n tooltipSuggested: string;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad(): void {\n if (this.animated) {\n const _completedValue = this.completedValue;\n const _suggestedValue = this.suggestedValue;\n this.completedValue = '0';\n this.suggestedValue = '0';\n this.scheduledAfterRender.push(() => {\n this.completedValue = _completedValue;\n this.suggestedValue = _suggestedValue;\n });\n }\n }\n\n componentDidRender(): void {\n this.scheduledAfterRender?.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Local Methods\n\n get ariaLabel() {\n const label = [];\n label.push(`${loc(this.label || '')} meter showing,`);\n label.push(`${this.completedValue || 'zero'} ${loc(this.completedLabel || '')},`);\n label.push(`${this.suggestedValue || ''} ${loc(this.suggestedLabel || '')},`);\n label.push(`out of ${this.maxValue || ''} ${loc(this.maxLabel || '')}`);\n return label.join(' ');\n }\n\n convertToPercentage(completedValue: string, suggestedValue: string, maxValue: string) {\n let max = Number((maxValue || '100').trim().replace(/[$,]/g, ''));\n let completed = Math.round((100 * Number((completedValue || '0').trim().replace(/[$,]/g, ''))) / max);\n let suggested = Math.round((100 * Number((suggestedValue || '0').trim().replace(/[$,]/g, ''))) / max);\n max = isNaN(max) ? 100 : max;\n completed = isNaN(completed) ? 0 : completed;\n suggested = isNaN(suggested) ? 0 : suggested;\n return [Math.min(100, completed), Math.min(100, suggested)];\n }\n\n // #endregion\n // #region Render Methods\n\n renderBar(completed: number, suggested: number) {\n suggested = Math.max(completed, suggested);\n const completedDotStyles: { left?: string; transform?: string } = {};\n const suggestedDotStyles: { left?: string; transform?: string } = {};\n\n if (completed === 0) {\n completedDotStyles.transform = `translateX(0%)`;\n completedDotStyles.left = 'calc(0% - var(--comp-meter-dot-border-width))';\n } else if (completed === 100) {\n completedDotStyles.transform = `translateX(-100%)`;\n completedDotStyles.left = '100%';\n } else if (0 < completed && completed < 100) {\n completedDotStyles.left = `${Math.max(1, Math.min(99, completed))}%`;\n }\n\n if (suggested === 0) {\n suggestedDotStyles.transform = `translateX(0%)`;\n suggestedDotStyles.left = '0%';\n } else if (suggested === 100) {\n suggestedDotStyles.transform = `translateX(-100%)`;\n suggestedDotStyles.left = '100%';\n } else if (0 < suggested && suggested < 100) {\n suggestedDotStyles.left = `${Math.max(1, Math.min(99, suggested))}%`;\n }\n\n return (\n <div class=\"bar-container\">\n <div class=\"bars\">\n <div\n class=\"completed-bar\"\n style={{ width: `${completed}%` }}\n ></div>\n {this.suggestedValue && this.suggestedLabel && (\n <div\n class=\"suggested-bar\"\n style={{ width: `${suggested}%` }}\n ></div>\n )}\n {this.segments && !isNaN(this.segments) && this.segments > 1 ? (\n <div class=\"tick-bar\">\n {Array.from(new Array(this.segments)).map((_, i) => {\n const classes = ['tick'];\n // color changes on ticks for greater than completed value\n if (Math.round((100 * (i + 1)) / this.segments) > completed) classes.push('tick-right');\n return <div class={classes.join(' ')}></div>;\n })}\n </div>\n ) : (\n ''\n )}\n </div>\n <div\n class=\"dot-container completed\"\n style={completedDotStyles}\n >\n <q2-tooltip\n label={this.tooltipCompleted ? loc(this.tooltipCompleted) : this.completedValue}\n position=\"n\"\n immediate\n >\n <div class=\"dot\"></div>\n </q2-tooltip>\n </div>\n {suggested > completed ? (\n <div\n class=\"dot-container suggested\"\n style={suggestedDotStyles}\n >\n <q2-tooltip\n label={this.tooltipSuggested ? loc(this.tooltipSuggested) : this.suggestedValue}\n position=\"n\"\n immediate\n >\n <div class=\"dot\"></div>\n </q2-tooltip>\n </div>\n ) : (\n ''\n )}\n </div>\n );\n }\n\n render() {\n const [completed, suggested] = this.convertToPercentage(\n this.completedValue,\n this.suggestedValue,\n this.maxValue\n );\n return (\n <div\n class=\"meter-container\"\n aria-label={this.ariaLabel}\n role=\"group\"\n >\n {this.label && (\n <div\n class=\"label\"\n aria-label={loc(this.label)}\n >\n {loc(this.label)}\n </div>\n )}\n {this.description && (\n <div\n class=\"description\"\n aria-label={loc(this.description)}\n >\n {loc(this.description)}\n </div>\n )}\n {this.renderBar(completed, suggested)}\n <div class=\"legends\">\n <div class=\"left\">\n {this.completedValue || this.completedLabel ? (\n <div class=\"completed\">\n <div class=\"dot\"></div>\n <div class=\"legend-label\">\n {this.completedValue} {loc(this.completedLabel)}\n </div>\n </div>\n ) : (\n ''\n )}\n {this.suggestedValue || this.suggestedLabel ? (\n <div class=\"suggested\">\n <div class=\"dot\"></div>\n <div class=\"legend-label\">\n {this.suggestedValue} {loc(this.suggestedLabel)}\n </div>\n </div>\n ) : (\n ''\n )}\n </div>\n <div class=\"right\">\n <div class=\"max\">\n {this.maxValue} {loc(this.maxLabel)}\n </div>\n </div>\n </div>\n </div>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-modal/q2-modal.js CHANGED Viewed

@@ -150,7 +150,7 @@ export class Q2Modal {
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: '2b12b5a9c4a09f0e80b9517d81e17c561ceca200', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'efbce287e1c7e7a07fc0779f21d10c4f440aaa49', class: interiorClasses }, this.title && (h("header", { key: '71e372aed7673b8d8911bd862db4ede5757a2184' }, this.title && h("h2", { key: '2688b54e110b49a9b8f64e146fea9bd9a1c7c706', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '9d78801c76f4cad72b8f0ab962aeea127d130492', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: 'de8d48d2676e71c1280a41f3c34d49027c09773c', type: "close" }))))), h("div", { key: 'a5c23f6b561652bf9a519bd91af2e1eb65713b31', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '3d924a05cfcba562105d1eed69af5383ff48e799', class: "icon" }, h("q2-icon", { key: '972f69406d187769cd67097d18f85adcaf7769c1', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: '43104feec69bb2f11b47b2d7c77fe1e60af467fb', class: "image" }, h("img", { key: 'e583fd2be24c3d3ab42caaf46ca4dc7bc0df6030', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'f011e7d6c4bc4135dbe192e526c2cb4628aadbff', name: "content" }), this.description && h("p", { key: 'b8794d9b1d8eb0d811a7aa4f7ed3dcafbd245cef', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'e5834ef811c4cc951ef7eba1d37758301f2bdb6b', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '9172365d3d00c61ab01378a07a1efe843487f6d8' }, h("q2-action-group", { key: '9f3ad85ccefa9f8dd3d5637043f17a941b370612', "full-width": true }, h("slot", { key: '8a4618e71eb175a19ff34c8d870a72271b6e1caf', name: "action" }))))));
+        return (h("dialog", { key: '09e909ca6de730e2d34ec1796fcdb2bdaf077166', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '1410c1e9c86101eb164a6eaca3332fe2fc915bd2', class: interiorClasses }, this.title && (h("header", { key: 'be170cc01cfaa65937479d0f062fab907eefd585' }, this.title && h("h2", { key: 'c3a4ebdf0568fac516703ef48d3e09a3aba48a52', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '0e08fcfe0404d581e023ee51052bd0bc95c65a46', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '6506b58253688e24bd53cd7d9f96022652ace643', type: "close" }))))), h("div", { key: 'e6509c517e7587bf4d5ce17900d6c3d1bf236544', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '1bd63c250c3198063ce71c7ccc39b527bae734d6', class: "icon" }, h("q2-icon", { key: '1c51ba9f9e7ec43080345e27e5a14d2ce0e259d9', type: this.icon, style: this.iconStyle() }))), this.imageSrc && (h("div", { key: 'f2f424901875185ae40a1775a63179357f31882c', class: "image" }, h("img", { key: '9231e2ea874adc43095662f6c6664905737f3c9d', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '4b3163332aca9aa4c9804405174e16c3854ddd61', name: "content" }), this.description && h("p", { key: '997cf420e09ffd589dde31e5c47c499cbc3b110c', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'bf9fac18c98e3a4f2ad27e7d04feb4b54e2fa958', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '48a2885c34727d6eda0636e27ee746ba90d1087d' }, h("q2-action-group", { key: 'a48b5075f4372219f1179fae43272df8ed0aa96a', "full-width": true }, h("slot", { key: 'ccfa5cbef0a4078dd3c0beb13bf78e8b1fcd74e3', name: "action" }))))));
     }
     static get is() { return "q2-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-optgroup/q2-optgroup.js CHANGED Viewed

@@ -48,7 +48,7 @@ export class Q2Optgroup {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'f054127b0e534647d3cac4efb62c03477db3975f', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '251f2586708e5d867a623ea6dcf29c0c57169402', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '0127f0445cc0c894875b44529a7d87b31561c859', class: "q2-optgroup-options" }, h("slot", { key: '3f3f9af79017d95cce0f60136ed651654b6bf7b3' }))));
+        return (h("div", { key: 'fa5f79f649208bcc9402ea9c1f38b8d1f560bb8c', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'b8bd998f0ef642933dfa306f1b5d7fa4720aa3e9', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '576288198e4ab810fbb155771250d549e897113d', class: "q2-optgroup-options" }, h("slot", { key: 'aff51cc1110ea0349a6640233751a8bbe75c6c2f' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,7 +123,7 @@ export class Q2Pagination {
      */
     async selectPerPageIncrementValue(value) {
         var _a;
-        if (isNaN(value) || !this.showPerPageSelect || !this.perPageIncrements.includes(value))
+        if (isNaN(value) || !this.showPerPageSelect || !this.perPageIncrementsArray.includes(value))
             return;
         this.perPageSelect.focus();
         this.perPageSelect.click();
@@ -205,6 +205,21 @@ export class Q2Pagination {
     get totalWithDefault() {
         return this.total || 0;
     }
+    get perPageIncrementsArray() {
+        if (Array.isArray(this.perPageIncrements)) {
+            return this.perPageIncrements.map(num => Number(num));
+        }
+        else if (typeof this.perPageIncrements === 'string') {
+            return this.perPageIncrements
+                .trim()
+                .replace(/[\[\]\"\']/g, '')
+                .split(',')
+                .map(num => Number(num));
+        }
+        else {
+            return [];
+        }
+    }
     removeResizeObserver() {
         var _a;
         if (this.resizeObserver) {
@@ -216,13 +231,11 @@ export class Q2Pagination {
     // #endregion
     // #region Render Methods
     renderPerPage() {
-        this.perPageIncrements = this.perPageIncrements
-            .filter(perPage => !isNaN(perPage))
-            .map(perPage => perPage * 1)
-            .sort((a, b) => a - b);
+        const increments = this.perPageIncrementsArray.sort((a, b) => a - b);
         if (this.perPage === undefined)
-            this.perPage = this.perPageIncrements[0];
-        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}`)))));
+            this.perPage = increments[0];
+        this.perPageIncrements = `[${increments.join(',')}]`;
+        return (h("q2-select", { ref: el => (this.perPageSelect = el), onChange: this.handlePerPageChange, value: this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined }, increments.map(perPage => (h("q2-option", { value: `${perPage}`, display: `${loc('tecton.element.pagination.view')} ${perPage}` }, `${loc('tecton.element.pagination.view')} ${perPage}`)))));
     }
     render() {
         var _a;
@@ -247,7 +260,7 @@ export class Q2Pagination {
                 total,
             });
         }
-        return (h("nav", { key: 'c24a21c5e719a9e9e47afd86ade29fe8a88e21dd', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '53456b24c196327207d67f7e40d41ea87dfff6c1', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '7bd02afffb025ea40269a9257dc7103cea69922f', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '2773c9fb23bfb480de3d6061dad13ce9156c45f7', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -256,10 +269,10 @@ export class Q2Pagination {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'd95976f63270ef4eb260c7344e2db34d26658479', class: "btn-group" }, h("q2-btn", { key: '2206c1d88963f1f854b94cfc54cfc4ccd043cf3b', 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: '418740d4abe9a9c28d8c3c553e5f59d025a1e860', type: "chevron-double-left" })), h("q2-btn", { key: 'a322a566f575016a995080a4c4908075e4651ea6', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'a3d3fe6acb3a6ef4eac422a2a089f3bcde8d5f21', type: "chevron-left" }))), h("div", { key: '3647355d457e0238ad31dff59f94fc4a78964944', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: 'cafaf1d703e717dbdd3fa4ecf5b7de6d17243efc', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '3becfeb17468e3928760e0fcb92d71bd6d8f0b12', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '77b0c536077b9a87ee0fc9073559c9ec89728eb5', 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 => {
+            })), h("div", { key: '60afe4b7b5c69febe906f1fc70dcdaf71cc93310', class: "btn-group" }, h("q2-btn", { key: 'c3a7677df89475c4f3f95474e12fbada68e378e2', 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: 'dfdc6ac8bd1df197856063fe8ec02f74042987be', type: "chevron-double-left" })), h("q2-btn", { key: '52f86588a9afa644d28190c77ff126babad624d2', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'c53624fb4971cb2425b6800d6ad7beb67dd7e0ad', type: "chevron-left" }))), h("div", { key: '3d154be9025420663037691631aed5fbae975a7f', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '83e4145ed4b2cbb8bd096cd54daa83bc127ec425', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'afa6a8b2729d353ee94821debe60b217ce221e55', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '25990f6c82647a481479a9581253192ed210bef6', 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 => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page" })), h("span", { key: '073dce90e84e8b4d4aa9f887a3746ab8942578ed', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'f26ddef1e53d02cc9d048ed1ead2a28d8b84e71f', class: "btn-group" }, h("q2-btn", { key: '1731620fb0caaa015f126c52329fdfc5feb0f7c4', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '4f80a62db321a2f9563365f3278f643b278b893e', type: "chevron-right" })), h("q2-btn", { key: 'c72a35e4faf2c23eb024d73de7bd0d9c16c4755c', 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: '5519600de69d5f22f3e5882051b69a4753fcda0b', type: "chevron-double-right" }))), h("div", { key: 'fde704f4e6c00dac13427cf0f1380be63d12b649', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page" })), h("span", { key: 'a38cdcf1e67c9c03b6130e992729256874b81059', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'c2d2f1f04054281feb017edbbb0f56a97905127c', class: "btn-group" }, h("q2-btn", { key: '317d26da8c4c790a66ecb975317f45992fd068c4', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'c63c6b9c9876554a5f0b0b79d309cea5dbb73e64', type: "chevron-right" })), h("q2-btn", { key: '80320e0962e76dd5a2ccb9da23f4531e911d896e', 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: '2627f2119a1ecac530d7d16345b5f5384977c130', type: "chevron-double-right" }))), h("div", { key: '3acca6c1b920be9325b7abe891aa63363ebc8200', 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"; }
@@ -394,12 +407,12 @@ export class Q2Pagination {
                 "reflect": true
             },
             "perPageIncrements": {
-                "type": "unknown",
+                "type": "string",
                 "attribute": "per-page-increments",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "number[]",
-                    "resolved": "number[]",
+                    "original": "number[] | string[] | string | undefined",
+                    "resolved": "number[] | string | string[]",
                     "references": {}
                 },
                 "required": false,
@@ -412,7 +425,8 @@ export class Q2Pagination {
                     "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:**"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": true
             },
             "recordsOnly": {
                 "type": "boolean",

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

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

package/dist/collection/components/q2-pill/q2-pill.css CHANGED Viewed

@@ -104,7 +104,7 @@ q2-popover,
   --comp-btn-color: var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));
   --comp-active-btn-color: var(--tct-pill-active-btn-color, var(--comp-btn-background));
   --comp-active-btn-background: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));
-  --comp-active-btn-box-shadow: var(--tct-pill-active-btn-box-shadow, none);
+  --comp-active-btn-box-shadow: var(--tct-pill-active-btn-box-shadow, var(--tct-pill-btn-box-shadow, none));
   --comp-active-btn-backdrop-filter: var(--tct-pill-active-btn-backdrop-filter, none);
   --comp-active-btn-border-color: var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));
   --comp-hover-active-btn-background: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));
@@ -119,7 +119,7 @@ q2-popover,
 }
 :host([theme=primary]) .btn-wrapper {
   --comp-active-btn-background: var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));
-  --comp-active-btn-box-shadow: var(--tct-pill-primary-active-box-shadow, none);
+  --comp-active-btn-box-shadow: var(--tct-pill-primary-active-btn-box-shadow, none);
   --comp-active-btn-backdrop-filter: var(--tct-pill-primary-active-backdrop-filter, none);
   --comp-active-btn-color: var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));
   --comp-active-btn-border-color: var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));
@@ -190,7 +190,10 @@ q2-popover,
   width: 100%;
   text-align: start;
 }
-.btn-primary:focus, .btn-primary:hover {
+.btn-primary:focus {
+  box-shadow: var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring));
+}
+.btn-primary:hover {
   background: var(--comp-hover-btn-background);
 }
 .has-options .btn-primary, .has-icon .btn-primary {
@@ -209,7 +212,10 @@ q2-popover,
   border-color: var(--comp-active-btn-border-color);
   color: var(--comp-active-btn-color);
 }
-:host([active]:not([active=false])) .btn-primary:focus, :host([active]:not([active=false])) .btn-primary:hover {
+:host([active]:not([active=false])) .btn-primary:focus {
+  box-shadow: var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring));
+}
+:host([active]:not([active=false])) .btn-primary:hover {
   background: var(--comp-hover-active-btn-background);
   border-color: var(--comp-hover-active-btn-border-color);
 }

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

@@ -37,7 +37,7 @@ export class Q2Pill {
         };
         this.determineOptionCount = async () => {
             if (this.optionList) {
-                const allOptions = await this.optionList.getOptions();
+                const allOptions = await this.getOptionListOptions();
                 this.optionCount = allOptions.length;
             }
             else {
@@ -52,13 +52,18 @@ export class Q2Pill {
         };
         this.getOption = async (value) => {
             if (this.optionList) {
-                const options = await this.optionList.getOptions();
+                const options = await this.getOptionListOptions();
                 return options.find(option => option.value === value);
             }
             else {
                 return this.hostElement.querySelector(`q2-option[value="${value}"]`);
             }
         };
+        // for spec testing
+        this.getOptionListOptions = async () => {
+            var _a;
+            return await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
+        };
         this.handleChange = event => {
             event.stopPropagation();
             if (!this.optionCount)
@@ -108,9 +113,14 @@ export class Q2Pill {
                 this.executeActionSheet(event);
             }
             else {
-                this.optionList.handleExternalKeydown(event);
+                this.handleOptionListExternalKeydown(event);
             }
         };
+        // for spec testing
+        this.handleOptionListExternalKeydown = async (event) => {
+            var _a;
+            await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.handleExternalKeydown(event));
+        };
         this.handleSelectionChanges = async (changeDetails) => {
             const { multiple } = this;
             const { value = '', values = [] } = changeDetails;
@@ -153,6 +163,22 @@ export class Q2Pill {
             this.determineOptionCount();
             this.updateSelectedOptionElements();
         };
+        this.onPopoverState = (event) => {
+            const { open, action } = event.detail;
+            if (open)
+                return;
+            switch (action) {
+                case 'select':
+                case 'close':
+                    this.primaryBtn.focus();
+                    break;
+            }
+        };
+        // for spec testing
+        this.setOptionListActiveElement = async (index) => {
+            var _a;
+            await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.setActiveElement(index));
+        };
         this.syncValueProperties = () => {
             const { value, selectedOptions } = this;
             if (!!(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length))
@@ -161,10 +187,9 @@ export class Q2Pill {
                 this.valueChanged(value, null, 'value');
         };
         this.updateSelectedOptionElements = async () => {
-            var _a;
             const { selectedOptions = [] } = this;
             const selectedValues = selectedOptions.map(option => option.value);
-            const options = await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
+            const options = await this.getOptionListOptions();
             if (this.optionCount)
                 this.active = !!selectedValues.length;
             this.selectedOptionElements =
@@ -214,12 +239,12 @@ export class Q2Pill {
             return;
         this.primaryBtn.focus();
     }
-    popoverStateHandler({ detail: { open } }) {
+    async popoverStateHandler({ detail: { open } }) {
         if (this.open !== open)
             this.open = open;
         if (open)
             return;
-        this.optionList.setActiveElement(null);
+        this.setOptionListActiveElement(null);
     }
     // #endregion
     // #region Public Methods API
@@ -252,9 +277,8 @@ export class Q2Pill {
      * @testOnly
      */
     async setValue(values, options = { closePopover: true }) {
-        var _a;
         const valueSet = new Set(Array.isArray(values) ? values : [values]);
-        const allOptions = (await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions()));
+        const allOptions = (await this.getOptionListOptions());
         if (!this.open) {
             await this.openPopover();
             await waitForNextPaint();
@@ -309,7 +333,7 @@ export class Q2Pill {
         if (!optionCount || selectedOptionElements.length === 0)
             return loc(label);
         else if (selectedOptionElements.length === 1)
-            return loc(selectedOptionElements[0].display);
+            return `${loc(selectedOptionElements[0].display)}`;
         return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });
     }
     get truncatedButtonContent() {
@@ -344,7 +368,7 @@ export class Q2Pill {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '612e277fb831b60becbdac0df520de45cc08a398', onChange: this.onClickElsewhere }, h("div", { key: '5f56c66943e7fefd4295bd5c96019039aac039c9', class: wrapperClassNames.join(' ') }, h("div", { key: '1b101344313e3bc6357e69378b929b47b53a9e50', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'f0231168c9043ac7d2596ecbb3a7a382cf27d33b', 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.handleFocusOut, 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: '066f5d1132937be8eb8e925c8394d219aadeb819', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'f38e3d6f605f10e8907b40d16cd70276c6f85a73', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'e4ce39ff508b27e82126fa4b08cca3d3c39ff3a7', class: "popover-content" }, h("div", { key: '4075cea397c412b24ffa17194158b9fd0aec6ad4', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '1f48ca125b79984bb49ac5e21ba6290402462c9d', name: "popover-top" })), h("q2-option-list", { key: '9dcfea71f57897a393604167e629fa4a956ef3d8', 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: '1915a1abd9801102248fc8b516b13f2a34e4554d' })), h("div", { key: '0073dd48f8fb6dfbe282f84ce134b258dff237a8', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '92da82497608b7fdee73587b677ec8673bbe1411', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: '1b2fae67d287db309f9e953449d3ec897244bc46', onChange: this.onClickElsewhere }, h("div", { key: 'a8dd7ebd6b171a8f2cede88d829210b78341d477', class: wrapperClassNames.join(' ') }, h("div", { key: '3a4f1e6c1c1135886803b27ef8e4bc3cde2c3b62', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '7fcd194d44ec0306509cb7b55dcbfb9c5a0f915d', 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.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": `${this.buttonContent}${!optionCount && active ? ` ${loc('tecton.element.pill.active')}` : ''}`, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '059152c08a71d83ccc65d8517298a7ff2af09a16', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'a6b5192bf1d6f8370e906bf9f0a031a1db3ed189', class: "popover-content" }, h("div", { key: '64596428058159629f33a4c975bbe80c172a49e4', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: 'c9991d5f8fa9039874480a03dd26f45fbcac5b84', name: "popover-top" })), h("q2-option-list", { key: 'ba0bfb7ff081f4379fbfe86dfc291a675fc2819b', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: 'e17a9ec82e412c214f39bbd047fa63dfa09306c6' })), h("div", { key: 'b9eb63a198876df544748b07a36a16a392dcbda1', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: 'ba43c55ca7e21a8faf4f7759bb887163dd5879ea', name: "popover-bottom" })))))));
     }
     static get is() { return "q2-pill"; }
     static get encapsulation() { return "shadow"; }