q2-tecton-elements 1.25.1 → 1.25.3

package/dist/esm/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-bb1c8c7f.js';
-import { o as overrideFocus, w as waitForNextPaint, n as nextPaint, a as isEventFromElement, r as resizeIframe } from './index-5040cd84.js';
+import { n as nextPaint, l as loc, o as overrideFocus, w as waitForNextPaint, a as isEventFromElement, r as resizeIframe } from './index-5040cd84.js';
 
 const stylesCss$1 = "*{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 #33b4ff #06C)}: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{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
 
@@ -25,21 +25,23 @@ const Q2OptionList = class {
             this.searchOptions(key, true);
             break;
           }
-          else if (this.role === 'menu') {
+          else if (this.type === 'menu') {
             this.activeIndex = 0;
             this.openDropdownWithActiveElement(0);
           }
           else {
             this.setDefaultActiveElement();
+            nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));
           }
           break;
         case 'Enter':
-          if (this.role === 'menu') {
+          if (this.type === 'menu') {
             this.activeIndex = 0;
             this.openDropdownWithActiveElement(0);
           }
           else {
             this.setDefaultActiveElement();
+            nextPaint(() => this.popoverState.emit({ open: true, action: 'open' }));
           }
           break;
         case 'ArrowUp':
@@ -169,6 +171,8 @@ const Q2OptionList = class {
         case 'Tab':
           if (shiftKey)
             break;
+          if (this.multiple && this.type === 'listbox')
+            break;
           newOption = allOptions.find(element => element.active);
           if (!newOption || newOption.disabled)
             return;
@@ -203,7 +207,6 @@ const Q2OptionList = class {
       const option = target.closest('q2-option');
       this.selectOption(option);
     };
-    this.role = 'listbox';
     this.customSearch = undefined;
     this.noSelect = undefined;
     this.align = undefined;
@@ -211,7 +214,8 @@ const Q2OptionList = class {
     this.multiple = undefined;
     this.disabled = undefined;
     this.showSelected = undefined;
-    this.type = undefined;
+    this.type = 'listbox';
+    this.label = loc('tecton.element.optionList.label');
     this.hasOptions = undefined;
   }
   /// LifeCycle Hooks ///
@@ -494,20 +498,26 @@ const Q2OptionList = class {
 };
 Q2OptionList.style = stylesCss$1;
 
-const stylesCss = "*{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 #33b4ff #06C)}: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;width:100%}:host([align=right]){display:block;position:absolute;right:0;text-align:end;left:unset}.container{display:none;overflow:hidden;opacity:0;height:0;position:absolute;top:var(--tct-popover-top, var(--t-popover-top, initial));visibility:hidden;background-color:var(--tct-popover-background-color, var(--t-popover-background-color, var(--app-white, #ffffff)));color:var(--tct-popover-text-color, var(--t-popover-text-color, var(--t-text, #4d4d4d)));z-index:var(--tct-popover-z-index, var(--t-popover-z-index, 100));width:max-content;min-width:var(--tct-popover-min-width, var(--t-popover-min-width, 135px));box-shadow:var(--tct-popover-box-shadow, var(--t-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));text-align:start;left:0;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));max-height:var(--comp-pop-max-height);--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, 3px)));--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}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([block]) .container{left:unset;right:unset;width:100%;min-width:unset}:host([align=right]) .container{right:0;text-align:end;left:unset}.container :host([open]){display:block}:host([open]) .container.show{height:auto;overflow:auto;opacity:1;visibility:visible}.container.up{bottom:var(--comp-pop-offset)}click-elsewhere{position:relative;display:block}.content{height:auto}";
+const stylesCss = "*{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 #33b4ff #06C)}: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;width:100%}:host([align=right]){display:block;position:absolute;right:0;text-align:end;left:unset}.container{display:none;overflow:hidden;opacity:0;height:0;position:absolute;top:var(--tct-popover-top, var(--t-popover-top, initial));visibility:hidden;background-color:var(--tct-popover-background-color, var(--t-popover-background-color, var(--app-white, #ffffff)));color:var(--tct-popover-text-color, var(--t-popover-text-color, var(--t-text, #4d4d4d)));z-index:var(--tct-popover-z-index, var(--t-popover-z-index, 100));width:max-content;min-width:var(--tct-popover-min-width, var(--t-popover-min-width, 135px));box-shadow:var(--tct-popover-box-shadow, var(--t-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));text-align:start;left:0;transition:opacity var(--app-tween-1, 0.2s ease), max-height var(--app-tween-1, 0.2s ease);border-radius:var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));max-height:var(--comp-pop-max-height);--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, 3px)));--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}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([block]) .container{left:unset;right:unset;width:100%;min-width:unset}:host([align=right]) .container{right:0;text-align:end;left:unset}:host([open]) .container{visibility:visible}:host([open]) .container.show{height:auto;overflow:auto;opacity:1}.container.up{bottom:var(--comp-pop-offset)}click-elsewhere{position:relative;display:block}.content{height:auto}";
 
 const Q2Popover = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.popoverStateChanged = createEvent(this, "popoverStateChanged", 7);
     this.scheduledAfterRender = [];
+    /// Helpers ///
+    this.viewPortChanged = () => {
+      if (!this.open)
+        return;
+      this.determinePopDirection();
+    };
     this.direction = undefined;
     this.align = undefined;
     this.open = undefined;
     this.block = undefined;
     this.minHeight = undefined;
     this.controlElement = undefined;
-    this.privateDirection = 'down';
+    this.currentDirection = undefined;
     this.show = false;
   }
   /// Lifecycle hooks ///
@@ -521,6 +531,9 @@ const Q2Popover = class {
       this.scheduledAfterRender = [];
     }, 25);
   }
+  disconnectedCallback() {
+    this.removeViewportListeners();
+  }
   /// Methods ///
   async toggle() {
     this.open = !this.open;
@@ -530,9 +543,18 @@ const Q2Popover = class {
     this.popoverStateChanged.emit({ open });
     this.scheduledAfterRender.push(resizeIframe);
     if (open) {
+      this.addViewportListeners();
       this.determinePopDirection();
     }
     else {
+      this.removeViewportListeners();
+      // Reset currentDirection after close transition completes
+      this.containerElement.addEventListener('transitionend', () => {
+        if (this.open)
+          return;
+        this.currentDirection = undefined;
+        this.containerElement.style.removeProperty('--comp-pop-max-height');
+      }, { once: true });
       this.show = false;
     }
   }
@@ -544,17 +566,24 @@ const Q2Popover = class {
     this.open = open;
     event.stopPropagation();
   }
+  addViewportListeners() {
+    // window.visualViewport.addEventListener('scroll', this.viewPortChanged);
+    window.visualViewport.addEventListener('resize', this.viewPortChanged);
+  }
+  removeViewportListeners() {
+    // window.visualViewport.removeEventListener('scroll', this.viewPortChanged);
+    window.visualViewport.removeEventListener('resize', this.viewPortChanged);
+  }
   async setDirectionAndShow(direction) {
     if (direction === 'up') {
       this.determinePopOffset();
     }
-    this.privateDirection = direction;
+    this.currentDirection = direction;
     this.show = true;
   }
-  /// Helpers ///
   async determinePopDirection() {
-    var _a, _b, _c, _d, _e;
-    const { containerElement, contentElement, direction, controlElement } = this;
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { containerElement, contentElement, direction, controlElement, currentDirection } = this;
     if (containerElement)
       containerElement.style.maxHeight = null;
     // If direction defined, use it
@@ -569,32 +598,46 @@ const Q2Popover = class {
       height: 0,
     };
     const contentHeight = contentElement.clientHeight;
-    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) || 0;
-    const innerHeight = ((_e = (_d = window.Tecton) === null || _d === void 0 ? void 0 : _d.platformDimensions) === null || _e === void 0 ? void 0 : _e.innerHeight) || window.innerHeight;
+    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) ||
+      ((_d = window.visualViewport) === null || _d === void 0 ? void 0 : _d.offsetTop) || // Only Android Chrome provides this which we need when scrolled
+      0;
+    const innerHeight = ((_f = (_e = window.Tecton) === null || _e === void 0 ? void 0 : _e.platformDimensions) === null || _f === void 0 ? void 0 : _f.innerHeight) || ((_g = window.visualViewport) === null || _g === void 0 ? void 0 : _g.height) || window.innerHeight;
     const bottomOffset = scrollY + innerHeight - topOffset - height;
     const canShowFullSizeBelow = bottomOffset > contentHeight;
-    const canShowFullSizeAbove = contentHeight <= topOffset || !this.minHeight;
+    const canShowFullSizeAbove = contentHeight <= topOffset;
     let determinedDirection;
     // Show the full-size popover below or above if it will fit
-    if (canShowFullSizeBelow)
+    if (currentDirection === 'down' && canShowFullSizeBelow)
+      return this.setDirectionAndShow('down');
+    else if (currentDirection === 'up' && canShowFullSizeAbove)
+      return this.setDirectionAndShow('up');
+    else if (currentDirection === undefined && canShowFullSizeBelow)
       determinedDirection = 'down';
-    else if (canShowFullSizeAbove)
+    else if (currentDirection === undefined && canShowFullSizeAbove)
       determinedDirection = 'up';
     if (determinedDirection)
       return this.setDirectionAndShow(determinedDirection);
-    // If full size will not fit and minHeight is set, then make as tall as possible
+    // If full size will not fit then make it as tall as possible
     const { minHeight = 150 } = this;
     const displayBuffer = 5;
-    const canShowSmallBelow = bottomOffset >= minHeight + displayBuffer;
+    const canShowMinHeightBelow = bottomOffset >= minHeight + displayBuffer;
     let maxHeight;
