npm - q2-tecton-elements - Versions diffs - 1.54.5 → 1.55.1 - Mend

q2-tecton-elements 1.54.5 → 1.55.1

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

Files changed (559) hide show

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

@@ -14,15 +14,6 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
         this.tctClick = createEvent(this, "tctClick", 7);
         // #endregion
         // #region Local Methods
-        this.handleTextContent = async () => {
-            if (this.multiline)
-                return;
-            const textContent = await getAllText(this.hostElement);
-            if (this.display === textContent)
-                return;
-            if (this.display && !textContent)
-                this.hostElement.textContent = loc(this.display);
-        };
         this.initDisplay = async () => {
             if (this.multiline)
                 return;
@@ -30,9 +21,11 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
             if (this.display)
                 this.displayProvidedAtInit = true;
             this.display = !!this.display ? loc(this.display) : textContent;
-            await this.handleTextContent();
+            this.setTextContent();
         };
         this.initMutationObserver = () => {
+            if (!('MutationObserver' in window))
+                return;
             const observer = new MutationObserver(this.mutationHandler);
             observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });
             this.mutationObserver = observer;
@@ -44,6 +37,12 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
             if (!this.displayProvidedAtInit)
                 this.display = allTextContent;
         };
+        this.setTextContent = () => {
+            const hasLoc = !!this.hostElement.querySelector('q2-loc');
+            if (this.multiline || hasLoc)
+                return;
+            this.hostElement.textContent = loc(this.display);
+        };
         this._multiSelectHidden = false;
         this.active = undefined;
         this.disabled = undefined;
@@ -67,26 +66,22 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
         this.initDisplay();
     }
     componentDidLoad() {
-        if ('MutationObserver' in window)
-            this.initMutationObserver();
+        this.initMutationObserver();
     }
     // #endregion
     // #region Watchers
-    async separatorChangedHandler(separator) {
+    displayChangedHandler() {
+        this.display = loc(this.display);
+        this.setTextContent();
+        this.displayChanged.emit({ display: this.display, value: this.value });
+    }
+    separatorChangedHandler(separator) {
         if (!separator)
             return;
         this.role = 'separator';
     }
-    async displayChangedHandler() {
-        this.display = loc(this.display);
-        await this.handleTextContent();
-        this.displayChanged.emit({ display: this.display, value: this.value });
-    }
     // #endregion
     // #region Render Methods
-    renderSeparator() {
-        return h("div", { class: "separator" });
-    }
     renderOption() {
         const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
@@ -105,13 +100,16 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
                 }
             } }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
     }
