q2-tecton-elements 1.9.7 → 1.10.2

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b2c271e.js');
-const index$1 = require('./index-2dcb1a72.js');
+const index$1 = require('./index-14348270.js');
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-element-br, 0)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible;margin-bottom:var(--app-scale-2)}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0}.custom-display-content{position:absolute;bottom:0;left:calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);height:44px;width:calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3, 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-list(--tct-scale-3, --app-scale-3, 15px) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px))}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}.q2-element-dropdown.dropup{bottom:40px}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-element-br, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--app-scale-1x, 5px));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));--comp-scrollbar-color:var(--tct-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;margin-bottom:var(--app-scale-2)}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0}.custom-display-content{position:absolute;bottom:0;left:calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);height:44px;width:calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3, 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-list(--tct-scale-3, --app-scale-3, 15px) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px))}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}.q2-element-dropdown.dropup{bottom:40px}";
 
 const Q2Select = class {
   constructor(hostRef) {
@@ -29,7 +29,6 @@ const Q2Select = class {
       lastPressedAt: new Date()
     };
     this.guid = index$1.createGuid();
-    this.dropdownId = `q2-select-dropdown-${this.guid}`;
     this.onMutationObserved = () => {
       const slotContainer = this.hostElement.querySelector('.custom-display-content');
       const displaySlot = this.hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]');
@@ -180,7 +179,13 @@ const Q2Select = class {
   }
   getDefaultActiveIndex() {
     const firstSelected = this.optionElements.findIndex(element => element.selected);
-    return firstSelected > -1 ? firstSelected : 0;
+    if (firstSelected > -1)
+      return firstSelected;
+    const firstEnabled = this.optionElements.findIndex(element => !element.hidden);
+    if (firstEnabled > -1)
+      return firstEnabled;
+    else
+      return 0;
   }
   setActiveOption() {
     if (!this.dropdownOpen) {
@@ -197,9 +202,9 @@ const Q2Select = class {
     });
   }
   setFocusedOption() {
-    const ele = this.optionElements[this.activeIndex].shadowRoot.querySelector('div');
-    ele.dispatchEvent(new FocusEvent('focus'));
-    ele.focus();
+    const option = this.optionElements[this.activeIndex];
+    option.dispatchEvent(new FocusEvent('focus'));
+    option.focus();
   }
   calculateMultiSelectSelectedDisplay() {
     if (this.selectedOptions.length === 1) {
@@ -228,7 +233,7 @@ const Q2Select = class {
   get minPopHeight() {
     const { minRows } = this;
     const firstOption = this.hostElement.querySelector('q2-option:not([hidden])');
-    const minHeight = window.getComputedStyle(firstOption.shadowRoot.querySelector('.q2-option-container')).minHeight;
+    const minHeight = window.getComputedStyle(firstOption).minHeight;
     return minRows * parseInt(minHeight);
   }
   get selectedDisplay() {
@@ -295,7 +300,7 @@ const Q2Select = class {
   }
   scrollToActiveOption() {
     const activeOption = this.optionElements[this.activeIndex];
-    activeOption && activeOption.scrollIntoView({ block: 'nearest' });
+    activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
   }
   openDropdownWithoutActiveElement() {
     this.activeIndex = undefined;
@@ -344,17 +349,13 @@ const Q2Select = class {
   adjustActiveOptionAndScroll(numToAdd) {
     this.activeIndex += numToAdd;
     this.setActiveOption();
-    if (!this.searchable) {
-      this.setFocusedOption();
-    }
+    this.setFocusedOption();
     this.scrollToActiveOption();
   }
   setDefaultActiveElement() {
     this.activeIndex = this.getDefaultActiveIndex();
     this.setActiveOption();
-    if (!this.searchable) {
-      this.setFocusedOption();
-    }
+    this.setFocusedOption();
   }
   focusInput() {
     const input = this.hostElement.shadowRoot.querySelector('q2-input');
@@ -431,19 +432,34 @@ const Q2Select = class {
     if (this.searchable && event.target === this.hostElement && !this.hostElement.oninput) {
       const options = this.optionElements;
       const query = event.detail.query.trim().toLowerCase();
+      let matchedCount = 0;
       options.forEach(option => {
         if (query === '') {
           option.style.display = '';
         }
         else {
-          let { display = '', innerText = '' } = option;
-          let matched = display.toLowerCase().includes(query) ||
+          const { display = '', innerText = '' } = option;
+          const matched = display.toLowerCase().includes(query) ||
             innerText.toLowerCase().includes(query);
-          option.style.display = matched ? '' : 'none';
+          option.hidden = !matched;
+          if (matched)
+            matchedCount++;
         }
       });
+      let statusMessageLocString = query
+        ? 'tecton.element.select.searchable.results'
+        : 'tecton.element.select.allOptions';
+      const count = query ? matchedCount : options.length;
+      this.setStatusMessage(index$1.loc(statusMessageLocString, [count]));
     }
   }
+  setStatusMessage(message) {
+    clearTimeout(this.statusMessageTimer);
+    this.statusMessage = '';
+    this.statusMessageTimer = setTimeout(() => {
+      this.statusMessage = message;
+    }, 1000);
+  }
   clickHandler(event) {
     const target = event.target;
     if (target.localName !== 'q2-option' || target.disabled) {
@@ -452,76 +468,102 @@ const Q2Select = class {
     this.selectOption(target.value);
   }
   keydownHandler(event) {
-    if (event.key === 'Enter' && this.dropdownOpen) {
-      event.preventDefault();
-      const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
-      newOption && !newOption.disabled && this.selectOption(newOption.value);
-    }
-    else if (['ArrowUp', 'Up'].includes(event.key)) {
-      event.preventDefault();
-      if (this.dropdownOpen) {
-        if (this.activeIndex > 0) {
+    event.stopPropagation();
+    const { dropdownOpen, activeIndex, searchable, multiple, optionElements } = this;
+    const { key, shiftKey } = event;
+    switch (key) {
+      case 'Enter':
+        if (!dropdownOpen)
+          break;
+        event.preventDefault();
+        const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
+        if (newOption === null || newOption === void 0 ? void 0 : newOption.disabled)
+          break;
+        this.selectOption(newOption.value);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (!dropdownOpen) {
+          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
+          break;
+        }
+        if (activeIndex > 0) {
           const nextIndex = this.getNextVisibleIndex(-1);
           if (nextIndex > -1) {
-            this.adjustActiveOptionAndScroll(nextIndex - this.activeIndex);
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
           }
         }
-        else if (this.activeIndex !== 0) {
+        else if (activeIndex !== 0) {
           this.setDefaultActiveElement();
         }
-      }
-      else {
-        this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
-      }
-    }
-    else if (['ArrowDown', 'Down'].includes(event.key)) {
-      event.preventDefault();
-      if (this.dropdownOpen) {
-        if (this.activeIndex < this.optionElements.length - 1) {
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!dropdownOpen) {
+          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
+          break;
+        }
+        if (activeIndex < optionElements.length - 1) {
           const nextIndex = this.getNextVisibleIndex(1);
           if (nextIndex > -1) {
             this.adjustActiveOptionAndScroll(nextIndex - this.activeIndex);
           }
         }
-        else if (!this.activeIndex) {
+        else if (!activeIndex) {
           this.setDefaultActiveElement();
         }
-      }
-      else {
-        this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
-      }
-    }
-    else if (['Escape', 'Esc'].includes(event.key)) {
-      this.closeDropdown();
-      this.focusInput();
-    }
-    else if (event.key === 'Tab') {
-      if (this.dropdownOpen && this.searchable && event.shiftKey) {
+        break;
+      case 'Home':
+        if (!dropdownOpen)
+          break;
         event.preventDefault();
+        this.adjustActiveOptionAndScroll(0);
+        break;
+      case 'End':
+        if (!dropdownOpen)
+          break;
+        event.preventDefault();
+        this.adjustActiveOptionAndScroll(optionElements.length - 1);
+        break;
+      case 'Escape':
+        this.closeDropdown();
         this.focusInput();
-      }
-      else {
-        this.dropdownOpen && !this.multiple && event.preventDefault();
-      }
-    }
-    else if (!this.searchable && event.key.match(/^[a-zA-Z0-9]$/)) {
-      // search in non-searchable select: alpha-numeric only
-      this.searchAndFocus(event.key);
+        break;
+      case 'Tab':
+        if (!dropdownOpen)
+          break;
+        if ((searchable && shiftKey) || !multiple) {
+          event.preventDefault();
+        }
+        if (searchable && shiftKey) {
+          this.focusInput();
+        }
+        break;
+      default:
+        if (searchable)
+          break;
+        if (!key.match(/^[A-Za-z0-9]$/))
+          break;
+        // search in non-searchable select: alpha-numeric only
+        this.searchAndFocus(key);
+        break;
     }
   }
   render() {
-    return (index.h("click-elsewhere", { class: this.wrapperClasses, onChange: this.clickedElsewhere }, index.h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && index$1.loc(this.label)) || '', value: this.selectedDisplay, errors: (Array.isArray(this.errors) &&
+    return (index.h("click-elsewhere", { class: this.wrapperClasses, onChange: this.clickedElsewhere }, index.h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && index$1.loc(this.label)) || '', value: this.selectedDisplay, errors: (Array.isArray(this.errors) &&
         this.errors.length > 0 &&
         this.errors.map(error => index$1.loc(error))) ||
         (this.invalid && ['tecton.element.select.invalid']) ||
-        [], disabled: this.disabled, optional: this.optional, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: this.dropdownId, ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }), index.h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, index.h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
+        [], disabled: this.disabled, optional: this.optional, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }), index.h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, index.h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
   }
   optionsDropdown() {
     const dropDirection = this.privatePopDirection === 'up' ? 'dropup' : '';
-    return (index.h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el), role: "menu" }, this.multiple ? this.visibilityToggle() : '', index.h("div", { class: "q2-select-options", id: this.dropdownId }, index.h("slot", null))));
+    return (index.h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el) }, this.multiple ? this.visibilityToggle() : '', index.h("div", { class: "q2-select-options", id: "dropdown", role: "listbox" }, index.h("slot", null))));
   }
   visibilityToggle() {
-    return (index.h("div", { class: "multi-select-header" }, index$1.loc('tecton.element.select.multiHeader.showing'), index.h("q2-btn", { class: `option-toggle show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.showAllOptionTabKeyDown }, index$1.loc('tecton.element.select.multiHeader.all')), index.h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.showSelectedOptionTabKeyDown }, index$1.loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
+    return (index.h("div", { class: "multi-select-header" }, index$1.loc('tecton.element.select.multiHeader.showing'), index.h("q2-btn", { class: `option-toggle show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "aria-selected": !this.onlyShowingSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.showAllOptionTabKeyDown, label: index$1.loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, index$1.loc('tecton.element.select.multiHeader.all')), index.h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, "aria-selected": this.onlyShowingSelected || undefined, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.showSelectedOptionTabKeyDown, label: index$1.loc('tecton.element.select.multiHeader.selectedAriaLabel', [
+        this.selectedOptionsCount
+      ]), "hide-label": true }, index$1.loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/q2-stepper-pane.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6b2c271e.js');
+const index$1 = require('./index-14348270.js');
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}";
+
+const Q2StepperPane = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  ////////// LIFECYCLE HOOKS ////////
+  connectedCallback() {
+    if (!this.hostElement.id)
+      this.hostElement.id = `step-${index$1.createGuid()}`;
+  }
+  render() {
+    const { label, description, isActive } = this;
+    return (index.h("div", { role: "tabpanel", "aria-label": label && index$1.loc(label), "aria-description": description && index$1.loc(description), tabindex: "0", hidden: !isActive }, index.h("slot", null)));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+Q2StepperPane.style = stylesCss;
+
+exports.q2_stepper_pane = Q2StepperPane;

package/dist/cjs/q2-stepper.cjs.entry.js

@@ -0,0 +1,187 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-6b2c271e.js');
+const index = require('./index-14348270.js');
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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-bg: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-bullet-size, var(--t-stepper-bullet-size, 18px));--comp-bullet-gap:var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));--comp-bullet-border-offset:var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));--comp-bullet-border:var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3)));--comp-bullet-font-size:var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));--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-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(--app-scale-1x, 5px));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));--comp-scrollbar-color:var(--tct-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}.step-btn[aria-disabled]{cursor:default}.step-btn[aria-disabled],.step-btn[aria-disabled]+hr{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-bg:var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray12, #d9d9d9)))}.step-bubble{margin:var(--comp-bullet-gap) auto;background:var(--comp-bullet-bg);color:var(--comp-bullet-font-color);width:var(--comp-bullet-size);height:var(--comp-bullet-size);min-height:var(--comp-bullet-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[aria-selected] .step-bubble:before{content:\"\";position:absolute;inset:calc(var(--comp-bullet-border-offset) * -1);width:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));height:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));border-radius:50%;border:var(--comp-bullet-border)}hr{width:calc( var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size) );top:calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));left:calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-bg);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));font-size:var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));height:1.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}[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: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)));display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding-bottom:0.2em}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg: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{left:0}.btn-right{right:0}";
+
+index.addSmoothScrollPolyfill();
+const Q2Stepper = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.change = index$1.createEvent(this, "change", 7);
+    this.currentStep = 1;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
+    this.scheduledAfterRender = [];
+    ////////// EVENT HANDLERS ////////
+    this.onSlotChange = () => {
+      this.checkForPanes();
+      this.checkScrollState();
+    };
+    this.onScrollBtnClick = (direction) => {
+      const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
+      this.listElement.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
+      });
+    };
+    this.onStepClick = (event, selectedStep) => {
+      event.stopPropagation();
+      const { currentStep, stepCount, lastEnabledStep } = this;
+      if (selectedStep > lastEnabledStep || selectedStep === currentStep)
+        return;
+      this.change.emit({
+        selectedStep,
+        lastEnabledStep,
+        currentStep,
+        stepCount
+      });
+    };
+    this.onStepKeyDown = (event, stepNumber) => {
+      const { lastEnabledStep, stepCount } = this;
+      const { key } = event;
+      let selectedStep;
+      switch (key) {
+        case 'ArrowLeft':
+          event.preventDefault();
+          selectedStep = Math.max(stepNumber - 1, 0);
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          selectedStep = Math.min(stepNumber + 1, stepCount);
+          break;
+        case 'Home':
+          event.preventDefault();
+          selectedStep = 1;
+          break;
+        case 'End':
+          event.preventDefault();
+          selectedStep = lastEnabledStep;
+          break;
+      }
+      if (!selectedStep)
+        return;
+      this.focusStep(selectedStep, true);
+    };
+    this.checkForPanes = () => {
+      const { allPanes } = this;
+      if (!allPanes.length)
+        return;
+      this.stepCount = allPanes.length;
+    };
+    this.checkScrollState = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+      this.scrollEnabled = scrollWidth > clientWidth;
+      this.showScrollLeft = !!scrollLeft;
+      this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;
+    };
+  }
+  ////////// LIFECYCLE HOOKS ////////
+  componentWillLoad() {
+    if (!this.lastEnabledStep)
+      this.lastEnabledStep = this.currentStep || 1;
+    this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
+    this.checkForPanes();
+  }
+  componentDidLoad() {
+    this.resizeObserver.observe(this.listElement);
+    this.checkScrollState();
+    setTimeout(() => this.showStep(this.currentStep || 1), 0);
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  ////////// WATCHER METHODS ////////
+  currentStepChanged(stepNumber) {
+    this.showStep(stepNumber);
+  }
+  ////////// HOST EVENTS ////////
+  defaultChangeHandler(event) {
+    const { hostElement } = this;
+    if (event.target === hostElement &&
+      !hostElement.getAttribute('onchange') &&
+      !!event.detail) {
+      this.currentStep = event.detail.selectedStep;
+    }
+  }
+  ////////// GETTER METHODS ////////
+  get allPanes() {
+    return this.hostElement.querySelectorAll('q2-stepper-pane');
+  }
+  ////////// HELPER METHODS ////////
+  showStep(stepNumber) {
+    if (stepNumber > this.lastEnabledStep) {
+      const { currentStep, stepCount } = this;
+      this.lastEnabledStep = stepNumber;
+      this.change.emit({
+        selectedStep: null,
+        lastEnabledStep: stepNumber,
+        currentStep,
+        stepCount
+      });
+    }
+    this.scheduledAfterRender.push(this.resizeIframe);
+    this.showStepPane(stepNumber);
+    this.focusStep(stepNumber, this.scrollEnabled);
+  }
+  resizeIframe() {
+    var _a;
+    return (_a = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe();
+  }
+  showStepPane(stepNumber) {
+    this.allPanes.forEach((pane, index) => {
+      pane.isActive = stepNumber === index + 1;
+    });
+  }
+  focusStep(stepNumber, scrollIntoView) {
+    var _a;
+    const stepListItem = this.listElement.children[stepNumber - 1];
+    const isActive = document.activeElement === this.hostElement;
+    if (!stepListItem)
+      return;
+    if (isActive) {
+      (_a = stepListItem.firstElementChild) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    if (scrollIntoView) {
+      const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;
+      this.listElement.scrollTo({
+        left,
+        behavior: 'smooth'
+      });
+    }
+  }
+  ////////// RENDER METHODS ////////
+  renderStepBtn(stepIndex) {
+    var _a;
+    const { allPanes, stepCount, currentStep, lastEnabledStep } = this;
+    const { id, label, description } = (_a = allPanes === null || allPanes === void 0 ? void 0 : allPanes[stepIndex]) !== null && _a !== void 0 ? _a : {};
+    const stepNumber = stepIndex + 1;
+    const isCurrentStep = stepNumber === currentStep;
+    const labelId = label && `label-${id}`;
+    const descriptionId = label && description && `description-${id}`;
+    const btnLabel = !label && index.loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);
+    return (index$1.h("li", { role: "presentation" }, index$1.h("button", { class: "step-btn", type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": isCurrentStep, "aria-controls": id, "aria-disabled": stepNumber > lastEnabledStep ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => this.onStepClick(ev, stepNumber) }, index$1.h("div", { class: "step-bubble" }, stepNumber), label && (index$1.h(index$1.Fragment, null, index$1.h("div", { class: "step-label", id: labelId }, index.loc(label)), description && (index$1.h("div", { class: "step-description", id: descriptionId }, index.loc(description)))))), stepIndex ? index$1.h("hr", null) : ''));
+  }
+  render() {
+    const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;
+    const containerClasses = ['step-container'];
+    if (scrollEnabled)
+      containerClasses.push('has-scroll');
+    return (index$1.h(index$1.Fragment, null, index$1.h("div", { class: containerClasses.join(' ') }, scrollEnabled && (index$1.h(index$1.Fragment, null, index$1.h("div", { class: "gradient-left", hidden: !showScrollLeft }), index$1.h("div", { class: "gradient-right", hidden: !showScrollRight }), index$1.h("q2-btn", { class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, index$1.h("q2-icon", { type: "chevron-left" })), index$1.h("q2-btn", { class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, index$1.h("q2-icon", { type: "chevron-right" })))), index$1.h("ul", { onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), index$1.h("div", null, index$1.h("slot", { onSlotchange: () => this.onSlotChange() }))));
+  }
+  get hostElement() { return index$1.getElement(this); }
+  static get watchers() { return {
+    "currentStep": ["currentStepChanged"]
+  }; }
+};
+Q2Stepper.style = stylesCss;
+
+exports.q2_stepper = Q2Stepper;