npm - q2-tecton-elements - Versions diffs - 1.54.4 → 1.55.0 - Mend

q2-tecton-elements 1.54.4 → 1.55.0

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

Files changed (559) hide show

package/dist/q2-tecton-elements/q2-select.entry.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { r as t, c as e, h as i, g as s } from "./index-7a5365e2.js";
-import { l as o, a as l, o as n, q as r, i as a, w as c } from "./index-504f1a9e.js";
+import { l as o, a as l, o as n, q as r, i as a, w as c } from "./index-f2a66217.js";
 import { s as d, a as h } from "./action-sheet-1e24cb38.js";
-const p = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";
+const p = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";
 const u = p;
@@ -54,7 +54,7 @@ const v = class {
       const {key: e, shiftKey: i} = t;
       const s = e === "Tab" && i;
       const o = this.hasPopoverTop || this.hasPopoverBottom;
-      if (o && (e === "Tab" || s)) return;
+      if ((o || this.multiple) && (e === "Tab" || s)) return;
       // slots are incompatible with action sheet
             if (d(this, t) && !o) {
         return this.executeActionSheet(t);
@@ -68,7 +68,7 @@ const v = class {
       if (this.shouldClearSearchText(t)) this.clearSearchText();
       // Prevent click event from firing when spacebar is pressed
             if (e === " ") t.preventDefault();
-      this.optionList.handleExternalKeydown(t);
+      this.handleOptionListExternalKeydown(t);
     };
     this.onCustomDisplayClick = t => {
       t.stopPropagation();
@@ -496,6 +496,10 @@ const v = class {
     var t;
     (t = this.inputField) === null || t === void 0 ? void 0 : t.dispatchEvent(new FocusEvent("focus"));
   }
+  // Helps with checking for calls to handleExternalKeydown in spec tests
+  handleOptionListExternalKeydown(t) {
+    this.optionList.handleExternalKeydown(t);
+  }
   handleSelectionChanges(t) {
     const {value: e = "", values: i = []} = t;
     const s = i.map((t => t.value));
@@ -619,17 +623,17 @@ const v = class {
   render() {
     var t;
     return i("click-elsewhere", {
-      key: "cc3d7571025183c900c7dbeda597835e88d9224b",
+      key: "74b318aa5e949451bb9e594ca15bbb899d5af833",
       class: this.wrapperClasses,
       onChange: this.clickedElsewhere
     }, i("div", {
-      key: "5ab3dec7a6e57ccaeef904ea07e52c29b88a0a91",
+      key: "841ca38b6c5d5a2bce3da89119f2206157fa9dfc",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), i("q2-input", {
-      key: "3d7c3ded01c34866fdebc4503bc2bac46ba67018",
+      key: "d141c2482a503fff0977dd9e268927fceda5519b",
       ref: t => this.inputField = t,
       class: "q2-select-input",
       label: this.label && o(this.label) || "",
@@ -658,12 +662,12 @@ const v = class {
       _role: "combobox",
       _preventEntry: !this.searchable
     }, this.renderCustomDisplay()), i("div", {
-      key: "37662b940b1a51d9abfb681d248607ff049a8655",
+      key: "e2bc0e2346e8854a092aa6e6298079335f736f37",
       class: "custom-display-content",
       hidden: !this.hasCustomDisplay || !!this.searchText,
       onClick: this.onCustomDisplayClick
     }, i("slot", {
-      key: "74441951077fd4476ccf3c820392e346ba6dd313",
+      key: "d7d6ce24fab1745448a8fbf9285fb1c67b2b7e6a",
       name: "q2-select-display"
     })), this.renderOptionsDropdown());
   }

package/dist/q2-tecton-elements/q2-select.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["q2SelectCss","Q2SelectStyle0","Q2Select","this","scheduledAfterRender","clickedElsewhere","event","target","localName","stopPropagation","inputBlurHandler","inputFocused","inputChangeHandler","inputClickHandler","async","shouldShowActionSheet","executeActionSheet","toggleDropdown","focusInput","inputFocusHandler","inputInputHandler","eventValue","detail","value","shouldClearValue","clearValue","open","openDropdownWithoutActiveElement","prioritizeSearch","searchText","input","emit","query","inputKeydownHandler","readonly","disabled","key","shiftKey","isShiftTab","hasSlot","hasPopoverTop","hasPopoverBottom","keysForOptionListToHandle","searchable","inputField","preventDefault","includes","shouldClearSearchText","clearSearchText","optionList","handleExternalKeydown","onCustomDisplayClick","onMutationObserved","hostElement","slotContainer","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","checkSelectedOptions","onOptionListChange","values","showAllOptions","handleSelectionChanges","onPopoverState","action","setActiveElement","focus","showSelected","showSelectedOptions","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","_a","window","Tecton","useActionSheets","loc","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","onHostElementChange","onchange","multiple","selectedOptions","onClearHandler","handleSelectedDisplay","display","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","relatedTarget","isLeavingHost","popoverElement","contains","closeDropdown","onHostElementInput","oninput","options","optionElements","trim","toLocaleLowerCase","matchedCount","option","hidden","title","firstElementChild","tagName","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","keydownHandler","closePopover","_togglePopover","openPopover","searchOptions","innerInputField","dispatchEvent","FocusEvent","InputEvent","setValue","valuesSet","Set","Array","isArray","waitForNextPaint","find","click","ariaLabelObserver","newValue","oldValue","element","multiline","openChanged","isOpen","push","popoverTopContainer","height","offsetHeight","style","setProperty","removeProperty","structuredSelectedOptions","map","valueUpdated","badgeValue","optionsLength","_b","firstSelectedOptionElement","firstSelectedValue","innerInputContainer","from","querySelectorAll","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","wrapperClasses","errors","classes","join","_c","textContent","namedSlot","hasNoValue","selectionClone","cloneNode","remove","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","selected","change","undefined","result","showActionSheetList","changeDetails","selectedOptionValues","message","clearTimeout","statusMessageTimer","statusMessage","renderCustomDisplay","hasSelectedDisplay","h","name","renderOptionsDropdown","ref","el","controlElement","popoverMaxHeight","direction","popDirection","mode","popoverMode","block","class","type","id","label","listLabel","onChange","tabindex","renderVisibilityToggle","selectedOptionsCount","checked","onClick","onKeyDown","htmlFor","render","role","clearable","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","iconRight","onInput","onFocus","onBlur","badgeTheme","_role","_preventEntry"],"sources":["src/components/q2-select/q2-select.scss?tag=q2-select&encapsulation=shadow","src/components/q2-select/q2-select.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n --comp-select-margin: #{var-list(\n --tct-select-margin,\n unquote(\n '#{var-list(var-prefixer(select-margin-top), --app-scale-4, 30px)} 0 #{var-list(var-prefixer(select-margin-bottom), --app-scale-4, 30px)}'\n )\n )};\n display: block;\n margin: var(--comp-select-margin);\n}\n\n.q2-select-container {\n position: relative;\n display: block;\n}\n\n.q2-select-input {\n margin: 0;\n\n --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n width: 100%;\n min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n position: absolute;\n bottom: 0;\n left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n height: 44px;\n width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n overflow: hidden;\n cursor: pointer;\n transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n display: flex;\n align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n display: flex;\n flex-direction: column-reverse;\n}\n\n.popover-bottom-container {\n position: sticky;\n bottom: 0;\n z-index: 5;\n}\n\n.popover-top-container {\n position: sticky;\n top: 0;\n z-index: 5;\n .multi-select-header {\n padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n background: var(--app-white);\n display: flex;\n gap: var-list(--app-scale-2x, 10px);\n align-items: center;\n\n fieldset {\n margin: 0;\n padding: 0;\n border: 0;\n display: flex;\n gap: var-list(--app-scale-2x, 10px);\n }\n\n legend {\n padding: 0;\n float: left;\n }\n\n label {\n cursor: pointer;\n padding: var-list(\n var-prefixer(select-multi-select-option-padding),\n var-prefixer(btn-badge-padding),\n unquote('2px 5px')\n );\n font-size: var-list(\n var-prefixer(select-multi-select-option-font-size),\n var-prefixer(btn-badge-font-size),\n inherit\n );\n border-radius: var-list(\n var-prefixer(select-multi-select-option-radius),\n var-prefixer(btn-badge-border-radius),\n --app-border-radius-1,\n 4px\n );\n background: var-list(\n --tct-select-multi-select-option-background,\n var-prefixer(select-multi-select-option-bg),\n --tct-badge-background,\n var-prefixer(btn-badge-bg),\n transparent\n );\n color: var-list(\n var-prefixer(select-multi-select-option-color),\n var-prefixer(btn-badge-font-color),\n inherit\n );\n\n &:hover {\n background: var-list(\n --tct-select-multi-select-option-hover-background,\n var-prefixer(select-multi-select-option-hover-background-color),\n var-prefixer(btn-badge-hover-bg),\n var-prefixer(gray-14),\n --app-gray-l3,\n #f2f2f2\n );\n color: var-list(\n --tct-select-multi-select-option-hover-color,\n var-prefixer(select-multi-select-option-color),\n var-prefixer(btn-badge-hover-font-color),\n var-prefixer(gray-5),\n --app-gray-d2,\n #404040\n );\n }\n }\n\n input {\n &:checked + label {\n &,\n &:enabled:hover {\n background: var-list(\n --tct-select-multi-select-option-active-background,\n var-prefixer(select-multi-select-option-active-background-color),\n var-prefixer(btn-primary-bg),\n #2e2e2e\n );\n color: var-list(\n var-prefixer(select-multi-select-option-active-color),\n var-prefixer(btn-primary-font-color),\n --app-white,\n #ffffff\n );\n }\n }\n\n &:disabled + label {\n opacity: var-list(\n var-prefixer(select-multi-select-option-disabled-opacity),\n var-prefixer(btn-disabled-opacity),\n --app-disabled-opacity,\n 0.4\n );\n cursor: not-allowed;\n }\n\n &:focus + label {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n State,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n handleAriaLabel,\n isEventFromElement,\n isRelatedTargetWithinHost,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-select', shadow: true, styleUrl: 'q2-select.scss' })\nexport class Q2Select implements ComponentInterface {\n // #region Own Properties\n\n inputField?: HTMLQ2InputElement;\n mutationObserver: MutationObserver;\n optionList: HTMLQ2OptionListElement;\n popoverElement?: HTMLQ2PopoverElement;\n popoverTopContainer?: HTMLDivElement;\n scheduledAfterRender: (() => void)[] = [];\n statusMessageTimer: NodeJS.Timeout;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hasCustomDisplay: boolean = false;\n\n @State()\n hasPopoverBottom: boolean = false;\n\n @State()\n hasPopoverTop: boolean = false;\n\n @State()\n inputFocused: boolean = false;\n\n @State()\n open: boolean = false;\n\n @State()\n prioritizeSearch: boolean = false;\n\n @State()\n searchText: string = '';\n\n @State()\n showSelected: boolean = false;\n\n @State()\n statusMessage: string;\n\n @State()\n structuredSelectedOptions: IOptionValue[] = [];\n\n // #endregion\n // #region Public Property API\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. /\n @Prop({ reflect: true })\n clearable: boolean;\n\n /* Disables all interaction with the field and leverages the disabled visual style of `q2-input`. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n The presence of `errors` will mark the field as invalid, putting it into an error state.\n * @localizable\n /\n @Prop()\n errors: string[];\n\n /\n Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n * @warning\n * If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,\n * any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.\n * For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\n\n /* Determines whether to show an error state. Its primary use-case is for an unfilled field. /\n @Prop({ reflect: true })\n invalid: boolean;\n\n /\n The text that will be used as the label for the field.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Determines the label that is applied to the option list for accessibility purposes.\n * @localizable\n /\n @Prop()\n listLabel: string = loc('tecton.element.select.listLabel');\n\n /* The minimum number of rows the component will try to display below or above the component when opened. /\n @Prop()\n minRows: number = 3;\n\n /* Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. /\n @Prop({ reflect: true })\n multilineOptions: boolean = false;\n\n /* Enables multi-select functionality. /\n @Prop({ reflect: true })\n multiple: boolean = false;\n\n /* Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean = false;\n\n /\n Text that appears within the field when it is blurred and empty.\n * Placeholder text disappears when the user selects an option.\n * @localizable\n /\n @Prop({ reflect: true })\n placeholder: string;\n\n /* @deprecated /\n @Prop({ reflect: true })\n popDirection: 'up' \| 'down';\n\n /\n Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n /\n @Prop()\n popoverMaxHeight: number;\n\n /\n Determines the display mode of the popover.\n \n Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n \n @info\n * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n * when nested inside of elements with transform properties. This will be removed once the popover API is available\n * for use.\n /\n @Prop({ mutable: true })\n popoverMode: 'legacy' = null;\n\n /\n Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n * Takes priority over `optional` if both are `true`.\n /\n @Prop({ reflect: true })\n readonly: boolean = false;\n\n /* Enables search functionality. /\n @Prop({ reflect: true })\n searchable: boolean = false;\n\n /\n Each item in this array should correspond to the value of a `q2-option` element.\n * This property is only relevant for `multiple` (i.e., multi-select) implementations.\n /\n @Prop({ mutable: true })\n selectedOptions: string[] = [];\n\n /\n The current value for the select. This should correspond to the value of a nested q2-option element.\n * This property is only relevant for single-select implementations.\n /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when an option is selected or deselected.\n \n When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property\n * will contain the selected option values.\n \n @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; selectedOptions: string[] }>;\n\n /\n Emitted when the input value changes.\n \n Requires the `searchable` prop to be set to `true`.\n /\n @Event()\n input: EventEmitter<{ query: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.buildStructuredSelectedOptions();\n this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n overrideFocus(this.hostElement);\n setTimeout(() => this.checkSelectedDisplay(), 0);\n }\n\n componentDidRender() {\n setTimeout(() => {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }, 25);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n if (this.readonly \|\| this.disabled) return;\n if (event.target !== this.hostElement \|\| this.hostElement.onchange) return;\n if (this.multiple) {\n this.value = null;\n this.selectedOptions = event.detail.selectedOptions;\n } else {\n this.value = event.detail.value;\n this.selectedOptions = [];\n }\n }\n\n @Listen('clear')\n onClearHandler() {\n this.clearValue();\n }\n\n @Listen('displayChanged')\n handleSelectedDisplay(event: CustomEvent) {\n if (!this.multiple && !!this.value && this.value === event.detail.value) {\n this.inputField.value = event.detail.display;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n if (prioritizeSearch) {\n this.clearSelectedDisplay();\n } else if (isEventFromElement(event, this.hostElement)) {\n this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n }\n }\n\n @Listen('focusout')\n handleFocusout(event: FocusEvent) {\n const relatedTarget = event.relatedTarget as HTMLElement;\n const isLeavingHost =\n !this.popoverElement?.contains(relatedTarget) && !this.hostElement.contains(relatedTarget);\n if (isLeavingHost) this.closeDropdown();\n this.prioritizeSearch = !isLeavingHost && this.searchable;\n }\n\n @Listen('input')\n onHostElementInput(event: CustomEvent) {\n if (!this.searchable \|\| event.target !== this.hostElement \|\| this.hostElement.oninput) return;\n const options = this.optionElements;\n const query = this.searchText.trim().toLocaleLowerCase();\n let matchedCount = 0;\n options.forEach(option => {\n if (query === '') {\n option.hidden = false;\n return;\n }\n\n const title =\n option.firstElementChild?.tagName === 'Q2-CARD'\n ? (option.firstElementChild as HTMLQ2CardElement).title\n : null;\n const { display = '', innerText = '' } = option;\n const searchParams = [display, title, innerText];\n const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n option.hidden = !matched;\n if (matched) matchedCount++;\n });\n\n const statusMessageLocString = query\n ? 'tecton.element.select.searchable.results'\n : 'tecton.element.select.allOptions';\n const count = query ? matchedCount : options.length;\n this.setStatusMessage(loc(statusMessageLocString, [count]));\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n this.inputKeydownHandler(event);\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<input>` to hide the popover if it is visible.\n \n @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<input>` to display the popover if it is hidden.\n \n @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.\n \n @warning\n * Only applicable when the input is searchable.\n \n @testOnly\n /\n @Method()\n searchOptions(query: string) {\n if (!this.searchable) return;\n\n const { innerInputField } = this;\n innerInputField.focus();\n innerInputField.dispatchEvent(new FocusEvent('focus'));\n innerInputField.value = query;\n innerInputField.dispatchEvent(new InputEvent('input'));\n }\n\n /\n Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).\n \n If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n * after the option(s) are selected.\n \n @testOnly\n /\n @Method()\n async setValue(values: string \| string[], options: { closePopover?: boolean } = { closePopover: true }) {\n const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n if (!this.open) {\n await this.openPopover();\n await waitForNextPaint();\n }\n\n valuesSet.forEach(value => {\n this.optionElements.find(option => option.value === value)?.click();\n });\n\n if (options.closePopover) {\n await this.closePopover();\n await waitForNextPaint();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('multilineOptions')\n handleMultilineOptionsUpdate(newValue, oldValue) {\n if (newValue === oldValue) return;\n this.optionElements.forEach(element => (element.multiline = newValue));\n }\n\n @Watch('open')\n openChanged(isOpen: boolean) {\n this.scheduledAfterRender.push(async () => {\n await waitForNextPaint();\n const { popoverTopContainer, popoverElement } = this;\n const height = (isOpen && popoverTopContainer?.offsetHeight) \|\| 0;\n if (height) {\n popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n } else {\n popoverElement.style.removeProperty('--comp-popover-top-container-height');\n }\n });\n }\n\n @Watch('value')\n @Watch('selectedOptions')\n buildStructuredSelectedOptions() {\n const { multiple, selectedOptions, value } = this;\n if (multiple) {\n this.structuredSelectedOptions = !!selectedOptions?.length\n ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n : [];\n } else {\n this.structuredSelectedOptions = value ? [{ value }] : [];\n }\n }\n\n @Watch('value')\n valueUpdated() {\n if (this.multiple) return;\n this.clearSearchText();\n }\n\n // #endregion\n // #region Local Methods\n\n get badgeValue(): string {\n if (!this.multiple) return null;\n const optionsLength = this.selectedOptions?.length ?? 0;\n if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n }\n\n get firstSelectedOptionElement() {\n const { firstSelectedValue } = this;\n return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n }\n\n get firstSelectedValue() {\n return this.multiple ? this.selectedOptions?.[0] : this.value;\n }\n\n get innerInputContainer(): HTMLElement {\n return this.inputField?.shadowRoot?.querySelector('.input-container');\n }\n\n get innerInputField(): HTMLInputElement \| HTMLButtonElement {\n return this.inputField?.shadowRoot?.querySelector('.input-field');\n }\n\n get optionElements() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n }\n\n get popoverMinHeight() {\n const { minRows } = this;\n const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n // Safari doesn't return a min-height for non-visible items\n if (!minHeight \|\| minHeight === '0px') minHeight = '44px';\n\n return minRows parseInt(minHeight);\n }\n\n get selectedDisplay() {\n if (this.prioritizeSearch \|\| this.searchText) return this.searchText;\n if (this.hasCustomDisplay) return '';\n return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();\n }\n\n get selectedDisplaySlot() {\n return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n }\n\n get wrapperClasses() {\n const { errors } = this;\n const classes = ['q2-select-container'];\n if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n if (this.inputFocused) classes.push('is-focused');\n if (this.searchable) classes.push('is-searchable');\n return classes.join(' ');\n }\n\n _togglePopover() {\n const { innerInputField } = this;\n innerInputField?.click();\n innerInputField?.focus();\n innerInputField.dispatchEvent(new FocusEvent('focus'));\n }\n\n calculateMultiSelectSelectedDisplay() {\n const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n if (!firstSelectedValue) return '';\n if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n if (multilineOptions && this.searchable) return this.searchText;\n if (multilineOptions) return '';\n return (\n firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n );\n }\n\n calculateSingleSelectSelectedDisplay() {\n const { firstSelectedOptionElement, multilineOptions } = this;\n if (multilineOptions) {\n return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) \|\| this.value \|\| '';\n } else {\n return (\n (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) \|\|\n firstSelectedOptionElement?.textContent?.trim() \|\|\n this.value \|\|\n ''\n );\n }\n }\n\n checkSelectedDisplay() {\n let namedSlot = this.selectedDisplaySlot;\n const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n this;\n const hasNoValue = !value && multiple && !selectedOptions?.length;\n if (prioritizeSearch \|\| !multilineOptions \|\| hasNoValue) return this.clearSelectedDisplay();\n\n if (!firstSelectedOptionElement \|\| firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n // Clone selected option and remove elements with hide-on-select attribute\n const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n if (namedSlot) {\n const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n namedSlot.style.setProperty('--comp-selected-display-height', height);\n if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n }\n } else {\n namedSlot = document.createElement('div');\n namedSlot.slot = '_selected-display';\n namedSlot.appendChild(selectionClone);\n this.hostElement.appendChild(namedSlot);\n }\n return namedSlot;\n }\n\n checkSelectedDisplayHeight() {\n const { selectedDisplaySlot } = this;\n if (!selectedDisplaySlot) return;\n selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n }\n\n checkSelectedOptions() {\n const { multiple, selectedOptions, value } = this;\n this.optionElements.forEach(option => {\n if (multiple) {\n option.selected = selectedOptions.includes(option.value);\n } else {\n option.selected = option.value === value;\n }\n });\n }\n\n clearSearchText() {\n if (!this.searchText) return;\n this.searchText = '';\n this.input.emit({ query: '' });\n }\n\n clearSelectedDisplay() {\n this.selectedDisplaySlot?.remove();\n }\n\n clearValue() {\n const { multiple } = this;\n this.value = '';\n this.selectedOptions = [];\n this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });\n }\n\n clickedElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName !== 'click-elsewhere') return;\n event.stopPropagation();\n };\n\n closeDropdown() {\n this.open = false;\n this.clearSearchText();\n }\n\n async executeActionSheet(event: MouseEvent \| KeyboardEvent) {\n const result = await showActionSheetList(this, event);\n this.focusInput();\n this.handleSelectionChanges(result);\n }\n\n focusInput() {\n this.inputField?.dispatchEvent(new FocusEvent('focus'));\n }\n\n handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n const { value = '', values = [] } = changeDetails;\n const selectedOptionValues = values.map(value => value.value);\n const { multiple } = this;\n if (!this.hostElement.onchange) {\n this.selectedOptions = selectedOptionValues;\n }\n\n this.change.emit({\n value: multiple ? undefined : value,\n selectedOptions: multiple ? selectedOptionValues : undefined,\n });\n }\n\n inputBlurHandler = () => {\n this.inputFocused = false;\n };\n\n inputChangeHandler = (event: Event) => {\n event.stopPropagation();\n };\n\n inputClickHandler = async (event: MouseEvent) => {\n event.stopPropagation();\n if (shouldShowActionSheet(this)) {\n return this.executeActionSheet(event);\n }\n this.toggleDropdown();\n this.focusInput();\n };\n\n inputFocusHandler = () => {\n this.inputFocused = true;\n };\n\n inputInputHandler = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n event.stopPropagation();\n const eventValue = event.detail.value;\n const shouldClearValue = !!this.value;\n\n if (shouldClearValue) this.clearValue();\n if (!this.open) this.openDropdownWithoutActiveElement();\n\n this.prioritizeSearch = true;\n this.searchText = eventValue;\n this.input.emit({ query: eventValue });\n };\n\n inputKeydownHandler = (event: KeyboardEvent) => {\n if (this.readonly \|\| this.disabled) return;\n const { key, shiftKey } = event;\n const isShiftTab = key === 'Tab' && shiftKey;\n const hasSlot = this.hasPopoverTop \|\| this.hasPopoverBottom;\n if (hasSlot && (key === 'Tab' \|\| isShiftTab)) return;\n\n // slots are incompatible with action sheet\n if (shouldShowActionSheet(this, event) && !hasSlot) {\n return this.executeActionSheet(event);\n }\n\n const keysForOptionListToHandle = [\n 'ArrowDown',\n 'ArrowUp',\n 'PageDown',\n 'PageUp',\n 'Home',\n 'End',\n 'Escape',\n 'Tab',\n ];\n\n if (this.searchable && (key === ' ' \|\| key === 'Enter') && this.inputField.value == '') {\n event.preventDefault();\n if (!this.open) this.openDropdownWithoutActiveElement();\n }\n\n if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n // Prevent click event from firing when spacebar is pressed\n if (key === ' ') event.preventDefault();\n\n this.optionList.handleExternalKeydown(event);\n };\n\n onCustomDisplayClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.focusInput();\n this.toggleDropdown();\n };\n\n onMutationObserved = () => {\n const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n const slotContainer = hostElement.querySelector('.custom-display-content');\n const displaySlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n const hasCustomDisplay = !!displaySlot\n ? displaySlot.assignedNodes().length > 0\n : slotContainer.children.length > 0;\n\n if (this.hasCustomDisplay !== hasCustomDisplay) {\n this.hasCustomDisplay = hasCustomDisplay;\n }\n\n const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n if (hasPopoverTop !== topSlotHasNode) {\n this.hasPopoverTop = topSlotHasNode;\n }\n\n const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n if (hasPopoverBottom !== bottomSlotHasNode) {\n this.hasPopoverBottom = bottomSlotHasNode;\n }\n\n this.checkSelectedOptions();\n };\n\n onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n event.stopPropagation();\n const { values } = event.detail;\n\n if (values.length === 0) this.showAllOptions();\n this.handleSelectionChanges(event.detail);\n };\n\n onPopoverState = ({\n detail: { open, action },\n }: CustomEvent<{ open: boolean; action: 'close' \| 'select' \| 'open' }>) => {\n if (!open \|\| this.searchText) {\n if (action !== 'select') {\n this.optionList.setActiveElement(null);\n }\n this.inputField.focus();\n }\n\n if (this.open === open) return;\n this.open = open;\n };\n\n openDropdownWithoutActiveElement() {\n if (this.readonly \|\| this.disabled) return;\n this.optionList.setActiveElement(null);\n this.open = true;\n }\n\n setStatusMessage(message) {\n clearTimeout(this.statusMessageTimer);\n this.statusMessage = '';\n this.statusMessageTimer = setTimeout(() => {\n this.statusMessage = message;\n }, 1000);\n }\n\n shouldClearSearchText(event: KeyboardEvent) {\n return this.searchable && !!this.searchText && event.key === 'Escape';\n }\n\n showAllOptions = () => {\n this.showSelected = false;\n };\n\n showSelectedOptions = () => {\n this.showSelected = true;\n };\n\n toggleDropdown() {\n if (this.readonly \|\| this.disabled) return;\n\n if (this.open && !this.searchText) {\n this.closeDropdown();\n } else {\n this.openDropdownWithoutActiveElement();\n }\n }\n\n visibilityToggleKeyDown = (event: KeyboardEvent) => {\n const key = event.key;\n const isShiftTab = key === 'Tab' && event.shiftKey;\n const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n if (isRadioControlKey) event.stopPropagation();\n if (isShiftTab) {\n event.stopPropagation();\n // allows shift+tab keys to select the top slot when present\n if (this.hasPopoverTop) return;\n\n this.optionList.setDefaultActiveElement();\n }\n };\n\n // #endregion\n // #region Render Methods\n\n renderCustomDisplay() {\n const hasSelectedDisplay = this.checkSelectedDisplay();\n if (!hasSelectedDisplay) return;\n this.checkSelectedDisplayHeight();\n\n return (\n <slot\n name=\"_selected-display\"\n slot=\"custom-display\"\n />\n );\n }\n\n renderOptionsDropdown() {\n return (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.innerInputContainer}\n open={this.open}\n max-height={this.popoverMaxHeight}\n minHeight={this.popoverMinHeight}\n direction={this.popDirection}\n mode={this.popoverMode \|\| undefined}\n block\n >\n <div class=\"popover-content\">\n <q2-option-list\n onPopoverState={this.onPopoverState}\n ref={el => (this.optionList = el)}\n type=\"listbox\"\n id=\"option-list\"\n show-selected={this.showSelected}\n label={this.listLabel}\n multiple={this.multiple}\n selectedOptions={this.structuredSelectedOptions}\n onChange={this.onOptionListChange}\n >\n <slot />\n </q2-option-list>\n <div\n class=\"popover-top-container\"\n ref={el => (this.popoverTopContainer = el)}\n hidden={!this.multiple && !this.hasPopoverTop}\n tabindex=\"-1\"\n >\n <slot name=\"popover-top\"></slot>\n {this.multiple && this.renderVisibilityToggle()}\n </div>\n </div>\n <div\n class=\"popover-bottom-container\"\n hidden={!this.hasPopoverBottom}\n tabindex=\"-1\"\n >\n <slot name=\"popover-bottom\" />\n </div>\n </q2-popover>\n );\n }\n\n renderVisibilityToggle() {\n const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n const { showSelected } = this;\n return (\n <div class=\"multi-select-header\">\n <fieldset>\n <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n {loc('tecton.element.select.multiHeader.showing')}\n </legend>\n <div>\n <input\n class=\"sr\"\n type=\"radio\"\n id=\"all\"\n name=\"viewDisplay\"\n value=\"all\"\n checked={!showSelected}\n aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n test-id=\"allOptionsButton\"\n onClick={this.showAllOptions}\n onKeyDown={this.visibilityToggleKeyDown}\n />\n <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n </div>\n\n <div>\n <input\n class=\"sr\"\n type=\"radio\"\n id=\"selected\"\n disabled={selectedOptionsCount === 0}\n name=\"viewDisplay\"\n value=\"selected\"\n aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n selectedOptionsCount,\n ])}\n checked={showSelected}\n test-id=\"selectedOptionsButton\"\n onClick={this.showSelectedOptions}\n onKeyDown={this.visibilityToggleKeyDown}\n />\n <label htmlFor=\"selected\">\n {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n </label>\n </div>\n </fieldset>\n </div>\n );\n }\n\n render() {\n return (\n <click-elsewhere\n class={this.wrapperClasses}\n onChange={this.clickedElsewhere}\n >\n <div\n aria-live=\"polite\"\n aria-atomic=\"true\"\n role=\"status\"\n class=\"sr\"\n >\n {this.statusMessage}\n </div>\n <q2-input\n ref={el => (this.inputField = el)}\n class=\"q2-select-input\"\n label={(this.label && loc(this.label)) \|\| ''}\n value={this.selectedDisplay}\n clearable={(this.clearable && (!!this.value \|\| !!this.selectedOptions?.length)) \|\| undefined}\n errors={\n (Array.isArray(this.errors) &&\n this.errors.length > 0 &&\n this.errors.map(error => loc(error))) \|\|\n (this.invalid && ['tecton.element.select.invalid']) \|\|\n []\n }\n disabled={this.disabled}\n optional={this.optional}\n readonly={!!this.readonly}\n placeholder={this.placeholder \|\| undefined}\n hideLabel={this.hideLabel}\n ariaExpanded={`${this.open}`}\n ariaControls=\"option-list\"\n ariaHaspopup=\"listbox\"\n test-id=\"toggleDropdown\"\n hide-messages\n iconRight=\"chevron-down\"\n onClick={this.inputClickHandler}\n onInput={this.inputInputHandler}\n onKeyDown={this.inputKeydownHandler}\n onFocus={this.inputFocusHandler}\n onBlur={this.inputBlurHandler}\n onChange={this.inputChangeHandler}\n badgeValue={this.badgeValue}\n badgeTheme={this.inputFocused ? 'primary' : undefined}\n _role=\"combobox\"\n _preventEntry={!this.searchable}\n >\n {this.renderCustomDisplay()}\n </q2-input>\n <div\n class=\"custom-display-content\"\n hidden={!this.hasCustomDisplay \|\| !!this.searchText}\n onClick={this.onCustomDisplayClick}\n >\n <slot name=\"q2-select-display\" />\n </div>\n {this.renderOptionsDropdown()}\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["q2SelectCss","Q2SelectStyle0","Q2Select","this","scheduledAfterRender","clickedElsewhere","event","target","localName","stopPropagation","inputBlurHandler","inputFocused","inputChangeHandler","inputClickHandler","async","shouldShowActionSheet","executeActionSheet","toggleDropdown","focusInput","inputFocusHandler","inputInputHandler","eventValue","detail","value","shouldClearValue","clearValue","open","openDropdownWithoutActiveElement","prioritizeSearch","searchText","input","emit","query","inputKeydownHandler","readonly","disabled","key","shiftKey","isShiftTab","hasSlot","hasPopoverTop","hasPopoverBottom","multiple","keysForOptionListToHandle","searchable","inputField","preventDefault","includes","shouldClearSearchText","clearSearchText","handleOptionListExternalKeydown","onCustomDisplayClick","onMutationObserved","hostElement","slotContainer","querySelector","displaySlot","shadowRoot","hasCustomDisplay","assignedNodes","length","children","popTopSlot","topSlotHasNode","popBottomSlot","bottomSlotHasNode","checkSelectedOptions","onOptionListChange","values","showAllOptions","handleSelectionChanges","onPopoverState","action","optionList","setActiveElement","focus","showSelected","showSelectedOptions","visibilityToggleKeyDown","isRadioControlKey","setDefaultActiveElement","_a","window","Tecton","useActionSheets","loc","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","handleAriaLabel","buildStructuredSelectedOptions","handleMultilineOptionsUpdate","multilineOptions","componentDidLoad","observer","MutationObserver","observe","childList","subtree","overrideFocus","setTimeout","checkSelectedDisplay","componentDidRender","forEach","fn","onHostElementChange","onchange","selectedOptions","onClearHandler","handleSelectedDisplay","display","delegateFocus","fromHost","isRelatedTargetWithinHost","clearSelectedDisplay","isEventFromElement","handleFocusout","relatedTarget","isLeavingHost","popoverElement","contains","closeDropdown","onHostElementInput","oninput","options","optionElements","trim","toLocaleLowerCase","matchedCount","option","hidden","title","firstElementChild","tagName","innerText","searchParams","matched","some","text","statusMessageLocString","count","setStatusMessage","keydownHandler","closePopover","_togglePopover","openPopover","searchOptions","innerInputField","dispatchEvent","FocusEvent","InputEvent","setValue","valuesSet","Set","Array","isArray","waitForNextPaint","find","click","ariaLabelObserver","newValue","oldValue","element","multiline","openChanged","isOpen","push","popoverTopContainer","height","offsetHeight","style","setProperty","removeProperty","structuredSelectedOptions","map","valueUpdated","badgeValue","optionsLength","_b","firstSelectedOptionElement","firstSelectedValue","innerInputContainer","from","querySelectorAll","popoverMinHeight","minRows","firstOption","minHeight","getComputedStyle","parseInt","selectedDisplay","calculateMultiSelectSelectedDisplay","calculateSingleSelectSelectedDisplay","selectedDisplaySlot","wrapperClasses","errors","classes","join","_c","textContent","namedSlot","hasNoValue","selectionClone","cloneNode","remove","clientHeight","outerHTML","replaceChild","document","createElement","slot","appendChild","checkSelectedDisplayHeight","selected","change","undefined","result","showActionSheetList","handleExternalKeydown","changeDetails","selectedOptionValues","message","clearTimeout","statusMessageTimer","statusMessage","renderCustomDisplay","hasSelectedDisplay","h","name","renderOptionsDropdown","ref","el","controlElement","popoverMaxHeight","direction","popDirection","mode","popoverMode","block","class","type","id","label","listLabel","onChange","tabindex","renderVisibilityToggle","selectedOptionsCount","checked","onClick","onKeyDown","htmlFor","render","role","clearable","error","invalid","optional","placeholder","hideLabel","ariaExpanded","ariaControls","ariaHaspopup","iconRight","onInput","onFocus","onBlur","badgeTheme","_role","_preventEntry"],"sources":["src/components/q2-select/q2-select.scss?tag=q2-select&encapsulation=shadow","src/components/q2-select/q2-select.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../../styles/dropdowns';\n\n:host {\n --comp-default-select-margin: #{var-list(var-prefixer(select-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(select-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-select-margin, --comp-default-select-margin);\n}\n\n.q2-select-container {\n position: relative;\n display: block;\n}\n\n.q2-select-input {\n margin: 0;\n\n --tct-input-min-height: #{var-list(var-prefixer(select-input-min-height))};\n --tct-input-max-height: #{var-list(var-prefixer(select-input-max-height), none)};\n}\n\n::slotted([slot='_selected-display']) {\n width: 100%;\n min-height: var(--comp-selected-display-height, 44px);\n}\n\n.custom-display-content {\n position: absolute;\n bottom: 0;\n left: calc(var-list(--tct-scale-2, --app-scale-2x, 10px) + 1px);\n height: 44px;\n width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n overflow: hidden;\n cursor: pointer;\n transition: left var-list(--tct-tween-2, --app-tween-1, unquote('0.2s ease'));\n}\n\n.custom-display-content:not([hidden]) {\n display: flex;\n align-items: center;\n}\n\n.is-searchable.is-focused .custom-display-content,\n.is-searchable .custom-display-content:active {\n left: calc(var-list(--tct-scale-3, --app-scale-3x, 15px) + 1px);\n}\n\n.has-error .custom-display-content {\n width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3x, 15px));\n}\n\n.popover-content {\n display: flex;\n flex-direction: column-reverse;\n}\n\n.popover-bottom-container {\n position: sticky;\n bottom: 0;\n z-index: 5;\n}\n\n.popover-top-container {\n position: sticky;\n top: 0;\n z-index: 5;\n .multi-select-header {\n padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));\n background: var(--app-white);\n display: flex;\n gap: var-list(--app-scale-2x, 10px);\n align-items: center;\n\n fieldset {\n margin: 0;\n padding: 0;\n border: 0;\n display: flex;\n gap: var-list(--app-scale-2x, 10px);\n }\n\n legend {\n padding: 0;\n float: left;\n }\n\n label {\n cursor: pointer;\n padding: var-list(\n var-prefixer(select-multi-select-option-padding),\n var-prefixer(btn-badge-padding),\n unquote('2px 5px')\n );\n font-size: var-list(\n var-prefixer(select-multi-select-option-font-size),\n var-prefixer(btn-badge-font-size),\n inherit\n );\n border-radius: var-list(\n var-prefixer(select-multi-select-option-radius),\n var-prefixer(btn-badge-border-radius),\n --app-border-radius-1,\n 4px\n );\n background: var-list(\n --tct-select-multi-select-option-background,\n var-prefixer(select-multi-select-option-bg),\n --tct-badge-background,\n var-prefixer(btn-badge-bg),\n transparent\n );\n color: var-list(\n var-prefixer(select-multi-select-option-color),\n var-prefixer(btn-badge-font-color),\n inherit\n );\n\n &:hover {\n background: var-list(\n --tct-select-multi-select-option-hover-background,\n var-prefixer(select-multi-select-option-hover-background-color),\n var-prefixer(btn-badge-hover-bg),\n var-prefixer(gray-14),\n --app-gray-l3,\n #f2f2f2\n );\n color: var-list(\n --tct-select-multi-select-option-hover-color,\n var-prefixer(select-multi-select-option-color),\n var-prefixer(btn-badge-hover-font-color),\n var-prefixer(gray-5),\n --app-gray-d2,\n #404040\n );\n }\n }\n\n input {\n &:checked + label {\n &,\n &:enabled:hover {\n background: var-list(\n --tct-select-multi-select-option-active-background,\n var-prefixer(select-multi-select-option-active-background-color),\n var-prefixer(btn-primary-bg),\n #2e2e2e\n );\n color: var-list(\n var-prefixer(select-multi-select-option-active-color),\n var-prefixer(btn-primary-font-color),\n --app-white,\n #ffffff\n );\n }\n }\n\n &:disabled + label {\n opacity: var-list(\n var-prefixer(select-multi-select-option-disabled-opacity),\n var-prefixer(btn-disabled-opacity),\n --app-disabled-opacity,\n 0.4\n );\n cursor: not-allowed;\n }\n\n &:focus + label {\n box-shadow: var(--const-double-focus-ring);\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n Listen,\n State,\n EventEmitter,\n Event,\n ComponentInterface,\n Watch,\n Method,\n} from '@stencil/core';\nimport { IEventDetail, Q2InputCustomEvent, Q2OptionListCustomEvent } from 'src/components';\nimport {\n handleAriaLabel,\n isEventFromElement,\n isRelatedTargetWithinHost,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from '../../utils';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-select', shadow: true, styleUrl: 'q2-select.scss' })\nexport class Q2Select implements ComponentInterface {\n // #region Own Properties\n\n inputField?: HTMLQ2InputElement;\n mutationObserver: MutationObserver;\n optionList: HTMLQ2OptionListElement;\n popoverElement?: HTMLQ2PopoverElement;\n popoverTopContainer?: HTMLDivElement;\n scheduledAfterRender: (() => void)[] = [];\n statusMessageTimer: NodeJS.Timeout;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hasCustomDisplay: boolean = false;\n\n @State()\n hasPopoverBottom: boolean = false;\n\n @State()\n hasPopoverTop: boolean = false;\n\n @State()\n inputFocused: boolean = false;\n\n @State()\n open: boolean = false;\n\n @State()\n prioritizeSearch: boolean = false;\n\n @State()\n searchText: string = '';\n\n @State()\n showSelected: boolean = false;\n\n @State()\n statusMessage: string;\n\n @State()\n structuredSelectedOptions: IOptionValue[] = [];\n\n // #endregion\n // #region Public Property API\n\n /** @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /* Renders an icon button when the field is non-empty. Pressing the button clears all input from the field. /\n @Prop({ reflect: true })\n clearable: boolean;\n\n /* Disables all interaction with the field and leverages the disabled visual style of `q2-input`. /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n The presence of `errors` will mark the field as invalid, putting it into an error state.\n * @localizable\n /\n @Prop()\n errors: string[];\n\n /\n Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Instructs the component to use the action sheet workflow for displaying its options.\n \n For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n * @warning\n * If your `q2-select` renders inside of an iframe, and you are using multiline/robust content options,\n * any custom CSS you apply to your options will not get passed up to the platform which displays the action sheet.\n * For this reason, we strongly suggest using the [q2-card](https://tecton.q2developer.com/design-system/q2-card/) component since its styling is managed by Tecton.\n /\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\n\n /* Determines whether to show an error state. Its primary use-case is for an unfilled field. /\n @Prop({ reflect: true })\n invalid: boolean;\n\n /\n The text that will be used as the label for the field.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Determines the label that is applied to the option list for accessibility purposes.\n * @localizable\n /\n @Prop()\n listLabel: string = loc('tecton.element.select.listLabel');\n\n /* The minimum number of rows the component will try to display below or above the component when opened. /\n @Prop()\n minRows: number = 3;\n\n /* Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. /\n @Prop({ reflect: true })\n multilineOptions: boolean = false;\n\n /* Enables multi-select functionality. /\n @Prop({ reflect: true })\n multiple: boolean = false;\n\n /* Appends \"(optional)\" to the field label, and sets `aria-required` on the nested input tag to `false`. /\n @Prop({ reflect: true })\n optional: boolean = false;\n\n /\n Text that appears within the field when it is blurred and empty.\n * Placeholder text disappears when the user selects an option.\n * @localizable\n /\n @Prop({ reflect: true })\n placeholder: string;\n\n /* @deprecated /\n @Prop({ reflect: true })\n popDirection: 'up' \| 'down';\n\n /\n Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n /\n @Prop()\n popoverMaxHeight: number;\n\n /\n Determines the display mode of the popover.\n \n Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n \n @info\n * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n * when nested inside of elements with transform properties. This will be removed once the popover API is available\n * for use.\n /\n @Prop({ mutable: true })\n popoverMode: 'legacy' = null;\n\n /\n Appends \"(read only)\" to the field label, and field becomes unusable, but remains focusable.\n * Takes priority over `optional` if both are `true`.\n /\n @Prop({ reflect: true })\n readonly: boolean = false;\n\n /* Enables search functionality. /\n @Prop({ reflect: true })\n searchable: boolean = false;\n\n /\n Each item in this array should correspond to the value of a `q2-option` element.\n * This property is only relevant for `multiple` (i.e., multi-select) implementations.\n /\n @Prop({ mutable: true })\n selectedOptions: string[] = [];\n\n /\n The current value for the select. This should correspond to the value of a nested q2-option element.\n * This property is only relevant for single-select implementations.\n /\n @Prop({ mutable: true })\n value: string;\n\n // #endregion\n // #region Events\n\n /\n Emitted when an option is selected or deselected.\n \n When the multi-select is enabled, the `value` property will be `undefined` and the `selectedOptions` property\n * will contain the selected option values.\n \n @legacyEvent\n /\n @Event()\n change: EventEmitter<{ value: string; selectedOptions: string[] }>;\n\n /\n Emitted when the input value changes.\n \n Requires the `searchable` prop to be set to `true`.\n /\n @Event()\n input: EventEmitter<{ query: string }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.mutationObserver = null;\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.buildStructuredSelectedOptions();\n this.handleMultilineOptionsUpdate(this.multilineOptions, false);\n }\n\n componentDidLoad() {\n const observer = new MutationObserver(this.onMutationObserved);\n observer.observe(this.hostElement, { childList: true, subtree: true });\n this.mutationObserver = observer;\n this.onMutationObserved();\n overrideFocus(this.hostElement);\n setTimeout(() => this.checkSelectedDisplay(), 0);\n }\n\n componentDidRender() {\n setTimeout(() => {\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }, 25);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n onHostElementChange(event: CustomEvent<{ value: string; selectedOptions: string[] }>) {\n if (this.readonly \|\| this.disabled) return;\n if (event.target !== this.hostElement \|\| this.hostElement.onchange) return;\n if (this.multiple) {\n this.value = null;\n this.selectedOptions = event.detail.selectedOptions;\n } else {\n this.value = event.detail.value;\n this.selectedOptions = [];\n }\n }\n\n @Listen('clear')\n onClearHandler() {\n this.clearValue();\n }\n\n @Listen('displayChanged')\n handleSelectedDisplay(event: CustomEvent) {\n if (!this.multiple && !!this.value && this.value === event.detail.value) {\n this.inputField.value = event.detail.display;\n }\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n const fromHost = isRelatedTargetWithinHost(event, this.hostElement);\n const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);\n if (prioritizeSearch) {\n this.clearSelectedDisplay();\n } else if (isEventFromElement(event, this.hostElement)) {\n this.inputField.shadowRoot.querySelector<HTMLElement>('.input-field').focus();\n }\n }\n\n @Listen('focusout')\n handleFocusout(event: FocusEvent) {\n const relatedTarget = event.relatedTarget as HTMLElement;\n const isLeavingHost =\n !this.popoverElement?.contains(relatedTarget) && !this.hostElement.contains(relatedTarget);\n if (isLeavingHost) this.closeDropdown();\n this.prioritizeSearch = !isLeavingHost && this.searchable;\n }\n\n @Listen('input')\n onHostElementInput(event: CustomEvent) {\n if (!this.searchable \|\| event.target !== this.hostElement \|\| this.hostElement.oninput) return;\n const options = this.optionElements;\n const query = this.searchText.trim().toLocaleLowerCase();\n let matchedCount = 0;\n options.forEach(option => {\n if (query === '') {\n option.hidden = false;\n return;\n }\n\n const title =\n option.firstElementChild?.tagName === 'Q2-CARD'\n ? (option.firstElementChild as HTMLQ2CardElement).title\n : null;\n const { display = '', innerText = '' } = option;\n const searchParams = [display, title, innerText];\n const matched = searchParams.some(text => text?.toLocaleLowerCase().includes(query) ?? false);\n\n option.hidden = !matched;\n if (matched) matchedCount++;\n });\n\n const statusMessageLocString = query\n ? 'tecton.element.select.searchable.results'\n : 'tecton.element.select.allOptions';\n const count = query ? matchedCount : options.length;\n this.setStatusMessage(loc(statusMessageLocString, [count]));\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n this.inputKeydownHandler(event);\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Emulates clicking the `<input>` to hide the popover if it is visible.\n \n @testOnly\n /\n @Method()\n async closePopover() {\n if (!this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates clicking the `<input>` to display the popover if it is hidden.\n \n @testOnly\n /\n @Method()\n async openPopover() {\n if (this.open \|\| this.disabled) return;\n this._togglePopover();\n }\n\n /\n Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.\n \n @warning\n * Only applicable when the input is searchable.\n \n @testOnly\n /\n @Method()\n searchOptions(query: string) {\n if (!this.searchable) return;\n\n const { innerInputField } = this;\n innerInputField.focus();\n innerInputField.dispatchEvent(new FocusEvent('focus'));\n innerInputField.value = query;\n innerInputField.dispatchEvent(new InputEvent('input'));\n }\n\n /\n Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).\n \n If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n * after the option(s) are selected.\n \n @testOnly\n /\n @Method()\n async setValue(values: string \| string[], options: { closePopover?: boolean } = { closePopover: true }) {\n const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n if (!this.open) {\n await this.openPopover();\n await waitForNextPaint();\n }\n\n valuesSet.forEach(value => {\n this.optionElements.find(option => option.value === value)?.click();\n });\n\n if (options.closePopover) {\n await this.closePopover();\n await waitForNextPaint();\n }\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('multilineOptions')\n handleMultilineOptionsUpdate(newValue, oldValue) {\n if (newValue === oldValue) return;\n this.optionElements.forEach(element => (element.multiline = newValue));\n }\n\n @Watch('open')\n openChanged(isOpen: boolean) {\n this.scheduledAfterRender.push(async () => {\n await waitForNextPaint();\n const { popoverTopContainer, popoverElement } = this;\n const height = (isOpen && popoverTopContainer?.offsetHeight) \|\| 0;\n if (height) {\n popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);\n } else {\n popoverElement.style.removeProperty('--comp-popover-top-container-height');\n }\n });\n }\n\n @Watch('value')\n @Watch('selectedOptions')\n buildStructuredSelectedOptions() {\n const { multiple, selectedOptions, value } = this;\n if (multiple) {\n this.structuredSelectedOptions = !!selectedOptions?.length\n ? selectedOptions.map(option => (typeof option === 'string' ? { value: option } : option))\n : [];\n } else {\n this.structuredSelectedOptions = value ? [{ value }] : [];\n }\n }\n\n @Watch('value')\n valueUpdated() {\n if (this.multiple) return;\n this.clearSearchText();\n }\n\n // #endregion\n // #region Local Methods\n\n get badgeValue(): string {\n if (!this.multiple) return null;\n const optionsLength = this.selectedOptions?.length ?? 0;\n if (this.open && this.searchable) return optionsLength ? `${optionsLength}` : null;\n else return optionsLength > 1 ? `+${optionsLength - 1}` : null;\n }\n\n get firstSelectedOptionElement() {\n const { firstSelectedValue } = this;\n return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;\n }\n\n get firstSelectedValue() {\n return this.multiple ? this.selectedOptions?.[0] : this.value;\n }\n\n get innerInputContainer(): HTMLElement {\n return this.inputField?.shadowRoot?.querySelector('.input-container');\n }\n\n get innerInputField(): HTMLInputElement \| HTMLButtonElement {\n return this.inputField?.shadowRoot?.querySelector('.input-field');\n }\n\n get optionElements() {\n return Array.from(this.hostElement.querySelectorAll<HTMLQ2OptionElement>('q2-option'));\n }\n\n get popoverMinHeight() {\n const { minRows } = this;\n const firstOption = this.hostElement.querySelector<HTMLQ2OptionElement>('q2-option:not([hidden])');\n let minHeight = firstOption && window.getComputedStyle(firstOption).minHeight;\n\n // Safari doesn't return a min-height for non-visible items\n if (!minHeight \|\| minHeight === '0px') minHeight = '44px';\n\n return minRows parseInt(minHeight);\n }\n\n get selectedDisplay() {\n if (this.prioritizeSearch \|\| this.searchText) return this.searchText;\n if (this.hasCustomDisplay) return '';\n return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();\n }\n\n get selectedDisplaySlot() {\n return this.hostElement.querySelector<HTMLElement>('[slot=\"_selected-display\"]');\n }\n\n get wrapperClasses() {\n const { errors } = this;\n const classes = ['q2-select-container'];\n if (Array.isArray(errors) && errors.length > 0) classes.push('has-error');\n if (this.inputFocused) classes.push('is-focused');\n if (this.searchable) classes.push('is-searchable');\n return classes.join(' ');\n }\n\n _togglePopover() {\n const { innerInputField } = this;\n innerInputField?.click();\n innerInputField?.focus();\n innerInputField.dispatchEvent(new FocusEvent('focus'));\n }\n\n calculateMultiSelectSelectedDisplay() {\n const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;\n if (!firstSelectedValue) return '';\n if (firstSelectedOptionElement?.display) return loc(firstSelectedOptionElement.display);\n if (multilineOptions && this.searchable) return this.searchText;\n if (multilineOptions) return '';\n return (\n firstSelectedOptionElement?.textContent?.trim() ?? firstSelectedOptionElement?.value ?? firstSelectedValue\n );\n }\n\n calculateSingleSelectSelectedDisplay() {\n const { firstSelectedOptionElement, multilineOptions } = this;\n if (multilineOptions) {\n return (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) \|\| this.value \|\| '';\n } else {\n return (\n (firstSelectedOptionElement?.display && loc(firstSelectedOptionElement.display)) \|\|\n firstSelectedOptionElement?.textContent?.trim() \|\|\n this.value \|\|\n ''\n );\n }\n }\n\n checkSelectedDisplay() {\n // This prevents a an undefined property error when the spec tests are run\n try {\n this.hostElement;\n } catch (error) {\n return null;\n }\n let namedSlot = this.selectedDisplaySlot;\n const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } =\n this;\n const hasNoValue = !value && multiple && !selectedOptions?.length;\n if (prioritizeSearch \|\| !multilineOptions \|\| hasNoValue) return this.clearSelectedDisplay();\n\n if (!firstSelectedOptionElement \|\| firstSelectedOptionElement.display) return this.clearSelectedDisplay();\n\n // Clone selected option and remove elements with hide-on-select attribute\n const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true) as HTMLElement;\n selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());\n\n if (namedSlot) {\n const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;\n namedSlot.style.setProperty('--comp-selected-display-height', height);\n if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {\n namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);\n }\n } else {\n namedSlot = document.createElement('div');\n namedSlot.slot = '_selected-display';\n namedSlot.appendChild(selectionClone);\n this.hostElement.appendChild(namedSlot);\n }\n return namedSlot;\n }\n\n checkSelectedDisplayHeight() {\n const { selectedDisplaySlot } = this;\n if (!selectedDisplaySlot) return;\n selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');\n }\n\n checkSelectedOptions() {\n const { multiple, selectedOptions, value } = this;\n this.optionElements.forEach(option => {\n if (multiple) {\n option.selected = selectedOptions.includes(option.value);\n } else {\n option.selected = option.value === value;\n }\n });\n }\n\n clearSearchText() {\n if (!this.searchText) return;\n this.searchText = '';\n this.input.emit({ query: '' });\n }\n\n clearSelectedDisplay() {\n this.selectedDisplaySlot?.remove();\n }\n\n clearValue() {\n const { multiple } = this;\n this.value = '';\n this.selectedOptions = [];\n this.change.emit({ value: multiple ? undefined : '', selectedOptions: multiple ? [] : undefined });\n }\n\n clickedElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLClickElsewhereElement;\n if (target.localName !== 'click-elsewhere') return;\n event.stopPropagation();\n };\n\n closeDropdown() {\n this.open = false;\n this.clearSearchText();\n }\n\n async executeActionSheet(event: MouseEvent \| KeyboardEvent) {\n const result = await showActionSheetList(this, event);\n this.focusInput();\n this.handleSelectionChanges(result);\n }\n\n focusInput() {\n this.inputField?.dispatchEvent(new FocusEvent('focus'));\n }\n\n // Helps with checking for calls to handleExternalKeydown in spec tests\n handleOptionListExternalKeydown(event: KeyboardEvent) {\n this.optionList.handleExternalKeydown(event);\n }\n\n handleSelectionChanges(changeDetails: { value?: string; values?: IOptionValue[] }) {\n const { value = '', values = [] } = changeDetails;\n const selectedOptionValues = values.map(value => value.value);\n const { multiple } = this;\n if (!this.hostElement.onchange) {\n this.selectedOptions = selectedOptionValues;\n }\n\n this.change.emit({\n value: multiple ? undefined : value,\n selectedOptions: multiple ? selectedOptionValues : undefined,\n });\n }\n\n inputBlurHandler = () => {\n this.inputFocused = false;\n };\n\n inputChangeHandler = (event: Event) => {\n event.stopPropagation();\n };\n\n inputClickHandler = async (event: MouseEvent) => {\n event.stopPropagation();\n if (shouldShowActionSheet(this)) {\n return this.executeActionSheet(event);\n }\n this.toggleDropdown();\n this.focusInput();\n };\n\n inputFocusHandler = () => {\n this.inputFocused = true;\n };\n\n inputInputHandler = (event: Q2InputCustomEvent<IEventDetail> & InputEvent) => {\n event.stopPropagation();\n const eventValue = event.detail.value;\n const shouldClearValue = !!this.value;\n\n if (shouldClearValue) this.clearValue();\n if (!this.open) this.openDropdownWithoutActiveElement();\n\n this.prioritizeSearch = true;\n this.searchText = eventValue;\n this.input.emit({ query: eventValue });\n };\n\n inputKeydownHandler = (event: KeyboardEvent) => {\n if (this.readonly \|\| this.disabled) return;\n const { key, shiftKey } = event;\n const isShiftTab = key === 'Tab' && shiftKey;\n const hasSlot = this.hasPopoverTop \|\| this.hasPopoverBottom;\n if ((hasSlot \|\| this.multiple) && (key === 'Tab' \|\| isShiftTab)) return;\n\n // slots are incompatible with action sheet\n if (shouldShowActionSheet(this, event) && !hasSlot) {\n return this.executeActionSheet(event);\n }\n\n const keysForOptionListToHandle = [\n 'ArrowDown',\n 'ArrowUp',\n 'PageDown',\n 'PageUp',\n 'Home',\n 'End',\n 'Escape',\n 'Tab',\n ];\n\n if (this.searchable && (key === ' ' \|\| key === 'Enter') && this.inputField.value == '') {\n event.preventDefault();\n if (!this.open) this.openDropdownWithoutActiveElement();\n }\n\n if (this.searchable && !keysForOptionListToHandle.includes(key)) return;\n if (this.shouldClearSearchText(event)) this.clearSearchText();\n\n // Prevent click event from firing when spacebar is pressed\n if (key === ' ') event.preventDefault();\n\n this.handleOptionListExternalKeydown(event);\n };\n\n onCustomDisplayClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.focusInput();\n this.toggleDropdown();\n };\n\n onMutationObserved = () => {\n const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n const slotContainer = hostElement.querySelector('.custom-display-content');\n const displaySlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"q2-select-display\"]');\n const hasCustomDisplay = !!displaySlot\n ? displaySlot.assignedNodes().length > 0\n : slotContainer.children.length > 0;\n\n if (this.hasCustomDisplay !== hasCustomDisplay) {\n this.hasCustomDisplay = hasCustomDisplay;\n }\n\n const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n if (hasPopoverTop !== topSlotHasNode) {\n this.hasPopoverTop = topSlotHasNode;\n }\n\n const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n if (hasPopoverBottom !== bottomSlotHasNode) {\n this.hasPopoverBottom = bottomSlotHasNode;\n }\n\n this.checkSelectedOptions();\n };\n\n onOptionListChange = (event: Q2OptionListCustomEvent<{ value: string; values: IOptionValue[] }>) => {\n event.stopPropagation();\n const { values } = event.detail;\n\n if (values.length === 0) this.showAllOptions();\n this.handleSelectionChanges(event.detail);\n };\n\n onPopoverState = ({\n detail: { open, action },\n }: CustomEvent<{ open: boolean; action: 'close' \| 'select' \| 'open' }>) => {\n if (!open \|\| this.searchText) {\n if (action !== 'select') {\n this.optionList.setActiveElement(null);\n }\n this.inputField.focus();\n }\n\n if (this.open === open) return;\n this.open = open;\n };\n\n openDropdownWithoutActiveElement() {\n if (this.readonly \|\| this.disabled) return;\n this.optionList.setActiveElement(null);\n this.open = true;\n }\n\n setStatusMessage(message) {\n clearTimeout(this.statusMessageTimer);\n this.statusMessage = '';\n this.statusMessageTimer = setTimeout(() => {\n this.statusMessage = message;\n }, 1000);\n }\n\n shouldClearSearchText(event: KeyboardEvent) {\n return this.searchable && !!this.searchText && event.key === 'Escape';\n }\n\n showAllOptions = () => {\n this.showSelected = false;\n };\n\n showSelectedOptions = () => {\n this.showSelected = true;\n };\n\n toggleDropdown() {\n if (this.readonly \|\| this.disabled) return;\n\n if (this.open && !this.searchText) {\n this.closeDropdown();\n } else {\n this.openDropdownWithoutActiveElement();\n }\n }\n\n visibilityToggleKeyDown = (event: KeyboardEvent) => {\n const key = event.key;\n const isShiftTab = key === 'Tab' && event.shiftKey;\n const isRadioControlKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key);\n if (isRadioControlKey) event.stopPropagation();\n if (isShiftTab) {\n event.stopPropagation();\n // allows shift+tab keys to select the top slot when present\n if (this.hasPopoverTop) return;\n\n this.optionList.setDefaultActiveElement();\n }\n };\n\n // #endregion\n // #region Render Methods\n\n renderCustomDisplay() {\n const hasSelectedDisplay = this.checkSelectedDisplay();\n if (!hasSelectedDisplay) return;\n this.checkSelectedDisplayHeight();\n\n return (\n <slot\n name=\"_selected-display\"\n slot=\"custom-display\"\n />\n );\n }\n\n renderOptionsDropdown() {\n return (\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.innerInputContainer}\n open={this.open}\n max-height={this.popoverMaxHeight}\n minHeight={this.popoverMinHeight}\n direction={this.popDirection}\n mode={this.popoverMode \|\| undefined}\n block\n >\n <div class=\"popover-content\">\n <q2-option-list\n onPopoverState={this.onPopoverState}\n ref={el => (this.optionList = el)}\n type=\"listbox\"\n id=\"option-list\"\n show-selected={this.showSelected}\n label={this.listLabel}\n multiple={this.multiple}\n selectedOptions={this.structuredSelectedOptions}\n onChange={this.onOptionListChange}\n >\n <slot />\n </q2-option-list>\n <div\n class=\"popover-top-container\"\n ref={el => (this.popoverTopContainer = el)}\n hidden={!this.multiple && !this.hasPopoverTop}\n tabindex=\"-1\"\n >\n <slot name=\"popover-top\"></slot>\n {this.multiple && this.renderVisibilityToggle()}\n </div>\n </div>\n <div\n class=\"popover-bottom-container\"\n hidden={!this.hasPopoverBottom}\n tabindex=\"-1\"\n >\n <slot name=\"popover-bottom\" />\n </div>\n </q2-popover>\n );\n }\n\n renderVisibilityToggle() {\n const selectedOptionsCount = this.selectedOptions?.length ?? 0;\n const { showSelected } = this;\n return (\n <div class=\"multi-select-header\">\n <fieldset>\n <legend aria-label={loc('tecton.element.select.multiHeader.showing')}>\n {loc('tecton.element.select.multiHeader.showing')}\n </legend>\n <div>\n <input\n class=\"sr\"\n type=\"radio\"\n id=\"all\"\n name=\"viewDisplay\"\n value=\"all\"\n checked={!showSelected}\n aria-label={loc('tecton.element.select.multiHeader.allAriaLabel')}\n test-id=\"allOptionsButton\"\n onClick={this.showAllOptions}\n onKeyDown={this.visibilityToggleKeyDown}\n />\n <label htmlFor=\"all\">{loc('tecton.element.select.multiHeader.all')}</label>\n </div>\n\n <div>\n <input\n class=\"sr\"\n type=\"radio\"\n id=\"selected\"\n disabled={selectedOptionsCount === 0}\n name=\"viewDisplay\"\n value=\"selected\"\n aria-label={loc('tecton.element.select.multiHeader.selectedAriaLabel', [\n selectedOptionsCount,\n ])}\n checked={showSelected}\n test-id=\"selectedOptionsButton\"\n onClick={this.showSelectedOptions}\n onKeyDown={this.visibilityToggleKeyDown}\n />\n <label htmlFor=\"selected\">\n {loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount])}\n </label>\n </div>\n </fieldset>\n </div>\n );\n }\n\n render() {\n return (\n <click-elsewhere\n class={this.wrapperClasses}\n onChange={this.clickedElsewhere}\n >\n <div\n aria-live=\"polite\"\n aria-atomic=\"true\"\n role=\"status\"\n class=\"sr\"\n >\n {this.statusMessage}\n </div>\n <q2-input\n ref={el => (this.inputField = el)}\n class=\"q2-select-input\"\n label={(this.label && loc(this.label)) \|\| ''}\n value={this.selectedDisplay}\n clearable={(this.clearable && (!!this.value \|\| !!this.selectedOptions?.length)) \|\| undefined}\n errors={\n (Array.isArray(this.errors) &&\n this.errors.length > 0 &&\n this.errors.map(error => loc(error))) \|\|\n (this.invalid && ['tecton.element.select.invalid']) \|\|\n []\n }\n disabled={this.disabled}\n optional={this.optional}\n readonly={!!this.readonly}\n placeholder={this.placeholder \|\| undefined}\n hideLabel={this.hideLabel}\n ariaExpanded={`${this.open}`}\n ariaControls=\"option-list\"\n ariaHaspopup=\"listbox\"\n test-id=\"toggleDropdown\"\n hide-messages\n iconRight=\"chevron-down\"\n onClick={this.inputClickHandler}\n onInput={this.inputInputHandler}\n onKeyDown={this.inputKeydownHandler}\n onFocus={this.inputFocusHandler}\n onBlur={this.inputBlurHandler}\n onChange={this.inputChangeHandler}\n badgeValue={this.badgeValue}\n badgeTheme={this.inputFocused ? 'primary' : undefined}\n _role=\"combobox\"\n _preventEntry={!this.searchable}\n >\n {this.renderCustomDisplay()}\n </q2-input>\n <div\n class=\"custom-display-content\"\n hidden={!this.hasCustomDisplay \|\| !!this.searchText}\n onClick={this.onCustomDisplayClick}\n >\n <slot name=\"q2-select-display\" />\n </div>\n {this.renderOptionsDropdown()}\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-stepper-pane.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as e, c as t, h as i, F as s, H as n, g as a } from "./index-7a5365e2.js";
-import { c as o, n as d, l as h } from "./index-504f1a9e.js";
+import { c as o, n as d, l as h } from "./index-f2a66217.js";
 const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}";

package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as a, F as r, g as i } from "./index-7a5365e2.js";
-import { o as s, i as c, c as n, l as o } from "./index-504f1a9e.js";
+import { o as s, i as c, c as n, l as o } from "./index-f2a66217.js";
 const l = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:grid;grid-template-columns:var(--tct-stepper-vertical-list-width, var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px))) 1fr;gap:var(--tct-stepper-vertical-layout-gap, var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px)))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);min-height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 2)));-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-stepper-vertical-btn-active-font-weight, var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600)))}[aria-describedby] .step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, var(--tct-advanced-stepper-label-line-count, var(--t-advanced-stepper-label-line-count, 1)));-webkit-box-orient:vertical}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-stepper-vertical-description-color, var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-stepper-vertical-description-font-size, var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px))));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-stepper-vertical-btn-icon-size, var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px)));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-btn-label-font-size, var(--tct-advanced-stepper-btn-label-font-size, var(--t-advanced-stepper-btn-label-font-size, 16px)));--comp-btn-label-color:var(--tct-stepper-vertical-label-color, var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d))));--comp-tween:var(--tct-stepper-vertical-tween, var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease))));--comp-bullet-bg:var(--tct-stepper-vertical-bullet-active-background, var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1))));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-stepper-vertical-child-btn-icon-size, var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px)));--comp-btn-content-gap:var(--tct-stepper-vertical-btn-gap, var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px))));--comp-btn-label-font-size:var(--tct-stepper-vertical-child-btn-label-font-size, var(--tct-advanced-stepper-child-btn-label-font-size, var(--t-advanced-stepper-child-btn-label-font-size, var(--app-font-size-small, 12px))))}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-stepper-vertical-btn-text-align, var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start)));grid-template-areas:"icon content";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled],.step-child-btn[aria-disabled]{cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-stepper-vertical-btn-locked-color, var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77)))))}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn{min-height:var(--tct-stepper-vertical-btn-height, var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px)));font-size:var(--tct-stepper-vertical-btn-font-size, var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px)));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-stepper-vertical-child-btn-height, var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px)));padding-left:var(--tct-stepper-vertical-child-btn-left-padding, var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px))));font-size:var(--tct-stepper-vertical-child-btn-font-size, var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px)));border-left-width:var(--tct-stepper-vertical-child-btn-left-border-width, var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px)));border-left-style:var(--tct-stepper-vertical-child-btn-left-border-style, var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid)));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #d20a0a);--comp-active-color:var(--const-stoplight-alert, #d20a0a)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-stoplight-warning:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-stepper-vertical-child-border-width, var(--tct-advanced-stepaer-child-border-width, var(--t-advanced-stepaer-child-border-width, 1px)));border-left-style:var(--tct-stepper-vertical-child-border-style, var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid)));border-left-color:var(--tct-stepper-vertical-child-border-color, var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9))));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-stepper-vertical-spacer-height, var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px))))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}';