+    renderSeparator() {
+        return h("div", { class: "separator" });
+    }
     render() {
         return this.separator ? this.renderSeparator() : this.renderOption();
     }
     get hostElement() { return this; }
     static get watchers() { return {
-        "separator": ["separatorChangedHandler"],
-        "display": ["displayChangedHandler"]
+        "display": ["displayChangedHandler"],
+        "separator": ["separatorChangedHandler"]
     }; }
     static get style() { return Q2OptionStyle0; }
 }, [1, "q2-option", {
@@ -126,8 +124,8 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
         "separator": [516],
         "value": [513]
     }, undefined, {
-        "separator": ["separatorChangedHandler"],
-        "display": ["displayChangedHandler"]
+        "display": ["displayChangedHandler"],
+        "separator": ["separatorChangedHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

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

	@@ -1 +1 @@
1	- {"file":"q2-option2.js","mappings":"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","names":[],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([separator]):not([separator='false'])) {\n --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n padding: var-list(var-prefixer(option-padding), --comp-padding);\n min-height: 44px;\n align-items: center;\n cursor: pointer;\n grid-template-columns:\n var(--comp-selected-icon-size)\n 1fr;\n align-items: center;\n grid-template-areas: 'icon content';\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:not([separator]):not([separator='false']):hover),\n:host([active]) {\n position: relative;\n z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n --comp-selected-icon-size: #{var-list(\n var-prefixer(option-selected-multiline-icon-size),\n var-prefixer(option-selected-icon-size),\n 26px\n )};\n}\n\n:host([_no-select]) {\n grid-template-columns: 1fr;\n grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n cursor: not-allowed;\n opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n pointer-events: none;\n}\n\n:host([aria-hidden]) {\n display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n display: grid;\n}\n\n:host(:not([aria-disabled]):not([separator]):not([separator='false']):hover),\n:host([active]),\n:host(:focus) {\n background: var-list(\n --tct-option-active-background,\n --tct-option-active-bg,\n --tct-gray-14,\n --t-gray-14,\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n box-shadow: var-list(\n --tct-option-focus-box-shadow,\n --const-inset-double-focus-ring,\n unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n ) !important;\n}\n\nq2-icon {\n grid-area: icon;\n --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n display: block;\n grid-area: content;\n\n :host(:not([multiline])) & {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n.separator {\n --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n // #region Own Properties\n\n displayProvidedAtInit: boolean;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n _multiSelectHidden: boolean = false;\n\n /*\n Used by q2-option-list to indicate the option is active\n * @private\n /\n @Prop({ reflect: true })\n active: boolean;\n\n /* Disables the option. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Used by consuming elements to disable all options in the group\n * @private\n /\n @Prop({ reflect: true })\n disabledGroup: boolean;\n\n /\n The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n display: string;\n\n /\n Used by consuming elements to enable multiline content support\n * @private\n /\n @Prop({ reflect: true })\n multiline: boolean;\n\n /\n Used by q2-option-list to set a role on the option\n * @type {('option' \| 'menuitem' \| 'separator')}\n * @private\n /\n @Prop({ reflect: true, mutable: true })\n role: string = 'option';\n\n /\n Used by q2-option-list to indicate the option is selected\n * @private\n /\n @Prop({ reflect: true })\n selected: boolean;\n\n /\n Renders a line in the item instead of text.\n * Click events from these items will not have details provided.\n * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n /\n @Prop({ reflect: true })\n separator: boolean;\n\n /* Serves as the option's value. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Used by consuming elements to indicate the display value of the option has changed.\n * @private\n /\n @Event()\n displayChanged: EventEmitter<{ value: string; display: string }>;\n\n /\n Is emitted when the option is clicked.\n */\n @Event()\n tctClick: EventEmitter<{ type: 'select' \| 'remove'; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n this.separatorChangedHandler(this.separator);\n this.initDisplay();\n }\n\n componentDidLoad() {\n if ('MutationObserver' in window) this.initMutationObserver();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('separator')\n async separatorChangedHandler(separator: boolean) {\n if (!separator) return;\n this.role = 'separator';\n }\n\n @Watch('display')\n async displayChangedHandler() {\n this.display = loc(this.display);\n await this.handleTextContent();\n this.displayChanged.emit({ display: this.display, value: this.value });\n }\n\n // #endregion\n // #region Local Methods\n\n handleTextContent = async () => {\n if (this.multiline) return;\n const textContent = await getAllText(this.hostElement);\n if (this.display === textContent) return;\n if (this.display && !textContent) this.hostElement.textContent = loc(this.display);\n };\n\n initDisplay = async () => {\n if (this.multiline) return;\n const textContent = await getAllText(this.hostElement);\n if (this.display) this.displayProvidedAtInit = true;\n this.display = !!this.display ? loc(this.display) : textContent;\n await this.handleTextContent();\n };\n\n initMutationObserver = () => {\n const observer = new MutationObserver(this.mutationHandler);\n observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n this.mutationObserver = observer;\n };\n\n mutationHandler = async () => {\n const allTextContent = await getAllText(this.hostElement);\n if (this.display === allTextContent \|\| this.multiline) return;\n if (!this.displayProvidedAtInit) this.display = allTextContent;\n };\n\n // #endregion\n // #region Render Methods\n\n renderSeparator() {\n return <div class=\"separator\"></div>;\n }\n\n renderOption() {\n const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n const isDisabled = disabled \|\| disabledGroup;\n return (\n <Host\n tabindex=\"-1\"\n aria-disabled={isDisabled ? 'true' : undefined}\n aria-selected={`${!!selected}`}\n aria-hidden={_multiSelectHidden ? 'true' : undefined}\n display={loc(display)}\n onClick={() => {\n if (isDisabled) return;\n this.tctClick.emit({ type: 'select', value: this.value });\n }}\n onKeydown={(event: KeyboardEvent) => {\n if (isDisabled) return;\n if (event.key === 'Enter' \|\| event.key === ' ') {\n setTimeout(() => {\n this.tctClick.emit({ type: 'select', value: this.value });\n }, 1);\n\n event.preventDefault();\n }\n }}\n >\n {this.selected && <q2-icon type=\"checkmark\" />}\n <div class=\"content\">\n <slot />\n </div>\n </Host>\n );\n }\n\n render() {\n return this.separator ? this.renderSeparator() : this.renderOption();\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-option2.js","mappings":"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","names":[],"sources":["src/components/q2-option/q2-option.scss?tag=q2-option&encapsulation=shadow","src/components/q2-option/q2-option.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host(:not([separator]):not([separator='false'])) {\n --comp-padding: #{0 var-list(--app-scale-2x, 10px)};\n --comp-selected-icon-size: #{var-list(var-prefixer(option-selected-icon-size), --tct-scale-3, --app-scale-3x, 15px)};\n padding: var-list(var-prefixer(option-padding), --comp-padding);\n min-height: 44px;\n align-items: center;\n cursor: pointer;\n grid-template-columns:\n var(--comp-selected-icon-size)\n 1fr;\n align-items: center;\n grid-template-areas: 'icon content';\n gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n}\n\n:host(:focus),\n:host(:not([separator]):not([separator='false']):hover),\n:host([active]) {\n position: relative;\n z-index: 1; // Puts the option above any scroll shadows on the `q2-action-sheet`\n}\n\n:host([multiline]) {\n --comp-padding: #{var-list(--app-scale-2, 10px) var-list(--app-scale-2, 10px)};\n --comp-selected-icon-size: #{var-list(\n var-prefixer(option-selected-multiline-icon-size),\n var-prefixer(option-selected-icon-size),\n 26px\n )};\n}\n\n:host([_no-select]) {\n grid-template-columns: 1fr;\n grid-template-areas: 'content';\n}\n\n:host([aria-disabled]) {\n cursor: not-allowed;\n opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n pointer-events: none;\n}\n\n:host([aria-hidden]) {\n display: none;\n}\n\n:host(:not([hidden]):not([aria-hidden])) {\n display: grid;\n}\n\n:host(:not([aria-disabled]):not([separator]):not([separator='false']):hover),\n:host([active]),\n:host(:focus) {\n background: var-list(\n --tct-option-active-background,\n --tct-option-active-bg,\n --tct-gray-14,\n --t-gray-14,\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: var(--tct-option-active-color, inherit);\n}\n\n:host(:focus) {\n box-shadow: var-list(\n --tct-option-focus-box-shadow,\n --const-inset-double-focus-ring,\n unquote('inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC))')\n ) !important;\n}\n\nq2-icon {\n grid-area: icon;\n --tct-icon-size: var(--comp-selected-icon-size);\n}\n\n.content {\n display: block;\n grid-area: content;\n\n :host(:not([multiline])) & {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n.separator {\n --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n border-bottom: 1px solid var-list(--tct-dropdown-item-separator-color --t-gray-11 #cccccc);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n // #region Own Properties\n\n displayProvidedAtInit: boolean;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n _multiSelectHidden: boolean = false;\n\n /*\n Used by q2-option-list to indicate the option is active\n * @private\n /\n @Prop({ reflect: true })\n active: boolean;\n\n /* Disables the option. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Used by consuming elements to disable all options in the group\n * @private\n /\n @Prop({ reflect: true })\n disabledGroup: boolean;\n\n /\n The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n display: string;\n\n /\n Used by consuming elements to enable multiline content support\n * @private\n /\n @Prop({ reflect: true })\n multiline: boolean;\n\n /\n Used by q2-option-list to set a role on the option\n * @type {('option' \| 'menuitem' \| 'separator')}\n * @private\n /\n @Prop({ reflect: true, mutable: true })\n role: string = 'option';\n\n /\n Used by q2-option-list to indicate the option is selected\n * @private\n /\n @Prop({ reflect: true })\n selected: boolean;\n\n /\n Renders a line in the item instead of text.\n * Click events from these items will not have details provided.\n * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n /\n @Prop({ reflect: true })\n separator: boolean;\n\n /* Serves as the option's value. /\n @Prop({ reflect: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Used by consuming elements to indicate the display value of the option has changed.\n * @private\n /\n @Event()\n displayChanged: EventEmitter<{ value: string; display: string }>;\n\n /\n Is emitted when the option is clicked.\n */\n @Event()\n tctClick: EventEmitter<{ type: 'select' \| 'remove'; value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n this.separatorChangedHandler(this.separator);\n this.initDisplay();\n }\n\n componentDidLoad() {\n this.initMutationObserver();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('display')\n displayChangedHandler() {\n this.display = loc(this.display);\n this.setTextContent();\n this.displayChanged.emit({ display: this.display, value: this.value });\n }\n\n @Watch('separator')\n separatorChangedHandler(separator: boolean) {\n if (!separator) return;\n this.role = 'separator';\n }\n\n // #endregion\n // #region Local Methods\n\n initDisplay = async () => {\n if (this.multiline) return;\n const textContent = await getAllText(this.hostElement);\n if (this.display) this.displayProvidedAtInit = true;\n this.display = !!this.display ? loc(this.display) : textContent;\n this.setTextContent();\n };\n\n initMutationObserver = () => {\n if (!('MutationObserver' in window)) return;\n const observer = new MutationObserver(this.mutationHandler);\n observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n this.mutationObserver = observer;\n };\n\n mutationHandler = async () => {\n const allTextContent = await getAllText(this.hostElement);\n if (this.display === allTextContent \|\| this.multiline) return;\n if (!this.displayProvidedAtInit) this.display = allTextContent;\n };\n\n setTextContent = () => {\n const hasLoc: boolean = !!this.hostElement.querySelector('q2-loc');\n if (this.multiline \|\| hasLoc) return;\n this.hostElement.textContent = loc(this.display);\n };\n\n // #endregion\n // #region Render Methods\n\n renderOption() {\n const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n const isDisabled = disabled \|\| disabledGroup;\n return (\n <Host\n tabindex=\"-1\"\n aria-disabled={isDisabled ? 'true' : undefined}\n aria-selected={`${!!selected}`}\n aria-hidden={_multiSelectHidden ? 'true' : undefined}\n display={loc(display)}\n onClick={() => {\n if (isDisabled) return;\n this.tctClick.emit({ type: 'select', value: this.value });\n }}\n onKeydown={(event: KeyboardEvent) => {\n if (isDisabled) return;\n if (event.key === 'Enter' \|\| event.key === ' ') {\n setTimeout(() => {\n this.tctClick.emit({ type: 'select', value: this.value });\n }, 1);\n\n event.preventDefault();\n }\n }}\n >\n {this.selected && <q2-icon type=\"checkmark\" />}\n <div class=\"content\">\n <slot />\n </div>\n </Host>\n );\n }\n\n renderSeparator() {\n return <div class=\"separator\"></div>;\n }\n\n render() {\n return this.separator ? this.renderSeparator() : this.renderOption();\n }\n\n // #endregion\n}\n"],"version":3}

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

@@ -274,7 +274,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 total,
             });
         }
-        return (h("nav", { key: 'd91e1f0ba5a239c95fd16bda94ef1e614e3c49be', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'aeb52cf10ec37a0ed9459660b9dad1df86e06ca1', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '81ad5cb26deb25850937b8cc9532c085c7ae7a7a', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '80e730df9072d5d807d21fa589bb743dfc3c47c1', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -283,10 +283,10 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '24c8e8166dc90238960ae3afad0ff36eac4af66c', class: "btn-group" }, h("q2-btn", { key: '7be7b963cba6c9dd5b45bced73085ff495fd4130', 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: '7d58766f3d7307bcfb193d981c95895b58c2bbfb', type: "chevron-double-left" })), h("q2-btn", { key: 'b016eda2499b36b7fd82b84d39357dfa8c9f8719', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'd1bed177625bf672d109fbc8a127961818dd3364', type: "chevron-left" }))), h("div", { key: '62e7fb1e7379d54ace49f4f09f591cae2884479d', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: 'ff7ee6d921a0fe08ab4705714af8a1106eb1e174', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'e59bb32e696dfe162099f3efe19f95e7c76cad7b', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'ecc4215e2beefd4e099f57a421d0a732cb4e14dc', 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: '4ac5c21e45e4d4aed43e01fd49a0f398cb2ffa0b', class: "btn-group" }, h("q2-btn", { key: '1f2a32ece3c921d9173e5d5958527d7c6e0e3910', 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: '11250e5b156691b6800475010416711941f60b95', type: "chevron-double-left" })), h("q2-btn", { key: 'af6e51286ec4017c92bf941a5b0aecfc5eb5e082', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '7090e6297c5983639e7113416101d1811e95d4c7', type: "chevron-left" }))), h("div", { key: 'e09c5ef5a837b14cdbd4a26f5acc71e47cfb6728', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '1dd05c355c04f568d17ccdfc927b570e8795c99f', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'a9e13e527bfe98e928a467c9c99e21cfadae182f', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '368f0f7ee7f23c45101362b0dacf9df0ee9cc41c', 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: 'cd543116816cfe374b02fa366d64cade2887b51a', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '98826e8fbbe89ea9c34208ec8066ab47a8a17550', class: "btn-group" }, h("q2-btn", { key: '5066ad089677456d90b660299b0260cc819c3e60', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'e3364523c842d9a345fd34c05cbcba87ae14da80', type: "chevron-right" })), h("q2-btn", { key: 'a920ed7346c5fcadbac7c244dc1cabddd8e22b36', 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: '49e610ac8459a60eac6ec771fbb3208a4a25ac34', type: "chevron-double-right" }))), h("div", { key: '07bbdd2c0ddef20d8a14152c5977376389246c15', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page" })), h("span", { key: '29a9af7d27dc1f28387df6ef1dd052c2ce0c27ac', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '7cd9ea6486ef69c90bf03cac9f80fd575f78103a', class: "btn-group" }, h("q2-btn", { key: '138e654a3112debc75c12ab01cca93f9a768e7a9', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '2b6ab242a2f1d090c07675753c5b5a3f2b36ffe0', type: "chevron-right" })), h("q2-btn", { key: '35103fb040b0b9117c035a2808be49afaffaa9f2', 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: '47ee1ca35772437aad4319aa391b5623f3546500', type: "chevron-double-right" }))), h("div", { key: '639a79c43ddb8c2757ffb34b9f54da4e75323a80', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -354,7 +354,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '42dced5b6e9014362980f4f6310fe3538ff3ced9', onChange: this.onClickElsewhere }, h("div", { key: '7cc2a6e5a9dad73564d7127d3adc2a55f5465d82', class: wrapperClassNames.join(' ') }, h("div", { key: '43bc33de012bd7de5369037f19cfabc31688afa0', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'a2421c3c6a0219cebb68d31679b3877b87090fe8', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: 'f760cc0a9cebbf45328510ed928025ed88f1da00', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '5f33a1298dda8fdf0b858afaac71adb5ca6c2429', 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: 'b568df98d6b7c5a7fefc4261e4cf437ca47c6666', class: "popover-content" }, h("div", { key: '1198cd47cfed3fe5eb2971b1872046eeb912a377', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '5cbd8b646ed30b03d27503c4fe9fc19bf2f926d4', name: "popover-top" })), h("q2-option-list", { key: '512825dd2d6736d8b2ed09d607bf2479c1febe50', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '3c6081da6094ff75ea383d917c4a627e2c43805e' })), h("div", { key: '3353abb362573e54905a74d564010c36db5fa068', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '0e47b0b2f6701b5beba8f4a8fc367ee25e53ee81', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: 'c6dfa2ec426f3a2e3f2623fa0f218045cf22bf65', onChange: this.onClickElsewhere }, h("div", { key: 'b06ee5e8fd7c66e535ae786bbc41b7bbb2f890f0', class: wrapperClassNames.join(' ') }, h("div", { key: '33cfc2f0ac6d50cde4ff3c4d301b81081018faa0', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'ce96d775d2cd1349ac8e982862bce850bfb7ff00', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: 'd7def68e55ecd39072d2b7a268459d01fa9f0715', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '962a7145528d951a7a56e51a8290e2a3d22fe469', 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: '35da2a4a0f9487329dd2f6599433278b842f5730', class: "popover-content" }, h("div", { key: '084bad243e6946269d3a4525bf98a6b717101a65', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '5f2e3b51085f841e816f5052f56a7ed89214e169', name: "popover-top" })), h("q2-option-list", { key: 'd176a943fd4a94ed519c42dcf1182931d02a8b13', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '34b6eb444aefb59b23c85d4354861135cf63919f' })), h("div", { key: 'b30d3f4dd110de4cc4ccc2887f9e936af5986db1', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '003d70ef29d638287629f4af176cf3d1852168be', name: "popover-bottom" })))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -301,7 +301,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
             containerClasses.push('show');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        return (h("div", { key: 'ec69329181e23e7c8f46fc2d2f5b9453f0f866d1', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: '7814ab2ab64fe363d76d1ed34005b7512c877d17', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '7a3fec41c603d97be3bcaa0d7fd48c0517b92f7c' }))));
