npm - q2-tecton-elements - Versions diffs - 1.63.2 → 1.64.0 - Mend

q2-tecton-elements 1.63.2 → 1.64.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 (390) hide show

package/dist/collection/components/q2-option-list/q2-option-list.js CHANGED Viewed

@@ -702,7 +702,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/Users/kvanhouten/Documents/Work/tecton_extra/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }
@@ -780,7 +780,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/Users/kvanhouten/Documents/Work/tecton_extra/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }
@@ -840,7 +840,7 @@ export class Q2OptionList {
                         },
                         "ValidOptionElements": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/Users/kvanhouten/Documents/Work/tecton_extra/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::ValidOptionElements"
                         }
                     },
@@ -862,7 +862,7 @@ export class Q2OptionList {
                         },
                         "ValidOptionElements": {
                             "location": "local",
-                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/Users/kvanhouten/Documents/Work/tecton_extra/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::ValidOptionElements"
                         }
                     },

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

@@ -8,6 +8,8 @@ export class Q2Pagination {
         this.alignment = 'right';
         /** Determines whether the component uses dynamic resizing behavior. This is disabled when `pagesOnly`, `recordsOnly`, or `stacked` is true. */
         this.autoSize = true;
+        /** Allows the component to be disabled should the state of the page require this  */
+        this.disabled = false;
         this.checkSize = () => {
             const { hostElement, containerElement } = this;
             const isOverflowing = this.containerWidth > hostElement.clientWidth;
@@ -23,6 +25,8 @@ export class Q2Pagination {
             });
         };
         this.handlePageChange = (page) => {
+            if (this.disabled)
+                return;
             const { totalPages, inputField } = this;
             page = parseInt(`${page}`);
             if (isNaN(page) || page < 1) {
@@ -39,6 +43,8 @@ export class Q2Pagination {
             this.change.emit({ page });
         };
         this.handlePerPageChange = (event) => {
+            if (this.disabled)
+                return;
             this.perPage = event.detail.value * 1;
         };
     }
@@ -59,6 +65,8 @@ export class Q2Pagination {
     // #region Listeners
     onHostElementFocus(event) {
         var _a;
+        if (this.disabled)
+            return;
         if (!isEventFromElement(event, this.hostElement))
             return;
         const { isFullViewHidden, containerElement, inputField } = this;
@@ -78,6 +86,8 @@ export class Q2Pagination {
      * @testOnly
      */
     async clickFirstPage() {
+        if (this.disabled)
+            return;
         const button = this.firstPageBtn;
         if (button === null || button === void 0 ? void 0 : button.disabled)
             return;
@@ -90,6 +100,8 @@ export class Q2Pagination {
      * @testOnly
      */
     async clickLastPage() {
+        if (this.disabled)
+            return;
         const button = this.lastPageBtn;
         if (button === null || button === void 0 ? void 0 : button.disabled)
             return;
@@ -102,6 +114,8 @@ export class Q2Pagination {
      * @testOnly
      */
     async clickNextPage() {
+        if (this.disabled)
+            return;
         const button = this.nextPageBtn;
         if (button === null || button === void 0 ? void 0 : button.disabled)
             return;
@@ -114,6 +128,8 @@ export class Q2Pagination {
      * @testOnly
      */
     async clickPreviousPage() {
+        if (this.disabled)
+            return;
         const button = this.prevPageBtn;
         if (button === null || button === void 0 ? void 0 : button.disabled)
             return;
@@ -128,6 +144,8 @@ export class Q2Pagination {
      */
     async selectPerPageIncrementValue(value) {
         var _a;
+        if (this.disabled)
+            return;
         if (isNaN(value) || !this.showPerPageSelect || !this.perPageIncrementsArray.includes(value))
             return;
         this.perPageSelect.focus();
@@ -144,6 +162,8 @@ export class Q2Pagination {
      */
     async setPageValue(value) {
         var _a, _b;
+        if (this.disabled)
+            return;
         if (!this.inputField || isNaN(value) || value < 1 || value > this.totalPages)
             return;
         (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.focus();
@@ -250,11 +270,11 @@ export class Q2Pagination {
         if (this.perPage === undefined)
             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}`)))));
+        return (h("q2-select", { ref: el => (this.perPageSelect = el), onChange: this.handlePerPageChange, value: this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined, disabled: this.disabled }, increments.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, showPerPageSelect, } = this;
+        const { pagesOnly, recordsOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange, nextRange, prevRange, showPerPageSelect, disabled, } = this;
         const onFirstPage = page < 2;
         const onLastPage = page === totalPages;
         let nextButtonLabel = loc('tecton.element.pagination.goToNext');
@@ -275,7 +295,7 @@ export class Q2Pagination {
                 total,
             });
         }
-        return (h("nav", { key: 'ff2d67fa5ec9b02c562fb5fbd430d054a1f22ff5', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'b6e7a0648e03303848a48df370b9424f5a43317a', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: 'e361c761f1215578c0ae8c92d9aed8a3a7b3db2c', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '1f24bdc3815f324339071c66159d9075e806c51f', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -284,10 +304,10 @@ export class Q2Pagination {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '45618378f232169ca593b008277b6f27f4a4a6c8', class: "controls" }, h("div", { key: '99202f961f90314e19d3e22e57c4d2ee17fe7081', class: "btn-group" }, h("q2-btn", { key: '873f7cc19194c02209a5ebde71d8c3a66602fcbd', 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: '39c2b383873470b31db5a20555130a58f60f0fa1', type: "chevron-double-left" })), h("q2-btn", { key: '7a1a2723c98490393ed05d9c62746114a894cbbb', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'b72239efda8f4dd8cf007e24fa27b7bba373eb26', type: "chevron-left" }))), h("div", { key: '8baa75ed71a56d48cfaea72bf6b706a458bc61ab', class: "input-display", hidden: isFullViewHidden }, h("span", { key: '05d5651db1d26bab5abfb7dad42a554ec58c6785', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '9110938a5e8407e23449cfa1150b6127edcbb306', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '63f66f6ff6db96e29a10b816cb37ad95d89f92fd', 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: '7e57d4ca13d2607d35819d6742e2f75ecc217ced', class: "controls" }, h("div", { key: 'a19255ad887040652c2095e38765cf28ee59f4bc', class: "btn-group" }, h("q2-btn", { key: '739c592502590b9c29f9e1cad0618c2b3c78f9a5', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '2f3548edc4ef3ef35f49a14bb6e16c909f15b9ef', type: "chevron-double-left" })), h("q2-btn", { key: '57e5ecacd4149bf540f476d8a9e9dce7de5d4812', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '382d537e1a8d61c8212cf0a17a2f6be5c85d7da6', type: "chevron-left" }))), h("div", { key: 'dd6afd78e533ff445912854131757f13d92bb8f1', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'a016b75b1e9de2446f8e90e3ed73db296bfc1c20', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'f5a2ef87d3382cd6cf4ea7311c2a71184648d825', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '1cb2e7458d9c085068c80043f1a3e05d7ab16867', 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: '9581a223b29ab6abea350f6c8d970074970e9632', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'dd276153e4d88987e849cf72140560bf9d9419a0', class: "btn-group" }, h("q2-btn", { key: 'b7a26bfeba26042a9a3eed2b45114bf6de110c56', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'b5d9a65fbcd44cdd814ed37137efe3e05c567117', type: "chevron-right" })), h("q2-btn", { key: '8d19df8df2d928f052beb4437f368cc61faf06ff', 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: '5daf583e551905f924bbf7c3942a80aa1d46d911', type: "chevron-double-right" })))), h("div", { key: 'f8f5b4141b084969d17ee78d06504501c3e7bff4', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '38eb5fd6b5da163ef1ea61e9c3faa2e8e78ab555', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'eb1511ae4ccfd6bd88f858deadfffe0a5a3d791d', class: "btn-group" }, h("q2-btn", { key: 'c16ad56cac594f73eafcec87d613768b6a4771a6', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '5ed0f655aad405b41d16f6f70a2f5f2355163918', type: "chevron-right" })), h("q2-btn", { key: '3f32e59bb7063093f08663b175ebc736cb02dd6a', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '2fcebb986383e784c91a7c828f20de7503b07d6e', type: "chevron-double-right" })))), h("div", { key: '08af55bdfd90c01f1491d4000ea1db4fc9684e51', 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"; }
@@ -343,6 +363,26 @@ export class Q2Pagination {
                 "reflect": true,
                 "defaultValue": "true"
             },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the component to be disabled should the state of the page require this"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "page": {
                 "type": "number",
                 "attribute": "page",

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

@@ -368,7 +368,7 @@ export class Q2Pill {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '90d7ef86d7225825885e94bcba9a3086e267154a', onChange: this.onClickElsewhere }, h("div", { key: 'b62546e4578028fd8d36104866894892085dc8b1', class: wrapperClassNames.join(' ') }, h("div", { key: 'fb123e4a87909cca94eec53a91099d175b262b56', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '03315bc2d8d45a409cb7c4327f1cf30304fa1837', 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: '48f236ca6152cfd816eccbcdb14789e928e21424', 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: '136f441b28ecb20ed9b85f25add811d6fdcf4aff', class: "popover-content" }, h("div", { key: '6a8b06aa9d78a72d543d97d69a81880474bc607f', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '5e792494a0f541e761fec06011ca4644fa1c200b', name: "popover-top" })), h("q2-option-list", { key: '3c078dd97a9ec41a4e3af50eda6f1f16a26e0291', 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: '9b55d9e81a2b5713391d8884090f7588a9b54701' })), h("div", { key: 'bf9e18b0f0533795678882fe3e2017c294efaf3e', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '1c4410a3a03fe9b5280d34111b83767715f9bd77', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: 'e7808292f13c5065a372be65944d789e6908a551', onChange: this.onClickElsewhere }, h("div", { key: 'c9708498aa93476eff3cc68b3ef741c31c8ad9b1', class: wrapperClassNames.join(' ') }, h("div", { key: '9b756d3fc7dcf8209a4ecf880611a405947ef2b4', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '5167564d23175ea50dcff0c12d0bf22c691c863a', 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: 'df99bf0be930209e56de6e0b091e6847643df41d', 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: 'da8d529eb84d83fc126aff7d8f7af5cc8c28090b', class: "popover-content" }, h("div", { key: '1c8edb11248927a81138333abcfc7937c7c8b4e3', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '6969d464fdee4f40f2753c0deed463c1b1de2bf1', name: "popover-top" })), h("q2-option-list", { key: 'b6d68ff335503eb7e2b50d210a57d94b1a66f93d', 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: '2995021179f4597fb47796b16ddb5db5b26b1a60' })), h("div", { key: '8f916f36da1a3809f8003659789a1d3792394f11', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: 'ec1a18a9651cca88e07c486d9b886ffc8c833277', name: "popover-bottom" })))))));
     }
     static get is() { return "q2-pill"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-relative-time/q2-relative-time.js CHANGED Viewed

@@ -148,7 +148,7 @@ export class Q2RelativeTime {
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: 'b7d36d01109176c2c77edf737093c94b3d3a897f' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: '28fd755c61e0bac9a47f06496d90ddcee8034caa' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     static get is() { return "q2-relative-time"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-resize-observer/q2-resize-observer.js CHANGED Viewed

@@ -71,7 +71,7 @@ export class Q2ResizeObserver {
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: '0c57b2302e2569871e73f9798202fca9adb9c1a5', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: '5ad2cbbb23334b9a270ee3b0d1df622d9abacc4c', onSlotchange: this.handleSlotChange });
     }
     static get is() { return "q2-resize-observer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -180,9 +180,9 @@ export class Q2Section {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '55f0f93ba9b3c7518012f5ecbfb273a31d6ca669', class: "wrapper" }, h("header", { key: 'adb2ea468b5f0b4849e504d4a2f3f332e353de98', class: hasHeader ? 'has-header' : '' }, h("div", { key: '8b9030e341fa34cb8e6c7a3b2c985c6c1265895d', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '4fe2dfeb80ff87e4d7f61288d6e042c83a3f92a8', class: "title" }, loc(this.label)), h("div", { key: 'e51f64c03af2b95f37d6e10d6a863361f81db3d4', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '5da93598c7db1c20413e0ede2d8a797f69fc3b7f', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'd9bd84c0ffe31f01a842d2f81fe947c70643f37a', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: 'b6f6db2725abb1d4edf4adc1728a9f57d511884e', type: "chevron-up" })))), h("div", { key: 'd92767dd97fc4a1bf6d6181e4c795ced504ff89e', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '76fc4c326fbce0bc559227e2f10f6af2a360f4f8', class: "wrapper" }, h("header", { key: '56a333c3a154c8d39634a68650a2544f3b6d0387', class: hasHeader ? 'has-header' : '' }, h("div", { key: '72ae16763259f9f1d4e024155a4a57ed73bda573', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: 'ddb76847a69b200c4f102860211ae5e84914004a', class: "title" }, loc(this.label)), h("div", { key: '129c77af51ede66d6b47bb1b66580d50f72eb571', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '8784ee31084120824c6f90bec0486f6000eca513', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '71560853e48dc7c8bf4747642a0fac307a081875', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '4c19953ac9e7e04cb9abfbf958c07e85cf49ba21', type: "chevron-up" })))), h("div", { key: '4c5f6069baf0594878bead21dddef54dce7224b1', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '7827bbb47cdc831e0adf802c7c6a9068e3390325', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '42949b1e89c29707be0b21cb0ee057fffef294a6', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '5a2244889e412c6011b5001e5de7eb1208c0056d', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'cd9e9519be8f0e56d94fedbac3aeee288fecadc7', ref: (el) => (this.contentSlot = el) })))));
     }
     static get is() { return "q2-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-section-container/q2-section-container.js ADDED Viewed

@@ -0,0 +1,198 @@
+import { h } from "@stencil/core";
+export class Q2SectonContainer {
+    constructor() {
+        // #endregion
+        // #region Public Property API
+        /**
+         * Determines if a single or multiple sections can be open at a time.
+         */
+        this.openMode = 'single';
+        /**
+         * Determines which section starts open.
+         */
+        this.openPaneIndex = 0;
+        /**
+         * Determines if all sections inside the section-container start opened or closed.
+         *
+         * @info
+         * If you have openMode set to multiple, all panes will start open.
+         */
+        this.startAllOpen = false;
+        /**
+         * Determines if the section-container starts opened or closed.
+         *
+         * @info
+         * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.
+         * If you have openMode set to multiple, you can also select startAllOpen to open all panes.
+         * @warning
+         * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.
+         */
+        this.startOpen = true;
+        // #endregion
+        // #region Local Methods
+        this.filterSlottedElements = () => {
+            if (!('HTMLSlotElement' in window))
+                return;
+            Array.from(this.hostElement.children).forEach(el => {
+                if ('Q2-SECTION' !== el.tagName) {
+                    el.remove();
+                }
+            });
+        };
+        this.fixSlottedElements = () => {
+            if (!('HTMLSlotElement' in window))
+                return;
+            Array.from(this.hostElement.children).forEach((el, i) => {
+                el.setAttribute('collapsible', '');
+                if (this.openMode === 'single') {
+                    el.addEventListener('change', event => {
+                        const target = event.target;
+                        const children = Array.from(target.parentElement.children);
+                        const siblings = children.filter(child => child !== target);
+                        siblings.forEach(el => el.setAttribute('expanded', 'false'));
+                    });
+                }
+                if (!el.getAttribute('label')) {
+                    el.setAttribute('label', 'Section ' + (i + 1));
+                }
+                if (!this.startOpen) {
+                    el.removeAttribute('expanded');
+                }
+                else {
+                    if (this.openPaneIndex === i || (this.openMode === 'multiple' && this.startAllOpen)) {
+                        el.setAttribute('expanded', '');
+                    }
+                    else {
+                        el.removeAttribute('expanded');
+                    }
+                }
+            });
+        };
+        // #endregion
+        // #region Render Methods
+        this.render = () => h("slot", null);
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentWillLoad() {
+        this.filterSlottedElements();
+        this.fixSlottedElements();
+    }
+    // #endregion
+    // #region Watchers
+    handleOpenStateChange() {
+        this.fixSlottedElements();
+    }
+    static get is() { return "q2-section-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "openMode": {
+                "type": "string",
+                "attribute": "open-mode",
+                "mutable": true,
+                "complexType": {
+                    "original": "'multiple' | 'single'",
+                    "resolved": "\"multiple\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if a single or multiple sections can be open at a time."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'single'"
+            },
+            "openPaneIndex": {
+                "type": "number",
+                "attribute": "open-pane-index",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines which section starts open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "startAllOpen": {
+                "type": "boolean",
+                "attribute": "start-all-open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "If you have openMode set to multiple, all panes will start open."
+                        }],
+                    "text": "Determines if all sections inside the section-container start opened or closed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "startOpen": {
+                "type": "boolean",
+                "attribute": "start-open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.\nIf you have openMode set to multiple, you can also select startAllOpen to open all panes."
+                        }, {
+                            "name": "warning",
+                            "text": "OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed."
+                        }],
+                    "text": "Determines if the section-container starts opened or closed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "openMode",
+                "methodName": "handleOpenStateChange"
+            }, {
+                "propName": "openPaneIndex",
+                "methodName": "handleOpenStateChange"
+            }, {
+                "propName": "startAllOpen",
+                "methodName": "handleOpenStateChange"
+            }, {
+                "propName": "startOpen",
+                "methodName": "handleOpenStateChange"
+            }];
+    }
+}
+//# sourceMappingURL=q2-section-container.js.map