@@ -329,15 +329,15 @@ const d = class {
   }
   render() {
     return a(r, {
-      key: "f36e1a5d6f2af51a476079fb891f3cc34223ff60"
+      key: "7a334a54447a302cd17f4f334649269f13f0d251"
     }, a("ul", {
-      key: "243414ce25a7b746129f9e3e2ffc96dfe18e84ec",
+      key: "702386cfdc56201e55a878c16338e0d711f45487",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), a("div", {
-      key: "32e723cd4f9ffbc032370a0debd376f38f8ef205",
+      key: "9ecaef0497b3647532d0ebf6e3944af766458037",
       role: "list"
     }, a("slot", {
-      key: "e8886dab3e636324941ffe263d09aaa553de2a86"
+      key: "ddf8fdfb3ed775c26afd0ace060d54c3b302b290"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-stepper.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as r, F as i, g as o } from "./index-7a5365e2.js";
-import { o as s, i as a, l } from "./index-504f1a9e.js";
+import { o as s, i as a, l } from "./index-f2a66217.js";
 const n = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled]{cursor:not-allowed}.step-btn[aria-disabled],.step-btn[aria-disabled]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-background:var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:"";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected] .step-icon,[aria-selected] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-background);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}';
@@ -218,19 +218,19 @@ const p = class {
     var e;
     const {allPanes: o, stepCount: s, currentStep: a, lastEnabledStep: n} = this;
     const c = (e = o === null || o === void 0 ? void 0 : o[t]) !== null && e !== void 0 ? e : null;
-    const {id: p, status: b} = c;
-    const d = this.getPaneSlotOrProperty(c, "label");
+    const {id: p, status: d} = c;
+    const b = this.getPaneSlotOrProperty(c, "label");
     const h = this.getPaneSlotOrProperty(c, "description");
     const v = t + 1;
     const f = v === a;
-    const u = !!d && `label-${p}`;
-    const g = !!d && !!h && `description-${p}`;
-    const m = !d && l("tecton.element.stepper.number", [ `${v}`, `${s}` ]);
+    const u = !!b && `label-${p}`;
+    const g = !!b && !!h && `description-${p}`;
+    const m = !b && l("tecton.element.stepper.number", [ `${v}`, `${s}` ]);
     let w;
-    if (b === "complete") w = "success-filled"; else if (b === "error") w = "warning-filled";
+    if (d === "complete") w = "success-filled"; else if (d === "error") w = "warning-filled";
     const x = [ "step-btn" ];
-    if (b) x.push(`status-${b}`);
-    const k = b === "locked";
+    if (d) x.push(`status-${d}`);
+    const k = d === "locked";
     const y = k || v > n;
     return r("li", {
       role: "presentation"
@@ -255,7 +255,7 @@ const p = class {
     }, v), u && r("div", {
       class: "step-label",
       id: u,
-      innerHTML: d
+      innerHTML: b
     }), u && g && r("div", {
       class: "step-description",
       id: g,
@@ -269,50 +269,50 @@ const p = class {
     const a = [ "step-container" ];
     if (e) a.push("has-scroll");
     return r(i, {
-      key: "4d126ea8a5c6c2092cffbb07f96ea2d89e28173b"
+      key: "21459e973c382d566ad74cfa1079bcede3bc4bb4"
     }, r("div", {
-      key: "b064b463a678328e278fc624d99faa28fa84c8bb",
+      key: "fb74e21ddf7346d79668b47f926ed3cf3473d6ce",
       class: a.join(" ")
     }, e && r(i, {
-      key: "92912f5bf8805d61d497622f6fd3a656410a623a"
+      key: "6b4ba9451964d04c22e162d3b06b4dd493e6acdc"
     }, r("div", {
-      key: "e0e0314b7fd76b6da5937de638604f05c579d7f6",
+      key: "317d4dd68f295878cf2b27508f882dbbf41c660d",
       class: "gradient-left",
       hidden: !o
     }), r("div", {
-      key: "8c57359b3b1e9f352e4819e47da81c4edba0a076",
+      key: "ddb5edf2ba557d5a7d2b19d48f5c11fba7c9fecc",
       class: "gradient-right",
       hidden: !s
     }), r("q2-btn", {
-      key: "9eba2ab47b2ccc8d90c9e37fb4c5859b157af5ac",
+      key: "2c2d7a851f2e089b64d1884cc5109b6bed07138b",
       class: "btn-left",
       hideLabel: true,
       hidden: !this.showScrollLeft,
       label: l("tecton.element.stepper.scrollLeft"),
       onClick: () => this.onScrollBtnClick("left")
     }, r("q2-icon", {
-      key: "48f07c60f769c7fb950bbf21c7e0400d3e2293f5",
+      key: "8752b1fa6b71189a513088998bad57e9cd372c02",
       type: "chevron-left"
     })), r("q2-btn", {
-      key: "b574e2f3bf489caa1a4f47c8c115b379a1772f35",
+      key: "6299ffdbaee72154f91f75bad7fdecac49f1f491",
       class: "btn-right",
       hideLabel: true,
       hidden: !this.showScrollRight,
       label: l("tecton.element.stepper.scrollRight"),
       onClick: () => this.onScrollBtnClick("right")
     }, r("q2-icon", {
-      key: "cd3e251102eb5b89fa6933f2885fc9e9a5b213db",
+      key: "9ddface0e855a5c6af58e6415ddc13a327a50e06",
       type: "chevron-right"
     }))), r("ul", {
-      key: "57b5e6e7906498359549d30bc0ac0fbdb966de87",
+      key: "18d55fe631add203b41784d7e10b60c6d587702a",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       role: "tablist"
     }, t > 0 && [ ...Array(t).keys() ].map((t => this.renderStepBtn(t))))), r("div", {
-      key: "7db723abc9a5176f548981d410108f32d6eb555a",
+      key: "29141e95496abf8d409ce8ccdc71010f8cb6efdd",
       role: "list"
     }, r("slot", {
-      key: "dc5cd4396673c1acf789a2b7065fb3e349cd4e0a",
+      key: "f4cace12ffe8239c98ea12daee44fa3ff1369354",
       onSlotchange: () => this.onSlotChange()
     })));
   }