-    if (canShowSmallBelow) {
+    if (currentDirection === 'down') {
       maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
       determinedDirection = 'down';
     }
-    else {
+    else if (currentDirection === 'up') {
       maxHeight = Math.max(topOffset - displayBuffer, minHeight);
       determinedDirection = 'up';
     }
+    else if (canShowMinHeightBelow) {
+      maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
+      determinedDirection = 'down';
+    }
+    else {
+      maxHeight = Math.max(topOffset - scrollY - displayBuffer, minHeight);
+      determinedDirection = 'up';
+    }
     containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
     return this.setDirectionAndShow(determinedDirection);
   }
@@ -606,7 +649,7 @@ const Q2Popover = class {
   }
   /// DOM ///
   render() {
-    const containerClasses = ['container', this.privateDirection];
+    const containerClasses = ['container', this.currentDirection];
     if (this.show)
       containerClasses.push('show');
     return (h("div", { ref: el => (this.containerElement = el), class: containerClasses.join(' '), role: "menu" }, h("div", { ref: el => (this.contentElement = el), class: "content" }, h("slot", null))));

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

@@ -181,7 +181,7 @@ const Q2Pill = class {
       wrapperClassNames.push('has-icon');
     if (hasOptions)
       wrapperClassNames.push('has-options');
-    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: "right" }, h("q2-option-list", { role: "menu", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements() }, h("slot", null))))));
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", role: "combobox", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: "right" }, h("q2-option-list", { type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements() }, h("slot", null))))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-bb1c8c7f.js';
-import { h as handleAriaLabel, o as overrideFocus, l as loc, d as isRelatedTargetWithinHost, a as isEventFromElement, e as isHostLosingFocus } from './index-5040cd84.js';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, d as isRelatedTargetWithinHost, a as isEventFromElement, e as isHostLosingFocus } from './index-5040cd84.js';
 import { s as shouldShowActionSheet, a as showActionSheetList } from './action-sheet-a9597b32.js';
 
