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

q2-tecton-elements 1.49.2 → 1.50.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 (703) hide show

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, l as loc } from './index2.js';
-import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet.js';
+import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc } from './index2.js';
+import { s as showActionSheetList, a as shouldShowActionSheet } from './action-sheet.js';
 import { d as defineCustomElement$5 } from './click-elsewhere2.js';
 import { d as defineCustomElement$4 } from './q2-icon2.js';
 import { d as defineCustomElement$3 } from './q2-option-list2.js';
@@ -26,9 +26,19 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             this.change.emit({ value: null, values: [], active: false });
             this.scheduledAfterRender.push(resizeIframe);
         };
-        this.determineOptionCount = () => {
-            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;
-            this.optionCount = numberOfOptions;
+        this.determineOptionCount = async () => {
+            if (this.optionList) {
+                const allOptions = await this.optionList.getOptions();
+                this.optionCount = allOptions.length;
+            }
+            else {
+                const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;
+                this.optionCount = numberOfOptions;
+            }
+        };
+        this.executeActionSheet = async (event) => {
+            const result = await showActionSheetList(this, event);
+            this.handleSelectionChanges(result);
         };
         this.getOption = async (value) => {
             if (this.optionList) {
@@ -87,6 +97,29 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
                 this.optionList.handleExternalKeydown(event);
             }
         };
+        this.handleSelectionChanges = async (changeDetails) => {
+            const { multiple } = this;
+            const { value = '', values = [] } = changeDetails;
+            const isActive = multiple ? !!values.length : !!value;
+            if (!this.hostElement.onchange) {
+                if (multiple) {
+                    this.selectedOptions = values;
+                    this.value = undefined;
+                }
+                else {
+                    const selectedOption = await this.getOption(value);
+                    this.selectedOptions = selectedOption
+                        ? [{ value: selectedOption.value, display: selectedOption.display }]
+                        : [];
+                    this.value = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || undefined;
+                }
+            }
+            this.change.emit({
+                value: multiple ? undefined : value,
+                values,
+                active: isActive,
+            });
+        };
         this.handleWrapperClick = () => {
             this.primaryBtn.focus();
             this.primaryBtn.click();
@@ -174,6 +207,53 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
         this.optionList.setActiveElement(null);
     }
     // #endregion
+    // #region Public Methods API
+    /**
+     * Emulates clicking the `<button>` to hide the popover if it is visible.
+     *
+     * @testOnly
+     */
+    async closePopover() {
+        if (!this.open || this.disabled)
+            return;
+        this._togglePopover();
+    }
+    /**
+     * Emulates clicking the `<button>` to display the popover if it is hidden.
+     *
+     * @testOnly
+     */
+    async openPopover() {
+        if (this.open || this.disabled)
+            return;
+        this._togglePopover();
+    }
+    /**
+     * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).
+     *
+     * If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed
+     * after the option(s) are selected.
+     *
+     * @testOnly
+     */
+    async setValue(values, options = { closePopover: true }) {
+        var _a;
+        const valueSet = new Set(Array.isArray(values) ? values : [values]);
+        const allOptions = await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
+        if (!this.open) {
+            await this.openPopover();
+            await waitForNextPaint();
+        }
+        valueSet.forEach(value => {
+            var _a;
+            (_a = allOptions.find(option => option.value === value)) === null || _a === void 0 ? void 0 : _a.click();
+        });
+        if (options.closePopover) {
+            await this.closePopover();
+            await waitForNextPaint();
+        }
+    }
+    // #endregion
     // #region Watchers
     selectedOptionsChanged(newValue) {
         var _a, _b;
@@ -194,9 +274,9 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
     async valueChanged(newValue) {
         var _a, _b;
         const { multiple, selectedOptions } = this;
-        const firstValue = (_b = (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
         if (multiple)
             return;
+        const firstValue = (_b = (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
         if (newValue === firstValue)
             this.updateSelectedOptionElements();
         else {
@@ -222,45 +302,24 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
         else
             return buttonContent;
     }
-    async executeActionSheet(event) {
-        const result = await showActionSheetList(this, event);
-        this.handleSelectionChanges(result);
+    _togglePopover() {
+        const { primaryBtn } = this;
+        primaryBtn === null || primaryBtn === void 0 ? void 0 : primaryBtn.click();
+        primaryBtn === null || primaryBtn === void 0 ? void 0 : primaryBtn.focus();
+        primaryBtn.dispatchEvent(new FocusEvent('focus'));
     }
-    generateHiddenElement() {
+    // #endregion
+    // #region Render Methods
+    renderHiddenElement() {
         return (h("div", { id: "option-description", class: "sr", "aria-hidden": "true" }, loc('tecton.element.optionList.optionCount', [this.optionCount])));
     }
-    generateIcon() {
+    renderIcon() {
         const { optionCount, active } = this;
         const isButton = optionCount && active;
         const TagName = isButton ? 'button' : 'div';
         const iconName = isButton || !optionCount ? 'close' : 'chevron-down';
         return (h(TagName, { class: "btn-close", onClick: (isButton && this.clearSelectedOptions) || undefined, disabled: (isButton && this.disabled) || undefined, "aria-label": (isButton && loc('tecton.element.pill.clearSelection')) || undefined, type: (isButton && 'button') || undefined }, h("q2-icon", { type: iconName })));
     }
-    async handleSelectionChanges(changeDetails) {
-        const { multiple } = this;
-        const { value = '', values = [] } = changeDetails;
-        const isActive = multiple ? !!values.length : !!value;
-        if (!this.hostElement.onchange) {
-            if (multiple) {
-                this.selectedOptions = values;
-                this.value = undefined;
-            }
-            else {
-                const selectedOption = await this.getOption(value);
-                this.selectedOptions = selectedOption
-                    ? [{ value: selectedOption.value, display: selectedOption.display }]
-                    : [];
-                this.value = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || undefined;
-            }
-        }
-        this.change.emit({
-            value,
-            values,
-            active: isActive,
-        });
-    }
-    // #endregion
-    // #region Render Methods
     render() {
         const { optionCount, active, open } = this;
         const wrapperClassNames = ['btn-wrapper'];
@@ -268,7 +327,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: 'f3f741be3510442eaf1a36d9996b89be670283a3', onChange: this.onClickElsewhere }, h("div", { key: '3a0d55c3557bc151c9f3c207bde2afe37f9f89a9', class: wrapperClassNames.join(' ') }, h("div", { key: '985d74d5236e379cf8de6b441346caaf069ab9ef', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '4ca87da404779728281ae5ae92abcf83b06b6e6b', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '25d250d0f43a10c65efde4986b089f8bcd20f107', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '66492770d7467e39330c3e3d825c1677e05b52cc', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'ce276ed29648a327bd045d53b28781e8e34fe410', 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: 'a074811c58fb86229e0cc9f503dce63b57057f57' }))))));
+        return (h("click-elsewhere", { key: 'c13fc91239e60f6feb038acef719afdd6c6dee78', onChange: this.onClickElsewhere }, h("div", { key: 'a05c6dfa1b6be1c3c682a92510f74702170056da', class: wrapperClassNames.join(' ') }, h("div", { key: 'cfc60ca20a17198f112aa8dc391c102e1f5c4014', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '7db4fbe5c58c61eb40a62aa7ed08b978019d38c9', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '9bfe0ffa3adf0f1303fc788ff1a851a03a4f4ad4', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '7f316ab503f416a7c24bee557de55ded46821cd3', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '1434a3c21edf2627085f614b59b0127b386e243d', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: 'bb360ea7e004a891d7980f7e4c3fff10d0fa3803' }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -293,7 +352,10 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
         "theme": [513],
         "value": [1537],
         "optionCount": [32],
-        "selectedOptionElements": [32]
+        "selectedOptionElements": [32],
+        "closePopover": [64],
+        "openPopover": [64],
+        "setValue": [64]
     }, [[0, "displayChanged", "handleSelectedDisplay"], [0, "focus", "delegateFocus"], [0, "popoverStateChanged", "popoverStateHandler"]], {
         "selectedOptions": ["selectedOptionsChanged"],
         "value": ["valueChanged"]

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

	@@ -1 +1 @@
1	- {"file":"q2-pill.js","mappings":"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","names":["Q2Pill"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n --comp-active-btn-color: var(--comp-btn-background);\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n position: relative;\n\n &.has-options,\n &.has-icon {\n --comp-close-size: var(--comp-pill-btn-height);\n }\n\n :host([active]) & {\n --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n }\n\n :host([theme='primary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-primary-active-hover-background,\n --t-primary-l3,\n #21acff\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-primary-active-hover-border-color,\n --t-primary-l3,\n #21acff\n )};\n }\n\n :host([theme='secondary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-secondary-active-hover-background,\n --t-secondary-l3,\n #c9d5db\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-secondary-active-hover-border-color,\n --t-secondary-l3,\n #c9d5db\n )};\n }\n\n :host([theme='tertiary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-tertiary-active-hover-background,\n --t-tertiary-l3,\n #eff8fd\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-tertiary-active-hover-border-color,\n --t-tertiary-l3,\n #eff8fd\n )};\n }\n}\n\n.btn-height-wrapper {\n height: var(--comp-pill-min-height);\n display: flex;\n align-items: center;\n cursor: pointer;\n &:focus {\n box-shadow: none;\n }\n\n :host([disabled]) & {\n cursor: not-allowed;\n }\n}\n\n.btn-close,\n.btn-primary {\n cursor: pointer;\n height: var(--comp-pill-btn-height);\n border-style: solid;\n border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n transition-property: background, color, padding, width, opacity;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n :host([disabled]) & {\n opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.btn-primary {\n background: var(--comp-btn-background);\n border-width: var-list(--comp-pill-btn-border-width);\n border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n padding-inline: var(--comp-btn-padding);\n padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n color: var(--comp-btn-color);\n display: block;\n width: 100%;\n text-align: start;\n\n &:focus,\n &:hover {\n background: var(--comp-hover-btn-background);\n }\n\n .has-options &,\n .has-icon & {\n padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n }\n\n .has-options & {\n @include line-clamp(1);\n max-width: var-list(var-prefixer(pill-max-width), 200px);\n }\n\n :host([active]) & {\n background: var(--comp-active-btn-background);\n border-color: var(--comp-active-btn-border-color);\n color: var(--comp-active-btn-color);\n\n &:focus,\n &:hover {\n background: var(--comp-hover-active-btn-background);\n border-color: var(--comp-hover-active-btn-border-color);\n }\n }\n}\n\n.btn-close {\n background: transparent;\n border-color: transparent;\n border-width: var(--comp-pill-btn-border-width);\n width: var(--comp-close-size);\n height: var(--comp-close-size);\n padding: 0;\n border: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n :host([active]) & {\n color: var(--comp-active-btn-color);\n }\n\n .has-options &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --t-icon-stroke-primary: currentcolor;\n width: var-list(var-prefixer(pill-icon-size), 14px);\n height: var-list(var-prefixer(pill-icon-size), 14px);\n transition-property: transform;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n pointer-events: none;\n\n :host([open]) & q2-icon {\n transform: rotate(180deg);\n }\n}\n\nbutton.btn-close {\n :host([active]) & {\n &:focus,\n &:hover {\n background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n }\n }\n}\n\nq2-popover {\n top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n button {\n border-style: none;\n }\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Listen,\n Watch,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n // #region Own Properties\n\n mutationObserver: MutationObserver;\n optionList: HTMLQ2OptionListElement;\n popoverElement: HTMLQ2PopoverElement;\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n optionCount: number;\n\n @State()\n selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n // #endregion\n // #region Public Property API\n\n /** Determine if the elements is in the selected state, with values. /\n @Prop({ reflect: true, mutable: true })\n active: boolean;\n\n /* Indicates that the pill has no border /\n @Prop({ reflect: true })\n borderless: boolean;\n\n /* Indicates the pill cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\n\n /\n The text that populates the label.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n The maximum number of characters to display before ellipcizing.\n * @info\n * Limitless by default.\n /\n @Prop({ reflect: true })\n maxLength: number;\n\n /\n Enables the multi-select ability for the dropdown.\n * @info\n * Only applicable when options are provided.\n /\n @Prop({ reflect: true })\n multiple: boolean;\n\n /* Determine whether the popover is open or closed. /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* Determines the label that is applied to the option list for accessibility purposes. /\n @Prop()\n optionListLabel: string;\n\n /* Aligns the popover dropdown to the left or right side of the input field. /\n @Prop({ mutable: true })\n popoverAlignment: 'left' \| 'right' = 'right';\n\n /\n Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n /\n @Prop()\n popoverDirection: 'up' \| 'down';\n\n /* @deprecated /\n @Prop()\n popoverMinHeight: number = 150;\n\n /* A list of the selected options on the element. /\n @Prop({ mutable: true })\n selectedOptions: IOptionValue[] = [];\n\n /* The color of the element when in the active state. /\n @Prop({ reflect: true })\n theme: 'primary' \| 'secondary' \| 'tertiary';\n\n /* The value emitted when the component is selected. /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pill is clicked or the selected options change.\n * @legacyEvent\n */\n @Event()\n change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n const observer = new MutationObserver(this.determineOptionCount);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (multiple) return;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = await this.getOption(newValue);\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return loc(label);\n else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength)\n return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n else return buttonContent;\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = () => {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n };\n\n async executeActionSheet(event: MouseEvent \| KeyboardEvent) {\n const result = await showActionSheetList(this, event);\n this.handleSelectionChanges(result);\n }\n\n generateHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n generateIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={(isButton && this.clearSelectedOptions) \|\| undefined}\n disabled={(isButton && this.disabled) \|\| undefined}\n aria-label={(isButton && loc('tecton.element.pill.clearSelection')) \|\| undefined}\n type={(isButton && 'button') \|\| undefined}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION') return;\n this.open = false;\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n this.handleSelectionChanges(event.detail);\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n\n event.preventDefault();\n if (shouldShowActionSheet(this, event)) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n async handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = await this.getOption(value);\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.click();\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) \|\| [];\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n role={(optionCount && 'combobox') \|\| undefined}\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={(optionCount && 'option-list') \|\| undefined}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.generateIcon()}\n {this.generateHiddenElement()}\n </div>\n {this.optionCount > 0 && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n type=\"listbox\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-pill.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,i3OAAi3O,CAAC;AACp4O,qBAAe,SAAS;;MCiBXA,QAAM;;;;;;;QAQf,yBAAoB,GAAmB,EAAE,CAAC;QAwQ1C,yBAAoB,GAAG;YACnB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;YAC7D,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAChD,CAAC;QAEF,yBAAoB,GAAG;YACnB,IAAI,IAAI,CAAC,UAAU,EAAE;gBACjB,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;gBACtD,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC;aACxC;iBAAM;gBACH,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC;gBAC9E,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;aACtC;SACJ,CAAC;QAEF,uBAAkB,GAAG,OAAO,KAAiC;YACzD,MAAM,MAAM,GAAG,MAAM,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACtD,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;SACvC,CAAC;QAEF,cAAS,GAAG,OAAO,KAAa;YAC5B,IAAI,IAAI,CAAC,UAAU,EAAE;gBACjB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;gBACnD,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;aACzD;iBAAM;gBACH,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAsB,oBAAoB,KAAK,IAAI,CAAC,CAAC;aAC7F;SACJ,CAAC;QAEF,yBAAoB,GAAG,OAAO,KAAiB;YAC3C,MAAM,aAAa,GAAG,KAAK,CAAC,aAAuC,CAAC;YACpE,IAAI,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,WAAW;gBAAE,OAAO;YACnD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACrB,CAAC;QAEF,iBAAY,GAAG,KAAK;YAChB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YAC9B,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAC7C,CAAC;QAEF,gBAAW,GAAG,OAAO,KAAiB;YAClC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,IAAI,CAAC,WAAW,EAAE;gBAClB,IAAI,qBAAqB,CAAC,IAAI,CAAC,EAAE;oBAC7B,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;iBAClC;qBAAM;oBACH,MAAM,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;iBACtC;aACJ;iBAAM;gBACH,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;gBAC9B,MAAM,QAAQ,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC9C,MAAM,MAAM,GAAG,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,CAAC;gBAC3D,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;gBAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;oBACb,KAAK;oBACL,MAAM;oBACN,MAAM,EAAE,QAAQ;iBACnB,CAAC,CAAC;aACN;SACJ,CAAC;QAEF,kBAAa,GAAG,OAAO,KAAoB;YACvC,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC;YAC9E,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,IAAI,eAAe;gBAAE,OAAO;YAElE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;gBACpC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;aAClC;iBAAM;gBACH,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;aAChD;SACJ,CAAC;QAEF,2BAAsB,GAAG,OAAO,aAA0D;YACtF,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;YAC1B,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,aAAa,CAAC;YAClD,MAAM,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC;YACtD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;gBAC5B,IAAI,QAAQ,EAAE;oBACV,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;oBAC9B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;iBAC1B;qBAAM;oBACH,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBACnD,IAAI,CAAC,eAAe,GAAG,cAAc;0BAC/B,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,cAAc,CAAC,OAAO,EAAE,CAAC;0BAClE,EAAE,CAAC;oBACT,IAAI,CAAC,KAAK,GAAG,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,KAAI,SAAS,CAAC;iBACnD;aACJ;YAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACb,KAAK,EAAE,QAAQ,GAAG,SAAS,GAAG,KAAK;gBACnC,MAAM;gBACN,MAAM,EAAE,QAAQ;aACnB,CAAC,CAAC;SACN,CAAC;QAEF,uBAAkB,GAAG;YACjB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;SAC3B,CAAC;QAEF,qBAAgB,GAAG,CAAC,KAAkB;YAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAmC,CAAC;YACzD,IAAI,MAAM,CAAC,SAAS,KAAK,iBAAiB,EAAE;gBACxC,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;gBAChC,IAAI,CAAC,cAAc;oBAAE,OAAO;gBAC5B,cAAc,CAAC,IAAI,GAAG,KAAK,CAAC;aAC/B;SACJ,CAAC;QAEF,wBAAmB,GAAG;YAClB,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;YACxC,IAAI,CAAC,EAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,CAAA;gBAAE,IAAI,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC;iBACvE,IAAI,KAAK;gBAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;SAC5C,CAAC;QAEF,iCAA4B,GAAG;;YAC3B,MAAM,EAAE,eAAe,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC;YACtC,MAAM,cAAc,GAAG,eAAe,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;YACnE,MAAM,OAAO,GAAG,OAAM,MAAA,IAAI,CAAC,UAAU,0CAAE,UAAU,EAAE,CAAA,CAAC;YACpD,IAAI,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC;YAC5D,IAAI,CAAC,sBAAsB,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAC,MAAM,IAAI,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAI,EAAE,CAAC;SACxG,CAAC;;sCA5X8C,EAAE;;;;qBAuBjC,CAAC,EAAC,MAAA,MAAM,CAAC,MAAM,0CAAE,eAAe,CAAA;;;;;;gCAmCZ,OAAO;;gCAWjB,GAAG;+BAII,EAAE;;;;;;IAyBpC,oBAAoB;QAChB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAChC;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACjE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;KACpC;IAED,gBAAgB;QACZ,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAChC,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC9B;IAED,kBAAkB;QACd,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;KAClC;;;IAMD,qBAAqB;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,4BAA4B,EAAE,CAAC;KACvC;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;KAC3B;IAGD,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAkC;QACpE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;YAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACzC,IAAI,IAAI;YAAE,OAAO;QACjB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;KAC1C;;;;;;;;IAWD,MAAM,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QACxC,IAAI,CAAC,cAAc,EAAE,CAAC;KACzB;;;;;;IAQD,MAAM,WAAW;QACb,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QACvC,IAAI,CAAC,cAAc,EAAE,CAAC;KACzB;;;;;;;;;IAWD,MAAM,QAAQ,CAAC,MAAyB,EAAE,UAAsC,EAAE,YAAY,EAAE,IAAI,EAAE;;QAClG,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;QACpE,MAAM,UAAU,GAA0B,OAAM,MAAA,IAAI,CAAC,UAAU,0CAAE,UAAU,EAAE,CAAA,CAAC;QAC9E,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACZ,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;YACzB,MAAM,gBAAgB,EAAE,CAAC;SAC5B;QAED,QAAQ,CAAC,OAAO,CAAC,KAAK;;YAClB,MAAA,UAAU,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,0CAAE,KAAK,EAAE,CAAC;SAC9D,CAAC,CAAC;QAEH,IAAI,OAAO,CAAC,YAAY,EAAE;YACtB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;YAC1B,MAAM,gBAAgB,EAAE,CAAC;SAC5B;KACJ;;;IAMD,sBAAsB,CAAC,QAAQ;;QAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,MAAM,UAAU,GAAG,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,0CAAE,KAAK,mCAAI,IAAI,CAAC;QAChD,IAAI,QAAQ,EAAE;YACV,IAAI,IAAI,CAAC,KAAK;gBAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClC,IAAI,CAAC,4BAA4B,EAAE,CAAC;SACvC;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE;YAClC,IAAI,CAAC,4BAA4B,EAAE,CAAC;SACvC;aAAM;YACH,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;SAC3B;KACJ;IAGD,MAAM,YAAY,CAAC,QAAQ;;QACvB,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QAC3C,IAAI,QAAQ;YAAE,OAAO;QACrB,MAAM,UAAU,GAAG,MAAA,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,CAAC,CAAC,0CAAE,KAAK,mCAAI,IAAI,CAAC;QACvD,IAAI,QAAQ,KAAK,UAAU;YAAE,IAAI,CAAC,4BAA4B,EAAE,CAAC;aAC5D;YACD,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YACtD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,cAAc,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YAChF,IAAI,CAAC,eAAe,GAAG,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC;SAC5D;KACJ;;;IAKD,IAAI,aAAa;QACb,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,sBAAsB,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAE7E,IAAI,CAAC,WAAW,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC;aACtE,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,GAAG,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAE5F,OAAO,GAAG,CAAC,iCAAiC,EAAE,EAAE,KAAK,EAAE,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC;KACpF;IAED,IAAI,sBAAsB;QACtB,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QAC1C,IAAI,SAAS;YACT,OAAO,aAAa,CAAC,MAAM,GAAG,SAAS,GAAG,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,GAAG,aAAa,CAAC;;YACrG,OAAO,aAAa,CAAC;KAC7B;IAED,cAAc;QACV,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC5B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,EAAE,CAAC;QACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,EAAE,CAAC;QACpB,UAAU,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;KACrD;;;IA0ID,mBAAmB;QACf,QACI,WACI,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAC,IAAI,iBACE,MAAM,IAEjB,GAAG,CAAC,uCAAuC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAC/D,EACR;KACL;IAED,UAAU;QACN,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACrC,MAAM,QAAQ,GAAG,WAAW,IAAI,MAAM,CAAC;QACvC,MAAM,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;QAC5C,MAAM,QAAQ,GAAG,QAAQ,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,cAAc,CAAC;QAErE,QACI,EAAC,OAAO,IACJ,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,CAAC,QAAQ,IAAI,IAAI,CAAC,oBAAoB,KAAK,SAAS,EAC7D,QAAQ,EAAE,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,gBACtC,CAAC,QAAQ,IAAI,GAAG,CAAC,oCAAoC,CAAC,KAAK,SAAS,EAChF,IAAI,EAAE,CAAC,QAAQ,IAAI,QAAQ,KAAK,SAAS,IAEzC,eAAS,IAAI,EAAE,QAAQ,GAAY,CAC7B,EACZ;KACL;IAED,MAAM;QACF,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAC3C,MAAM,iBAAiB,GAAG,CAAC,aAAa,CAAC,CAAC;QAC1C,IAAI,WAAW,IAAI,MAAM;YAAE,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC9D,IAAI,WAAW;YAAE,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAEvD,QACI,wEAAiB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAC5C,4DAAK,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,IACnC,4DACI,KAAK,EAAC,oBAAoB,EAC1B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EACxC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,QAAQ,EAAE,CAAC,CAAC,IAEZ,+DACI,KAAK,EAAC,aAAa,aACX,aAAa,EACrB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,CAAC,WAAW,IAAI,UAAU,KAAK,SAAS,EAC9C,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,UAAU,EAAE,IAAI,CAAC,oBAAoB,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,0BACD,CAAC,WAAW,IAAI,QAAQ,mBAC/B,CAAC,WAAW,IAAI,aAAa,KAAK,SAAS,mBAC3C,CAAC,WAAW,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,SAAS,gBAC5C,IAAI,CAAC,aAAa,sBACZ,CAAC,WAAW,IAAI,oBAAoB,KAAK,SAAS,IAEnE,IAAI,CAAC,sBAAsB,EAC3B,CAAC,WAAW,IAAI,MAAM,IAAI,6DAAM,KAAK,EAAC,IAAI,SAAG,GAAG,CAAC,4BAA4B,CAAC,MAAS,CACnF,CACP,EACL,IAAI,CAAC,UAAU,EAAE,EACjB,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAC1C,EACL,IAAI,CAAC,WAAW,GAAG,CAAC,KACjB,mEACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACrC,cAAc,EAAE,IAAI,CAAC,UAAU,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAE5B,uEACI,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,OAAO,EAAE,MAAM,IAAI,CAAC,4BAA4B,EAAE,EAClD,KAAK,EAAE,GAAG,CAAC,iCAAiC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,IAErE,8DAAQ,CACK,CACR,CAChB,CACa,EACpB;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Pill"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-block;\n position: relative;\n line-height: 0;\n}\n\n:host(:not(:last-child)) {\n margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.btn-wrapper {\n --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n --comp-close-size: 0px;\n --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n --comp-active-btn-color: var(--comp-btn-background);\n --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n position: relative;\n\n &.has-options,\n &.has-icon {\n --comp-close-size: var(--comp-pill-btn-height);\n }\n\n :host([active]) & {\n --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n }\n\n :host([theme='primary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-primary-active-hover-background,\n --t-primary-l3,\n #21acff\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-primary-active-hover-border-color,\n --t-primary-l3,\n #21acff\n )};\n }\n\n :host([theme='secondary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-secondary-active-hover-background,\n --t-secondary-l3,\n #c9d5db\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-secondary-active-hover-border-color,\n --t-secondary-l3,\n #c9d5db\n )};\n }\n\n :host([theme='tertiary']) & {\n --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n --comp-hover-active-btn-background: #{var-list(\n --tct-pill-tertiary-active-hover-background,\n --t-tertiary-l3,\n #eff8fd\n )};\n --comp-hover-active-btn-border-color: #{var-list(\n --tct-pill-tertiary-active-hover-border-color,\n --t-tertiary-l3,\n #eff8fd\n )};\n }\n}\n\n.btn-height-wrapper {\n height: var(--comp-pill-min-height);\n display: flex;\n align-items: center;\n cursor: pointer;\n &:focus {\n box-shadow: none;\n }\n\n :host([disabled]) & {\n cursor: not-allowed;\n }\n}\n\n.btn-close,\n.btn-primary {\n cursor: pointer;\n height: var(--comp-pill-btn-height);\n border-style: solid;\n border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n transition-property: background, color, padding, width, opacity;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n :host([disabled]) & {\n opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n}\n\n.btn-primary {\n background: var(--comp-btn-background);\n border-width: var-list(--comp-pill-btn-border-width);\n border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n padding-inline: var(--comp-btn-padding);\n padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n color: var(--comp-btn-color);\n display: block;\n width: 100%;\n text-align: start;\n\n &:focus,\n &:hover {\n background: var(--comp-hover-btn-background);\n }\n\n .has-options &,\n .has-icon & {\n padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n }\n\n .has-options & {\n @include line-clamp(1);\n max-width: var-list(var-prefixer(pill-max-width), 200px);\n }\n\n :host([active]) & {\n background: var(--comp-active-btn-background);\n border-color: var(--comp-active-btn-border-color);\n color: var(--comp-active-btn-color);\n\n &:focus,\n &:hover {\n background: var(--comp-hover-active-btn-background);\n border-color: var(--comp-hover-active-btn-border-color);\n }\n }\n}\n\n.btn-close {\n background: transparent;\n border-color: transparent;\n border-width: var(--comp-pill-btn-border-width);\n width: var(--comp-close-size);\n height: var(--comp-close-size);\n padding: 0;\n border: 0;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n opacity: 0;\n :host([active]) & {\n color: var(--comp-active-btn-color);\n }\n\n .has-options &,\n .has-icon & {\n opacity: 1;\n }\n}\n\nq2-icon {\n --t-icon-stroke-primary: currentcolor;\n width: var-list(var-prefixer(pill-icon-size), 14px);\n height: var-list(var-prefixer(pill-icon-size), 14px);\n transition-property: transform;\n transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n pointer-events: none;\n\n :host([open]) & q2-icon {\n transform: rotate(180deg);\n }\n}\n\nbutton.btn-close {\n :host([active]) & {\n &:focus,\n &:hover {\n background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n }\n }\n}\n\nq2-popover {\n top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n button {\n border-style: none;\n }\n}\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Listen,\n Watch,\n Element,\n EventEmitter,\n Event,\n Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n // #region Own Properties\n\n mutationObserver: MutationObserver;\n optionList: HTMLQ2OptionListElement;\n popoverElement: HTMLQ2PopoverElement;\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n scheduledAfterRender: (() => void)[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n optionCount: number;\n\n @State()\n selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n // #endregion\n // #region Public Property API\n\n /** Determine if the elements is in the selected state, with values. /\n @Prop({ reflect: true, mutable: true })\n active: boolean;\n\n /* Indicates that the pill has no border /\n @Prop({ reflect: true })\n borderless: boolean;\n\n /* Indicates the pill cannot be focused or interacted with. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\n\n /\n The text that populates the label.\n * @localizable\n /\n @Prop({ reflect: true })\n label: string;\n\n /\n The maximum number of characters to display before ellipcizing.\n * @info\n * Limitless by default.\n /\n @Prop({ reflect: true })\n maxLength: number;\n\n /\n Enables the multi-select ability for the dropdown.\n * @info\n * Only applicable when options are provided.\n /\n @Prop({ reflect: true })\n multiple: boolean;\n\n /* Determine whether the popover is open or closed. /\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /* Determines the label that is applied to the option list for accessibility purposes. /\n @Prop()\n optionListLabel: string;\n\n /* Aligns the popover dropdown to the left or right side of the input field. /\n @Prop({ mutable: true })\n popoverAlignment: 'left' \| 'right' = 'right';\n\n /\n Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n /\n @Prop()\n popoverDirection: 'up' \| 'down';\n\n /* @deprecated /\n @Prop()\n popoverMinHeight: number = 150;\n\n /* A list of the selected options on the element. /\n @Prop({ mutable: true })\n selectedOptions: IOptionValue[] = [];\n\n /* The color of the element when in the active state. /\n @Prop({ reflect: true })\n theme: 'primary' \| 'secondary' \| 'tertiary';\n\n /* The value emitted when the component is selected. /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the pill is clicked or the selected options change.\n \n When multi-select is enabled, `value` will be `undefined`.\n * @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n const observer = new MutationObserver(this.determineOptionCount);\n observer.observe(this.hostElement, { childList: true, attributes: true });\n this.mutationObserver = observer;\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n this.syncValueProperties();\n }\n\n componentDidRender() {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('displayChanged')\n handleSelectedDisplay() {\n if (this.multiple) return;\n this.updateSelectedOptionElements();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n @Listen('popoverStateChanged')\n popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n if (open) return;\n this.optionList.setActiveElement(null);\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<button>` to hide the popover if it is visible.\n \n @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover if it is hidden.\n \n @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n \n If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n * after the option(s) are selected.\n \n @testOnly\n */\n @Method()\n async setValue(values: string \| string[], options: { closePopover?: boolean } = { closePopover: true }) {\n const valueSet = new Set(Array.isArray(values) ? values : [values]);\n const allOptions: HTMLQ2OptionElement[] = await this.optionList?.getOptions();\n if (!this.open) {\n await this.openPopover();\n await waitForNextPaint();\n }\n\n valueSet.forEach(value => {\n allOptions.find(option => option.value === value)?.click();\n });\n\n if (options.closePopover) {\n await this.closePopover();\n await waitForNextPaint();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('selectedOptions')\n selectedOptionsChanged(newValue) {\n const { multiple } = this;\n const firstValue = newValue?.[0]?.value ?? null;\n if (multiple) {\n if (this.value) this.value = null;\n this.updateSelectedOptionElements();\n } else if (this.value === firstValue) {\n this.updateSelectedOptionElements();\n } else {\n this.value = firstValue;\n }\n }\n\n @Watch('value')\n async valueChanged(newValue) {\n const { multiple, selectedOptions } = this;\n if (multiple) return;\n const firstValue = selectedOptions?.[0]?.value ?? null;\n if (newValue === firstValue) this.updateSelectedOptionElements();\n else {\n const selectedOption = await this.getOption(newValue);\n const { value, display } = selectedOption \|\| { value: newValue, display: null };\n this.selectedOptions = value ? [{ value, display }] : [];\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonContent() {\n const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n if (!optionCount \|\| selectedOptionElements.length === 0) return loc(label);\n else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n }\n\n get truncatedButtonContent() {\n const { maxLength, buttonContent } = this;\n if (maxLength)\n return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;\n else return buttonContent;\n }\n\n _togglePopover() {\n const { primaryBtn } = this;\n primaryBtn?.click();\n primaryBtn?.focus();\n primaryBtn.dispatchEvent(new FocusEvent('focus'));\n }\n\n clearSelectedOptions = () => {\n this.selectedOptions = [];\n this.value = null;\n this.active = false;\n this.open = false;\n this.primaryBtn.focus();\n this.change.emit({ value: null, values: [], active: false });\n this.scheduledAfterRender.push(resizeIframe);\n };\n\n determineOptionCount = async () => {\n if (this.optionList) {\n const allOptions = await this.optionList.getOptions();\n this.optionCount = allOptions.length;\n } else {\n const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n this.optionCount = numberOfOptions;\n }\n };\n\n executeActionSheet = async (event: MouseEvent \| KeyboardEvent) => {\n const result = await showActionSheetList(this, event);\n this.handleSelectionChanges(result);\n };\n\n getOption = async (value: string) => {\n if (this.optionList) {\n const options = await this.optionList.getOptions();\n return options.find(option => option.value === value);\n } else {\n return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n }\n };\n\n handleButtonFocusout = async (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (relatedTarget?.tagName === 'Q2-OPTION') return;\n this.open = false;\n };\n\n handleChange = event => {\n event.stopPropagation();\n if (!this.optionCount) return;\n this.handleSelectionChanges(event.detail);\n };\n\n handleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) return;\n if (this.optionCount) {\n if (shouldShowActionSheet(this)) {\n this.executeActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n } else {\n const { value, label } = this;\n const isActive = (this.active = !this.active);\n const values = isActive ? [{ value, display: label }] : [];\n this.selectedOptions = values;\n this.change.emit({\n value,\n values,\n active: isActive,\n });\n }\n };\n\n handleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey \|\| event.ctrlKey \|\| event.key === 'Tab';\n if (!this.optionCount \|\| this.disabled \|\| isTabMetaOrCtrl) return;\n\n event.preventDefault();\n if (shouldShowActionSheet(this, event)) {\n this.executeActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n const { multiple } = this;\n const { value = '', values = [] } = changeDetails;\n const isActive = multiple ? !!values.length : !!value;\n if (!this.hostElement.onchange) {\n if (multiple) {\n this.selectedOptions = values;\n this.value = undefined;\n } else {\n const selectedOption = await this.getOption(value);\n this.selectedOptions = selectedOption\n ? [{ value: selectedOption.value, display: selectedOption.display }]\n : [];\n this.value = selectedOption?.value \|\| undefined;\n }\n }\n\n this.change.emit({\n value: multiple ? undefined : value,\n values,\n active: isActive,\n });\n };\n\n handleWrapperClick = () => {\n this.primaryBtn.focus();\n this.primaryBtn.click();\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n syncValueProperties = () => {\n const { value, selectedOptions } = this;\n if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n else if (value) this.valueChanged(value);\n };\n\n updateSelectedOptionElements = async () => {\n const { selectedOptions = [] } = this;\n const selectedValues = selectedOptions.map(option => option.value);\n const options = await this.optionList?.getOptions();\n if (this.optionCount) this.active = !!selectedValues.length;\n this.selectedOptionElements = options?.filter(option => selectedValues.includes(option.value)) \|\| [];\n };\n\n // #endregion\n // #region Render Methods\n\n renderHiddenElement() {\n return (\n <div\n id=\"option-description\"\n class=\"sr\"\n aria-hidden=\"true\"\n >\n {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n </div>\n );\n }\n\n renderIcon() {\n const { optionCount, active } = this;\n const isButton = optionCount && active;\n const TagName = isButton ? 'button' : 'div';\n const iconName = isButton \|\| !optionCount ? 'close' : 'chevron-down';\n\n return (\n <TagName\n class=\"btn-close\"\n onClick={(isButton && this.clearSelectedOptions) \|\| undefined}\n disabled={(isButton && this.disabled) \|\| undefined}\n aria-label={(isButton && loc('tecton.element.pill.clearSelection')) \|\| undefined}\n type={(isButton && 'button') \|\| undefined}\n >\n <q2-icon type={iconName}></q2-icon>\n </TagName>\n );\n }\n\n render() {\n const { optionCount, active, open } = this;\n const wrapperClassNames = ['btn-wrapper'];\n if (optionCount \|\| active) wrapperClassNames.push('has-icon');\n if (optionCount) wrapperClassNames.push('has-options');\n\n return (\n <click-elsewhere onChange={this.onClickElsewhere}>\n <div class={wrapperClassNames.join(' ')}>\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el)}\n onClick={this.handleWrapperClick}\n tabIndex={-1}\n >\n <button\n class=\"btn-primary\"\n test-id=\"btn-control\"\n type=\"button\"\n role={(optionCount && 'combobox') \|\| undefined}\n ref={el => (this.primaryBtn = el)}\n onClick={this.handleClick}\n onKeyDown={this.handleKeydown}\n onFocusout={this.handleButtonFocusout}\n disabled={this.disabled}\n aria-roledescription={!optionCount && 'filter'}\n aria-controls={(optionCount && 'option-list') \|\| undefined}\n aria-expanded={(optionCount && `${!!open}`) \|\| undefined}\n aria-label={this.buttonContent}\n aria-describedby={(optionCount && 'option-description') \|\| undefined}\n >\n {this.truncatedButtonContent}\n {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n </button>\n </div>\n {this.renderIcon()}\n {!!optionCount && this.renderHiddenElement()}\n </div>\n {this.optionCount > 0 && (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.primaryBtn}\n open={this.open}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n >\n <q2-option-list\n type=\"listbox\"\n ref={el => (this.optionList = el)}\n id=\"option-list\"\n onChange={this.handleChange}\n multiple={this.multiple}\n selectedOptions={this.selectedOptions}\n onReady={() => this.updateSelectedOptionElements()}\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n )}\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { g as handleDeprecationWarning, w as waitForNextPaint } from './index2.js';
+import { j as handleDeprecationWarning, w as waitForNextPaint } from './index2.js';
 const q2PopoverCss = "*{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}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 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}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
 const Q2PopoverStyle0 = q2PopoverCss;
@@ -292,7 +292,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
             containerClasses.push('show');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        return (h("div", { key: 'a58234dadb51baed9f1013b44ec6f1e2b3459cb0', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer" }, h("div", { key: '50fb0083b7eeee5a654e0e9ef405d104cbe08b3c', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: 'c3a2cb60d4c19261cb5c8e568505d524f9405580' }))));
+        return (h("div", { key: '570cccbfa3c4830d4b9d52c9564c5355ed357e4f', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer" }, h("div", { key: '7729d8f39d61e866de0cf3fe6d65fa8205af8a18', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '315ce34d31a84a0a0d6688982567d2267452161c' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -183,7 +183,7 @@ const Q2RadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class Q2RadioGroup exten
         const showLabel = this.label || this.optional || this.readonly;
         const { hasError } = this;
         const showLabelRow = showLabel || hasError;
-        return (h(Fragment, { key: '391daee73ed99703223e6d72ea8109cdb0f3a728' }, showLabelRow && (h("div", { key: '7e9b358ff98e87551783c7ccfeb789a27c9282cc', class: "label-row" }, showLabel && h("div", { key: '198215d1006af99957bd108540f58b36162c102a', class: "group-legend" }, labelDOM(this)), hasError && (h("q2-icon", { key: 'bb6e82ecc48c28eb6efae09d8f8cd03f1a4bc957', type: "error", "test-id": "iconError" })))), h("fieldset", { key: 'fe4e72b6c8cbd827909f4b6caa47e96699f29163', onChange: this.onInnerRadioChange, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { key: '963d3f6d55511c5cf5ca99218addaaa12a34f505', class: "sr" }, labelDOM(this)), this.inputDom())));
+        return (h(Fragment, { key: '3536f41532e1cc18001e2e1d8f8f4c9e8223dd67' }, showLabelRow && (h("div", { key: '4ec07666943cb4b0a25ad2dd70fdc26b072affb0', class: "label-row" }, showLabel && h("div", { key: '0442988f9575a44d0d0de1e7885be9239e06ba64', class: "group-legend" }, labelDOM(this)), hasError && (h("q2-icon", { key: 'e455ee3337a5e401c5a4a4a9f8276bff189b26f2', type: "error", "test-id": "iconError" })))), h("fieldset", { key: '2f849878d217decc154d9d04fa8182b3d1b1d79a', onChange: this.onInnerRadioChange, "aria-invalid": `${this.hasError}` }, showLabel && h("legend", { key: '95e7c2f3fcb370048801b4f6be953047011a83f2', class: "sr" }, labelDOM(this)), this.inputDom())));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -83,7 +83,7 @@ const Q2Radio$1 = /*@__PURE__*/ proxyCustomElement(class Q2Radio extends HTMLEle
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '210cc7331f317028a89673653eef957e002bccfc', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '2323fefb73a45336442e51e02e07cc20d8ff7237', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: 'a79888b871fcbcd8234779f508edbdfbb8a6d778', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: 'a7268ee6225beeeea0cb719d7c6d2feca48614de', viewBox: "0 0 18 18" }, h("circle", { key: '41c33face1190dc510c7f9f2f53fe1796a918188', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '947c9fbc47945c59678d9fa08c042d9e47a56a51', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: '46654e6f4ff3596983f1e20b8a501bedf882bcec', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: 'aef00a9fc70c904d4d09561c430c3df65fc36121' }))))));
+        return (h("div", { key: '2eb548fb623e624b5304c321f4b57c1a48eaa4b0', class: this.groupTileLayout ? 'radio-tile' : 'radio-container' }, h("input", { key: '42eb98daad18d1aca54e84e5ed9647be6dbd7fca', ref: el => (this.inputField = el), class: "sr", id: this._id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }), h("label", { key: '5f063d1a3b5a4494f1e471eda96844368d9c5c59', htmlFor: this._id, class: this.hideLabel ? 'label-hidden' : undefined, "test-id": "radioButton" }, !this.groupTileLayout && (h("svg", { key: 'aa0a30ecc9ed0b539c28b24f8ff5467fe158ff1c', viewBox: "0 0 18 18" }, h("circle", { key: '413e5556dbb780820bd91da40bed8bde37998e45', stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }), h("circle", { key: '6b27c265867df2752d63aa2f3f91266460328e70', stroke: "none", fill: "none", cx: "9", cy: "9", r: "4" }))), !this.hideLabel && (h("div", { key: '6dc3398a42d68bad7f064743bc53e45f24ba2b6e', class: "label-content" }, (this.label && loc(this.label)) || '', h("slot", { key: '9c259a28aeb1b056aca638df99a3c9e2524b04e1' }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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: '26038fa24d32109482710ec28cb689e1db340abd' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: 'bec57e7e2ad096c2493a0ff26e6bf223e2080641' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './q2-btn2.js';
 import { d as defineCustomElement$3 } from './q2-icon2.js';
 import { d as defineCustomElement$2 } from './q2-loading2.js';
-const q2SectionCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, uppercase);letter-spacing:var(--tct-section-title-letter-spacing, 0.5px)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";
+const q2SectionCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, 20px);font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, none);letter-spacing:var(--tct-section-title-letter-spacing, 0.5px)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";
 const Q2SectionStyle0 = q2SectionCss;
 const Q2Section$1 = /*@__PURE__*/ proxyCustomElement(class Q2Section extends HTMLElement {
@@ -169,9 +169,9 @@ const Q2Section$1 = /*@__PURE__*/ proxyCustomElement(class Q2Section extends HTM
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: '550b55c43f6a037c30df83d5bdd3c5f6c18b548a', class: "wrapper" }, h("header", { key: '74a281cd6434a7e33d32ed35d46752d313b7e226', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'bccad40c23075adf4d25eedfb6acc733a3a8f57e', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '0b7c240a0b9cc245d2d8426092c805146f15b553', class: "title" }, loc(this.label)), h("div", { key: '2aacff31aadee0770129b767d3aed1f43fc626de', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '3317e6865bc814005f03ea7dd0b431885739f5d1', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '1462f06ccc824c1db7439e015a887763d323620d', 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: '21efcebc32fc92ee1912532552f8efa8fc1552eb', type: "chevron-up" })))), h("div", { key: '6a6de47b233079f00743e6a23fd25dc66acce2c2', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: 'f7969997a0aaea2c5f883156428626bde982d6f2', class: "wrapper" }, h("header", { key: '1dca67129a19b4ab1f13e96ad4069f51e66aa744', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'ed9c5f0a351cfe2afe39b26de41816ad7842a5c0', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '2d3081f31e0cbe7255c9eab2ca03fc0de8aecb9f', class: "title" }, loc(this.label)), h("div", { key: '4bda5e123c97f10bee569b96ead7585ce4910c0e', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'fa1cf27e2c5a6d05f47887a3b40adf8d1f6b6fbd', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'dc9ce02e335aed9c06cb4eac6a2d4e15212bc95e', 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: '377521b837fce45914a003d768862871dfb89bdb', type: "chevron-up" })))), h("div", { key: 'cae742942789c59d37466d3767b4ec4b3da2c138', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '8d70829cef7eb0f671779ce89ecab354bb33a028', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '88e723ba02fecd1c3845c9956c9e2b1769623d7a', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '43f57ee880d454ecfef29f92177946350da7eec4', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'f13ca46b06dcdb43e1c307add290f7bb16065365', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"q2-section.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,4kHAA4kH,CAAC;AAClmH,wBAAe,YAAY;;MCcdA,WAAS;;;;;;QAIlB,cAAS,GAAW,SAAS,CAAC;QAO9B,YAAO,GAAW,OAAO,CAAC;QAoI1B,2BAAsB,GAAG;YACrB,IAAI,IAAI,CAAC,WAAW,EAAE;gBAClB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;gBAC9D,OAAO;aACV;YAED,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,YAAY,CAAC,CAAC;YACpD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YAC5E,IAAI,CAAC,2BAA2B,GAAG,QAAQ,CAAC;SAC/C,CAAC;QAEF,0BAAqB,GAAG;YACpB,IAAI,IAAI,CAAC,UAAU,EAAE;gBACjB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBACxE,OAAO;aACV;YAED,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9D,IAAI,CAAC,0BAA0B,GAAG,QAAQ,CAAC;SAC9C,CAAC;QAEF,wBAAmB,GAAG;YAClB,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACnD,CAAC;QAgBF,kBAAa,GAAG;YACZ,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACb,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;aAC3B,CAAC,CAAC;SACN,CAAC;QAEF,uBAAkB,GAAG;YACjB,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;YAEtF,IAAI,IAAI,CAAC,gBAAgB,KAAK,cAAc,EAAE;gBAC1C,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,cAAc,CAAC;aAC5C;SACJ,CAAC;QAEF,oBAAe,GAAG;YACd,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACf,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;aAClC;iBAAM;gBACH,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aAC3B;YAED,UAAU,CAAC;;;;gBAIP,IAAI,CAAC,mBAAmB,EAAE,CAAC;aAC9B,EAAE,IAAI,CAAC,CAAC;SACZ,CAAC;QAEF,8BAAyB,GAAG;YACxB,IAAI,IAAI,CAAC,WAAW,EAAE;gBAClB,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;gBACjE,OAAO;aACV;YACD,IAAI,CAAC,2BAA2B,CAAC,UAAU,EAAE,CAAC;SACjD,CAAC;QAEF,6BAAwB,GAAG;YACvB,IAAI,IAAI,CAAC,UAAU,EAAE;gBACjB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBAC3E,OAAO;aACV;YAED,IAAI,CAAC,0BAA0B,CAAC,UAAU,EAAE,CAAC;SAChD,CAAC;;gCAzM0B,KAAK;2BAGV,KAAK;;;;;;;;IA0C5B,oBAAoB;QAChB,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,yBAAyB,EAAE,CAAC;KACpC;IAED,iBAAiB;QACb,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACvC,IAAI,CAAC,aAAa,GAAG,WAAW,IAAI,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;QACjE,IAAI,CAAC,WAAW,GAAG,CAAC,QAAQ,CAAC;KAChC;IAED,gBAAgB;QACZ,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACnC;;;IAMD,oBAAoB,CAAC,KAAkB;QACnC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE;YACnF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;SACzC;KACJ;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;KACjC;;;IAMD,mBAAmB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;KAC3C;IAGD,MAAM,gBAAgB,CAAC,QAAiB;QACpC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;QAE9C,IAAI,QAAQ,EAAE;YACV,IAAI,CAAC,aAAa,EAAE,CAAC;SACxB;aAAM;YACH,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1B;KACJ;;;IAKD,IAAI,sBAAsB;QACtB,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC;KACzD;IAED,IAAI,aAAa;QACb,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QACvC,IAAI,CAAC,WAAW,EAAE;YACd,OAAO,IAAI,CAAC;SACf;aAAM,IAAI,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAC,sBAAsB,CAAC;SACtC;aAAM;YACH,OAAO,GAAG,CAAC;SACd;KACJ;IA4BD,MAAM,eAAe;QACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,sBAAsB,CAAC;QACjD,MAAM,SAAS,CAAC;YACZ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;SAC3C,CAAC,CAAC;KACN;IAED,MAAM,aAAa;QACf,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,MAAM,SAAS,CAAC;YACZ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;SAC3C,CAAC,CAAC;KACN;;;IAmDD,MAAM;QACF,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC;QACtD,MAAM,cAAc,GAAG,CAAC,iBAAiB,CAAC,CAAC;QAC3C,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QACzD,IAAI,WAAW,EAAE;YACb,IAAI,WAAW;gBAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;iBAC7C,IAAI,aAAa;gBAAE,cAAc,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SACnE;QAED,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAEjE,QACI,gEAAS,KAAK,EAAC,SAAS,IACpB,+DAAQ,KAAK,EAAE,SAAS,GAAG,YAAY,GAAG,EAAE,IACxC,4DACI,KAAK,EAAC,gBAAgB,EACtB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,IAE9C,iBAAiB,IAAI,2DAAI,KAAK,EAAC,OAAO,IAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAM,EAC9D,4DACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EACxC,KAAK,EAAC,qBAAqB,IAE3B,6DACI,GAAG,EAAE,CAAC,EAAmB,MAAM,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACpD,IAAI,EAAC,mBAAmB,GAC1B,CACA,CACJ,EACL,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,cAAc,KACrC,+DACI,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,2CAA2C,CAAC,EACrE,YAAY,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EAClC,YAAY,EAAE,IAAI,CAAC,SAAS,aACpB,cAAc,sBAEtB,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3B,gEAAS,IAAI,EAAC,YAAY,GAAG,CACxB,CACZ,CACI,EACT,4DACI,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/B,EAAE,EAAE,IAAI,CAAC,SAAS,qBACD,IAAI,CAAC,OAAO,EAC7B,IAAI,EAAC,QAAQ,EACb,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACD,IAAI,CAAC,WAAW,IAAI;gBAChB,MAAM,EAAE,IAAI,CAAC,aAAa;aAC7B,IAGL,4DACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACvC,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,IAAI,IAEb,6DAAM,GAAG,EAAE,CAAC,EAAmB,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,GAAI,CAC7D,CACJ,CACA,EACZ;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2Section"],"sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n display: block;\n background: var-list(\n --tct-section-background,\n var-prefixer(section-background-color),\n var-prefixer(section-bg),\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 4px);\n margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n border-width: var-list(--tct-section-border-width, 0);\n border-style: var-list(--tct-section-border-style, solid);\n border-color: var-list(--tct-section-border-color, none);\n\n @media screen and (max-width: 767px) {\n --comp-default-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n }\n\n @media print {\n --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n }\n}\n\n.wrapper {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n display: block;\n padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n &:hover {\n box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n }\n\n :host([collapsible]) & {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n }\n}\n\nheader {\n --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n display: flex;\n\n @media print {\n padding: var-list(--tct-section-header-print-padding, 0);\n }\n\n &.has-header {\n min-height: var-list(var-prefixer(section-header-min-height), 44px);\n }\n}\n\n.header-content {\n flex: 1 1 100%;\n min-width: 0;\n align-self: center;\n\n :host([collapsible]) & {\n cursor: pointer;\n }\n}\n\n.title {\n margin: var-list(--tct-section-title-margin, 0);\n font-size: var-list(--tct-section-title-font-size, 20px);\n font-weight: var-list(--tct-section-title-font-weight, 600);\n text-transform: var-list(--tct-section-title-text-transform, uppercase);\n letter-spacing: var-list(--tct-section-title-letter-spacing, 0.5px);\n}\n\nq2-icon {\n transition: transform var(--comp-tween);\n\n :host(:not([expanded])) &,\n :host([expanded='false']) & {\n transform: rotate(180deg);\n }\n}\n\n.content-wrapper {\n height: auto;\n\n &.is-closed {\n display: none;\n overflow: hidden;\n }\n\n &.is-transitioning {\n overflow: hidden;\n }\n\n :host([collapsible]) & {\n transition: height var(--comp-tween);\n }\n}\n\n.content {\n --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n @media print {\n padding: var-list(--tct-section-content-print-padding, 0);\n }\n\n &:focus {\n box-shadow: none;\n }\n\n :host([collapsible]) :host(:not([expanded])) & {\n visibility: hidden;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Element,\n Listen,\n State,\n Watch,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n // #region Own Properties\n\n contentContainer: HTMLDivElement;\n contentId: string = 'content';\n contentSlot: HTMLSlotElement;\n contentSlotMutationObserver: MutationObserver;\n headerSlot: HTMLSlotElement;\n headerSlotMutationObserver: MutationObserver;\n headerSlotWrapper: HTMLDivElement;\n resizerFn: NodeJS.Timeout \| undefined;\n titleId: string = 'title';\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n contentHeight: string;\n\n @State()\n hasYieldedHeader: boolean = false;\n\n @State()\n hideContent: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** Determines if the section is collapsible. /\n @Prop({ reflect: true })\n collapsible: boolean;\n\n /* Indicates if the `q2-section` is in an expanded state or not. /\n @Prop({ reflect: true, mutable: true })\n expanded: boolean;\n\n /\n The text to display above the `q2-section`. Renders as an `<h2>` element.\n \n It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n \n @warning\n * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n * accessibility.\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the collapse chevron icon should show in the `q2-section` header. /\n @Prop({ reflect: true })\n noCollapseIcon: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n */\n @Event()\n change: EventEmitter<{ expanded: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.removeHeaderSlotListener();\n this.removeContentSlotListener();\n }\n\n componentWillLoad() {\n this.onHeaderSlotChange();\n const { collapsible, expanded } = this;\n this.contentHeight = collapsible && expanded ? undefined : '0px';\n this.hideContent = !expanded;\n }\n\n componentDidLoad() {\n this.addHeaderSlotListener();\n this.addContentSlotListener();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n this.expanded = event.detail.expanded;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.contentContainer.focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('collapsible')\n collapsibleObserver() {\n this.contentHeight = this.currentHeight;\n }\n\n @Watch('expanded')\n async expandedObserver(expanded: boolean) {\n this.clearResizeInterval();\n this.resizerFn = setInterval(resizeIframe, 5);\n\n if (expanded) {\n this.expandSection();\n } else {\n this.collapseSection();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get contentContainerHeight() {\n return `${this.contentContainer.offsetHeight \|\| 0}px`;\n }\n\n get currentHeight() {\n const { collapsible, expanded } = this;\n if (!collapsible) {\n return null;\n } else if (expanded) {\n return this.contentContainerHeight;\n } else {\n return '0';\n }\n }\n\n addContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.addEventListener('slotchange', resizeIframe);\n return;\n }\n\n const observer = new MutationObserver(resizeIframe);\n observer.observe(this.contentContainer, { childList: true, subtree: true });\n this.contentSlotMutationObserver = observer;\n };\n\n addHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n const observer = new MutationObserver(this.onHeaderSlotChange);\n observer.observe(this.headerSlotWrapper, { childList: true });\n this.headerSlotMutationObserver = observer;\n };\n\n clearResizeInterval = () => {\n this.resizerFn && clearInterval(this.resizerFn);\n };\n\n async collapseSection() {\n this.contentHeight = this.contentContainerHeight;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n async expandSection() {\n this.hideContent = false;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n onHeaderClick = () => {\n this.change.emit({\n expanded: !this.expanded,\n });\n };\n\n onHeaderSlotChange = () => {\n const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n if (this.hasYieldedHeader !== hasSlotContent) {\n this.hasYieldedHeader = !!hasSlotContent;\n }\n };\n\n onTransitionEnd = () => {\n if (this.expanded) {\n this.contentHeight = undefined;\n } else {\n this.hideContent = true;\n }\n\n setTimeout(() => {\n // This gives enough time for all values to get passed over\n // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n // Will revisit in TCT-599\n this.clearResizeInterval();\n }, 1000);\n };\n\n removeContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.removeEventListener('slotchange', resizeIframe);\n return;\n }\n this.contentSlotMutationObserver.disconnect();\n };\n\n removeHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n this.headerSlotMutationObserver.disconnect();\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const hasHeader = this.label \|\| this.hasYieldedHeader;\n const wrapperClasses = ['content-wrapper'];\n const { collapsible, hideContent, contentHeight } = this;\n if (collapsible) {\n if (hideContent) wrapperClasses.push('is-closed');\n else if (contentHeight) wrapperClasses.push('is-transitioning');\n }\n\n const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n return (\n <section class=\"wrapper\">\n <header class={hasHeader ? 'has-header' : ''}>\n <div\n class=\"header-content\"\n id={this.titleId}\n onClick={this.collapsible && this.onHeaderClick}\n >\n {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n <div\n ref={el => (this.headerSlotWrapper = el)}\n class=\"header-slot-wrapper\"\n >\n <slot\n ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n name=\"q2-section-header\"\n />\n </div>\n </div>\n {this.collapsible && !this.noCollapseIcon && (\n <q2-btn\n label={loc(this.label \|\| 'tecton.element.section.defaultToggleLabel')}\n ariaExpanded={`${!!this.expanded}`}\n ariaControls={this.contentId}\n test-id=\"toggleButton\"\n hide-label\n onClick={this.onHeaderClick}\n >\n <q2-icon type=\"chevron-up\" />\n </q2-btn>\n )}\n </header>\n <div\n class={wrapperClasses.join(' ')}\n id={this.contentId}\n aria-labelledby={this.titleId}\n role=\"region\"\n onTransitionEnd={this.onTransitionEnd}\n style={\n this.collapsible && {\n height: this.contentHeight,\n }\n }\n >\n <div\n ref={el => (this.contentContainer = el)}\n class=\"content\"\n tabindex=\"-1\"\n >\n <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n </div>\n </div>\n </section>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-section.js","mappings":"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","names":["Q2Section"],"sources":["src/components/q2-section/q2-section.scss?tag=q2-section&encapsulation=shadow","src/components/q2-section/q2-section.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n display: block;\n background: var-list(\n --tct-section-background,\n var-prefixer(section-background-color),\n var-prefixer(section-bg),\n --app-white,\n #ffffff\n );\n color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 4px);\n margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n border-width: var-list(--tct-section-border-width, 0);\n border-style: var-list(--tct-section-border-style, solid);\n border-color: var-list(--tct-section-border-color, none);\n\n @media screen and (max-width: 767px) {\n --comp-default-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n }\n\n @media print {\n --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n }\n}\n\n.wrapper {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n display: block;\n padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n &:hover {\n box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n }\n\n :host([collapsible]) & {\n --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n }\n}\n\nheader {\n --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n display: flex;\n\n @media print {\n padding: var-list(--tct-section-header-print-padding, 0);\n }\n\n &.has-header {\n min-height: var-list(var-prefixer(section-header-min-height), 44px);\n }\n}\n\n.header-content {\n flex: 1 1 100%;\n min-width: 0;\n align-self: center;\n\n :host([collapsible]) & {\n cursor: pointer;\n }\n}\n\n.title {\n margin: var-list(--tct-section-title-margin, 0);\n font-size: var-list(--tct-section-title-font-size, 20px);\n font-weight: var-list(--tct-section-title-font-weight, 600);\n text-transform: var-list(--tct-section-title-text-transform, none);\n letter-spacing: var-list(--tct-section-title-letter-spacing, 0.5px);\n}\n\nq2-icon {\n transition: transform var(--comp-tween);\n\n :host(:not([expanded])) &,\n :host([expanded='false']) & {\n transform: rotate(180deg);\n }\n}\n\n.content-wrapper {\n height: auto;\n\n &.is-closed {\n display: none;\n overflow: hidden;\n }\n\n &.is-transitioning {\n overflow: hidden;\n }\n\n :host([collapsible]) & {\n transition: height var(--comp-tween);\n }\n}\n\n.content {\n --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n @media print {\n padding: var-list(--tct-section-content-print-padding, 0);\n }\n\n &:focus {\n box-shadow: none;\n }\n\n :host([collapsible]) :host(:not([expanded])) & {\n visibility: hidden;\n }\n}\n","import {\n Component,\n ComponentInterface,\n Prop,\n Element,\n Listen,\n State,\n Watch,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n // #region Own Properties\n\n contentContainer: HTMLDivElement;\n contentId: string = 'content';\n contentSlot: HTMLSlotElement;\n contentSlotMutationObserver: MutationObserver;\n headerSlot: HTMLSlotElement;\n headerSlotMutationObserver: MutationObserver;\n headerSlotWrapper: HTMLDivElement;\n resizerFn: NodeJS.Timeout \| undefined;\n titleId: string = 'title';\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n contentHeight: string;\n\n @State()\n hasYieldedHeader: boolean = false;\n\n @State()\n hideContent: boolean = false;\n\n // #endregion\n // #region Public Property API\n\n /** Determines if the section is collapsible. /\n @Prop({ reflect: true })\n collapsible: boolean;\n\n /* Indicates if the `q2-section` is in an expanded state or not. /\n @Prop({ reflect: true, mutable: true })\n expanded: boolean;\n\n /\n The text to display above the `q2-section`. Renders as an `<h2>` element.\n \n It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n \n @warning\n * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n * accessibility.\n /\n @Prop({ reflect: true })\n label: string;\n\n /* Determines if the collapse chevron icon should show in the `q2-section` header. /\n @Prop({ reflect: true })\n noCollapseIcon: boolean;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the section is expanded or collapsed.\n * @legacyEvent\n */\n @Event()\n change: EventEmitter<{ expanded: boolean }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.removeHeaderSlotListener();\n this.removeContentSlotListener();\n }\n\n componentWillLoad() {\n this.onHeaderSlotChange();\n const { collapsible, expanded } = this;\n this.contentHeight = collapsible && expanded ? undefined : '0px';\n this.hideContent = !expanded;\n }\n\n componentDidLoad() {\n this.addHeaderSlotListener();\n this.addContentSlotListener();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n this.expanded = event.detail.expanded;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.contentContainer.focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('collapsible')\n collapsibleObserver() {\n this.contentHeight = this.currentHeight;\n }\n\n @Watch('expanded')\n async expandedObserver(expanded: boolean) {\n this.clearResizeInterval();\n this.resizerFn = setInterval(resizeIframe, 5);\n\n if (expanded) {\n this.expandSection();\n } else {\n this.collapseSection();\n }\n }\n\n // #endregion\n // #region Local Methods\n\n get contentContainerHeight() {\n return `${this.contentContainer.offsetHeight \|\| 0}px`;\n }\n\n get currentHeight() {\n const { collapsible, expanded } = this;\n if (!collapsible) {\n return null;\n } else if (expanded) {\n return this.contentContainerHeight;\n } else {\n return '0';\n }\n }\n\n addContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.addEventListener('slotchange', resizeIframe);\n return;\n }\n\n const observer = new MutationObserver(resizeIframe);\n observer.observe(this.contentContainer, { childList: true, subtree: true });\n this.contentSlotMutationObserver = observer;\n };\n\n addHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n const observer = new MutationObserver(this.onHeaderSlotChange);\n observer.observe(this.headerSlotWrapper, { childList: true });\n this.headerSlotMutationObserver = observer;\n };\n\n clearResizeInterval = () => {\n this.resizerFn && clearInterval(this.resizerFn);\n };\n\n async collapseSection() {\n this.contentHeight = this.contentContainerHeight;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n async expandSection() {\n this.hideContent = false;\n await nextPaint(() => {\n this.contentHeight = this.currentHeight;\n });\n }\n\n onHeaderClick = () => {\n this.change.emit({\n expanded: !this.expanded,\n });\n };\n\n onHeaderSlotChange = () => {\n const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n if (this.hasYieldedHeader !== hasSlotContent) {\n this.hasYieldedHeader = !!hasSlotContent;\n }\n };\n\n onTransitionEnd = () => {\n if (this.expanded) {\n this.contentHeight = undefined;\n } else {\n this.hideContent = true;\n }\n\n setTimeout(() => {\n // This gives enough time for all values to get passed over\n // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n // Will revisit in TCT-599\n this.clearResizeInterval();\n }, 1000);\n };\n\n removeContentSlotListener = () => {\n if (this.contentSlot) {\n this.contentSlot.removeEventListener('slotchange', resizeIframe);\n return;\n }\n this.contentSlotMutationObserver.disconnect();\n };\n\n removeHeaderSlotListener = () => {\n if (this.headerSlot) {\n this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n return;\n }\n\n this.headerSlotMutationObserver.disconnect();\n };\n\n // #endregion\n // #region Render Methods\n\n render() {\n const hasHeader = this.label \|\| this.hasYieldedHeader;\n const wrapperClasses = ['content-wrapper'];\n const { collapsible, hideContent, contentHeight } = this;\n if (collapsible) {\n if (hideContent) wrapperClasses.push('is-closed');\n else if (contentHeight) wrapperClasses.push('is-transitioning');\n }\n\n const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n return (\n <section class=\"wrapper\">\n <header class={hasHeader ? 'has-header' : ''}>\n <div\n class=\"header-content\"\n id={this.titleId}\n onClick={this.collapsible && this.onHeaderClick}\n >\n {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n <div\n ref={el => (this.headerSlotWrapper = el)}\n class=\"header-slot-wrapper\"\n >\n <slot\n ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n name=\"q2-section-header\"\n />\n </div>\n </div>\n {this.collapsible && !this.noCollapseIcon && (\n <q2-btn\n label={loc(this.label \|\| 'tecton.element.section.defaultToggleLabel')}\n ariaExpanded={`${!!this.expanded}`}\n ariaControls={this.contentId}\n test-id=\"toggleButton\"\n hide-label\n onClick={this.onHeaderClick}\n >\n <q2-icon type=\"chevron-up\" />\n </q2-btn>\n )}\n </header>\n <div\n class={wrapperClasses.join(' ')}\n id={this.contentId}\n aria-labelledby={this.titleId}\n role=\"region\"\n onTransitionEnd={this.onTransitionEnd}\n style={\n this.collapsible && {\n height: this.contentHeight,\n }\n }\n >\n <div\n ref={el => (this.contentContainer = el)}\n class=\"content\"\n tabindex=\"-1\"\n >\n <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n </div>\n </div>\n </section>\n );\n }\n\n // #endregion\n}\n"],"version":3}