q2-tecton-elements 1.50.1 → 1.51.1

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

@@ -0,0 +1,112 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const q2ResizeObserverCss = "*{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(:not([hidden])){display:block;width:100%}";
+const Q2ResizeObserverStyle0 = q2ResizeObserverCss;
+
+const Q2ResizeObserver = /*@__PURE__*/ proxyCustomElement(class Q2ResizeObserver extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tctResize = createEvent(this, "tctResize", 7);
+        this.observedElements = [];
+        // #endregion
+        // #region Local Methods
+        this.handleSlotChange = () => {
+            if (this.disabled)
+                return;
+            this.startObserver();
+        };
+        this.disabled = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        this.stopObserver();
+        this.resizeObserver = null;
+    }
+    componentDidLoad() {
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(resizeEntries => {
+                this.tctResize.emit({ entries: resizeEntries });
+                this.currentResizeObserverEntries = resizeEntries;
+            });
+        }
+        else {
+            console.warn('ResizeObserver is not defined.');
+        }
+        if (!this.disabled) {
+            this.startObserver();
+        }
+    }
+    // #endregion
+    // #region Public Methods API
+    /**
+     * Returns the latest entries reported by the component.
+     */
+    async getCurrentResizeEntries() {
+        return this.currentResizeObserverEntries || [];
+    }
+    // #endregion
+    // #region Watchers
+    disabledUpdated(newVal) {
+        if (newVal) {
+            this.stopObserver();
+        }
+        else {
+            this.startObserver();
+        }
+    }
+    startObserver() {
+        var _a, _b, _c;
+        const slot = this.hostElement.shadowRoot.querySelector('slot');
+        if (slot === null)
+            return;
+        const elements = (_b = (_a = slot.assignedElements) === null || _a === void 0 ? void 0 : _a.call(slot, { flatten: true })) !== null && _b !== void 0 ? _b : [];
+        // Unwatch previous elements
+        (_c = this.observedElements) === null || _c === void 0 ? void 0 : _c.forEach(el => this.resizeObserver.unobserve(el));
+        this.observedElements = [];
+        // Watch new elements
+        elements.forEach(el => {
+            var _a;
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
+            this.observedElements.push(el);
+        });
+    }
+    stopObserver() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        return h("slot", { key: 'e704a2aa1c38da509b0e366e03cd33397ffdbf5d', onSlotchange: this.handleSlotChange });
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "disabled": ["disabledUpdated"]
+    }; }
+    static get style() { return Q2ResizeObserverStyle0; }
+}, [1, "q2-resize-observer", {
+        "disabled": [516],
+        "getCurrentResizeEntries": [64]
+    }, undefined, {
+        "disabled": ["disabledUpdated"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["q2-resize-observer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "q2-resize-observer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Q2ResizeObserver);
+            }
+            break;
+    } });
+}
+
+export { Q2ResizeObserver as Q, defineCustomElement as d };
+
+//# sourceMappingURL=q2-resize-observer2.js.map

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

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

package/dist/components/q2-section.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as resizeIframe, o as overrideFocus, i as isEventFromElement, n as nextPaint, l as loc } from './index2.js';
+import { e as resizeIframe, o as overrideFocus, i as isEventFromElement, n as nextPaint, l as loc } from './index2.js';
 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';
@@ -128,6 +128,30 @@ const Q2Section$1 = /*@__PURE__*/ proxyCustomElement(class Q2Section extends HTM
         }
     }
     // #endregion