-const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white);display:inline-grid;grid-template-columns:repeat(3, auto);gap:var(--app-scale-2x, 10px);align-items:center}";
+const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.multi-select-header legend{padding:0;float:left}.multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background-color:var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.multi-select-header label:hover{background-color:var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040)))))))}.multi-select-header input:checked+label,.multi-select-header input:checked+label:enabled:hover{background-color:var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";
 
 const Q2Select = class {
   constructor(hostRef) {
@@ -11,12 +11,10 @@ const Q2Select = class {
     this.input = createEvent(this, "input", 7);
     var _a;
     this.scheduledAfterRender = [];
-    this.showSelectedOptions = (event) => {
-      event.stopPropagation();
+    this.showSelectedOptions = () => {
       this.showSelected = true;
     };
-    this.showAllOptions = (event) => {
-      event === null || event === void 0 ? void 0 : event.stopPropagation();
+    this.showAllOptions = () => {
       this.showSelected = false;
     };
     this.onMutationObserved = () => {
@@ -66,17 +64,20 @@ const Q2Select = class {
         return;
       if (this.shouldClearSearchText(event))
         this.clearSearchText();
+      // Prevent click event from firing when spacebar is pressed
+      if (event.key === ' ')
+        event.preventDefault();
       this.optionList.handleExternalKeydown(event);
     };
     this.visibilityToggleKeyDown = (event) => {
-      const keysForOptionListToHandle = ['ArrowDown', 'ArrowUp'];
-      const keysThatTriggerClick = ['Enter', ' '];
       const key = event.key;
-      if (keysForOptionListToHandle.includes(key)) {
-        this.optionList.handleExternalKeydown(event);
-      }
-      else if (keysThatTriggerClick.includes(key)) {
-        event.target.dispatchEvent(new MouseEvent('click'));
+      const isShiftTab = key === 'Tab' && event.shiftKey;
+      const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);
+      if (isRadioControlKey)
+        event.stopPropagation();
+      if (isShiftTab) {
+        event.stopPropagation();
+        this.optionList.setDefaultActiveElement();
       }
     };
     this.inputClickHandler = async (event) => {
@@ -132,6 +133,7 @@ const Q2Select = class {
     this.disabled = false;
     this.readonly = false;
     this.invalid = undefined;
+    this.listLabel = loc('tecton.element.select.listLabel');
     this.errors = undefined;
     this.multiple = false;
     this.minRows = 3;
@@ -193,7 +195,10 @@ const Q2Select = class {
   get popoverMinHeight() {
     const { minRows } = this;
     const firstOption = this.hostElement.querySelector('q2-option:not([hidden])');
-    const minHeight = firstOption ? window.getComputedStyle(firstOption).minHeight : '44px';
+    let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;
+    // Safari doesn't return a min-height for non-visible items
+    if (!minHeight || minHeight === '0px')
+      minHeight = '44px';
     return minRows * parseInt(minHeight);
   }
   get selectedDisplay() {
@@ -457,16 +462,18 @@ const Q2Select = class {
         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}`, ariaOwns: "option-list", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: showAsPseudo, "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 }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
+        [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", role: "combobox", pseudo: showAsPseudo, "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 }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
   }
   optionsDropdown() {
-    return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputField, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, onPopoverStateChanged: this.popoverStateChanged, block: true }, this.multiple ? this.visibilityToggle() : '', h("q2-option-list", { ref: el => (this.optionList = el), id: "option-list", "show-selected": this.showSelected, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null))));
+    return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputField, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, onPopoverStateChanged: this.popoverStateChanged, block: true }, h("div", { class: "popover-content", tabindex: "-1" }, h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, "aria-label": this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), this.multiple && this.visibilityToggle())));
   }
   visibilityToggle() {
     var _a, _b;
     const selectedOptionsCount = (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
     const { showSelected } = this;
-    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) }, h("span", null, loc('tecton.element.select.multiHeader.showing')), h("q2-btn", { class: showSelected ? '' : 'selected', badge: true, "aria-selected": !showSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown, label: loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, loc('tecton.element.select.multiHeader.all')), h("q2-btn", { class: showSelected ? 'selected' : '', "aria-selected": showSelected || undefined, disabled: selectedOptionsCount === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [selectedOptionsCount]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))));
+    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) }, h("fieldset", null, h("legend", { "aria-label": loc('tecton.element.select.multiHeader.showing') }, loc('tecton.element.select.multiHeader.showing')), h("div", null, h("input", { class: "sr", type: "radio", id: "all", name: "viewDisplay", value: "all", checked: !showSelected, "aria-label": loc('tecton.element.select.multiHeader.allAriaLabel'), "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "all" }, loc('tecton.element.select.multiHeader.all'))), h("div", null, h("input", { class: "sr", type: "radio", id: "selected", disabled: selectedOptionsCount === 0, name: "viewDisplay", value: "selected", "aria-label": loc('tecton.element.select.multiHeader.selectedAriaLabel', [
+        selectedOptionsCount,
+      ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {

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

@@ -104,7 +104,7 @@ const Q2Tag = class {
     const wrapperClassNames = ['tag-wrapper'];
     if (hasOptions)
       wrapperClassNames.push('has-options');
-    return (h(Host, { role: "listitem" }, h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' '), onClick: e => e.stopPropagation() }, h("div", { class: "tag" }, this.label), this.hasOptions && (h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-haspopup": "true", "aria-expanded": open ? 'true' : 'false', "aria-label": loc('tecton.element.tag.viewOptions') }, h("q2-icon", { type: "options" }))))), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: "right" }, h("q2-option-list", { id: "option-list", role: "menu", ref: el => (this.optionList = el), onChange: this.handleChange, align: "right", type: "menu", "no-select": true }, h("slot", null)))))));
+    return (h(Host, { role: "listitem" }, h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' '), onClick: e => e.stopPropagation() }, h("div", { class: "tag" }, this.label), this.hasOptions && (h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-haspopup": "true", "aria-expanded": open ? 'true' : 'false', "aria-label": loc('tecton.element.tag.viewOptions') }, h("q2-icon", { type: "options" }))))), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: "right" }, h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", "no-select": true }, h("slot", null)))))));
   }
   get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-tecton-elements.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"q2-icon\",[[1,\"q2-icon\",{\"type\":[513],\"label\":[513],\"inline\":[516]}]]],[\"q2-select\",[[1,\"q2-select\",{\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"value\":[1025],\"ariaLabel\":[1537,\"aria-label\"],\"selectedOptions\":[1040],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"errors\":[16],\"multiple\":[516],\"minRows\":[2,\"min-rows\"],\"popDirection\":[513,\"pop-direction\"],\"searchable\":[516],\"multilineOptions\":[516,\"multiline-options\"],\"optional\":[516],\"placeholder\":[513],\"hoist\":[4],\"open\":[32],\"showSelected\":[32],\"searchText\":[32],\"hasCustomDisplay\":[32],\"inputFocused\":[32],\"statusMessage\":[32],\"prioritizeSearch\":[32],\"structuredSelectedOptions\":[32]},[[0,\"keydown\",\"keydownHandler\"],[0,\"change\",\"onHostElementChange\"],[0,\"input\",\"onHostElementInput\"],[0,\"focus\",\"delegateFocus\"],[0,\"focusout\",\"handleFocusout\"]]]]],[\"q2-action-sheet\",[[1,\"q2-action-sheet\",{\"data\":[1040],\"hideClose\":[4,\"hide-close\"],\"isScrollable\":[32],\"renderStatus\":[32],\"hide\":[64],\"show\":[64]}]]],[\"q2-calendar\",[[1,\"q2-calendar\",{\"value\":[1537],\"label\":[513],\"hideLabel\":[516,\"hide-label\"],\"ariaLabel\":[513,\"aria-label\"],\"optional\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[1540],\"typeable\":[516],\"clearable\":[516],\"placeholder\":[513],\"buttonLabel\":[513,\"button-label\"],\"disabledMsg\":[513,\"disabled-msg\"],\"calendarLabel\":[513,\"calendar-label\"],\"disclaimer\":[513],\"displayFormat\":[513,\"display-format\"],\"startDate\":[513,\"start-date\"],\"endDate\":[513,\"end-date\"],\"cutoffTime\":[513,\"cutoff-time\"],\"daysOfWeekChecksum\":[514,\"days-of-week-checksum\"],\"popDirection\":[513,\"pop-direction\"],\"assume\":[513],\"errors\":[1040],\"invalidDates\":[16],\"validDates\":[16],\"onsuccess\":[16],\"dropdownOpen\":[32],\"keyboardSelection\":[32],\"typedValue\":[32],\"dateList\":[32],\"hintMessage\":[32],\"hintMessageType\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"error\",\"defaultErrorHandler\"],[0,\"success\",\"defaultSuccessHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"clear\",\"handleClear\"]]]]],[\"q2-dropdown\",[[1,\"q2-dropdown\",{\"type\":[513],\"icon\":[513],\"label\":[513],\"hideLabel\":[516,\"hide-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"disabled\":[516],\"popDirection\":[513,\"pop-direction\"],\"name\":[513],\"context\":[513],\"contextValue\":[513,\"context-value\"],\"resolvedType\":[513,\"resolved-type\"],\"block\":[516],\"dropdownOpen\":[32]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-editable-field\",[[1,\"q2-editable-field\",{\"value\":[1537],\"editing\":[1540],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"type\":[513],\"formatModifier\":[513,\"format-modifier\"],\"truncated\":[513],\"maxlength\":[514],\"persistentLabel\":[516,\"persistent-label\"],\"disabled\":[516],\"hints\":[16],\"errors\":[16]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-pagination\",[[1,\"q2-pagination\",{\"recordType\":[1,\"record-type\"],\"perPage\":[2,\"per-page\"],\"total\":[514],\"page\":[1538],\"pages\":[1538],\"recordsOnly\":[1540,\"records-only\"],\"pagesOnly\":[1540,\"pages-only\"],\"isSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-pill\",[[1,\"q2-pill\",{\"hoist\":[4],\"disabled\":[516],\"active\":[1540],\"open\":[1540],\"multiple\":[516],\"maxLength\":[514,\"max-length\"],\"label\":[513],\"value\":[513],\"theme\":[513],\"selectedOptions\":[1040],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"hasOptions\":[32],\"selectedOptionElements\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-tab-container\",[[1,\"q2-tab-container\",{\"value\":[1537],\"type\":[513],\"name\":[513],\"color\":[513],\"noPrint\":[516,\"no-print\"],\"hasLeft\":[32],\"hasRight\":[32],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32],\"tabs\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[9,\"resize\",\"onResize\"],[0,\"focus\",\"onFocus\"],[0,\"badge\",\"onBadge\"]]]]],[\"q2-tag\",[[1,\"q2-tag\",{\"hoist\":[4],\"open\":[1540],\"label\":[513],\"theme\":[513],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"hasOptions\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-carousel\",[[4,\"q2-carousel\",{\"autoPlay\":[516,\"auto-play\"],\"fullWidthPanes\":[516,\"full-width-panes\"],\"hidePagination\":[516,\"hide-pagination\"],\"showNavigationArrows\":[516,\"show-navigation-arrows\"],\"ariaLabel\":[513,\"aria-label\"],\"label\":[513],\"index\":[1538],\"universalCarouselOptions\":[32],\"fullWidthDisplayOptions\":[32],\"activePaneIndex\":[32],\"applyFocus\":[32],\"applyPaginationFocus\":[32],\"autoPlayInProgress\":[32],\"compactMode\":[32],\"carouselWrapperWidth\":[32]},[[0,\"change\",\"onHostElementChange\"],[0,\"clickCarouselPane\",\"carouselPaneClicked\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-month-picker\",[[1,\"q2-month-picker\",{\"year\":[1538],\"disabledMonths\":[16],\"today\":[1],\"selectedIndex\":[32],\"focusedIndex\":[32],\"showYearLayer\":[32]}]]],[\"q2-section\",[[1,\"q2-section\",{\"label\":[513],\"collapsible\":[516],\"noCollapseIcon\":[516,\"no-collapse-icon\"],\"expanded\":[1540],\"contentHeight\":[32],\"hideContent\":[32],\"hasYieldedHeader\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper\",[[1,\"q2-stepper\",{\"currentStep\":[1538,\"current-step\"],\"stepCount\":[1026,\"step-count\"],\"lastEnabledStep\":[1026,\"last-enabled-step\"],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"]]]]],[\"q2-card\",[[1,\"q2-card\",{\"title\":[513],\"description\":[513],\"avatarName\":[513,\"avatar-name\"],\"avatarInitials\":[513,\"avatar-initials\"],\"avatarIcon\":[513,\"avatar-icon\"],\"avatarSrc\":[513,\"avatar-src\"],\"isSmall\":[516,\"is-small\"],\"bar\":[513],\"isStatic\":[516,\"is-static\"],\"isTouch\":[516,\"is-touch\"],\"url\":[513],\"target\":[513],\"isAutoTouch\":[32],\"isAutoSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-chart-donut\",[[1,\"q2-chart-donut\",{\"chartName\":[513,\"chart-name\"],\"summaryIcon\":[513,\"summary-icon\"],\"summaryName\":[513,\"summary-name\"],\"innerRadius\":[1025,\"inner-radius\"],\"outerRadius\":[1025,\"outer-radius\"],\"minSliceSize\":[1,\"min-slice-size\"],\"selectedOffset\":[2,\"selected-offset\"],\"hoverScaleSize\":[2,\"hover-scale-size\"],\"format\":[513],\"isClickable\":[516,\"is-clickable\"],\"data\":[16],\"selectedId\":[32],\"hoveredId\":[32],\"selectById\":[64],\"selectByIndex\":[64],\"clearSelection\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-checkbox\",[[1,\"q2-checkbox\",{\"checked\":[1540],\"type\":[513],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"indeterminate\":[516],\"disabled\":[516],\"readonly\":[516],\"value\":[513],\"name\":[513],\"hasError\":[516,\"has-error\"],\"groupDisabled\":[516,\"group-disabled\"],\"alignment\":[513],\"description\":[513]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-checkbox-group\",[[1,\"q2-checkbox-group\",{\"label\":[513],\"value\":[1040],\"disabled\":[516],\"readonly\":[516],\"optional\":[516],\"hasError\":[516,\"has-error\"]},[[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-radio-group\",[[1,\"q2-radio-group\",{\"label\":[513],\"value\":[1025],\"disabled\":[516],\"name\":[513],\"optional\":[516],\"readonly\":[516],\"tileLayout\":[516,\"tile-layout\"],\"tileAlignment\":[513,\"tile-alignment\"],\"hasError\":[516,\"has-error\"],\"tilelayout\":[516]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"],[0,\"keydown\",\"keydownHandler\"]]]]],[\"q2-stepper-vertical\",[[1,\"q2-stepper-vertical\",{\"currentStepId\":[1537,\"current-step-id\"],\"structuredPanes\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"]]]]],[\"q2-textarea\",[[1,\"q2-textarea\",{\"value\":[1025],\"label\":[513],\"hideLabel\":[516,\"hide-label\"],\"hideMessages\":[516,\"hide-messages\"],\"optional\":[516],\"placeholder\":[513],\"disabled\":[516],\"readonly\":[516],\"spellcheck\":[516],\"maxlength\":[1538],\"rows\":[514],\"cols\":[514],\"resize\":[513],\"errors\":[16],\"hints\":[16],\"hasFocus\":[32],\"downParams\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-carousel-pane\",[[4,\"q2-carousel-pane\",{\"index\":[2],\"siblingCount\":[2,\"sibling-count\"],\"isActivePane\":[516,\"is-active-pane\"],\"label\":[513]}]]],[\"q2-chart-area\",[[1,\"q2-chart-area\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"lineColor\":[513,\"line-color\"],\"pointerLineColor\":[513,\"pointer-line-color\"],\"pointerLineStyle\":[513,\"pointer-line-style\"],\"areaColor\":[513,\"area-color\"],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideNameAxisLabels\":[516,\"hide-name-axis-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"showChartName\":[516,\"show-chart-name\"],\"showDatapointLabels\":[516,\"show-datapoint-labels\"],\"showGradient\":[516,\"show-gradient\"],\"gridLines\":[513,\"grid-lines\"]}]]],[\"q2-chart-bar\",[[1,\"q2-chart-bar\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"color\":[513],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideBarLabels\":[516,\"hide-bar-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"orientation\":[513],\"showChartName\":[516,\"show-chart-name\"],\"sort\":[516]}]]],[\"q2-loading-element\",[[0,\"q2-loading-element\",{\"shape\":[513],\"width\":[513],\"height\":[513],\"borderRadius\":[513,\"border-radius\"]}]]],[\"q2-loc\",[[1,\"q2-loc\",{\"value\":[513],\"substitutions\":[16]}]]],[\"q2-radio\",[[1,\"q2-radio\",{\"label\":[1537],\"hideLabel\":[516,\"hide-label\"],\"value\":[513],\"disabled\":[516],\"checked\":[516],\"name\":[513],\"ariaLabel\":[1537,\"aria-label\"],\"groupDisabled\":[4,\"group-disabled\"],\"groupReadonly\":[4,\"group-readonly\"],\"groupTileLayout\":[4,\"group-tile-layout\"]},[[0,\"click\",\"onHostClick\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper-pane\",[[1,\"q2-stepper-pane\",{\"label\":[513],\"description\":[513],\"isActive\":[516,\"is-active\"],\"showWithChildren\":[516,\"show-with-children\"],\"status\":[513],\"isChildActive\":[32]},[[0,\"activeChange\",\"checkForActiveChildren\"]]]]],[\"q2-tab-pane\",[[1,\"q2-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"index\":[2],\"guid\":[2]}]]],[\"q2-tooltip\",[[1,\"q2-tooltip\",{\"label\":[513],\"block\":[516],\"multiline\":[516],\"persistent\":[516],\"immediate\":[516],\"position\":[513],\"focusClass\":[32]},[[0,\"keyup\",\"keyUpHandler\"],[2,\"focus\",\"focusHandler\"],[0,\"focusout\",\"focusOutHandler\"]]]]],[\"tecton-tab-pane\",[[1,\"tecton-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"index\":[2],\"guid\":[2],\"provided\":[516],\"url\":[513],\"moduleId\":[513,\"module-id\"],\"minHeight\":[513,\"min-height\"],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"authPayload\":[16],\"showForm\":[4,\"show-form\"],\"_showForm\":[32]}]]],[\"q2-dropdown-item\",[[1,\"q2-dropdown-item\",{\"disabled\":[516],\"removable\":[516],\"separator\":[516],\"label\":[513],\"ariaLabel\":[513,\"aria-label\"],\"value\":[513]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-avatar\",[[1,\"q2-avatar\",{\"name\":[513],\"initials\":[513],\"src\":[513],\"icon\":[1],\"badSrc\":[32],\"isLoaded\":[32]}]]],[\"q2-optgroup_2\",[[1,\"q2-option\",{\"role\":[513],\"display\":[1025],\"value\":[513],\"disabled\":[516],\"disabledGroup\":[516,\"disabled-group\"],\"selected\":[516],\"hidden\":[516],\"multiline\":[516],\"active\":[516],\"_multiSelectHidden\":[516,\"_multiselecthidden\"]}],[1,\"q2-optgroup\",{\"disabled\":[516],\"label\":[513],\"hidden\":[32]}]]],[\"q2-message\",[[1,\"q2-message\",{\"type\":[513],\"appearance\":[513],\"description\":[516],\"presentToggle\":[32],\"present\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"click-elsewhere\",[[0,\"click-elsewhere\"]]],[\"q2-option-list_2\",[[1,\"q2-popover\",{\"direction\":[513],\"align\":[513],\"open\":[1540],\"block\":[516],\"minHeight\":[2,\"min-height\"],\"controlElement\":[16],\"privateDirection\":[32],\"show\":[32],\"toggle\":[64]},[[0,\"popoverState\",\"popoverStateHandler\"]]],[1,\"q2-option-list\",{\"role\":[513],\"customSearch\":[516,\"custom-search\"],\"noSelect\":[516,\"no-select\"],\"align\":[513],\"selectedOptions\":[1040],\"multiple\":[516],\"disabled\":[516],\"showSelected\":[1540,\"show-selected\"],\"type\":[1],\"hasOptions\":[32],\"setDefaultActiveElement\":[64],\"setActiveElement\":[64],\"handleExternalKeydown\":[64],\"getContents\":[64],\"getOptions\":[64]},[[0,\"focus\",\"delegateFocus\"],[0,\"click\",\"handleClick\"]]]]],[\"q2-btn_2\",[[1,\"q2-btn\",{\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaHasPopup\":[1,\"aria-has-popup\"],\"ariaControls\":[1,\"aria-controls\"],\"ariaSelected\":[1,\"aria-selected\"],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"tabIndex\":[2,\"tab-index\"],\"intent\":[513],\"color\":[513],\"disabled\":[516],\"type\":[513],\"loading\":[516],\"badge\":[516],\"active\":[516],\"fab\":[516],\"block\":[516],\"iconPosition\":[32]},[[2,\"click\",\"disable\"],[0,\"focus\",\"delegateFocus\"]]],[1,\"q2-loading\",{\"type\":[513],\"shape\":[513],\"modifiers\":[513],\"counts\":[513],\"label\":[1537],\"ariaLabel\":[513,\"aria-label\"],\"inline\":[516]}]]],[\"q2-badge_2\",[[1,\"q2-input\",{\"value\":[1025],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"type\":[513],\"placeholder\":[513],\"disabled\":[516],\"autocomplete\":[513],\"autocorrect\":[513],\"autocapitalize\":[513],\"hideMessages\":[516,\"hide-messages\"],\"iconLeft\":[513,\"icon-left\"],\"iconRight\":[513,\"icon-right\"],\"readonly\":[516],\"clearable\":[516],\"optional\":[516],\"min\":[514],\"max\":[514],\"step\":[514],\"formatModifier\":[513,\"format-modifier\"],\"maxlength\":[1538],\"pseudo\":[516],\"showVisibilityToggle\":[516,\"show-visibility-toggle\"],\"textHidden\":[1540,\"text-hidden\"],\"badgeValue\":[513,\"badge-value\"],\"badgeTheme\":[513,\"badge-theme\"],\"ariaControls\":[1,\"aria-controls\"],\"role\":[1],\"ariaOwns\":[1,\"aria-owns\"],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHaspopup\":[1,\"aria-haspopup\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaActivedescendant\":[8,\"aria-activedescendant\"],\"current\":[1],\"errors\":[16],\"hints\":[16],\"formattedValueObject\":[32],\"hasFocus\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]],[1,\"q2-badge\",{\"value\":[514],\"maxLength\":[514,\"max-length\"],\"position\":[513],\"size\":[513],\"theme\":[513],\"status\":[513]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"q2-icon\",[[1,\"q2-icon\",{\"type\":[513],\"label\":[513],\"inline\":[516]}]]],[\"q2-select\",[[1,\"q2-select\",{\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"value\":[1025],\"ariaLabel\":[1537,\"aria-label\"],\"selectedOptions\":[1040],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"listLabel\":[1,\"list-label\"],\"errors\":[16],\"multiple\":[516],\"minRows\":[2,\"min-rows\"],\"popDirection\":[513,\"pop-direction\"],\"searchable\":[516],\"multilineOptions\":[516,\"multiline-options\"],\"optional\":[516],\"placeholder\":[513],\"hoist\":[4],\"open\":[32],\"showSelected\":[32],\"searchText\":[32],\"hasCustomDisplay\":[32],\"inputFocused\":[32],\"statusMessage\":[32],\"prioritizeSearch\":[32],\"structuredSelectedOptions\":[32]},[[0,\"keydown\",\"keydownHandler\"],[0,\"change\",\"onHostElementChange\"],[0,\"input\",\"onHostElementInput\"],[0,\"focus\",\"delegateFocus\"],[0,\"focusout\",\"handleFocusout\"]]]]],[\"q2-action-sheet\",[[1,\"q2-action-sheet\",{\"data\":[1040],\"hideClose\":[4,\"hide-close\"],\"isScrollable\":[32],\"renderStatus\":[32],\"hide\":[64],\"show\":[64]}]]],[\"q2-calendar\",[[1,\"q2-calendar\",{\"value\":[1537],\"label\":[513],\"hideLabel\":[516,\"hide-label\"],\"ariaLabel\":[513,\"aria-label\"],\"optional\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[1540],\"typeable\":[516],\"clearable\":[516],\"placeholder\":[513],\"buttonLabel\":[513,\"button-label\"],\"disabledMsg\":[513,\"disabled-msg\"],\"calendarLabel\":[513,\"calendar-label\"],\"disclaimer\":[513],\"displayFormat\":[513,\"display-format\"],\"startDate\":[513,\"start-date\"],\"endDate\":[513,\"end-date\"],\"cutoffTime\":[513,\"cutoff-time\"],\"daysOfWeekChecksum\":[514,\"days-of-week-checksum\"],\"popDirection\":[513,\"pop-direction\"],\"assume\":[513],\"errors\":[1040],\"invalidDates\":[16],\"validDates\":[16],\"onsuccess\":[16],\"dropdownOpen\":[32],\"keyboardSelection\":[32],\"typedValue\":[32],\"dateList\":[32],\"hintMessage\":[32],\"hintMessageType\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"error\",\"defaultErrorHandler\"],[0,\"success\",\"defaultSuccessHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"clear\",\"handleClear\"]]]]],[\"q2-dropdown\",[[1,\"q2-dropdown\",{\"type\":[513],\"icon\":[513],\"label\":[513],\"hideLabel\":[516,\"hide-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"disabled\":[516],\"popDirection\":[513,\"pop-direction\"],\"name\":[513],\"context\":[513],\"contextValue\":[513,\"context-value\"],\"resolvedType\":[513,\"resolved-type\"],\"block\":[516],\"dropdownOpen\":[32]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-editable-field\",[[1,\"q2-editable-field\",{\"value\":[1537],\"editing\":[1540],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"type\":[513],\"formatModifier\":[513,\"format-modifier\"],\"truncated\":[513],\"maxlength\":[514],\"persistentLabel\":[516,\"persistent-label\"],\"disabled\":[516],\"hints\":[16],\"errors\":[16]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-pagination\",[[1,\"q2-pagination\",{\"recordType\":[1,\"record-type\"],\"perPage\":[2,\"per-page\"],\"total\":[514],\"page\":[1538],\"pages\":[1538],\"recordsOnly\":[1540,\"records-only\"],\"pagesOnly\":[1540,\"pages-only\"],\"isSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-pill\",[[1,\"q2-pill\",{\"hoist\":[4],\"disabled\":[516],\"active\":[1540],\"open\":[1540],\"multiple\":[516],\"maxLength\":[514,\"max-length\"],\"label\":[513],\"value\":[513],\"theme\":[513],\"selectedOptions\":[1040],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"hasOptions\":[32],\"selectedOptionElements\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-tab-container\",[[1,\"q2-tab-container\",{\"value\":[1537],\"type\":[513],\"name\":[513],\"color\":[513],\"noPrint\":[516,\"no-print\"],\"hasLeft\":[32],\"hasRight\":[32],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32],\"tabs\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[9,\"resize\",\"onResize\"],[0,\"focus\",\"onFocus\"],[0,\"badge\",\"onBadge\"]]]]],[\"q2-tag\",[[1,\"q2-tag\",{\"hoist\":[4],\"open\":[1540],\"label\":[513],\"theme\":[513],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"hasOptions\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-carousel\",[[4,\"q2-carousel\",{\"autoPlay\":[516,\"auto-play\"],\"fullWidthPanes\":[516,\"full-width-panes\"],\"hidePagination\":[516,\"hide-pagination\"],\"showNavigationArrows\":[516,\"show-navigation-arrows\"],\"ariaLabel\":[513,\"aria-label\"],\"label\":[513],\"index\":[1538],\"universalCarouselOptions\":[32],\"fullWidthDisplayOptions\":[32],\"activePaneIndex\":[32],\"applyFocus\":[32],\"applyPaginationFocus\":[32],\"autoPlayInProgress\":[32],\"compactMode\":[32],\"carouselWrapperWidth\":[32]},[[0,\"change\",\"onHostElementChange\"],[0,\"clickCarouselPane\",\"carouselPaneClicked\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-month-picker\",[[1,\"q2-month-picker\",{\"year\":[1538],\"disabledMonths\":[16],\"today\":[1],\"selectedIndex\":[32],\"focusedIndex\":[32],\"showYearLayer\":[32]}]]],[\"q2-section\",[[1,\"q2-section\",{\"label\":[513],\"collapsible\":[516],\"noCollapseIcon\":[516,\"no-collapse-icon\"],\"expanded\":[1540],\"contentHeight\":[32],\"hideContent\":[32],\"hasYieldedHeader\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper\",[[1,\"q2-stepper\",{\"currentStep\":[1538,\"current-step\"],\"stepCount\":[1026,\"step-count\"],\"lastEnabledStep\":[1026,\"last-enabled-step\"],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"]]]]],[\"q2-card\",[[1,\"q2-card\",{\"title\":[513],\"description\":[513],\"avatarName\":[513,\"avatar-name\"],\"avatarInitials\":[513,\"avatar-initials\"],\"avatarIcon\":[513,\"avatar-icon\"],\"avatarSrc\":[513,\"avatar-src\"],\"isSmall\":[516,\"is-small\"],\"bar\":[513],\"isStatic\":[516,\"is-static\"],\"isTouch\":[516,\"is-touch\"],\"url\":[513],\"target\":[513],\"isAutoTouch\":[32],\"isAutoSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-chart-donut\",[[1,\"q2-chart-donut\",{\"chartName\":[513,\"chart-name\"],\"summaryIcon\":[513,\"summary-icon\"],\"summaryName\":[513,\"summary-name\"],\"innerRadius\":[1025,\"inner-radius\"],\"outerRadius\":[1025,\"outer-radius\"],\"minSliceSize\":[1,\"min-slice-size\"],\"selectedOffset\":[2,\"selected-offset\"],\"hoverScaleSize\":[2,\"hover-scale-size\"],\"format\":[513],\"isClickable\":[516,\"is-clickable\"],\"data\":[16],\"selectedId\":[32],\"hoveredId\":[32],\"selectById\":[64],\"selectByIndex\":[64],\"clearSelection\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-checkbox\",[[1,\"q2-checkbox\",{\"checked\":[1540],\"type\":[513],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"indeterminate\":[516],\"disabled\":[516],\"readonly\":[516],\"value\":[513],\"name\":[513],\"hasError\":[516,\"has-error\"],\"groupDisabled\":[516,\"group-disabled\"],\"alignment\":[513],\"description\":[513]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-checkbox-group\",[[1,\"q2-checkbox-group\",{\"label\":[513],\"value\":[1040],\"disabled\":[516],\"readonly\":[516],\"optional\":[516],\"hasError\":[516,\"has-error\"]},[[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-radio-group\",[[1,\"q2-radio-group\",{\"label\":[513],\"value\":[1025],\"disabled\":[516],\"name\":[513],\"optional\":[516],\"readonly\":[516],\"tileLayout\":[516,\"tile-layout\"],\"tileAlignment\":[513,\"tile-alignment\"],\"hasError\":[516,\"has-error\"],\"tilelayout\":[516]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"],[0,\"keydown\",\"keydownHandler\"]]]]],[\"q2-stepper-vertical\",[[1,\"q2-stepper-vertical\",{\"currentStepId\":[1537,\"current-step-id\"],\"structuredPanes\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"]]]]],[\"q2-textarea\",[[1,\"q2-textarea\",{\"value\":[1025],\"label\":[513],\"hideLabel\":[516,\"hide-label\"],\"hideMessages\":[516,\"hide-messages\"],\"optional\":[516],\"placeholder\":[513],\"disabled\":[516],\"readonly\":[516],\"spellcheck\":[516],\"maxlength\":[1538],\"rows\":[514],\"cols\":[514],\"resize\":[513],\"errors\":[16],\"hints\":[16],\"hasFocus\":[32],\"downParams\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-carousel-pane\",[[4,\"q2-carousel-pane\",{\"index\":[2],\"siblingCount\":[2,\"sibling-count\"],\"isActivePane\":[516,\"is-active-pane\"],\"label\":[513]}]]],[\"q2-chart-area\",[[1,\"q2-chart-area\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"lineColor\":[513,\"line-color\"],\"pointerLineColor\":[513,\"pointer-line-color\"],\"pointerLineStyle\":[513,\"pointer-line-style\"],\"areaColor\":[513,\"area-color\"],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideNameAxisLabels\":[516,\"hide-name-axis-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"showChartName\":[516,\"show-chart-name\"],\"showDatapointLabels\":[516,\"show-datapoint-labels\"],\"showGradient\":[516,\"show-gradient\"],\"gridLines\":[513,\"grid-lines\"]}]]],[\"q2-chart-bar\",[[1,\"q2-chart-bar\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"color\":[513],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideBarLabels\":[516,\"hide-bar-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"orientation\":[513],\"showChartName\":[516,\"show-chart-name\"],\"sort\":[516]}]]],[\"q2-loading-element\",[[0,\"q2-loading-element\",{\"shape\":[513],\"width\":[513],\"height\":[513],\"borderRadius\":[513,\"border-radius\"]}]]],[\"q2-loc\",[[1,\"q2-loc\",{\"value\":[513],\"substitutions\":[16]}]]],[\"q2-radio\",[[1,\"q2-radio\",{\"label\":[1537],\"hideLabel\":[516,\"hide-label\"],\"value\":[513],\"disabled\":[516],\"checked\":[516],\"name\":[513],\"ariaLabel\":[1537,\"aria-label\"],\"groupDisabled\":[4,\"group-disabled\"],\"groupReadonly\":[4,\"group-readonly\"],\"groupTileLayout\":[4,\"group-tile-layout\"]},[[0,\"click\",\"onHostClick\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper-pane\",[[1,\"q2-stepper-pane\",{\"label\":[513],\"description\":[513],\"isActive\":[516,\"is-active\"],\"showWithChildren\":[516,\"show-with-children\"],\"status\":[513],\"isChildActive\":[32]},[[0,\"activeChange\",\"checkForActiveChildren\"]]]]],[\"q2-tab-pane\",[[1,\"q2-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"index\":[2],\"guid\":[2]}]]],[\"q2-tooltip\",[[1,\"q2-tooltip\",{\"label\":[513],\"block\":[516],\"multiline\":[516],\"persistent\":[516],\"immediate\":[516],\"position\":[513],\"focusClass\":[32]},[[0,\"keyup\",\"keyUpHandler\"],[2,\"focus\",\"focusHandler\"],[0,\"focusout\",\"focusOutHandler\"]]]]],[\"tecton-tab-pane\",[[1,\"tecton-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"index\":[2],\"guid\":[2],\"provided\":[516],\"url\":[513],\"moduleId\":[513,\"module-id\"],\"minHeight\":[513,\"min-height\"],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"authPayload\":[16],\"showForm\":[4,\"show-form\"],\"_showForm\":[32]}]]],[\"q2-dropdown-item\",[[1,\"q2-dropdown-item\",{\"disabled\":[516],\"removable\":[516],\"separator\":[516],\"label\":[513],\"ariaLabel\":[513,\"aria-label\"],\"value\":[513]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-avatar\",[[1,\"q2-avatar\",{\"name\":[513],\"initials\":[513],\"src\":[513],\"icon\":[1],\"badSrc\":[32],\"isLoaded\":[32]}]]],[\"q2-optgroup_2\",[[1,\"q2-option\",{\"role\":[513],\"display\":[1025],\"value\":[513],\"disabled\":[516],\"disabledGroup\":[516,\"disabled-group\"],\"selected\":[516],\"hidden\":[516],\"multiline\":[516],\"active\":[516],\"_multiSelectHidden\":[516,\"_multiselecthidden\"]}],[1,\"q2-optgroup\",{\"disabled\":[516],\"label\":[513],\"hidden\":[32]}]]],[\"q2-message\",[[1,\"q2-message\",{\"type\":[513],\"appearance\":[513],\"description\":[516],\"presentToggle\":[32],\"present\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"click-elsewhere\",[[0,\"click-elsewhere\"]]],[\"q2-option-list_2\",[[1,\"q2-popover\",{\"direction\":[513],\"align\":[513],\"open\":[1540],\"block\":[516],\"minHeight\":[2,\"min-height\"],\"controlElement\":[16],\"currentDirection\":[32],\"show\":[32],\"toggle\":[64]},[[0,\"popoverState\",\"popoverStateHandler\"]]],[1,\"q2-option-list\",{\"customSearch\":[516,\"custom-search\"],\"noSelect\":[516,\"no-select\"],\"align\":[513],\"selectedOptions\":[1040],\"multiple\":[516],\"disabled\":[516],\"showSelected\":[1540,\"show-selected\"],\"type\":[1],\"label\":[1],\"hasOptions\":[32],\"setDefaultActiveElement\":[64],\"setActiveElement\":[64],\"handleExternalKeydown\":[64],\"getContents\":[64],\"getOptions\":[64]},[[0,\"focus\",\"delegateFocus\"],[0,\"click\",\"handleClick\"]]]]],[\"q2-btn_2\",[[1,\"q2-btn\",{\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaHasPopup\":[1,\"aria-has-popup\"],\"ariaControls\":[1,\"aria-controls\"],\"ariaSelected\":[1,\"aria-selected\"],\"ariaPressed\":[1,\"aria-pressed\"],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"tabIndex\":[2,\"tab-index\"],\"intent\":[513],\"color\":[513],\"disabled\":[516],\"type\":[513],\"loading\":[516],\"badge\":[516],\"active\":[516],\"fab\":[516],\"block\":[516],\"iconPosition\":[32]},[[2,\"click\",\"disable\"],[0,\"focus\",\"delegateFocus\"]]],[1,\"q2-loading\",{\"type\":[513],\"shape\":[513],\"modifiers\":[513],\"counts\":[513],\"label\":[1537],\"ariaLabel\":[513,\"aria-label\"],\"inline\":[516]}]]],[\"q2-badge_2\",[[1,\"q2-input\",{\"value\":[1025],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"type\":[513],\"placeholder\":[513],\"disabled\":[516],\"autocomplete\":[513],\"autocorrect\":[513],\"autocapitalize\":[513],\"hideMessages\":[516,\"hide-messages\"],\"iconLeft\":[513,\"icon-left\"],\"iconRight\":[513,\"icon-right\"],\"readonly\":[516],\"clearable\":[516],\"optional\":[516],\"min\":[514],\"max\":[514],\"step\":[514],\"formatModifier\":[513,\"format-modifier\"],\"maxlength\":[1538],\"pseudo\":[516],\"showVisibilityToggle\":[516,\"show-visibility-toggle\"],\"textHidden\":[1540,\"text-hidden\"],\"badgeValue\":[513,\"badge-value\"],\"badgeTheme\":[513,\"badge-theme\"],\"role\":[1],\"ariaControls\":[1,\"aria-controls\"],\"ariaOwns\":[1,\"aria-owns\"],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHaspopup\":[1,\"aria-haspopup\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaActivedescendant\":[8,\"aria-activedescendant\"],\"current\":[1],\"errors\":[16],\"hints\":[16],\"formattedValueObject\":[32],\"hasFocus\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]],[1,\"q2-badge\",{\"value\":[514],\"maxLength\":[514,\"max-length\"],\"position\":[513],\"size\":[513],\"theme\":[513],\"status\":[513]}]]]]"), options);
 });

package/dist/q2-tecton-elements/p-1f16d0f8.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as o,g as r}from"./p-926a3e80.js";import{r as e,o as a,l as n,a as c}from"./p-839ef27d.js";import{s,a as l}from"./p-a1926e65.js";const p=class{constructor(o){var r;t(this,o),this.change=i(this,"change",7),this.scheduledAfterRender=[],this.updateSelectedOptionElements=async()=>{var t;const{selectedOptions:i}=this,o=i.map((t=>t.value)),r=await(null===(t=this.optionList)||void 0===t?void 0:t.getOptions());this.selectedOptionElements=null==r?void 0:r.filter((t=>o.includes(t.value)))},this.determineHasOptions=()=>{const t=!!this.hostElement.querySelectorAll("q2-option").length;this.hasOptions=t},this.clearSelectedOptions=()=>{this.selectedOptions=[],this.active=!1,this.open=!1,this.primaryBtn.focus(),this.change.emit({value:null,values:[],active:!1}),this.scheduledAfterRender.push(e)},this.handleClick=async t=>{if(t.stopPropagation(),!this.disabled)if(this.hasOptions)s(this)?this.executeActionSheet(t):await this.popoverElement.toggle();else{const{value:t,label:i}=this,o=this.active=!this.active,r=o?[{value:t,display:i}]:[];this.selectedOptions=r,this.change.emit({value:t,values:r,active:o})}},this.handleKeydown=async t=>{t.preventDefault(),this.hasOptions&&!this.disabled&&(s(this,t)?this.executeActionSheet(t):this.optionList.handleExternalKeydown(t))},this.handleChange=t=>{t.stopPropagation(),this.hasOptions&&this.handleSelectionChanges(t.detail)},this.handleWrapperClick=()=>{this.primaryBtn.focus(),this.primaryBtn.click()},this.onClickElsewhere=t=>{"click-elsewhere"===t.target.localName&&(t.stopPropagation(),this.popoverElement.open=!1)},this.hoist=!!(null===(r=window.Tecton)||void 0===r?void 0:r.useActionSheets),this.disabled=void 0,this.active=void 0,this.open=void 0,this.multiple=void 0,this.maxLength=void 0,this.label=void 0,this.value=void 0,this.theme=void 0,this.selectedOptions=[],this.popoverMinHeight=150,this.popoverDirection=void 0,this.hasOptions=void 0,this.selectedOptionElements=[]}componentWillLoad(){const t=new MutationObserver(this.determineHasOptions);t.observe(this.hostElement,{childList:!0,attributes:!0}),this.mutationObserver=t}componentDidLoad(){a(this.hostElement)}componentDidRender(){this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[]}disconnectedCallback(){this.mutationObserver.disconnect(),this.mutationObserver=null}get buttonContent(){const{label:t,selectedOptions:i,selectedOptionElements:o,hasOptions:r}=this;return r&&0!==o.length?1===o.length?o[0].display:n("tecton.element.pill.activeCount",{count:i.length}):t}get truncatedButtonContent(){const{maxLength:t,buttonContent:i}=this;return t&&i.length>t?`${i.substring(0,t)}…`:i}async executeActionSheet(t){const i=await l(this,t);this.handleSelectionChanges(i)}handleSelectionChanges(t){const{value:i="",values:o=[]}=t,r=!!o.length;this.hostElement.onchange||(this.selectedOptions=o,this.active=r),this.change.emit({value:i,values:o,active:r})}selectedOptionsWatcher(){this.updateSelectedOptionElements()}delegateFocus(t){c(t,this.hostElement)&&this.primaryBtn.focus()}popoverStateHandler({detail:{open:t}}){this.open!==t&&(this.open=t),t||(this.optionList.setActiveElement(null),this.primaryBtn.focus())}generateIcon(){const{hasOptions:t,active:i}=this,r=t&&i,e=r||!t?"close":"chevron-down";return o(r?"button":"div",{class:"btn-close",onClick:r&&this.clearSelectedOptions,disabled:r&&this.disabled,"aria-label":r&&n("tecton.element.pill.clearSelection"),type:r&&"button"},o("q2-icon",{type:e}))}render(){const{hasOptions:t,active:i,open:r}=this,e=["btn-wrapper"];return(t||i)&&e.push("has-icon"),t&&e.push("has-options"),o("click-elsewhere",{onChange:this.onClickElsewhere},o("div",{class:e.join(" ")},o("div",{class:"btn-height-wrapper",ref:t=>this.primaryBtnWrapper=t,onClick:this.handleWrapperClick,tabIndex:-1},o("button",{class:"btn-primary","test-id":"btn-control",type:"button",role:"combobox",ref:t=>this.primaryBtn=t,onClick:this.handleClick,onKeyDown:this.handleKeydown,disabled:this.disabled,"aria-selected":!t&&i?"true":"false","aria-roledescription":!t&&"filter","aria-controls":t&&"option-list","aria-haspopup":t&&"true","aria-expanded":t&&`${!!r}`||void 0,"aria-label":this.maxLength&&this.buttonContent},this.truncatedButtonContent,!t&&i&&o("span",{class:"sr"},"(",n("tecton.element.pill.active"),")"))),this.generateIcon()),this.hasOptions&&o("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.primaryBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:"right"},o("q2-option-list",{type:"listbox",ref:t=>this.optionList=t,id:"option-list",onChange:this.handleChange,multiple:this.multiple,selectedOptions:this.selectedOptions,onReady:()=>this.updateSelectedOptionElements()},o("slot",null))))}get hostElement(){return r(this)}static get watchers(){return{selectedOptions:["selectedOptionsWatcher"]}}};p.style="*{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 #33b4ff #06C)}: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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--compt-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--comp-btn-background);--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}:host(:not(:empty)) .btn-wrapper,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--t-primary-l5, #61c4ff);--comp-active-btn-color:var(--t-primary-text, #ffffff);--comp-active-btn-border-color:var(--t-primary-l5, #61c4ff);--comp-hover-active-btn-background:var(--t-primary-l3, #21acff);--comp-hover-active-btn-border-color:var(--t-primary-l3, #21acff)}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--t-secondary-l5, #d9e1e6);--comp-active-btn-color:var(--t-secondary-text, #141414);--comp-active-btn-border-color:var(--t-secondary-l5, #d9e1e6);--comp-hover-active-btn-background:var(--t-secondary-l3, #c9d5db);--comp-hover-active-btn-border-color:var(--t-secondary-l3, #c9d5db)}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--t-tertiary-l5, #f4fafe);--comp-active-btn-color:var(--t-tertiary-text, #141414);--comp-active-btn-border-color:var(--t-tertiary-l5, #f4fafe);--comp-hover-active-btn-background:var(--t-tertiary-l3, #eff8fd);--comp-hover-active-btn-border-color:var(--t-tertiary-l3, #eff8fd)}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-gray-9, #999999)));padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, 14px)));color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.btn-primary:hover{background:var(--comp-hover-btn-background)}:host(:not(:empty)) .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]) .btn-primary{background:var(--comp-active-btn-background);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]) .btn-primary:focus,:host([active]) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}:host([active]) .btn-close{color:var(--comp-active-btn-color)}:host(:not(:empty)) .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--t-icon-stroke-primary:currentColor;width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]) button.btn-close:focus,:host([active]) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}";export{p as q2_pill}

package/dist/q2-tecton-elements/p-2ee8d7ae.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as a,H as o,g as e}from"./p-926a3e80.js";import{o as r,a as s,l as n}from"./p-839ef27d.js";import{s as c,a as h}from"./p-a1926e65.js";const p=class{constructor(a){var o;t(this,a),this.click=i(this,"click",7),this.determineHasOptions=()=>{const t=!!this.hostElement.querySelectorAll("q2-option").length;this.hasOptions=t},this.onClickElsewhere=t=>{"click-elsewhere"===t.target.localName&&(t.stopPropagation(),this.popoverElement.open=!1)},this.handleChange=t=>{if(t.stopPropagation(),!this.hasOptions)return;const{value:i}=t.detail;this.click.emit({value:i})},this.handleClick=async t=>{if(t.stopPropagation(),c(this)){const{value:i}=await h(this,t);this.click.emit({value:i})}else this.popoverElement.toggle()},this.handleKeydown=async t=>{if(t.preventDefault(),c(this,t)){const{value:i}=await h(this,t);this.click.emit({value:i})}else this.optionList.handleExternalKeydown(t)},this.handleButtonFocusout=t=>{var i;const a=t.relatedTarget;null!==(i="Q2-OPTION"===(null==a?void 0:a.tagName))&&void 0!==i&&i||(this.open=!1)},this.handleWrapperClick=()=>{this.dropdownBtn.focus(),this.dropdownBtn.click()},this.hoist=!!(null===(o=window.Tecton)||void 0===o?void 0:o.useActionSheets),this.open=void 0,this.label=void 0,this.theme=void 0,this.popoverMinHeight=150,this.popoverDirection=void 0,this.hasOptions=void 0}componentWillLoad(){const t=new MutationObserver(this.determineHasOptions);t.observe(this.hostElement,{childList:!0,attributes:!0}),this.mutationObserver=t}componentDidLoad(){r(this.hostElement)}disconnectedCallback(){this.mutationObserver.disconnect(),this.mutationObserver=null}delegateFocus(t){s(t,this.hostElement)&&this.hasOptions&&this.dropdownBtn.focus()}popoverStateHandler({detail:{open:t}}){this.open!==t&&(this.open=t),t||(this.optionList.setActiveElement(null),this.dropdownBtn.focus())}render(){const{hasOptions:t,open:i}=this,e=["tag-wrapper"];return t&&e.push("has-options"),a(o,{role:"listitem"},a("click-elsewhere",{onChange:this.onClickElsewhere},a("div",{class:e.join(" "),onClick:t=>t.stopPropagation()},a("div",{class:"tag"},this.label),this.hasOptions&&a("div",{class:"btn-wrapper",onClick:this.handleWrapperClick},a("button",{ref:t=>this.dropdownBtn=t,"test-id":"btn-control",type:"button",role:"combobox",onClick:this.handleClick,onKeyDown:this.handleKeydown,onFocusout:this.handleButtonFocusout,"aria-controls":"option-list","aria-haspopup":"true","aria-expanded":i?"true":"false","aria-label":n("tecton.element.tag.viewOptions")},a("q2-icon",{type:"options"})))),this.hasOptions&&a("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.dropdownBtn,open:this.open,minHeight:this.popoverMinHeight,direction:this.popoverDirection,align:"right"},a("q2-option-list",{id:"option-list",ref:t=>this.optionList=t,onChange:this.handleChange,type:"menu",align:"right","no-select":!0},a("slot",null)))))}get hostElement(){return e(this)}};p.style="*{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 #33b4ff #06C)}: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:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--t-primary-l5, #61c4ff);--comp-tag-color:var(--t-primary-text, #ffffff)}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--t-secondary-l5, #d9e1e6);--comp-tag-color:var(--t-secondary-text, #000000)}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--t-tertiary-l5, #f4fafe);--comp-tag-color:var(--t-tertiary-text, #000000)}.tag{height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)))}.has-options .tag{padding-right:var(--comp-tag-btn-size)}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);height:var(--comp-tag-clickable-size);width:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:absolute;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{width:var(--comp-tag-btn-size);height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;--tct-icon-size:18px}";export{p as q2_tag}

package/dist/q2-tecton-elements/p-30391257.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as i,g as s}from"./p-926a3e80.js";import{l,h as o,o as a,d as r,a as n,e as c}from"./p-839ef27d.js";import{s as h,a as d}from"./p-a1926e65.js";const p=class{constructor(i){var s;t(this,i),this.change=e(this,"change",7),this.input=e(this,"input",7),this.scheduledAfterRender=[],this.showSelectedOptions=()=>{this.showSelected=!0},this.showAllOptions=()=>{this.showSelected=!1},this.onMutationObserved=()=>{const t=this.hostElement.querySelector(".custom-display-content"),e=this.hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]'),i=e?e.assignedNodes().length>0:t.children.length>0;this.hasCustomDisplay!==i&&(this.hasCustomDisplay=i)},this.onOptionListChange=t=>{t.stopPropagation();const{values:e}=t.detail;0===e.length&&this.showAllOptions(),this.handleSelectionChanges(t.detail)},this.popoverStateChanged=({detail:{open:t}})=>{this.open!==t&&(this.open=t,t&&!this.searchText||(this.optionList.setActiveElement(null),this.inputField.focus()))},this.inputKeydownHandler=t=>{if(!this.readonly&&!this.disabled)return h(this,t)?this.executeActionSheet(t):void(this.searchable&&!["ArrowDown","ArrowUp","PageDown","PageUp","Home","End","Escape","Tab"].includes(t.key)||(this.shouldClearSearchText(t)&&this.clearSearchText()," "===t.key&&t.preventDefault(),this.optionList.handleExternalKeydown(t)))},this.visibilityToggleKeyDown=t=>{const e=t.key,i="Tab"===e&&t.shiftKey;["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e)&&t.stopPropagation(),i&&(t.stopPropagation(),this.optionList.setDefaultActiveElement())},this.inputClickHandler=async t=>{if(t.stopPropagation(),h(this))return this.executeActionSheet(t);this.toggleDropdown(),this.focusInput()},this.inputInputHandler=t=>{t.stopPropagation();const e=t.detail.value;!!this.value&&this.inputField.value!==e&&this.clearValue(),this.open||this.openDropdownWithoutActiveElement(),this.prioritizeSearch=!0,this.searchText=e,this.input.emit({query:e})},this.inputFocusHandler=()=>{this.inputFocused=!0},this.inputBlurHandler=()=>{this.inputFocused=!1},this.inputChangeHandler=t=>{t.stopPropagation()},this.clickedElsewhere=t=>{"click-elsewhere"===t.target.localName&&(t.stopPropagation(),this.open&&this.closeDropdown())},this.onCustomDisplayClick=t=>{t.stopPropagation(),this.focusInput(),this.toggleDropdown()},this.label=void 0,this.hideLabel=void 0,this.value=void 0,this.ariaLabel=void 0,this.selectedOptions=[],this.disabled=!1,this.readonly=!1,this.invalid=void 0,this.listLabel=l("tecton.element.select.listLabel"),this.errors=void 0,this.multiple=!1,this.minRows=3,this.popDirection=void 0,this.searchable=!1,this.multilineOptions=!1,this.optional=!1,this.placeholder=void 0,this.hoist=!!(null===(s=window.Tecton)||void 0===s?void 0:s.useActionSheets),this.open=!1,this.showSelected=!1,this.searchText="",this.hasCustomDisplay=!1,this.inputFocused=!1,this.statusMessage=void 0,this.prioritizeSearch=!1,this.structuredSelectedOptions=[]}componentWillLoad(){o(this),this.buildStructuredSelectedOptions(),this.handleMultilineOptionsUpdate(this.multilineOptions,!1)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:!0,subtree:!0}),this.mutationObserver=t,this.onMutationObserved(),a(this.hostElement),setTimeout((()=>this.checkSelectedDisplay()),0)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[]}),25)}disconnectedCallback(){var t;null===(t=this.mutationObserver)||void 0===t||t.disconnect(),this.mutationObserver=null}get innerInputField(){var t,e;return null===(e=null===(t=this.inputField)||void 0===t?void 0:t.shadowRoot)||void 0===e?void 0:e.querySelector(".input-field")}get badgeValue(){var t,e;if(!this.multiple)return null;const i=null!==(e=null===(t=this.selectedOptions)||void 0===t?void 0:t.length)&&void 0!==e?e:0;return this.open&&this.searchable?i?`${i}`:null:i>1?"+"+(i-1):null}get popoverMinHeight(){const{minRows:t}=this,e=this.hostElement.querySelector("q2-option:not([hidden])");let i=e&&window.getComputedStyle(e).minHeight;return i&&"0px"!==i||(i="44px"),t*parseInt(i)}get selectedDisplay(){return this.prioritizeSearch||this.searchText?this.searchText:this.hasCustomDisplay?"":this.multiple?this.calculateMultiSelectSelectedDisplay():this.calculateSingleSelectSelectedDisplay()}get selectedDisplaySlot(){return this.hostElement.querySelector('[slot="_selected-display"]')}get firstSelectedValue(){var t;return this.multiple?null===(t=this.selectedOptions)||void 0===t?void 0:t[0]:this.value}get firstSelectedOptionElement(){const{firstSelectedValue:t}=this;return t?this.optionElements.find((({value:e})=>e===t)):null}get optionElements(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}get wrapperClasses(){const{errors:t}=this,e=["q2-select-container"];return Array.isArray(t)&&t.length>0&&e.push("has-error"),this.inputFocused&&e.push("is-focused"),this.searchable&&e.push("is-searchable"),e.join(" ")}buildStructuredSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;this.structuredSelectedOptions=t?(null==e?void 0:e.length)?e.map((t=>"string"==typeof t?{value:t}:t)):[]:i?[{value:i}]:[]}ariaLabelObserver(){o(this)}valueUpdated(){this.multiple||this.clearSearchText()}handleMultilineOptionsUpdate(t,e){t!==e&&this.optionElements.forEach((e=>e.multiline=t))}openChanged(t){this.scheduledAfterRender.push((()=>{const{multiple:e,multiSelectHeader:i,popoverElement:s}=this,l=t&&e&&(null==i?void 0:i.offsetHeight)||0;l?s.style.setProperty("--comp-multi-select-header-height",`${l}px`):s.style.removeProperty("--comp-multi-select-header-height")}))}keydownHandler(t){this.inputKeydownHandler(t)}onHostElementChange(t){this.readonly||this.disabled||t.target!==this.hostElement||this.hostElement.onchange||(this.multiple?(this.value=null,this.selectedOptions=t.detail.selectedOptions):(this.value=t.detail.value,this.selectedOptions=[]))}onHostElementInput(t){if(!this.searchable||t.target!==this.hostElement||this.hostElement.oninput)return;const e=this.optionElements,i=this.searchText.trim().toLocaleLowerCase();let s=0;e.forEach((t=>{var e;if(""===i)return void(t.hidden=!1);const l="Q2-CARD"===(null===(e=t.firstElementChild)||void 0===e?void 0:e.tagName)?t.firstElementChild.title:null,{display:o="",innerText:a=""}=t,r=[o,l,a].some((t=>{var e;return null!==(e=null==t?void 0:t.toLocaleLowerCase().includes(i))&&void 0!==e&&e}));t.hidden=!r,r&&s++})),this.setStatusMessage(l(i?"tecton.element.select.searchable.results":"tecton.element.select.allOptions",[i?s:e.length]))}delegateFocus(t){const e=r(t,this.hostElement);(this.prioritizeSearch=e&&this.searchable)?this.clearSelectedDisplay():n(t,this.hostElement)&&this.inputField.shadowRoot.querySelector(".input-field").focus()}handleFocusout(t){const e=c(t,this.hostElement);e&&this.closeDropdown(),this.prioritizeSearch=!e&&this.searchable}async executeActionSheet(t){const e=await d(this,t);this.handleSelectionChanges(e)}handleSelectionChanges(t){const{value:e="",values:i=[]}=t,s=i.map((t=>t.value)),{multiple:l}=this;this.hostElement.onchange||(this.selectedOptions=s),this.change.emit({value:l?void 0:e,selectedOptions:l?s:void 0})}clearValue(){const{multiple:t}=this;this.value="",this.selectedOptions=[],this.change.emit({value:t?void 0:"",selectedOptions:t?[]:void 0})}calculateMultiSelectSelectedDisplay(){var t;const{firstSelectedOptionElement:e,firstSelectedValue:i,multilineOptions:s}=this;return i?(null==e?void 0:e.display)?l(e.display):s&&this.searchable?this.searchText:s?"":null!==(t=null==e?void 0:e.value)&&void 0!==t?t:i:""}calculateSingleSelectSelectedDisplay(){const{firstSelectedOptionElement:t}=this;return(null==t?void 0:t.display)&&l(t.display)||this.value||""}openDropdownWithoutActiveElement(){this.readonly||this.disabled||(this.optionList.setActiveElement(null),this.open=!0)}closeDropdown(){this.open=!1,this.clearSearchText()}clearSearchText(){this.searchText&&(this.searchText="",this.input.emit({query:""}))}toggleDropdown(){this.readonly||this.disabled||(this.open&&!this.searchText?this.closeDropdown():this.openDropdownWithoutActiveElement())}focusInput(){var t;null===(t=this.inputField)||void 0===t||t.dispatchEvent(new FocusEvent("focus"))}setStatusMessage(t){clearTimeout(this.statusMessageTimer),this.statusMessage="",this.statusMessageTimer=setTimeout((()=>{this.statusMessage=t}),1e3)}clearSelectedDisplay(){var t;null===(t=this.selectedDisplaySlot)||void 0===t||t.remove()}checkSelectedDisplay(){let t=this.selectedDisplaySlot;const{value:e,multiple:i,selectedOptions:s,multilineOptions:l,firstSelectedOptionElement:o,prioritizeSearch:a}=this;if(a||!l||!e&&i&&!(null==s?void 0:s.length))return this.clearSelectedDisplay();if(!o||o.display)return this.clearSelectedDisplay();const r=o.firstElementChild.cloneNode(!0);return r.querySelectorAll("[hide-on-select]").forEach((t=>t.remove())),t?(t.style.setProperty("--comp-selected-display-height",0===t.clientHeight?"auto":`${t.clientHeight}px`),t.firstElementChild.outerHTML!==r.outerHTML&&t.replaceChild(r,t.firstElementChild)):(t=document.createElement("div"),t.slot="_selected-display",t.appendChild(r),this.hostElement.appendChild(t)),t}checkSelectedDisplayHeight(){const{selectedDisplaySlot:t}=this;t&&t.style.setProperty("--comp-selected-display-height","44px")}shouldClearSearchText(t){return this.searchable&&!!this.searchText&&"Escape"===t.key}renderCustomDisplay(){if(this.checkSelectedDisplay())return this.checkSelectedDisplayHeight(),i("slot",{name:"_selected-display",slot:"custom-display"})}render(){const t=!this.searchable;return i("click-elsewhere",{class:this.wrapperClasses,onChange:this.clickedElsewhere},i("div",{"aria-live":"polite","aria-atomic":"true",role:"status",class:"sr"},this.statusMessage),i("q2-input",{ref:t=>this.inputField=t,class:"q2-select-input",label:this.label&&l(this.label)||"",value:this.selectedDisplay,errors:Array.isArray(this.errors)&&this.errors.length>0&&this.errors.map((t=>l(t)))||this.invalid&&["tecton.element.select.invalid"]||[],disabled:this.disabled,optional:this.optional,readonly:this.readonly,placeholder:this.placeholder||void 0,hideLabel:this.hideLabel,ariaExpanded:`${this.open}`,ariaControls:"option-list",ariaHaspopup:"listbox",role:"combobox",pseudo:t,"test-id":"toggleDropdown","hide-messages":!0,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":void 0},this.renderCustomDisplay()),i("div",{class:"custom-display-content",hidden:!this.hasCustomDisplay||!!this.searchText,onClick:this.onCustomDisplayClick},i("slot",{name:"q2-select-display"})),this.optionsDropdown())}optionsDropdown(){return i("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.innerInputField,open:this.open,minHeight:this.popoverMinHeight,direction:this.popDirection,onPopoverStateChanged:this.popoverStateChanged,block:!0},i("div",{class:"popover-content",tabindex:"-1"},i("q2-option-list",{ref:t=>this.optionList=t,type:"listbox",id:"option-list","show-selected":this.showSelected,"aria-label":this.listLabel,multiple:this.multiple,selectedOptions:this.structuredSelectedOptions,onChange:this.onOptionListChange},i("slot",null)),this.multiple&&this.visibilityToggle()))}visibilityToggle(){var t,e;const s=null!==(e=null===(t=this.selectedOptions)||void 0===t?void 0:t.length)&&void 0!==e?e:0,{showSelected:o}=this;return i("div",{class:"multi-select-header",ref:t=>this.multiSelectHeader=t},i("fieldset",null,i("legend",{"aria-label":l("tecton.element.select.multiHeader.showing")},l("tecton.element.select.multiHeader.showing")),i("div",null,i("input",{class:"sr",type:"radio",id:"all",name:"viewDisplay",value:"all",checked:!o,"aria-label":l("tecton.element.select.multiHeader.allAriaLabel"),"test-id":"allOptionsButton",onClick:this.showAllOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"all"},l("tecton.element.select.multiHeader.all"))),i("div",null,i("input",{class:"sr",type:"radio",id:"selected",disabled:0===s,name:"viewDisplay",value:"selected","aria-label":l("tecton.element.select.multiHeader.selectedAriaLabel",[s]),checked:o,"test-id":"selectedOptionsButton",onClick:this.showSelectedOptions,onKeyDown:this.visibilityToggleKeyDown}),i("label",{htmlFor:"selected"},l("tecton.element.select.multiHeader.selected",[s])))))}get hostElement(){return s(this)}static get watchers(){return{value:["buildStructuredSelectedOptions","valueUpdated"],selectedOptions:["buildStructuredSelectedOptions"],ariaLabel:["ariaLabelObserver"],multilineOptions:["handleMultilineOptionsUpdate"],open:["openChanged"]}}};p.style="*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.multi-select-header legend{padding:0;float:left}.multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background-color:var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.multi-select-header label:hover{background-color:var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040)))))))}.multi-select-header input:checked+label,.multi-select-header input:checked+label:enabled:hover{background-color:var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";export{p as q2_select}