q2-tecton-elements 1.53.0 → 1.54.0

package/dist/esm/q2-message.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { o as overrideFocus, i as isEventFromElement, n as nextPaint, u as isFirefox, l as loc } from './index-d18e2a20.js';
+import { o as overrideFocus, i as isEventFromElement, n as nextPaint, t as isFirefox, l as loc } from './index-504f1a9e.js';
 
 const q2MessageCss = "*{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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
 const Q2MessageStyle0 = q2MessageCss;

package/dist/esm/q2-month-picker.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7a5365e2.js';
-import { l as loc, o as overrideFocus } from './index-d18e2a20.js';
+import { l as loc, o as overrideFocus } from './index-504f1a9e.js';
 
 const q2MonthPickerCss = "*{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}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 const Q2MonthPickerStyle0 = q2MonthPickerCss;

package/dist/esm/q2-optgroup.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { c as createGuid, l as loc } from './index-d18e2a20.js';
+import { c as createGuid, l as loc } from './index-504f1a9e.js';
 
 const q2OptgroupCss = "*{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}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 const Q2OptgroupStyle0 = q2OptgroupCss;

package/dist/esm/{q2-option-list.entry.js → q2-option-list_2.entry.js}

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7a5365e2.js';
-import { n as nextPaint, l as loc, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, x as isVisible } from './index-d18e2a20.js';
+import { n as nextPaint, l as loc, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible, h as handleDeprecationWarning } from './index-504f1a9e.js';
 
 function sanitizeRegexString(regexString) {
     return regexString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -21,7 +21,7 @@ const Q2OptionList = class {
         this.scheduledAfterRender = [];
         this.clickHandler = (event) => {
             const target = event.target;
-            const option = target.closest('q2-option');
+            const option = target.closest('q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])');
             this.selectOption(option);
             if (this.multiple)
                 return;
@@ -151,7 +151,8 @@ const Q2OptionList = class {
                     break;
                 case 'ArrowUp':
                     event.preventDefault();
-                    const isFirstVisibleOptionActive = allVisibleOptions[0].active;
+                    const firstVisibleOption = allVisibleOptions[0];
+                    const isFirstVisibleOptionActive = firstVisibleOption.active;
                     if (isFirstVisibleOptionActive)
                         break;
                     if (activeIndex === undefined) {
@@ -167,7 +168,8 @@ const Q2OptionList = class {
                     }
                 case 'ArrowDown':
                     event.preventDefault();
-                    const isLastVisibleOptionActive = allVisibleOptions[allVisibleOptions.length - 1].active;
+                    const lastVisibleOption = allVisibleOptions[allVisibleOptions.length - 1];
+                    const isLastVisibleOptionActive = lastVisibleOption.active;
                     if (isLastVisibleOptionActive)
                         break;
                     if (activeIndex === undefined) {
@@ -289,7 +291,7 @@ const Q2OptionList = class {
     // #endregion
     // #region Component Lifecycle Events
     componentWillLoad() {
-        this.hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
+        this.hasOptions = !!this.hostElement.querySelectorAll('q2-option:not([separator]):not([separator=true]), q2-dropdown-item:not([separator]):not([separator=true])').length;
     }
     componentDidLoad() {
         overrideFocus(this.hostElement);
@@ -355,24 +357,28 @@ const Q2OptionList = class {
             this.showSelected = false;
             return;
         }
-        this.allOptions.forEach(option => (option._multiSelectHidden = showSelected ? !option.selected : false));
+        this.allOptions.forEach(option => {
+            if (!('_multiSelectHidden' in option))
+                return;
+            option._multiSelectHidden = showSelected ? !option.selected : false;
+        });
     }
     // #endregion
     // #region Local Methods
     get allContents() {
         const rootSlot = this.getRootSlot(this.hostElement);
-        const acceptedTags = ['Q2-OPTGROUP', 'Q2-OPTION'];
-        return rootSlot.filter(element => acceptedTags.includes(element.tagName));
+        const acceptedTags = new Set(['Q2-OPTGROUP', 'Q2-OPTION', 'Q2-DROPDOWN-ITEM']);
+        return rootSlot.filter(element => acceptedTags.has(element.tagName));
     }
     get allOptions() {
         const contents = this.allContents;
         const extractOptions = (elements) => {
             return elements.reduce((acc, element) => {
-                if (element.tagName === 'Q2-OPTGROUP') {
-                    return [...acc, ...extractOptions(Array.from(element.children))];
+                if (element.tagName === 'Q2-OPTION' || element.tagName === 'Q2-DROPDOWN-ITEM') {
+                    return element.separator ? acc : [...acc, element];
                 }
-                else if (element.tagName === 'Q2-OPTION') {
-                    return [...acc, element];
+                else if (element.tagName === 'Q2-OPTGROUP') {
+                    return [...acc, ...extractOptions(Array.from(element.children))];
                 }
                 else {
                     return acc;
@@ -382,7 +388,10 @@ const Q2OptionList = class {
         return extractOptions(contents);
     }
     get allVisibleOptions() {
-        return this.allOptions.filter(option => !option.hidden && !option._multiSelectHidden && !option.disabled && !option.disabledGroup);
+        return this.allOptions.filter(option => !option.hidden &&
+            (!('_multiSelectHidden' in option) || !option._multiSelectHidden) &&
+            !option.disabled &&
+            (!('disabledGroup' in option) || !option.disabledGroup));
     }
     adjustActiveOptionAndScroll(numToAdd) {
         this.activeIndex += numToAdd;
@@ -390,13 +399,12 @@ const Q2OptionList = class {
         this.setFocusedOption();
         this.scrollToActiveOption();
     }
-    async checkOptions() {
+    checkOptions() {
         const { type } = this;
-        const options = await this.getOptions();
         if (!type)
             return;
         const optionRole = type === 'menu' ? 'menuitem' : 'option';
-        options.forEach(option => {
+        this.allOptions.forEach(option => {
             option.role = optionRole;
         });
     }
@@ -416,12 +424,16 @@ const Q2OptionList = class {
         this.activeIndex = nextSiblingIndex;
         this.setFocusedOption();
         this.scheduledAfterRender.push(() => {
+            if (!('_multiSelectHidden' in option))
+                return;
             option._multiSelectHidden = !option.selected;
         });
     }
     getDefaultActiveIndex() {
         const { allOptions } = this;
-        const firstSelected = allOptions.findIndex(element => element.selected);
+        const firstSelected = allOptions.findIndex(element => {
+            return 'selected' in element && element.selected;
+        });
         if (firstSelected > -1)
             return firstSelected;
         const firstEnabled = allOptions.findIndex(element => !element.hidden);
@@ -483,12 +495,17 @@ const Q2OptionList = class {
     }
     selectOption(selectedOption) {
         const { multiple, noSelect, showSelected } = this;
-        if (!selectedOption || selectedOption.disabled || selectedOption.disabledGroup)
+        if (!selectedOption ||
+            selectedOption.disabled ||
+            ('disabledGroup' in selectedOption && selectedOption.disabledGroup))
             return;
         const selectedValue = selectedOption.value;
+        const displayValue = 'display' in selectedOption && selectedOption.display
+            ? selectedOption.display
+            : selectedOption.innerText.trim();
         const valueObject = {
             value: selectedValue,
-            display: selectedOption.display || selectedOption.innerText.trim(),
+            display: displayValue,
         };
         let values = [];
         if (multiple) {
@@ -531,7 +548,11 @@ const Q2OptionList = class {
     updateMultipleOptionAttrs() {
         const { allOptions, selectedOptions } = this;
         const selectedValues = selectedOptions.map(({ value }) => value);
+        if (this.noSelect)
+            return;
         allOptions.forEach(element => {
+            if (!('selected' in element))
+                return;
             element.selected = selectedValues.includes(element.value);
         });
     }
@@ -539,14 +560,18 @@ const Q2OptionList = class {
         var _a;
         const { allOptions, selectedOptions } = this;
         const selectedValue = ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) || undefined;
+        if (this.noSelect)
+            return;
         allOptions.forEach(element => {
+            if (!('selected' in element))
+                return;
             element.selected = element.value === selectedValue;
         });
     }
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: '221e3d11f55902cd286a6f69cb1c30ce4cc3cb1c' }, h("div", { key: '5e08ad2fd5a1a773976285ad16f2e2ef6e2161be', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '537330008c139176aaa19ba997579e61f841fffb', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '9204233743b02ead43bbe4f9329973059af24414' })))));
+        return (h(Host, { key: '16e12e08dcd1d6514aa59ad8dd20dbf33d352bbe' }, h("div", { key: 'b0eb152206ccb8b93e98d11c32894cb136ffc9a9', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: 'bccbd0eb8bc8fc92db4629be02ab23e050e32fe9', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '9b5a130d4d0a1a5f594b47669607febf39c0ea87' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -556,6 +581,314 @@ const Q2OptionList = class {
 };
 Q2OptionList.style = Q2OptionListStyle0;
 
-export { Q2OptionList as q2_option_list };
+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;
+
+const Q2Popover = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.popoverStateChanged = createEvent(this, "popoverStateChanged", 7);
+        /**
+         * The number of pixels to leave between the popover and the edge of the viewport
+         */
+        this.displayBuffer = 10;
+        /** remove when Popover API is supported in iOS */
+        this.orientationChanged = false;
+        this.handleMinHeight = () => {
+            if (this.minHeight) {
+                handleDeprecationWarning(this, 'minHeight', 'prop');
+            }
+        };
+        this.setAbsoluteCSSProperties = async () => {
+            const { controlElement, containerElement, currentDirection, align } = this;
+            if (align === 'right') {
+                containerElement.style.setProperty('--comp-pop-right', '0');
+                containerElement.style.setProperty('--comp-pop-left', 'unset');
+            }
+            else {
+                containerElement.style.setProperty('--comp-pop-left', '0');
+                containerElement.style.setProperty('--comp-pop-right', 'unset');
+            }
+            if (this.block) {
+                containerElement.style.setProperty('--comp-pop-width', '100%');
+            }
+            if (currentDirection === 'up') {
+                const controlStyle = getComputedStyle(controlElement);
+                const controlSize = parseInt(controlStyle.height || '0') +
+                    parseInt(controlStyle.borderTopWidth || '0') +
+                    parseInt(controlStyle.borderBottomWidth || '0');
+                containerElement.style.setProperty('--comp-pop-bottom', `${controlSize}px`);
+            }
+            // Wait for one paint to prevent layout thrashing
+            await waitForNextPaint();
+            containerElement.style.setProperty('--comp-pop-opacity', '1');
+        };
+        this.setFixedCSSProperties = async () => {
+            var _a, _b;
+            const { controlElement, containerElement, currentDirection, rootElementRect } = this;
+            const { top: controlTop, bottom: controlBottom, left: controlLeft, right: controlRight, } = (_b = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(controlElement)) !== null && _b !== void 0 ? _b : {
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+            };
+            const popoverLeft = controlLeft - rootElementRect.left;
+            if (this.block)
+                containerElement.style.setProperty('--comp-pop-width', `${(controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth) || 0}px`);
+            containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);
+            containerElement.style.setProperty('--comp-pop-right', `${rootElementRect.width + rootElementRect.left - controlRight}px`);
+            if (currentDirection === 'up') {
+                containerElement.style.setProperty('--comp-pop-bottom', `${rootElementRect.height + rootElementRect.top - controlTop}px`);
+            }
+            if (currentDirection === 'down') {
+                containerElement.style.setProperty('--comp-pop-top', `${controlBottom - rootElementRect.top}px`);
+            }
+            // Wait for one paint to prevent layout thrashing
+            await waitForNextPaint();
+            containerElement.style.setProperty('--comp-pop-opacity', '1');
+        };
+        this.viewPortChanged = () => {
+            if (!this.open)
+                return;
+            this.determinePopDirection();
+        };
+        this.viewPortOrientationChanged = () => {
+            this.orientationChanged = true;
+            this.viewPortChanged();
+        };
+        this.currentDirection = undefined;
+        this.show = false;
+        this.align = undefined;
+        this.block = undefined;
+        this.controlElement = undefined;
+        this.direction = undefined;
+        this.maxHeight = undefined;
+        this.minHeight = undefined;
+        this.mode = null;
+        this.open = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        this.removeViewportListeners();
+    }
+    componentDidLoad() {
+        this.handleMinHeight();
+        if (this.open)
+            this.determinePopDirection();
+    }
+    // #endregion
+    // #region Listeners
+    popoverStateHandler(event) {
+        const { detail: { open }, } = event;
+        if (open === this.open)
+            return;
+        this.open = open;
+        event.stopPropagation();
+    }
+    // #endregion
+    // #region Public Methods API
+    async scrollContainerTo(options) {
+        this.containerElement.scrollTo(options);
+    }
+    async toggle() {
+        this.open = !this.open;
+    }
+    // #endregion
+    // #region Watchers
+    minHeightProvided() {
+        this.handleMinHeight();
+    }
+    async openChanged(open) {
+        this.setRootElement();
+        this.popoverStateChanged.emit({ open });
+        if (open) {
+            this.addViewportListeners();
+            this.determinePopDirection();
+        }
+        else {
+            this.removeViewportListeners();
+            this.currentDirection = undefined;
+            this.show = false;
+            await waitForNextPaint();
+            this.clearCSSProperties();
+        }
+    }
+    // #endregion
+    // #region Local Methods
+    get isModule() {
+        var _a, _b;
+        const isIframe = window !== window.top;
+        const hasPlatformDimensions = Object.keys((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) !== null && _b !== void 0 ? _b : {}).length > 0;
+        return isIframe && hasPlatformDimensions;
+    }
+    get providedDirection() {
+        const { direction } = this;
+        switch (direction) {
+            case 'up':
+            case 'down':
+                return direction;
+            default:
+                return undefined;
+        }
+    }
+    get validatedMaxHeight() {
+        const { maxHeight } = this;
+        return isNaN(maxHeight) ? undefined : maxHeight;
+    }
+    addViewportListeners() {
+        var _a;
+        window.addEventListener('resize', this.viewPortOrientationChanged);
+        // #region remove when Popover API is supported in iOS
+        window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });
+        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.viewPortOrientationChanged);
+        window.addEventListener('orientationchange', this.viewPortOrientationChanged);
+        // #endregion
+    }
+    clearCSSProperties() {
+        this.containerElement.style.removeProperty('--comp-pop-max-height');
+        this.containerElement.style.removeProperty('--comp-pop-top');
+        this.containerElement.style.removeProperty('--comp-pop-bottom');
+        this.containerElement.style.removeProperty('--comp-pop-left');
+        this.containerElement.style.removeProperty('--comp-pop-right');
+        this.containerElement.style.removeProperty('--comp-pop-width');
+        this.containerElement.style.removeProperty('--comp-pop-opacity');
+    }
+    async determinePopDirection() {
+        var _a, _b, _c;
+        const { containerElement, controlElement, providedDirection, displayBuffer } = this;
+        if (containerElement)
+            containerElement.style.maxHeight = null;
+        await waitForNextPaint();
+        const { isModule } = this;
+        const { top: controlTop, bottom: controlBottom } = (_b = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(controlElement)) !== null && _b !== void 0 ? _b : {
+            top: 0,
+            bottom: 0,
+        };
+        let windowHeight;
+        let maxSpaceAbove;
+        let maxSpaceBelow;
+        if (isModule) {
+            const { outletOffset = 0, innerHeight = window.innerHeight } = ((_c = window.Tecton) === null || _c === void 0 ? void 0 : _c.platformDimensions) || {};
+            const distanceToIframeBottom = window.visualViewport.height - controlBottom;
+            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);
+            const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;
+            windowHeight = innerHeight;
+            // If the top of the module is below the top of the window we just use the controlTop
+            // Otherwise we need to add the outletOffset to the controlTop
+            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;
+            maxSpaceBelow = isIframeShorterThanWindow
+                ? distanceToIframeBottom - displayBuffer
+                : viewableSpaceBelow - displayBuffer;
+        }
+        else {
+            windowHeight = window.visualViewport.height;
+            maxSpaceAbove = controlTop - displayBuffer;
+            maxSpaceBelow = windowHeight - controlBottom - displayBuffer;
+        }
+        const directionWithMostSpace = maxSpaceAbove > maxSpaceBelow ? 'up' : 'down';
+        // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
+        const shouldUpdateMaxHeight = !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;
+        // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
+        this.orientationChanged = false;
+        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;
+        switch (currentOrDetermineDirection) {
+            case 'up':
+                if (shouldUpdateMaxHeight) {
+                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceAbove;
+                    const maxHeight = Math.min(maxSpaceAbove, priorityMaxHeight);
+                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
+                }
+                this.setDirectionAndShow('up');
+                break;
+            case 'down':
+                if (shouldUpdateMaxHeight) {
+                    const priorityMaxHeight = this.validatedMaxHeight || maxSpaceBelow;
+                    const maxHeight = Math.min(maxSpaceBelow, priorityMaxHeight);
+                    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
+                }
+                this.setDirectionAndShow('down');
+                break;
+        }
+    }
+    removeViewportListeners() {
+        var _a;
+        window.removeEventListener('resize', this.viewPortOrientationChanged);
+        // #region remove when Popover API is supported in iOS
+        window.removeEventListener('scroll', this.viewPortChanged);
+        (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('orientationchange', this.viewPortOrientationChanged);
+        window.removeEventListener('orientationchange', this.viewPortOrientationChanged);
+        // #endregion
+    }
+    setDirectionAndShow(direction) {
+        this.setRootElement();
+        // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the
+        // popover can be closed between the time the popover is opened and the time the direction is determined
+        const isOpen = this.open;
+        if (!isOpen)
+            return;
+        this.currentDirection = direction;
+        this.show = true;
+        if (this.mode === 'legacy') {
+            this.setAbsoluteCSSProperties();
+        }
+        else {
+            this.setFixedCSSProperties();
+        }
+    }
+    setRootElement() {
+        let currentElement = this.hostElement;
+        while (currentElement && currentElement !== document.documentElement) {
+            const computedStyle = window.getComputedStyle(currentElement);
+            // Check if the element has any styles applied that create a new containg block
+            if (computedStyle.transform !== 'none' ||
+                computedStyle.filter !== 'none' ||
+                computedStyle.perspective !== 'none' ||
+                computedStyle.containerType !== 'normal' ||
+                ['transform', 'perspective', 'filter'].includes(computedStyle.willChange) ||
+                ['layout', 'paint', 'strict', 'content'].includes(computedStyle.contain)) {
+                this.rootElementRect = currentElement.getBoundingClientRect();
+                return;
+            }
+            const rootNode = currentElement.getRootNode();
+            const isRootNodeWebComponent = typeof ShadowRoot !== 'undefined' &&
+                rootNode instanceof ShadowRoot &&
+                rootNode.host instanceof HTMLElement;
+            if (isRootNodeWebComponent) {
+                currentElement = rootNode.host;
+            }
+            else {
+                currentElement = currentElement.parentElement;
+            }
+        }
+        // Return the document's bounding rect if no element is found
+        this.rootElementRect = {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: window.visualViewport.height,
+            width: window.visualViewport.width,
+        };
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const containerClasses = ['container', this.currentDirection];
+        if (this.show)
+            containerClasses.push('show');
+        if (this.mode === 'legacy')
+            containerClasses.push('legacy');
+        return (h("div", { key: 'ec69329181e23e7c8f46fc2d2f5b9453f0f866d1', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: '7814ab2ab64fe363d76d1ed34005b7512c877d17', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '7a3fec41c603d97be3bcaa0d7fd48c0517b92f7c' }))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "minHeight": ["minHeightProvided"],
+        "open": ["openChanged"]
+    }; }
+};
+Q2Popover.style = Q2PopoverStyle0;
+
+export { Q2OptionList as q2_option_list, Q2Popover as q2_popover };
 
-//# sourceMappingURL=q2-option-list.entry.js.map
+//# sourceMappingURL=q2-option-list_2.entry.js.map