+    // #region Test Methods API
+    /**
+     * A test method to collapse section.
+     *
+     * @testOnly
+     */
+    async collapse() {
+        if (!this.collapsible || !this.expanded)
+            return;
+        const btn = this.hostElement.shadowRoot.querySelector('[test-id="toggleButton"]');
+        btn === null || btn === void 0 ? void 0 : btn.click();
+    }
+    /**
+     * A test method to expand section.
+     *
+     * @testOnly
+     */
+    async expand() {
+        if (!this.collapsible || this.expanded)
+            return;
+        const btn = this.hostElement.shadowRoot.querySelector('[test-id="toggleButton"]');
+        btn === null || btn === void 0 ? void 0 : btn.click();
+    }
+    // #endregion
     // #region Local Methods
     get contentContainerHeight() {
         return `${this.contentContainer.offsetHeight || 0}px`;
@@ -169,9 +193,9 @@ const Q2Section$1 = /*@__PURE__*/ proxyCustomElement(class Q2Section extends HTM
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        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 && {
+        return (h("section", { key: '994cfe09abd1a9d8220ca4017cb4003ae1e2cf39', class: "wrapper" }, h("header", { key: '56a44ef98988748508c673bd3725887a1743a99b', class: hasHeader ? 'has-header' : '' }, h("div", { key: '03cc85008637fe3de375d223de79ac59c6b6ba64', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '69c2119b393e0b3f02392686ec49835273a9ebcb', class: "title" }, loc(this.label)), h("div", { key: '62a92b25033d9c9709a680b05becc2a48779197c', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'f5b2dbc68e33d01f31845bdbfb429e0a18a5e174', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '1983d339de073ca38b6879fca9d96fbe4648e533', 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: 'de36065a7fdeb1c381184304e4ed679f27d4f771', type: "chevron-up" })))), h("div", { key: 'e681760db4a6551d03ded78c25ab24257b6eaf0b', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '43f57ee880d454ecfef29f92177946350da7eec4', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'f13ca46b06dcdb43e1c307add290f7bb16065365', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '004500e012e4eb718f7e018c20a0cc3590b9ebce', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'f83f550c26a3f36d2a72c777a9f904a3774e963f', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -186,7 +210,9 @@ const Q2Section$1 = /*@__PURE__*/ proxyCustomElement(class Q2Section extends HTM
         "noCollapseIcon": [516, "no-collapse-icon"],
         "contentHeight": [32],
         "hasYieldedHeader": [32],
-        "hideContent": [32]
+        "hideContent": [32],
+        "collapse": [64],
+        "expand": [64]
     }, [[0, "change", "defaultChangeHandler"], [0, "focus", "delegateFocus"]], {
         "collapsible": ["collapsibleObserver"],
         "expanded": ["expandedObserver"]

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

@@ -1 +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}
+{"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    Method,\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 Test Methods API\n\n    /**\n     * A test method to collapse section.\n     *\n     * @testOnly\n     */\n    @Method()\n    async collapse() {\n        if (!this.collapsible || !this.expanded) return;\n        const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n        (btn as HTMLQ2BtnElement)?.click();\n    }\n\n    /**\n     * A test method to expand section.\n     *\n     * @testOnly\n     */\n    @Method()\n    async expand() {\n        if (!this.collapsible || this.expanded) return;\n        const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n        (btn as HTMLQ2BtnElement)?.click();\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}

package/dist/components/q2-select2.js

@@ -109,12 +109,12 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
                 this.hasCustomDisplay = hasCustomDisplay;
             }
             const popTopSlot = hostElement.shadowRoot.querySelector('slot[name="popover-top"]');
-            const topSlotHasNode = popTopSlot.assignedNodes().length > 0;
+            const topSlotHasNode = (popTopSlot === null || popTopSlot === void 0 ? void 0 : popTopSlot.assignedNodes().length) > 0;
             if (hasPopoverTop !== topSlotHasNode) {
                 this.hasPopoverTop = topSlotHasNode;
             }
             const popBottomSlot = hostElement.shadowRoot.querySelector('slot[name="popover-bottom"]');
-            const bottomSlotHasNode = popBottomSlot.assignedNodes().length > 0;
+            const bottomSlotHasNode = (popBottomSlot === null || popBottomSlot === void 0 ? void 0 : popBottomSlot.assignedNodes().length) > 0;
             if (hasPopoverBottom !== bottomSlotHasNode) {
                 this.hasPopoverBottom = bottomSlotHasNode;
             }
@@ -183,6 +183,7 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
         this.optional = false;
         this.placeholder = undefined;
         this.popDirection = undefined;
+        this.popoverMaxHeight = undefined;
         this.popoverMode = null;
         this.readonly = false;
         this.searchable = false;
@@ -599,7 +600,7 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
         return (h("slot", { name: "_selected-display", slot: "custom-display" }));
     }
     renderOptionsDropdown() {
-        return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, mode: this.popoverMode || undefined, block: true }, h("div", { class: "popover-content" }, h("q2-option-list", { onPopoverState: this.onPopoverState, ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, label: this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), h("div", { class: "popover-top-container", ref: el => (this.popoverTopContainer = el), hidden: !this.multiple && !this.hasPopoverTop, tabindex: "-1" }, h("slot", { name: "popover-top" }), this.multiple && this.renderVisibilityToggle())), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" }))));
+        return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popDirection, mode: this.popoverMode || undefined, block: true }, h("div", { class: "popover-content" }, h("q2-option-list", { onPopoverState: this.onPopoverState, ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, label: this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), h("div", { class: "popover-top-container", ref: el => (this.popoverTopContainer = el), hidden: !this.multiple && !this.hasPopoverTop, tabindex: "-1" }, h("slot", { name: "popover-top" }), this.multiple && this.renderVisibilityToggle())), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" }))));
     }
     renderVisibilityToggle() {
         var _a, _b;
@@ -611,11 +612,11 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
     }
     render() {
         var _a;
-        return (h("click-elsewhere", { key: 'f2a43df7402a1156caa1488fc2cd309b04c95620', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: '303e21b9ad4519b5150636b6826c0ab1064d8420', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: '83a1f5e0bdd84ff98496746bda20f58f9539f7d2', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
+        return (h("click-elsewhere", { key: '1b93bb0fd1b8d21fa839387a931fb9d97b4e2906', class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { key: '8fbbb1afec8161204bd25b698f58ef913c959344', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { key: 'b67fd2569162a1009ff2868b73091859ba7005ba', ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
-                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { key: 'f0e68cea358f777459f803a6ba85be074938986b', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: '6c125851f5db40a876f29e3d4d32e5656a52d6f1', name: "q2-select-display" })), this.renderOptionsDropdown()));
+                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), h("div", { key: 'a0a3f6cabce2f0d64346a8aa71c89e6a93b2b6e8', class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { key: 'bf07ea5bd0ea6354e1d0631339944c516e975dc3', name: "q2-select-display" })), this.renderOptionsDropdown()));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -642,6 +643,7 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
         "optional": [516],
         "placeholder": [513],
         "popDirection": [513, "pop-direction"],
+        "popoverMaxHeight": [2, "popover-max-height"],
         "popoverMode": [1025, "popover-mode"],
         "readonly": [516],
         "searchable": [516],