q2-tecton-elements 1.63.2 → 1.64.0

package/dist/q2-tecton-elements/q2-pagination.entry.js

@@ -12,6 +12,7 @@ const l = class {
     // #region Public Property API
     /** Indicates the horizontal alignment of pagination elements */    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: t, containerElement: e} = this;
       const i = this.containerWidth > t.clientWidth;
@@ -25,6 +26,7 @@ const l = class {
       }));
     };
     this.handlePageChange = t => {
+      if (this.disabled) return;
       const {totalPages: e, inputField: i} = this;
       t = parseInt(`${t}`);
       if (isNaN(t) || t < 1) {
@@ -41,6 +43,7 @@ const l = class {
       });
     };
     this.handlePerPageChange = t => {
+      if (this.disabled) return;
       this.perPage = t.detail.value * 1;
     };
   }
@@ -61,6 +64,7 @@ const l = class {
   // #region Listeners
   onHostElementFocus(t) {
     var e;
+    if (this.disabled) return;
     if (!o(t, this.hostElement)) return;
     const {isFullViewHidden: i, containerElement: n, inputField: a} = this;
     if (i) {
@@ -78,6 +82,7 @@ const l = class {
      * @testOnly
      */
   async clickFirstPage() {
+    if (this.disabled) return;
     const t = this.firstPageBtn;
     if (t === null || t === void 0 ? void 0 : t.disabled) return;
     t.click();
@@ -88,6 +93,7 @@ const l = class {
      * If the `<button>` is disabled, this method does nothing.
      * @testOnly
      */  async clickLastPage() {
+    if (this.disabled) return;
     const t = this.lastPageBtn;
     if (t === null || t === void 0 ? void 0 : t.disabled) return;
     t.click();
@@ -98,6 +104,7 @@ const l = class {
      * If the `<button>` is disabled, this method does nothing.
      * @testOnly
      */  async clickNextPage() {
+    if (this.disabled) return;
     const t = this.nextPageBtn;
     if (t === null || t === void 0 ? void 0 : t.disabled) return;
     t.click();
@@ -108,6 +115,7 @@ const l = class {
      * If the `<button>` is disabled, this method does nothing.
      * @testOnly
      */  async clickPreviousPage() {
+    if (this.disabled) return;
     const t = this.prevPageBtn;
     if (t === null || t === void 0 ? void 0 : t.disabled) return;
     t.click();
@@ -120,6 +128,7 @@ const l = class {
      * @testOnly
      */  async selectPerPageIncrementValue(t) {
     var e;
+    if (this.disabled) return;
     if (isNaN(t) || !this.showPerPageSelect || !this.perPageIncrementsArray.includes(t)) return;
     this.perPageSelect.focus();
     this.perPageSelect.click();
@@ -134,6 +143,7 @@ const l = class {
      * @testOnly
      */  async setPageValue(t) {
     var e, i;
+    if (this.disabled) return;
     if (!this.inputField || isNaN(t) || t < 1 || t > this.totalPages) return;
     (e = this.inputField) === null || e === void 0 ? void 0 : e.focus();
     this.inputField.value = `${t}`;
@@ -230,7 +240,8 @@ const l = class {
     return i("q2-select", {
       ref: t => this.perPageSelect = t,
       onChange: this.handlePerPageChange,
-      value: this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined
+      value: this.perPageIncrementsArray.includes(this.perPage) ? `${this.perPage}` : undefined,
+      disabled: this.disabled
     }, t.map((t => i("q2-option", {
       value: `${t}`,
       display: `${r("tecton.element.pagination.view")} ${t}`
@@ -238,39 +249,39 @@ const l = class {
   }
   render() {
     var t;
-    const {pagesOnly: e, recordsOnly: n, isFullViewHidden: a, recordTypeWithDefault: s, totalPages: o, totalWithDefault: c, pageWithDefault: l, currentRange: h, nextRange: p, prevRange: d, showPerPageSelect: g} = this;
-    const f = l < 2;
-    const u = l === o;
-    let b = r("tecton.element.pagination.goToNext");
-    let v = r("tecton.element.pagination.goToPrevious");
+    const {pagesOnly: e, recordsOnly: n, isFullViewHidden: a, recordTypeWithDefault: s, totalPages: o, totalWithDefault: c, pageWithDefault: l, currentRange: h, nextRange: d, prevRange: p, showPerPageSelect: g, disabled: f} = this;
+    const u = l < 2;
+    const b = l === o;
+    let v = r("tecton.element.pagination.goToNext");
+    let y = r("tecton.element.pagination.goToPrevious");
     if (e) {
-      v = r("tecton.element.pagination.goToPages", {
+      y = r("tecton.element.pagination.goToPages", {
         next: l - 1,
         total: o
       });
-      b = r("tecton.element.pagination.goToPages", {
+      v = r("tecton.element.pagination.goToPages", {
         next: l + 1,
         total: o
       });
     } else if (n) {
-      v = r("tecton.element.pagination.goToRecords", {
-        range: d,
+      y = r("tecton.element.pagination.goToRecords", {
+        range: p,
         recordType: s.toLowerCase(),
         total: c
       });
-      b = r("tecton.element.pagination.goToRecords", {
-        range: p,
+      v = r("tecton.element.pagination.goToRecords", {
+        range: d,
         recordType: s.toLowerCase(),
         total: c
       });
     }
     return i("nav", {
-      key: "ff2d67fa5ec9b02c562fb5fbd430d054a1f22ff5",
+      key: "e361c761f1215578c0ae8c92d9aed8a3a7b3db2c",
       class: this.containerClasses.join(" "),
       ref: t => this.containerElement = t,
       "aria-label": r("tecton.element.pagination.title")
     }, i("div", {
-      key: "b6e7a0648e03303848a48df370b9424f5a43317a",
+      key: "1f24bdc3815f324339071c66159d9075e806c51f",
       class: "description",
       "test-id": "description"
     }, e ? r("tecton.element.pagination.pages", {
@@ -281,47 +292,47 @@ const l = class {
       recordType: s.toLowerCase(),
       total: c.toLocaleString()
     })), i("div", {
-      key: "45618378f232169ca593b008277b6f27f4a4a6c8",
+      key: "7e57d4ca13d2607d35819d6742e2f75ecc217ced",
       class: "controls"
     }, i("div", {
-      key: "99202f961f90314e19d3e22e57c4d2ee17fe7081",
+      key: "a19255ad887040652c2095e38765cf28ee59f4bc",
       class: "btn-group"
     }, i("q2-btn", {
-      key: "873f7cc19194c02209a5ebde71d8c3a66602fcbd",
+      key: "739c592502590b9c29f9e1cad0618c2b3c78f9a5",
       ref: t => this.firstPageBtn = t,
       label: r("tecton.element.pagination.goToFirstPage"),
-      disabled: f,
+      disabled: f || u,
       hidden: a,
       onClick: () => this.handlePageChange(1),
       "test-id": "firstPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "39c2b383873470b31db5a20555130a58f60f0fa1",
+      key: "2f3548edc4ef3ef35f49a14bb6e16c909f15b9ef",
       type: "chevron-double-left"
     })), i("q2-btn", {
-      key: "7a1a2723c98490393ed05d9c62746114a894cbbb",
+      key: "57e5ecacd4149bf540f476d8a9e9dce7de5d4812",
       ref: t => this.prevPageBtn = t,
-      label: v,
-      disabled: f,
+      label: y,
+      disabled: f || u,
       onClick: () => this.handlePageChange(l - 1),
       "test-id": "prevPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "b72239efda8f4dd8cf007e24fa27b7bba373eb26",
+      key: "382d537e1a8d61c8212cf0a17a2f6be5c85d7da6",
       type: "chevron-left"
     }))), i("div", {
-      key: "8baa75ed71a56d48cfaea72bf6b706a458bc61ab",
+      key: "dd6afd78e533ff445912854131757f13d92bb8f1",
       class: "input-display",
       hidden: a
     }, i("span", {
-      key: "05d5651db1d26bab5abfb7dad42a554ec58c6785",
+      key: "a016b75b1e9de2446f8e90e3ed73db296bfc1c20",
       "aria-hidden": "true"
     }, r("tecton.element.pagination.page")), i("div", {
-      key: "9110938a5e8407e23449cfa1150b6127edcbb306",
+      key: "f5a2ef87d3382cd6cf4ea7311c2a71184648d825",
       class: "input-wrapper",
       onClick: () => this.inputField.dispatchEvent(new FocusEvent("focus"))
     }, i("q2-input", {
-      key: "63f66f6ff6db96e29a10b816cb37ad95d89f92fd",
+      key: "1cb2e7458d9c085068c80043f1a3e05d7ab16867",
       ref: t => this.inputField = t,
       type: "number",
       value: `${l}`,
@@ -335,38 +346,39 @@ const l = class {
         this.handlePageChange(t.detail.value);
       },
       "test-id": "pageInput",
-      current: "page"
+      current: "page",
+      disabled: f
     })), i("span", {
-      key: "9581a223b29ab6abea350f6c8d970074970e9632",
+      key: "38eb5fd6b5da163ef1ea61e9c3faa2e8e78ab555",
       "aria-hidden": "true"
     }, r("tecton.element.pagination.ofPages", [ o.toLocaleString() ]))), i("div", {
-      key: "dd276153e4d88987e849cf72140560bf9d9419a0",
+      key: "eb1511ae4ccfd6bd88f858deadfffe0a5a3d791d",
       class: "btn-group"
     }, i("q2-btn", {
-      key: "b7a26bfeba26042a9a3eed2b45114bf6de110c56",
+      key: "c16ad56cac594f73eafcec87d613768b6a4771a6",
       ref: t => this.nextPageBtn = t,
-      label: b,
-      disabled: u,
+      label: v,
+      disabled: f || b,
       onClick: () => this.handlePageChange(l + 1),
       "test-id": "nextPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "b5d9a65fbcd44cdd814ed37137efe3e05c567117",
+      key: "5ed0f655aad405b41d16f6f70a2f5f2355163918",
       type: "chevron-right"
     })), i("q2-btn", {
-      key: "8d19df8df2d928f052beb4437f368cc61faf06ff",
+      key: "3f32e59bb7063093f08663b175ebc736cb02dd6a",
       ref: t => this.lastPageBtn = t,
       label: "tecton.element.pagination.goToLastPage",
-      disabled: u,
+      disabled: f || b,
       hidden: a,
       onClick: () => this.handlePageChange(o),
       "test-id": "lastPageBtn",
       "hide-label": true
     }, i("q2-icon", {
-      key: "5daf583e551905f924bbf7c3942a80aa1d46d911",
+      key: "2fcebb986383e784c91a7c828f20de7503b07d6e",
       type: "chevron-double-right"
     })))), i("div", {
-      key: "f8f5b4141b084969d17ee78d06504501c3e7bff4",
+      key: "08af55bdfd90c01f1491d4000ea1db4fc9684e51",
       class: "per-page",
       hidden: a || !((t = this.perPageIncrements) === null || t === void 0 ? void 0 : t.length)
     }, g && this.renderPerPage()));

package/dist/q2-tecton-elements/q2-pagination.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2PaginationCss","Q2Pagination","constructor","hostRef","this","alignment","autoSize","checkSize","hostElement","containerElement","isOverflowing","containerWidth","clientWidth","isSmall","nextPaint","containerWidthHasNotChanged","handlePageChange","page","totalPages","inputField","parseInt","isNaN","value","onchange","change","emit","handlePerPageChange","event","perPage","detail","disconnectedCallback","removeResizeObserver","componentWillLoad","checkDisplayTypes","manageResizeObserver","componentDidLoad","overrideFocus","onHostElementFocus","isEventFromElement","isFullViewHidden","_a","querySelector","focus","clickFirstPage","button","firstPageBtn","disabled","click","clickLastPage","lastPageBtn","clickNextPage","nextPageBtn","clickPreviousPage","prevPageBtn","selectPerPageIncrementValue","showPerPageSelect","perPageIncrementsArray","includes","perPageSelect","options","Array","from","querySelectorAll","find","option","setPageValue","_b","blur","resizeObserver","ResizeObserver","observe","window","addEventListener","pagesOnly","recordsOnly","stacked","containerClasses","classes","push","currentRange","perPageWithDefault","totalWithDefault","total","pageWithDefault","start","end","Math","min","nextRange","isArray","perPageIncrements","map","num","Number","trim","replace","split","prevRange","max","recordTypeWithDefault","recordType","loc","length","pages","ceil","disconnect","removeEventListener","renderPerPage","increments","sort","a","b","undefined","join","h","ref","el","onChange","display","render","onFirstPage","onLastPage","nextButtonLabel","prevButtonLabel","next","range","toLowerCase","key","class","current","toLocaleString","label","hidden","onClick","type","dispatchEvent","FocusEvent","hideLabel","optional","stopPropagation"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    display: flex;\n    width: 100%;\n}\n\n:host([alignment='right']) {\n    justify-content: flex-end;\n}\n\n:host([alignment='center']) {\n    justify-content: center;\n}\n\n:host([alignment='left']) {\n    justify-content: flex-start;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.container {\n    display: inline-flex;\n    column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n    align-items: center;\n    height: var-list(var-prefixer(pagination-height), 44px);\n\n    &.stacked {\n        flex-direction: column;\n        column-gap: 0;\n        row-gap: var-list(--tct-pagination-row-gap, --app-scale-2x, 10px);\n        height: auto;\n        align-items: stretch;\n\n        .description {\n            text-align: center;\n        }\n\n        .controls {\n            justify-content: center;\n        }\n\n        .per-page {\n            display: flex;\n            justify-content: center;\n        }\n\n        q2-select {\n            --tct-select-margin: 0;\n            width: var(--tct-pagination-perpage-width, 60%);\n        }\n    }\n}\n\n.controls {\n    display: flex;\n}\n\n.btn-group {\n    display: flex;\n    gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.input-display {\n    white-space: nowrap;\n}\n\n.input-display {\n    display: grid;\n    grid-template-columns: auto var(--tct-pagination-input-width, 50px) auto;\n    align-items: center;\n    gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n    &[hidden] {\n        display: none;\n    }\n}\n\n.input-wrapper {\n    height: var-list(var-prefixer(pagination-height), 44px);\n    display: flex;\n    align-items: center;\n}\n\nq2-btn {\n    --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n    --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n    --tct-btn-icon-hover-background: #{var-list(--tct-pagination-btn-hover-background, --app-gray-l3, #f2f2f2)};\n    --tct-icon-stroke-primary: #{var-list(--tct-pagination-btn-icon-stroke-primary, --app-gray, #747474)};\n    --tct-icon-stroke-secondary: #{var-list(--tct-pagination-btn-icon-stroke-secondary, --app-gray, #747474)};\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n    color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n    --tct-input-margin-top: 0;\n    --tct-input-margin-bottom: 0;\n    --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n    --tct-input-min-height: var(--tct-input-height);\n    --tct-input-align: center;\n}\n\nq2-select {\n    --tct-select-input-min-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    --tct-select-input-max-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    width: #{var-list(var-prefixer(pagination-perpage-width), 100%)};\n    min-width: #{var-list(var-prefixer(pagination-perpage-min-width), 110px)};\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Method,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\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"],"mappings":";;;;AAAA,MAAMA,IAAkB;;MCgBXC,IAAY;EADzB,WAAAC,CAAAC;;;;;wEA+BIC,KAASC,YAAgC;uJAIzCD,KAAQE,WAAY;IAsRpBF,KAASG,YAAG;MACR,OAAMC,aAAEA,GAAWC,kBAAEA,KAAqBL;MAC1C,MAAMM,IAAgBN,KAAKO,iBAAiBH,EAAYI;MACxDR,KAAKS,UAAUH;MACf,IAAIA,GAAe;MAEnBI,GAAU;QACN,MAAMC,IAA8BX,KAAKO,mBAAmBF,EAAiBG;QAC7E,IAAIG,GAA6B;QACjCX,KAAKO,iBAAiBF,EAAiBG;QACvCR,KAAKG;AAAW;AAClB;IAGNH,KAAAY,mBAAoBC;MAChB,OAAMC,YAAEA,GAAUC,YAAEA,KAAef;MACnCa,IAAOG,SAAS,GAAGH;MACnB,IAAII,MAAMJ,MAASA,IAAO,GAAG;QACzBA,IAAO;aACJ,IAAIA,IAAOC,GAAY;QAC1BD,IAAOC;;MAGX,IAAIC,EAAWG,UAAU,GAAGL,KAAQE,EAAWG,QAAQ,GAAGL;MAE1D,KAAKb,KAAKI,YAAYe,UAAU;QAC5BnB,KAAKa,OAAOA;;MAGhBb,KAAKoB,OAAOC,KAAK;QAAER;;AAAO;IAG9Bb,KAAAsB,sBAAuBC;MACnBvB,KAAKwB,UAAUD,EAAME,OAAOP,QAAQ;AAAC;AAsL5C;;;EA7aG,oBAAAQ;IACI1B,KAAK2B;;EAGT,iBAAAC;IACI5B,KAAK6B;IACL7B,KAAK8B;;EAGT,gBAAAC;IACI/B,KAAKO,iBAAiBP,KAAKK,iBAAiBG;IAE5CwB,EAAchC,KAAKI;;;;EAOvB,kBAAA6B,CAAmBV;;IACf,KAAKW,EAAmBX,GAAOvB,KAAKI,cAAc;IAClD,OAAM+B,kBAAEA,GAAgB9B,kBAAEA,GAAgBU,YAAEA,KAAef;IAC3D,IAAImC,GAAkB;OAClBC,IAAA/B,EAAiBgC,cAA2B,+BAAyB,QAAAD,WAAA,aAAAA,EAAEE;WACpE;MACHvB,EAAWuB;;;;;;;;;;;EAcnB,oBAAMC;IACF,MAAMC,IAASxC,KAAKyC;IACpB,IAAID,MAAA,QAAAA,WAAA,aAAAA,EAAQE,UAAU;IACtBF,EAAOG;;;;;;;SAUX,mBAAMC;IACF,MAAMJ,IAASxC,KAAK6C;IACpB,IAAIL,MAAA,QAAAA,WAAA,aAAAA,EAAQE,UAAU;IACtBF,EAAOG;;;;;;;SAUX,mBAAMG;IACF,MAAMN,IAASxC,KAAK+C;IACpB,IAAIP,MAAA,QAAAA,WAAA,aAAAA,EAAQE,UAAU;IACtBF,EAAOG;;;;;;;SAUX,uBAAMK;IACF,MAAMR,IAASxC,KAAKiD;IACpB,IAAIT,MAAA,QAAAA,WAAA,aAAAA,EAAQE,UAAU;IACtBF,EAAOG;;;;;;;;SAWX,iCAAMO,CAA4BhC;;IAC9B,IAAID,MAAMC,OAAWlB,KAAKmD,sBAAsBnD,KAAKoD,uBAAuBC,SAASnC,IAAQ;IAC7FlB,KAAKsD,cAAchB;IACnBtC,KAAKsD,cAAcX;IACnB,MAAMY,IAAUC,MAAMC,KAAKzD,KAAKsD,cAAcI,iBAAiB;KAC/DtB,IAAAmB,EAAQI,MAAKC,KAAUA,EAAO1C,UAAU,GAAGA,WAAU,QAAAkB,WAAA,aAAAA,EAAAO;;;;;;;;SAWzD,kBAAMkB,CAAa3C;;IACf,KAAKlB,KAAKe,cAAcE,MAAMC,MAAUA,IAAQ,KAAKA,IAAQlB,KAAKc,YAAY;KAC9EsB,IAAApC,KAAKe,gBAAY,QAAAqB,WAAA,aAAAA,EAAAE;IACjBtC,KAAKe,WAAWG,QAAQ,GAAGA;KAC3B4C,IAAA9D,KAAKe,gBAAY,QAAA+C,WAAA,aAAAA,EAAAC;;;;EAOrB,oBAAAjC;IACI,IAAI9B,KAAKE,UAAU;MACf,IAAIF,KAAKgE,gBAAgB;MACzBhE,KAAKgE,iBAAiB,IAAIC,gBAAe,MAAMjE,KAAKG;MACpDH,KAAKgE,eAAeE,QAAQlE,KAAKI;MACjC+D,OAAOC,iBAAiB,UAAUpE,KAAKG;WACpC;MACHH,KAAKS,UAAU;MACfT,KAAK2B;;;EAOb,iBAAAE;IACI,IAAI7B,KAAKqE,aAAarE,KAAKsE,eAAetE,KAAKuE,SAASvE,KAAKE,WAAW;;;;EAM5E,oBAAIsE;IACA,MAAMC,IAAU,EAAC;IACjB,IAAIzE,KAAKuE,SAASE,EAAQC,KAAK;IAC/B,OAAOD;;EAGX,gBAAIE;IACA,OAAQC,oBAAoBpD,GAASqD,kBAAkBC,GAAOC,iBAAiBlE,KAASb;IACxF,MAAMgF,IAAQF,IAAQ,KAAKjE,IAAO,KAAKW,IAAU,IAAI;IACrD,MAAMyD,IAAMC,KAAKC,IAAItE,IAAOW,GAASsD;IACrC,OAAO,GAAGE,OAAWC;;EAGzB,oBAAI9C;IACA,OAAOnC,KAAKS,WAAWT,KAAKsE,eAAetE,KAAKqE;;EAGpD,aAAIe;IACA,OAAQR,oBAAoBpD,GAASqD,kBAAkBC,GAAOC,iBAAiBlE,KAASb;IACxF,MAAMgF,IAAQnE,IAAOW,IAAU;IAC/B,MAAMyD,IAAMC,KAAKC,KAAKtE,IAAO,KAAKW,GAASsD;IAC3C,OAAO,GAAGE,OAAWC;;EAGzB,mBAAIF;IACA,OAAO/E,KAAK8E,QAAQ,IAAI9E,KAAKa,QAAQ,IAAI;;EAG7C,0BAAIuC;IACA,IAAII,MAAM6B,QAAQrF,KAAKsF,oBAAoB;MACvC,OAAOtF,KAAKsF,kBAAkBC,KAAIC,KAAOC,OAAOD;WAC7C,WAAWxF,KAAKsF,sBAAsB,UAAU;MACnD,OAAOtF,KAAKsF,kBACPI,OACAC,QAAQ,eAAe,IACvBC,MAAM,KACNL,KAAIC,KAAOC,OAAOD;WACpB;MACH,OAAO;;;EAIf,sBAAIZ;IACA,OAAO5E,KAAKwB,WAAW;;EAG3B,aAAIqE;IACA,OAAQjB,oBAAoBpD,GAASuD,iBAAiBlE,KAASb;IAC/D,MAAMgF,IAAQE,KAAKY,IAAI,IAAIjF,IAAO,KAAKW,IAAU;IACjD,MAAMyD,KAAOpE,IAAO,KAAKW;IACzB,OAAO,GAAGwD,OAAWC;;EAGzB,yBAAIc;IACA,OAAO/F,KAAKgG,cAAcC,EAAI;;EAGlC,qBAAI9C;;IACA,SAAOf,IAAApC,KAAKsF,uBAAmB,QAAAlD,WAAA,aAAAA,EAAA8D,UAAS;;EAG5C,cAAIpF;IACA,OAAMuD,WAAEA,GAAWQ,kBAAkBC,GAAOF,oBAAoBpD,GAAO2E,OAAEA,KAAUnG;IAEnF,IAAIqE,KAAa8B,MAAUlF,MAAMD,SAAS,GAAGmF,OAAW,OAAOA;IAE/D,OAAOjB,KAAKkB,KAAKtB,IAAQtD;;EAG7B,oBAAIqD;IACA,OAAO7E,KAAK8E,SAAS;;EAuCzB,oBAAAnD;;IACI,IAAI3B,KAAKgE,gBAAgB;OACrB5B,IAAApC,KAAKgE,oBAAgB,QAAA5B,WAAA,aAAAA,EAAAiE;MACrBrG,KAAKgE,iBAAiB;MACtBG,OAAOmC,oBAAoB,UAAUtG,KAAKG;;;;;EAOlD,aAAAoG;IACI,MAAMC,IAAaxG,KAAKoD,uBAAuBqD,MAAK,CAACC,GAAGC,MAAMD,IAAIC;IAClE,IAAI3G,KAAKwB,YAAYoF,WAAW5G,KAAKwB,UAAUgF,EAAW;IAC1DxG,KAAKsF,oBAAoB,IAAIkB,EAAWK,KAAK;IAC7C,OACIC,EACI;MAAAC,KAAKC,KAAOhH,KAAKsD,gBAAgB0D;MACjCC,UAAUjH,KAAKsB;MACfJ,OAAOlB,KAAKoD,uBAAuBC,SAASrD,KAAKwB,WAAW,GAAGxB,KAAKwB,YAAYoF;OAE/EJ,EAAWjB,KAAI/D,KACZsF,EAAA;MACI5F,OAAO,GAAGM;MACV0F,SAAS,GAAGjB,EAAI,qCAAqCzE;OACvD,GAAGyE,EAAI,qCAAqCzE;;EAM9D,MAAA2F;;IACI,OAAM9C,WACFA,GAASC,aACTA,GAAWnC,kBACXA,GACA4D,uBAAuBC,GAAUlF,YACjCA,GACA+D,kBAAkBC,GAClBC,iBAAiBlE,GAAI8D,cACrBA,GAAYS,WACZA,GAASS,WACTA,GAAS1C,mBACTA,KACAnD;IACJ,MAAMoH,IAAcvG,IAAO;IAC3B,MAAMwG,IAAaxG,MAASC;IAE5B,IAAIwG,IAA0BrB,EAAI;IAClC,IAAIsB,IAA0BtB,EAAI;IAClC,IAAI5B,GAAW;MACXkD,IAAkBtB,EAAI,uCAAuC;QAAEuB,MAAM3G,IAAO;QAAGiE,OAAOhE;;MACtFwG,IAAkBrB,EAAI,uCAAuC;QAAEuB,MAAM3G,IAAO;QAAGiE,OAAOhE;;WACnF,IAAIwD,GAAa;MACpBiD,IAAkBtB,EAAI,yCAAyC;QAC3DwB,OAAO5B;QACPG,YAAYA,EAAW0B;QACvB5C;;MAEJwC,IAAkBrB,EAAI,yCAAyC;QAC3DwB,OAAOrC;QACPY,YAAYA,EAAW0B;QACvB5C;;;IAIR,OACIgC,EAAA;MAAAa,KAAA;MACIC,OAAO5H,KAAKwE,iBAAiBqC,KAAK;MAClCE,KAAKC,KAAOhH,KAAKK,mBAAmB2G;MAAG,cAC3Bf,EAAI;OAEhBa,EAAA;MAAAa,KAAA;MACIC,OAAM;MACE;OAEPvD,IACK4B,EAAI,mCAAmC;MACnC4B,SAAShH;MACTiE,OAAOhE;SAEXmF,EAAI,yCAAyC;MACzCwB,OAAO9C;MACPqB,YAAYA,EAAW0B;MACvB5C,OAAOA,EAAMgD;SAG3BhB,EAAK;MAAAa,KAAA;MAAAC,OAAM;OACPd,EAAK;MAAAa,KAAA;MAAAC,OAAM;OACPd,EAAA;MAAAa,KAAA;MACIZ,KAAKC,KAAOhH,KAAKyC,eAAeuE;MAChCe,OAAO9B,EAAI;MACXvD,UAAU0E;MACVY,QAAQ7F;MACR8F,SAAS,MAAMjI,KAAKY,iBAAiB;MAAE,WAC/B;MAAc;OAGtBkG,EAAA;MAAAa,KAAA;MAASO,MAAK;SAElBpB,EAAA;MAAAa,KAAA;MACIZ,KAAKC,KAAOhH,KAAKiD,cAAc+D;MAC/Be,OAAOR;MACP7E,UAAU0E;MACVa,SAAS,MAAMjI,KAAKY,iBAAiBC,IAAO;MAAE,WACtC;MAAa;OAGrBiG,EAAA;MAAAa,KAAA;MAASO,MAAK;UAGtBpB,EAAA;MAAAa,KAAA;MACIC,OAAM;MACNI,QAAQ7F;OAER2E,EAAA;MAAAa,KAAA;MAAA,eAAkB;OAAQ1B,EAAI,oCAC9Ba,EACI;MAAAa,KAAA;MAAAC,OAAM;MACNK,SAAS,MAAMjI,KAAKe,WAAWoH,cAAc,IAAIC,WAAW;OAE5DtB,EAAA;MAAAa,KAAA;MACIZ,KAAKC,KAAOhH,KAAKe,aAAaiG;MAC9BkB,MAAK;MACLhH,OAAO,GAAGL;MACVsE,KAAK;MACLW,KAAK9F,KAAKc;MACVuH,WACA;MAAAC,UACA;MAAAP,OAAO,GAAG9B,EAAI,sCAAsCA,EAChD,qCACA,EAACnF,EAAWgH;MAEhBb,UAAU1F;QACNA,EAAMgH;QACNvI,KAAKY,iBAAiBW,EAAME,OAAOP;AAAM;MAC5C,WACO;MACR2G,SAAQ;SAGhBf,EAAA;MAAAa,KAAA;MAAA,eAAkB;OACb1B,EAAI,qCAAqC,EAACnF,EAAWgH,uBAG9DhB,EAAK;MAAAa,KAAA;MAAAC,OAAM;OACPd,EAAA;MAAAa,KAAA;MACIZ,KAAKC,KAAOhH,KAAK+C,cAAciE;MAC/Be,OAAOT;MACP5E,UAAU2E;MACVY,SAAS,MAAMjI,KAAKY,iBAAiBC,IAAO;MAAE,WACtC;MAAa;OAGrBiG,EAAA;MAAAa,KAAA;MAASO,MAAK;SAElBpB,EAAA;MAAAa,KAAA;MACIZ,KAAKC,KAAOhH,KAAK6C,cAAcmE;MAC/Be,OAAM;MACNrF,UAAU2E;MACVW,QAAQ7F;MACR8F,SAAS,MAAMjI,KAAKY,iBAAiBE;MAAW,WACxC;MAAa;OAGrBgG,EAAA;MAAAa,KAAA;MAASO,MAAK;WAI1BpB,EACI;MAAAa,KAAA;MAAAC,OAAM;MACNI,QAAQ7F,QAAqBC,IAAApC,KAAKsF,uBAAiB,QAAAlD,WAAA,aAAAA,EAAE8D;OAEpD/C,KAAqBnD,KAAKuG","ignoreList":[]}
+{"version":3,"names":["q2PaginationCss","Q2Pagination","constructor","hostRef","this","alignment","autoSize","disabled","checkSize","hostElement","containerElement","isOverflowing","containerWidth","clientWidth","isSmall","nextPaint","containerWidthHasNotChanged","handlePageChange","page","totalPages","inputField","parseInt","isNaN","value","onchange","change","emit","handlePerPageChange","event","perPage","detail","disconnectedCallback","removeResizeObserver","componentWillLoad","checkDisplayTypes","manageResizeObserver","componentDidLoad","overrideFocus","onHostElementFocus","isEventFromElement","isFullViewHidden","_a","querySelector","focus","clickFirstPage","button","firstPageBtn","click","clickLastPage","lastPageBtn","clickNextPage","nextPageBtn","clickPreviousPage","prevPageBtn","selectPerPageIncrementValue","showPerPageSelect","perPageIncrementsArray","includes","perPageSelect","options","Array","from","querySelectorAll","find","option","setPageValue","_b","blur","resizeObserver","ResizeObserver","observe","window","addEventListener","pagesOnly","recordsOnly","stacked","containerClasses","classes","push","currentRange","perPageWithDefault","totalWithDefault","total","pageWithDefault","start","end","Math","min","nextRange","isArray","perPageIncrements","map","num","Number","trim","replace","split","prevRange","max","recordTypeWithDefault","recordType","loc","length","pages","ceil","disconnect","removeEventListener","renderPerPage","increments","sort","a","b","undefined","join","h","ref","el","onChange","display","render","onFirstPage","onLastPage","nextButtonLabel","prevButtonLabel","next","range","toLowerCase","key","class","current","toLocaleString","label","hidden","onClick","type","dispatchEvent","FocusEvent","hideLabel","optional","stopPropagation"],"sources":["src/components/q2-pagination/q2-pagination.scss?tag=q2-pagination&encapsulation=shadow","src/components/q2-pagination/q2-pagination.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    display: flex;\n    width: 100%;\n}\n\n:host([alignment='right']) {\n    justify-content: flex-end;\n}\n\n:host([alignment='center']) {\n    justify-content: center;\n}\n\n:host([alignment='left']) {\n    justify-content: flex-start;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.container {\n    display: inline-flex;\n    column-gap: var-list(var-prefixer(pagination-column-gap), --app-scale-2x, 10px);\n    align-items: center;\n    height: var-list(var-prefixer(pagination-height), 44px);\n\n    &.stacked {\n        flex-direction: column;\n        column-gap: 0;\n        row-gap: var-list(--tct-pagination-row-gap, --app-scale-2x, 10px);\n        height: auto;\n        align-items: stretch;\n\n        .description {\n            text-align: center;\n        }\n\n        .controls {\n            justify-content: center;\n        }\n\n        .per-page {\n            display: flex;\n            justify-content: center;\n        }\n\n        q2-select {\n            --tct-select-margin: 0;\n            width: var(--tct-pagination-perpage-width, 60%);\n        }\n    }\n}\n\n.controls {\n    display: flex;\n}\n\n.btn-group {\n    display: flex;\n    gap: var-list(var-prefixer(pagination-btn-gap), 0);\n}\n\n.description,\n.input-display {\n    white-space: nowrap;\n}\n\n.input-display {\n    display: grid;\n    grid-template-columns: auto var(--tct-pagination-input-width, 50px) auto;\n    align-items: center;\n    gap: var-list(var-prefixer(pagination-controls-gap), --app-scale-1x, 5px);\n\n    &[hidden] {\n        display: none;\n    }\n}\n\n.input-wrapper {\n    height: var-list(var-prefixer(pagination-height), 44px);\n    display: flex;\n    align-items: center;\n}\n\nq2-btn {\n    --tct-btn-border-radius: #{var-list(var-prefixer(pagination-btn-border-radius))};\n    --tct-btn-border: #{var-list(var-prefixer(pagination-btn-border))};\n    --tct-btn-icon-hover-background: #{var-list(--tct-pagination-btn-hover-background, --app-gray-l3, #f2f2f2)};\n    --tct-icon-stroke-primary: #{var-list(--tct-pagination-btn-icon-stroke-primary, --app-gray, #747474)};\n    --tct-icon-stroke-secondary: #{var-list(--tct-pagination-btn-icon-stroke-secondary, --app-gray, #747474)};\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(var-prefixer(pagination-icon-size), 12px)};\n    color: var-list(var-prefixer(pagination-icon-color), --t-text, #4d4d4d);\n}\n\nq2-input {\n    --tct-input-margin-top: 0;\n    --tct-input-margin-bottom: 0;\n    --tct-input-height: #{var-list(var-prefixer(pagination-input-height), 30px)};\n    --tct-input-min-height: var(--tct-input-height);\n    --tct-input-align: center;\n}\n\nq2-select {\n    --tct-select-input-min-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    --tct-select-input-max-height: #{var-list(var-prefixer(pagination-select-height), 30px)};\n    width: #{var-list(var-prefixer(pagination-perpage-width), 100%)};\n    min-width: #{var-list(var-prefixer(pagination-perpage-min-width), 110px)};\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Watch,\n    Listen,\n    Element,\n    Method,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus } from 'src/utils';\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"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-pill.entry.js

@@ -359,19 +359,19 @@ const v = class {
     if (t || i) r.push("has-icon");
     if (t) r.push("has-options");
     return o("click-elsewhere", {
-      key: "90d7ef86d7225825885e94bcba9a3086e267154a",
+      key: "e7808292f13c5065a372be65944d789e6908a551",
       onChange: this.onClickElsewhere
     }, o("div", {
-      key: "b62546e4578028fd8d36104866894892085dc8b1",
+      key: "c9708498aa93476eff3cc68b3ef741c31c8ad9b1",
       class: r.join(" ")
     }, o("div", {
-      key: "fb123e4a87909cca94eec53a91099d175b262b56",
+      key: "9b756d3fc7dcf8209a4ecf880611a405947ef2b4",
       class: "btn-height-wrapper",
       ref: t => this.primaryBtnWrapper = t,
       onClick: this.handleWrapperClick,
       tabIndex: -1
     }, o("button", {
-      key: "03315bc2d8d45a409cb7c4327f1cf30304fa1837",
+      key: "5167564d23175ea50dcff0c12d0bf22c691c863a",
       class: "btn-primary",
       "test-id": "btn-control",
       type: "button",
@@ -387,7 +387,7 @@ const v = class {
       "aria-label": `${this.buttonContent}${!t && i ? ` ${s("tecton.element.pill.active")}` : ""}`,
       "aria-describedby": t && "option-description" || undefined
     }, this.truncatedButtonContent)), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && o("q2-popover", {
-      key: "48f236ca6152cfd816eccbcdb14789e928e21424",
+      key: "df99bf0be930209e56de6e0b091e6847643df41d",
       ref: t => this.popoverElement = t,
       controlElement: this.primaryBtn,
       open: this.open,
@@ -397,20 +397,20 @@ const v = class {
       align: this.popoverAlignment,
       onFocusout: this.handleFocusOut
     }, o("div", {
-      key: "136f441b28ecb20ed9b85f25add811d6fdcf4aff",
+      key: "da8d529eb84d83fc126aff7d8f7af5cc8c28090b",
       class: "popover-content"
     }, o("div", {
-      key: "6a8b06aa9d78a72d543d97d69a81880474bc607f",
+      key: "1c8edb11248927a81138333abcfc7937c7c8b4e3",
       ref: t => this.popoverTopContainer = t,
       class: "popover-top-container",
       tabindex: "-1",
       hidden: !this.hasPopoverTop,
       onKeyDown: this.handleKeydown
     }, o("slot", {
-      key: "5e792494a0f541e761fec06011ca4644fa1c200b",
+      key: "6969d464fdee4f40f2753c0deed463c1b1de2bf1",
       name: "popover-top"
     })), o("q2-option-list", {
-      key: "3c078dd97a9ec41a4e3af50eda6f1f16a26e0291",
+      key: "b6d68ff335503eb7e2b50d210a57d94b1a66f93d",
       type: "listbox",
       ref: t => this.optionList = t,
       id: "option-list",
@@ -421,16 +421,16 @@ const v = class {
       onPopoverState: this.onPopoverState,
       label: s("tecton.element.optionList.label", [ this.optionListLabel ])
     }, o("slot", {
-      key: "9b55d9e81a2b5713391d8884090f7588a9b54701"
+      key: "2995021179f4597fb47796b16ddb5db5b26b1a60"
     })), o("div", {
-      key: "bf9e18b0f0533795678882fe3e2017c294efaf3e",
+      key: "8f916f36da1a3809f8003659789a1d3792394f11",
       ref: t => this.popoverBottomContainer = t,
       class: "popover-bottom-container",
       tabindex: "-1",
       hidden: !this.hasPopoverBottom,
       onKeyDown: this.handleKeydown
     }, o("slot", {
-      key: "1c4410a3a03fe9b5280d34111b83767715f9bd77",
+      key: "ec1a18a9651cca88e07c486d9b886ffc8c833277",
       name: "popover-bottom"
     })))));
   }

package/dist/q2-tecton-elements/q2-relative-time.entry.js

@@ -141,7 +141,7 @@ const o = class {
   render() {
     const {shouldShow: e, displayedMessage: s} = this;
     return t(i, {
-      key: "b7d36d01109176c2c77edf737093c94b3d3a897f"
+      key: "28fd755c61e0bac9a47f06496d90ddcee8034caa"
     }, e ? t("time", {
       dateTime: s
     }, s) : null);

package/dist/q2-tecton-elements/q2-section-container.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-section-container.entry.esm.js","sources":["src/components/q2-section-container/q2-section-container.tsx"],"sourcesContent":["import { Component, Element, ComponentInterface, h, Prop, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-section-container', shadow: true })\nexport class Q2SectonContainer implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Determines if a single or multiple sections can be open at a time.\n     */\n    @Prop({ mutable: true })\n    openMode: 'multiple' | 'single' = 'single';\n\n    /**\n     * Determines which section starts open.\n     */\n    @Prop()\n    openPaneIndex: number = 0;\n\n    /**\n     * Determines if all sections inside the section-container start opened or closed.\n     *\n     * @info\n     * If you have openMode set to multiple, all panes will start open.\n     */\n    @Prop({ mutable: true })\n    startAllOpen: boolean = false;\n\n    /**\n     * Determines if the section-container starts opened or closed.\n     *\n     * @info\n     * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.\n     * If you have openMode set to multiple, you can also select startAllOpen to open all panes.\n     * @warning\n     * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.\n     */\n    @Prop({ mutable: true })\n    startOpen: boolean = true;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.filterSlottedElements();\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('openMode')\n    @Watch('openPaneIndex')\n    @Watch('startAllOpen')\n    @Watch('startOpen')\n    handleOpenStateChange() {\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach(el => {\n            if ('Q2-SECTION' !== el.tagName) {\n                el.remove();\n            }\n        });\n    };\n\n    fixSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach((el, i) => {\n            el.setAttribute('collapsible', '');\n            if (this.openMode === 'single') {\n                el.addEventListener('change', event => {\n                    const target = event.target as HTMLElement;\n                    const children = Array.from(target.parentElement.children);\n                    const siblings = children.filter(child => child !== target);\n                    siblings.forEach(el => el.setAttribute('expanded', 'false'));\n                });\n            }\n\n            if (!el.getAttribute('label')) {\n                el.setAttribute('label', 'Section ' + (i + 1));\n            }\n\n            if (!this.startOpen) {\n                el.removeAttribute('expanded');\n            } else {\n                if (this.openPaneIndex === i || (this.openMode === 'multiple' && this.startAllOpen)) {\n                    el.setAttribute('expanded', '');\n                } else {\n                    el.removeAttribute('expanded');\n                }\n            }\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => <slot />;\n\n    // #endregion\n}\n"],"names":[],"mappings":";;MAGa,iBAAiB,GAAA,MAAA;AAD9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUI;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAA0B,QAAQ;AAE1C;;AAEG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAEzB;;;;;AAKG;AAEH,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAE7B;;;;;;;;AAQG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;;;AAwBzB,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACzB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AAC/C,gBAAA,IAAI,YAAY,KAAK,EAAE,CAAC,OAAO,EAAE;oBAC7B,EAAE,CAAC,MAAM,EAAE;;AAEnB,aAAC,CAAC;AACN,SAAC;AAED,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AACtB,YAAA,IAAI,EAAE,iBAAiB,IAAI,MAAM,CAAC;gBAAE;AACpC,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAI;AACpD,gBAAA,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AAClC,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC5B,oBAAA,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,IAAG;AAClC,wBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,wBAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC1D,wBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;AAC3D,wBAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAChE,qBAAC,CAAC;;gBAGN,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE;AAC3B,oBAAA,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;;AAGlD,gBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACjB,oBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;qBAC3B;AACH,oBAAA,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,KAAK,IAAI,CAAC,QAAQ,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE;AACjF,wBAAA,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;;yBAC5B;AACH,wBAAA,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;;;AAG1C,aAAC,CAAC;AACN,SAAC;;;AAKD,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,eAAQ;AAG1B;;;IA/DG,iBAAiB,GAAA;QACb,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,kBAAkB,EAAE;;;;IAU7B,qBAAqB,GAAA;QACjB,IAAI,CAAC,kBAAkB,EAAE;;;;;;;;;;;;;"}

package/dist/q2-tecton-elements/q2-section-container.entry.js

@@ -0,0 +1,95 @@
+import { r as e, h as t, g as n } from "./index-CGkHOjh1.js";
+
+const s = class {
+  constructor(n) {
+    e(this, n);
+    // #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((e => {
+        if ("Q2-SECTION" !== e.tagName) {
+          e.remove();
+        }
+      }));
+    };
+    this.fixSlottedElements = () => {
+      if (!("HTMLSlotElement" in window)) return;
+      Array.from(this.hostElement.children).forEach(((e, t) => {
+        e.setAttribute("collapsible", "");
+        if (this.openMode === "single") {
+          e.addEventListener("change", (e => {
+            const t = e.target;
+            const n = Array.from(t.parentElement.children);
+            const s = n.filter((e => e !== t));
+            s.forEach((e => e.setAttribute("expanded", "false")));
+          }));
+        }
+        if (!e.getAttribute("label")) {
+          e.setAttribute("label", "Section " + (t + 1));
+        }
+        if (!this.startOpen) {
+          e.removeAttribute("expanded");
+        } else {
+          if (this.openPaneIndex === t || this.openMode === "multiple" && this.startAllOpen) {
+            e.setAttribute("expanded", "");
+          } else {
+            e.removeAttribute("expanded");
+          }
+        }
+      }));
+    };
+    // #endregion
+    // #region Render Methods
+        this.render = () => t("slot", null);
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    this.filterSlottedElements();
+    this.fixSlottedElements();
+  }
+  // #endregion
+  // #region Watchers
+  handleOpenStateChange() {
+    this.fixSlottedElements();
+  }
+  get hostElement() {
+    return n(this);
+  }
+  static get watchers() {
+    return {
+      openMode: [ "handleOpenStateChange" ],
+      openPaneIndex: [ "handleOpenStateChange" ],
+      startAllOpen: [ "handleOpenStateChange" ],
+      startOpen: [ "handleOpenStateChange" ]
+    };
+  }
+};
+
+export { s as q2_section_container };
+//# sourceMappingURL=q2-section-container.entry.esm.js.map
+//# sourceMappingURL=q2-section-container.entry.js.map

package/dist/q2-tecton-elements/q2-section-container.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Q2SectonContainer","constructor","hostRef","this","openMode","openPaneIndex","startAllOpen","startOpen","filterSlottedElements","window","Array","from","hostElement","children","forEach","el","tagName","remove","fixSlottedElements","i","setAttribute","addEventListener","event","target","parentElement","siblings","filter","child","getAttribute","removeAttribute","render","h","componentWillLoad","handleOpenStateChange"],"sources":["src/components/q2-section-container/q2-section-container.tsx"],"sourcesContent":["import { Component, Element, ComponentInterface, h, Prop, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-section-container', shadow: true })\nexport class Q2SectonContainer implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Determines if a single or multiple sections can be open at a time.\n     */\n    @Prop({ mutable: true })\n    openMode: 'multiple' | 'single' = 'single';\n\n    /**\n     * Determines which section starts open.\n     */\n    @Prop()\n    openPaneIndex: number = 0;\n\n    /**\n     * Determines if all sections inside the section-container start opened or closed.\n     *\n     * @info\n     * If you have openMode set to multiple, all panes will start open.\n     */\n    @Prop({ mutable: true })\n    startAllOpen: boolean = false;\n\n    /**\n     * Determines if the section-container starts opened or closed.\n     *\n     * @info\n     * If you have openMode set to single, the pane specified in openPaneIndex will start open, or the first pane if unspecified.\n     * If you have openMode set to multiple, you can also select startAllOpen to open all panes.\n     * @warning\n     * OpenMode = multiple and StartAllOpen=true does not work correctly inside of a q2-tab that starts closed.\n     */\n    @Prop({ mutable: true })\n    startOpen: boolean = true;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.filterSlottedElements();\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('openMode')\n    @Watch('openPaneIndex')\n    @Watch('startAllOpen')\n    @Watch('startOpen')\n    handleOpenStateChange() {\n        this.fixSlottedElements();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach(el => {\n            if ('Q2-SECTION' !== el.tagName) {\n                el.remove();\n            }\n        });\n    };\n\n    fixSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        Array.from(this.hostElement.children).forEach((el, i) => {\n            el.setAttribute('collapsible', '');\n            if (this.openMode === 'single') {\n                el.addEventListener('change', event => {\n                    const target = event.target as HTMLElement;\n                    const children = Array.from(target.parentElement.children);\n                    const siblings = children.filter(child => child !== target);\n                    siblings.forEach(el => el.setAttribute('expanded', 'false'));\n                });\n            }\n\n            if (!el.getAttribute('label')) {\n                el.setAttribute('label', 'Section ' + (i + 1));\n            }\n\n            if (!this.startOpen) {\n                el.removeAttribute('expanded');\n            } else {\n                if (this.openPaneIndex === i || (this.openMode === 'multiple' && this.startAllOpen)) {\n                    el.setAttribute('expanded', '');\n                } else {\n                    el.removeAttribute('expanded');\n                }\n            }\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render = () => <slot />;\n\n    // #endregion\n}\n"],"mappings":";;MAGaA,IAAiB;EAD9B,WAAAC,CAAAC;;;;;;eAcIC,KAAQC,WAA0B;;;eAMlCD,KAAaE,gBAAW;;;;;;eASxBF,KAAYG,eAAY;;;;;;;;;eAYxBH,KAASI,YAAY;;;QAwBrBJ,KAAqBK,wBAAG;MACpB,MAAM,qBAAqBC,SAAS;MACpCC,MAAMC,KAAKR,KAAKS,YAAYC,UAAUC,SAAQC;QAC1C,IAAI,iBAAiBA,EAAGC,SAAS;UAC7BD,EAAGE;;;AAET;IAGNd,KAAkBe,qBAAG;MACjB,MAAM,qBAAqBT,SAAS;MACpCC,MAAMC,KAAKR,KAAKS,YAAYC,UAAUC,SAAQ,CAACC,GAAII;QAC/CJ,EAAGK,aAAa,eAAe;QAC/B,IAAIjB,KAAKC,aAAa,UAAU;UAC5BW,EAAGM,iBAAiB,WAAUC;YAC1B,MAAMC,IAASD,EAAMC;YACrB,MAAMV,IAAWH,MAAMC,KAAKY,EAAOC,cAAcX;YACjD,MAAMY,IAAWZ,EAASa,QAAOC,KAASA,MAAUJ;YACpDE,EAASX,SAAQC,KAAMA,EAAGK,aAAa,YAAY;AAAS;;QAIpE,KAAKL,EAAGa,aAAa,UAAU;UAC3Bb,EAAGK,aAAa,SAAS,cAAcD,IAAI;;QAG/C,KAAKhB,KAAKI,WAAW;UACjBQ,EAAGc,gBAAgB;eAChB;UACH,IAAI1B,KAAKE,kBAAkBc,KAAMhB,KAAKC,aAAa,cAAcD,KAAKG,cAAe;YACjFS,EAAGK,aAAa,YAAY;iBACzB;YACHL,EAAGc,gBAAgB;;;;AAG7B;;;QAMN1B,KAAA2B,SAAS,MAAMC,EAAA;AAGlB;;;EA/DG,iBAAAC;IACI7B,KAAKK;IACLL,KAAKe;;;;EAUT,qBAAAe;IACI9B,KAAKe","ignoreList":[]}