+        return (h("div", { key: 'dec077f6a9efa7573210773db9eca95d48fb527b', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: '4e7ad06454bddbc6443922b4dac5d27f50a8b2c8', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '9128e4469499778c779b32561547358e1f6bd747' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-radio-group.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@sten
 import { c as createGuid, o as overrideFocus, i as isEventFromElement, r as renderLabel } from './index2.js';
 import { d as defineCustomElement$2 } from './q2-icon2.js';
-const q2RadioGroupCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{margin-top:var(--tct-radio-group-margin-top, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-radio-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";column-gap:var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px))}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-radio-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-radio-group-label-optional-color, var(--t-radio-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-radio-group-label-optional-font-size, var(--t-radio-group-label-optional-font-size, 12px));font-weight:var(--tct-radio-group-label-optional-font-weight, var(--t-radio-group-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-1x, 5px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-radio-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .options-container{border-color:var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}";
+const q2RadioGroupCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-radio-group-margin:var(--tct-radio-group-margin-top, var(--t-radio-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-radio-group-margin-bottom, var(--t-radio-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-radio-group-margin, var(--comp-default-radio-group-margin))}fieldset{padding:var(--tct-radio-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:\"label icon\";column-gap:var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px))}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-radio-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-radio-group-label-optional-color, var(--t-radio-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-radio-group-label-optional-font-size, var(--t-radio-group-label-optional-font-size, 12px));font-weight:var(--tct-radio-group-label-optional-font-weight, var(--t-radio-group-label-optional-font-weight, 400))}.tile-container,.tile-container .options-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-grow:1}.options-container{--comp-default-margin:var(--app-scale-1x, 5px) 0;--comp-options-margin:var(--tct-radio-group-options-margin, var(--t-radio-group-options-margin, var(--comp-default-margin, 5px 0)));margin:var(--comp-options-margin);padding:var(--tct-radio-group-options-padding, var(--t-radio-group-options-padding, var(--app-scale-0x, 0px)));border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-radio-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .options-container{border-color:var(--tct-radio-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .options-container{border-color:transparent}.tile-container.left{justify-content:start}.tile-container.right{justify-content:end}.tile-container .options-container{gap:var(--tct-radio-group-tile-gap, var(--t-radio-group-tile-gap, var(--app-scale-2x, 10px)));justify-content:inherit}";
 const Q2RadioGroupStyle0 = q2RadioGroupCss;
 const Q2RadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2RadioGroup extends HTMLElement {

package/dist/components/q2-radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-radio-group.js","mappings":"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","names":["Q2RadioGroup"],"sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n margin-top: var-list(--tct-radio-group-margin-top, --app-scale-2x, 10px);\n}\n\nfieldset {\n padding: var(--tct-radio-group-fieldset-padding, 0);\n margin: 0;\n border: 0;\n position: relative;\n}\n\n.label-row {\n display: grid;\n grid-template-columns: 1fr 24px;\n grid-template-areas: 'label icon';\n column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n q2-icon {\n grid-area: icon;\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(radio-group-label-optional-color),\n var-prefixer(a11y-color),\n var-prefixer(a11y-gray-color),\n var-prefixer(gray-7),\n var-prefixer(gray-d1),\n --app-gray-d1,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n &,\n .options-container {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-grow: 1;\n }\n}\n\n.options-container {\n --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n margin: var(--comp-options-margin);\n padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-1x, 5px);\n border-width: 1px;\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n }\n :host([has-error='false']) & {\n border-color: transparent;\n }\n}\n\n.tile-container {\n &.left {\n justify-content: start;\n }\n &.right {\n justify-content: end;\n }\n\n .options-container {\n gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n justify-content: inherit;\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determines if all radios in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Text for the fieldset legend describing the radio group.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Identifier which ties all radios together for accessibility and DOM selection. /\n @Prop({ reflect: true })\n name: string;\n\n /* Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all radios in the group can be focused, but not interacted with. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Provides alignment direction for tile-style radio group. /\n @Prop({ reflect: true })\n tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n tilelayout: boolean;\n\n /* Show the radio group as a horizontal set of tiles. /\n @Prop({ reflect: true, mutable: true })\n tileLayout: boolean;\n\n /* The `value` of the currently selected `q2-radio` within the `q2-radio-group`. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.checkedRadioExists();\n this.onMutationObserved();\n this.handleDeprecatedTilelayout(this.tilelayout);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n overrideFocus(this.hostElement);\n this.checkedRadioExists();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement) {\n if (!this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const radio = this.hostElement.querySelector('q2-radio[checked]') \|\| this.hostElement.querySelector('q2-radio');\n radio?.dispatchEvent(new FocusEvent('focus'));\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n const currentValue = (event.target as HTMLElement).getAttribute('value') \|\| this.value;\n let index = this.radioElements.findIndex(\n el => el === event.target \|\| (el as HTMLElement).getAttribute('value') === currentValue\n );\n let sign = 0;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n sign = -1;\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n sign = 1;\n break;\n }\n\n if (index === -1 \|\| sign === 0) {\n return;\n }\n index += sign;\n index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n event.preventDefault();\n if (!this.readonly) {\n this.value = this.radioElements[index].value;\n }\n this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-radio>` option with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n this.radioElements.forEach(radio => {\n if (value !== radio.value) return;\n radio.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\n });\n }\n\n @Watch('name')\n nameUpdated() {\n this.radioElements.forEach(radio => {\n radio.name = this.name \|\| this._id;\n });\n }\n\n @Watch('readonly')\n readonlyUpdated() {\n const readonly = this.readonly;\n this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n }\n\n @Watch('tilelayout')\n handleDeprecatedTilelayout(tilelayout: boolean) {\n if (typeof tilelayout !== 'boolean') return;\n this.tileLayout = tilelayout;\n this.tilelayout = undefined;\n }\n\n @Watch('tileLayout')\n tileLayoutUpdated(tileLayout: boolean) {\n this.radioElements.forEach(radio => {\n radio.groupTileLayout = tileLayout;\n });\n }\n\n @Watch('value')\n valueUpdated(newVal: string) {\n this.radioElements.forEach(radio => {\n radio.checked = newVal === radio.value;\n // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n if (!radio.checked) {\n radio.removeAttribute('checked');\n radio.tabIndex = -1;\n } else if (radio.checked) {\n radio.tabIndex = 0;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get inputId() {\n return this._id;\n }\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n }\n\n checkedRadioExists = () => {\n // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) \|\| undefined;\n\n // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n if (!this.value && !!firstCheckedRadio) {\n this.value = firstCheckedRadio.value;\n } else if (!this.value && !firstCheckedRadio) {\n // if no radios are meant to be checked, then assign first radio tabIndex of 0\n if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n }\n };\n\n inputDom() {\n if (this.tileLayout) {\n const { tileAlignment } = this;\n const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n return (\n <div class={`tile-container ${alignment}`}>\n <div class=\"options-container\">\n <slot />\n </div>\n </div>\n );\n } else {\n return (\n <div class=\"options-container\">\n <slot />\n </div>\n );\n }\n }\n\n onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n this.change.emit({ value: event.detail.value });\n };\n\n onMutationObserved = () => {\n this.valueUpdated(this.value);\n this.nameUpdated();\n this.disabledUpdated();\n this.readonlyUpdated();\n this.tileLayoutUpdated(this.tileLayout);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerRadioChange}\n aria-invalid={hasError ? `${hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-radio-group.js","mappings":"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","names":["Q2RadioGroup"],"sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n padding: var(--tct-radio-group-fieldset-padding, 0);\n margin: 0;\n border: 0;\n position: relative;\n}\n\n.label-row {\n display: grid;\n grid-template-columns: 1fr 24px;\n grid-template-areas: 'label icon';\n column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n q2-icon {\n grid-area: icon;\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}\n\n.group-legend {\n font-weight: 600;\n}\n\nlegend.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n border: 0;\n}\n\n.optional-tag {\n margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n color: var-list(\n var-prefixer(radio-group-label-optional-color),\n var-prefixer(a11y-color),\n var-prefixer(a11y-gray-color),\n var-prefixer(gray-7),\n var-prefixer(gray-d1),\n --app-gray-d1,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(radio-group-label-optional-font-weight), 400);\n}\n\n.tile-container {\n &,\n .options-container {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n flex-grow: 1;\n }\n}\n\n.options-container {\n --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n margin: var(--comp-options-margin);\n padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-0x, 0px);\n border-width: 1px;\n border-color: transparent;\n border-style: solid;\n border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n :host([has-error]) & {\n border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\n }\n :host([has-error='false']) & {\n border-color: transparent;\n }\n}\n\n.tile-container {\n &.left {\n justify-content: start;\n }\n &.right {\n justify-content: end;\n }\n\n .options-container {\n gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n justify-content: inherit;\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Fragment,\n Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, overrideFocus, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n // #region Own Properties\n\n _id: string = `radio-group-${createGuid()}`;\n mutationObserver: MutationObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /** Determines if all radios in the group are put into a `disabled` state. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /* Determines if the component should display in an errant state. /\n @Prop({ reflect: true })\n hasError: boolean = false;\n\n /\n Hide's the group's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Text for the fieldset legend describing the radio group.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Identifier which ties all radios together for accessibility and DOM selection. /\n @Prop({ reflect: true })\n name: string;\n\n /* Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean;\n\n /* Determines if all radios in the group can be focused, but not interacted with. /\n @Prop({ reflect: true })\n readonly: boolean;\n\n /* Provides alignment direction for tile-style radio group. /\n @Prop({ reflect: true })\n tileAlignment: 'left' \| 'center' \| 'right' = 'center';\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n tilelayout: boolean;\n\n /* Show the radio group as a horizontal set of tiles. /\n @Prop({ reflect: true, mutable: true })\n tileLayout: boolean;\n\n /* The `value` of the currently selected `q2-radio` within the `q2-radio-group`. /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the value of the radio group changes.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.checkedRadioExists();\n this.onMutationObserved();\n this.handleDeprecatedTilelayout(this.tilelayout);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true });\n this.mutationObserver = observer;\n overrideFocus(this.hostElement);\n this.checkedRadioExists();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement) {\n if (!this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n const radio = this.hostElement.querySelector('q2-radio[checked]') \|\| this.hostElement.querySelector('q2-radio');\n radio?.dispatchEvent(new FocusEvent('focus'));\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n const currentValue = (event.target as HTMLElement).getAttribute('value') \|\| this.value;\n let index = this.radioElements.findIndex(\n el => el === event.target \|\| (el as HTMLElement).getAttribute('value') === currentValue\n );\n let sign = 0;\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n sign = -1;\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n sign = 1;\n break;\n }\n\n if (index === -1 \|\| sign === 0) {\n return;\n }\n index += sign;\n index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n event.preventDefault();\n if (!this.readonly) {\n this.value = this.radioElements[index].value;\n }\n this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<q2-radio>` option with the provided value.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n this.radioElements.forEach(radio => {\n if (value !== radio.value) return;\n radio.click();\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledUpdated() {\n this.radioElements.forEach(radio => {\n radio.groupDisabled = this.disabled;\n });\n }\n\n @Watch('name')\n nameUpdated() {\n this.radioElements.forEach(radio => {\n radio.name = this.name \|\| this._id;\n });\n }\n\n @Watch('readonly')\n readonlyUpdated() {\n const readonly = this.readonly;\n this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n }\n\n @Watch('tilelayout')\n handleDeprecatedTilelayout(tilelayout: boolean) {\n if (typeof tilelayout !== 'boolean') return;\n this.tileLayout = tilelayout;\n this.tilelayout = undefined;\n }\n\n @Watch('tileLayout')\n tileLayoutUpdated(tileLayout: boolean) {\n this.radioElements.forEach(radio => {\n radio.groupTileLayout = tileLayout;\n });\n }\n\n @Watch('value')\n valueUpdated(newVal: string) {\n this.radioElements.forEach(radio => {\n radio.checked = newVal === radio.value;\n // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n if (!radio.checked) {\n radio.removeAttribute('checked');\n radio.tabIndex = -1;\n } else if (radio.checked) {\n radio.tabIndex = 0;\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get inputId() {\n return this._id;\n }\n\n get radioElements() {\n return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n }\n\n checkedRadioExists = () => {\n // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) \|\| undefined;\n\n // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n if (!this.value && !!firstCheckedRadio) {\n this.value = firstCheckedRadio.value;\n } else if (!this.value && !firstCheckedRadio) {\n // if no radios are meant to be checked, then assign first radio tabIndex of 0\n if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n }\n };\n\n inputDom() {\n if (this.tileLayout) {\n const { tileAlignment } = this;\n const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n return (\n <div class={`tile-container ${alignment}`}>\n <div class=\"options-container\">\n <slot />\n </div>\n </div>\n );\n } else {\n return (\n <div class=\"options-container\">\n <slot />\n </div>\n );\n }\n }\n\n onInnerRadioChange = (event: CustomEvent) => {\n event.stopImmediatePropagation();\n if (this.readonly) return;\n\n this.change.emit({ value: event.detail.value });\n };\n\n onMutationObserved = () => {\n this.valueUpdated(this.value);\n this.nameUpdated();\n this.disabledUpdated();\n this.readonlyUpdated();\n this.tileLayoutUpdated(this.tileLayout);\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const showLabel = this.label \|\| this.optional \|\| this.readonly;\n const { hasError } = this;\n const showLabelRow = (showLabel && !this.hideLabel) \|\| hasError;\n return (\n <Fragment>\n {showLabelRow && (\n <div class=\"label-row\">\n {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n {hasError && (\n <q2-icon\n type=\"error\"\n test-id=\"iconError\"\n ></q2-icon>\n )}\n </div>\n )}\n <fieldset\n onChange={this.onInnerRadioChange}\n aria-invalid={hasError ? `${hasError}` : undefined}\n >\n {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n {this.inputDom()}\n </fieldset>\n </Fragment>\n );\n }\n\n // #endregion\n}\n"],"version":3}

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

@@ -143,7 +143,7 @@ const Q2RelativeTime$1 = /*@__PURE__*/ proxyCustomElement(class Q2RelativeTime e
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: 'bb2afb6a702c88e41eed0cad8ad263e7d7014406' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: '9026e0194b08d067c04188fc4c7c9ffa05727fb6' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-resize-observer2.js CHANGED Viewed

@@ -64,7 +64,7 @@ const Q2ResizeObserver = /*@__PURE__*/ proxyCustomElement(class Q2ResizeObserver
             return;
         const elements = (_b = (_a = slot.assignedElements) === null || _a === void 0 ? void 0 : _a.call(slot, { flatten: true })) !== null && _b !== void 0 ? _b : [];
         // Unwatch previous elements
-        (_c = this.observedElements) === null || _c === void 0 ? void 0 : _c.forEach(el => this.resizeObserver.unobserve(el));
+        (_c = this.observedElements) === null || _c === void 0 ? void 0 : _c.forEach(el => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(el); });
         this.observedElements = [];
         // Watch new elements
         elements.forEach(el => {
@@ -80,7 +80,7 @@ const Q2ResizeObserver = /*@__PURE__*/ proxyCustomElement(class Q2ResizeObserver
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: 'e704a2aa1c38da509b0e366e03cd33397ffdbf5d', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: 'fa058a508d2397d7844acd6b67d4d2414c0822f1', onSlotchange: this.handleSlotChange });
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-resize-observer2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-resize-observer2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,wsBAAwsB,CAAC;AACruB,+BAAe,mBAAmB;;MCMrB,gBAAgB;;;;;;QAIzB,qBAAgB,GAAkB,EAAE,CAAC;;;QA4ErC,qBAAgB,GAAG;YACf,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;SACxB,CAAC;;;;;IAjDF,oBAAoB;QAChB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC9B;IAED,gBAAgB;QACZ,IAAI,gBAAgB,IAAI,MAAM,EAAE;YAC5B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,aAAa;gBAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,CAAC;gBAChD,IAAI,CAAC,4BAA4B,GAAG,aAAa,CAAC;aACrD,CAAC,CAAC;SACN;aAAM;YACH,OAAO,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;SAClD;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChB,IAAI,CAAC,aAAa,EAAE,CAAC;SACxB;KACJ;;;;;;IASD,MAAM,uBAAuB;QACzB,OAAO,IAAI,CAAC,4BAA4B,IAAI,EAAE,CAAC;KAClD;;;IAMD,eAAe,CAAC,MAAe;QAC3B,IAAI,MAAM,EAAE;YACR,IAAI,CAAC,YAAY,EAAE,CAAC;SACvB;aAAM;YACH,IAAI,CAAC,aAAa,EAAE,CAAC;SACxB;KACJ;IAUD,aAAa;;QACT,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAChE,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,MAAC,MAAA,IAAI,CAAC,gBAAgB,qDAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAmB,mCAAI,EAAE,CAAC;;QAGrF,MAAA,IAAI,CAAC,gBAAgB,0CAAE,OAAO,CAAC,EAAE,~~IAAI~~,IAAI,CAAC,cAAc,~~CAAC~~,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC;~~QACxE~~,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;;QAG3B,QAAQ,CAAC,OAAO,CAAC,EAAE;;YACf,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACjC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAClC,CAAC,CAAC;KACN;IAED,YAAY;;QACR,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;KACrC;;;IAKD,MAAM;QACF,OAAO,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAAC;KACxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/q2-resize-observer/q2-resize-observer.scss?tag=q2-resize-observer&encapsulation=shadow","src/components/q2-resize-observer/q2-resize-observer.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host(:not([hidden])) {\n display: block;\n width: 100%;\n}\n","import { Component, ComponentInterface, Element, EventEmitter, h, Prop, Event, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'q2-resize-observer',\n styleUrl: 'q2-resize-observer.scss',\n shadow: true,\n})\nexport class Q2ResizeObserver implements ComponentInterface {\n // #region Own Properties\n\n currentResizeObserverEntries: ResizeObserverEntry[];\n observedElements: HTMLElement[] = [];\n resizeObserver?: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /*\n Determines wheter or not events will be emitted from the component.\n /\n @Prop({ reflect: true })\n disabled: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when any of the observed elements are resized.\n /\n @Event()\n tctResize: EventEmitter<{ entries: ResizeObserverEntry[] }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.stopObserver();\n this.resizeObserver = null;\n }\n\n componentDidLoad() {\n if ('ResizeObserver' in window) {\n this.resizeObserver = new ResizeObserver(resizeEntries => {\n this.tctResize.emit({ entries: resizeEntries });\n this.currentResizeObserverEntries = resizeEntries;\n });\n } else {\n console.warn('ResizeObserver is not defined.');\n }\n\n if (!this.disabled) {\n this.startObserver();\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Returns the latest entries reported by the component.\n */\n @Method()\n async getCurrentResizeEntries(): Promise<ResizeObserverEntry[]> {\n return this.currentResizeObserverEntries \|\| [];\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledUpdated(newVal: boolean) {\n if (newVal) {\n this.stopObserver();\n } else {\n this.startObserver();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n handleSlotChange = () => {\n if (this.disabled) return;\n this.startObserver();\n };\n\n startObserver() {\n const slot = this.hostElement.shadowRoot!.querySelector('slot');\n if (slot === null) return;\n\n const elements = (slot.assignedElements?.({ flatten: true }) as HTMLElement[]) ?? [];\n\n // Unwatch previous elements\n this.observedElements?.forEach(el => this.resizeObserver.unobserve(el));\n this.observedElements = [];\n\n // Watch new elements\n elements.forEach(el => {\n this.resizeObserver?.observe(el);\n this.observedElements.push(el);\n });\n }\n\n stopObserver() {\n this.resizeObserver?.disconnect();\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-resize-observer2.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,wsBAAwsB,CAAC;AACruB,+BAAe,mBAAmB;;MCMrB,gBAAgB;;;;;;QAIzB,qBAAgB,GAAkB,EAAE,CAAC;;;QA4ErC,qBAAgB,GAAG;YACf,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;SACxB,CAAC;;;;;IAjDF,oBAAoB;QAChB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC9B;IAED,gBAAgB;QACZ,IAAI,gBAAgB,IAAI,MAAM,EAAE;YAC5B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,aAAa;gBAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,CAAC;gBAChD,IAAI,CAAC,4BAA4B,GAAG,aAAa,CAAC;aACrD,CAAC,CAAC;SACN;aAAM;YACH,OAAO,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;SAClD;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChB,IAAI,CAAC,aAAa,EAAE,CAAC;SACxB;KACJ;;;;;;IASD,MAAM,uBAAuB;QACzB,OAAO,IAAI,CAAC,4BAA4B,IAAI,EAAE,CAAC;KAClD;;;IAMD,eAAe,CAAC,MAAe;QAC3B,IAAI,MAAM,EAAE;YACR,IAAI,CAAC,YAAY,EAAE,CAAC;SACvB;aAAM;YACH,IAAI,CAAC,aAAa,EAAE,CAAC;SACxB;KACJ;IAUD,aAAa;;QACT,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAChE,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,MAAC,MAAA,IAAI,CAAC,gBAAgB,qDAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAmB,mCAAI,EAAE,CAAC;;QAGrF,MAAA,IAAI,CAAC,gBAAgB,0CAAE,OAAO,CAAC,EAAE,cAAI,OAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,CAAC,EAAE,CAAC,CAAA,EAAA,CAAC,CAAC;QACzE,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;;QAG3B,QAAQ,CAAC,OAAO,CAAC,EAAE;;YACf,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACjC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAClC,CAAC,CAAC;KACN;IAED,YAAY;;QACR,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;KACrC;;;IAKD,MAAM;QACF,OAAO,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAAC;KACxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/q2-resize-observer/q2-resize-observer.scss?tag=q2-resize-observer&encapsulation=shadow","src/components/q2-resize-observer/q2-resize-observer.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host(:not([hidden])) {\n display: block;\n width: 100%;\n}\n","import { Component, ComponentInterface, Element, EventEmitter, h, Prop, Event, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'q2-resize-observer',\n styleUrl: 'q2-resize-observer.scss',\n shadow: true,\n})\nexport class Q2ResizeObserver implements ComponentInterface {\n // #region Own Properties\n\n currentResizeObserverEntries: ResizeObserverEntry[];\n observedElements: HTMLElement[] = [];\n resizeObserver?: ResizeObserver;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /*\n Determines wheter or not events will be emitted from the component.\n /\n @Prop({ reflect: true })\n disabled: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when any of the observed elements are resized.\n /\n @Event()\n tctResize: EventEmitter<{ entries: ResizeObserverEntry[] }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.stopObserver();\n this.resizeObserver = null;\n }\n\n componentDidLoad() {\n if ('ResizeObserver' in window) {\n this.resizeObserver = new ResizeObserver(resizeEntries => {\n this.tctResize.emit({ entries: resizeEntries });\n this.currentResizeObserverEntries = resizeEntries;\n });\n } else {\n console.warn('ResizeObserver is not defined.');\n }\n\n if (!this.disabled) {\n this.startObserver();\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Returns the latest entries reported by the component.\n */\n @Method()\n async getCurrentResizeEntries(): Promise<ResizeObserverEntry[]> {\n return this.currentResizeObserverEntries \|\| [];\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('disabled')\n disabledUpdated(newVal: boolean) {\n if (newVal) {\n this.stopObserver();\n } else {\n this.startObserver();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n handleSlotChange = () => {\n if (this.disabled) return;\n this.startObserver();\n };\n\n startObserver() {\n const slot = this.hostElement.shadowRoot!.querySelector('slot');\n if (slot === null) return;\n\n const elements = (slot.assignedElements?.({ flatten: true }) as HTMLElement[]) ?? [];\n\n // Unwatch previous elements\n this.observedElements?.forEach(el => this.resizeObserver?.unobserve(el));\n this.observedElements = [];\n\n // Watch new elements\n elements.forEach(el => {\n this.resizeObserver?.observe(el);\n this.observedElements.push(el);\n });\n }\n\n stopObserver() {\n this.resizeObserver?.disconnect();\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n // #endregion\n}\n"],"version":3}

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

@@ -195,9 +195,9 @@ const Q2Section$1 = /*@__PURE__*/ proxyCustomElement(class Q2Section extends HTM
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: 'cc309ddb28c1a874a6ceeb59b8289a4346e459a8', class: "wrapper" }, h("header", { key: '84ddd7d53237e38fe42f4760a71526e560856305', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'b0574a853b76014816a5eac89a2c6cf9eabbb52d', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '89265a8681b994611de1f858b47b3424aaf2c77a', class: "title" }, loc(this.label)), h("div", { key: '735702090c9b6744c7575f71260dec2a10f2032e', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '25d45885176b19c778fd8a5698f17c33c6daef45', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '27549707494cde6a1be6d2eaac5f41b6ba0cbd10', 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: '66e2fcb947a4b49c4d39b432304c6ef9a22254c3', type: "chevron-up" })))), h("div", { key: '82cbe836aea28dcde1f34edeab8efae89d3a10d5', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '59a073f2fbbc37bb7e7f1c6823610e150fd1e256', class: "wrapper" }, h("header", { key: 'c02e2e531cb0ad833752f9254b95f6eb76d8b317', class: hasHeader ? 'has-header' : '' }, h("div", { key: '7d3b12f0640b7dd8b49bbca7ce710f6bb75325a2', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '7552c47106c63ce813145a13bf29e6fa4db74c58', class: "title" }, loc(this.label)), h("div", { key: '4823d86d58f2a214a31987b8892802d861388a5d', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'f70123a46f2077c23cb0a25c56e83d59e3432485', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '7330e6657cd6eeb8e448a04b2b3530e3843d1763', 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: '8a953908c20c980198ad77e66b41d5da3337ea28', type: "chevron-up" })))), h("div", { key: 'caa5b37b95099c0959b048f6d7f030c1e0bdf16f', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: 'ce7c2e8bfb7f1c8fc8c5a1d8de241d9c509db9bb', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'a564c7267342a8de26e25b8a0083c3708ea46cab', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: 'c4e83982d85944756eb7f9f379a3671ce7faee6b', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '336a133e83f81a21da1e3008b0b4f35ffe25a4a6', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -10,7 +10,7 @@ import { d as defineCustomElement$3 } from './q2-loading2.js';
 import { d as defineCustomElement$2 } from './q2-option-list2.js';
 import { d as defineCustomElement$1 } from './q2-popover2.js';
-const q2SelectCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";
+const q2SelectCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";
 const Q2SelectStyle0 = q2SelectCss;
 const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLElement {
@@ -63,7 +63,7 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
             const { key, shiftKey } = event;
             const isShiftTab = key === 'Tab' && shiftKey;
             const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;
-            if (hasSlot && (key === 'Tab' || isShiftTab))
+            if ((hasSlot || this.multiple) && (key === 'Tab' || isShiftTab))
                 return;
             // slots are incompatible with action sheet
             if (shouldShowActionSheet(this, event) && !hasSlot) {
@@ -91,7 +91,7 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
             // Prevent click event from firing when spacebar is pressed
             if (key === ' ')
                 event.preventDefault();
-            this.optionList.handleExternalKeydown(event);
+            this.handleOptionListExternalKeydown(event);
         };
         this.onCustomDisplayClick = (event) => {
             event.stopPropagation();
@@ -555,6 +555,10 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
         var _a;
         (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
     }
+    // Helps with checking for calls to handleExternalKeydown in spec tests
+    handleOptionListExternalKeydown(event) {
+        this.optionList.handleExternalKeydown(event);
+    }
     handleSelectionChanges(changeDetails) {
         const { value = '', values = [] } = changeDetails;
         const selectedOptionValues = values.map(value => value.value);
@@ -615,11 +619,11 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
     }
     render() {
         var _a;
-        return (h("click-elsewhere", { key: 'cc3d7571025183c900c7dbeda597835e88d9224b', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: '5ab3dec7a6e57ccaeef904ea07e52c29b88a0a91', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '3d7c3ded01c34866fdebc4503bc2bac46ba67018', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
+        return (h("click-elsewhere", { key: '74b318aa5e949451bb9e594ca15bbb899d5af833', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: '841ca38b6c5d5a2bce3da89119f2206157fa9dfc', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: 'd141c2482a503fff0977dd9e268927fceda5519b', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
-                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { key: '37662b940b1a51d9abfb681d248607ff049a8655', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: '74441951077fd4476ccf3c820392e346ba6dd313', name: "q2-select-display" })), this.renderOptionsDropdown()));
+                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { key: 'e2bc0e2346e8854a092aa6e6298079335f736f37', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: 'd7d6ce24fab1745448a8fbf9285fb1c67b2b7e6a', name: "q2-select-display" })), this.renderOptionsDropdown()));
     }
     get hostElement() { return this; }
     static get watchers() { return {