q2-tecton-elements 1.21.2 → 1.22.0

package/dist/components/q2-select.js

@@ -0,0 +1,817 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as createGuid, s as setPopProperties, h as handleAriaLabel, o as overrideFocus, l as loc, b as isRelatedTargetWithinHost, i as isEventFromElement, r as resizeIframe } from './index13.js';
+import { d as defineCustomElement$7 } from './index2.js';
+import { d as defineCustomElement$6 } from './index4.js';
+import { d as defineCustomElement$5 } from './index5.js';
+import { d as defineCustomElement$4 } from './index7.js';
+import { d as defineCustomElement$3 } from './index8.js';
+import { d as defineCustomElement$2 } from './index9.js';
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, 100px))}::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)))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white)}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1x, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2x, 10px))}.q2-element-dropdown.dropup{bottom:var(--comp-dropup-offset)}";
+
+const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    this.input = createEvent(this, "input", 7);
+    this.scheduledAfterRender = [];
+    this.keyStore = {
+      queue: [],
+      lastPressedAt: new Date(),
+    };
+    this.guid = createGuid();
+    this.onMutationObserved = () => {
+      const slotContainer = this.hostElement.querySelector('.custom-display-content');
+      const displaySlot = this.hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]');
+      const hasCustomDisplay = !!displaySlot
+        ? displaySlot.assignedNodes().length > 0
+        : slotContainer.children.length > 0;
+      if (this.hasCustomDisplay !== hasCustomDisplay) {
+        this.hasCustomDisplay = hasCustomDisplay;
+      }
+      if (this.multiple) {
+        this.updateMultipleOptionAttrs();
+        return;
+      }
+      this.updateSingleOptionAttrs();
+      const activeOption = this.optionElements[this.activeIndex];
+      if (!activeOption || activeOption.id !== this.activeOptionId) {
+        this.activeIndex = this.getDefaultActiveIndex();
+        this.setActiveOption();
+      }
+    };
+    this.searchAndFocus = keyValue => {
+      // pseudo search in non-searchable select
+      const reorder = () => {
+        this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;
+        const list = this.optionElements.map((element, index) => ({ element, index }));
+        return [...list.slice(this.pivotIndex), ...list.slice(0, this.pivotIndex)];
+      };
+      const buildQueue = () => {
+        const now = new Date();
+        if (now.getTime() - this.keyStore.lastPressedAt.getTime() > 1000) {
+          // empty stored keys if delay > 1s
+          this.keyStore.queue = [];
+        }
+        if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== keyValue) {
+          this.keyStore.queue.push(keyValue);
+        }
+        this.keyStore.lastPressedAt = now;
+      };
+      const searchIndex = list => {
+        return list.find(v => {
+          return (!v.element.disabled &&
+            v.element.display &&
+            v.element.display.replace(/\s/g, '').match(new RegExp(`^${this.keyStore.queue.join('')}`, 'i')));
+        });
+      };
+      const setFocus = ({ element, index }) => {
+        if (this.dropdownOpen || this.multiple) {
+          // multiple: should open to make sure that which options are selected
+          this.openDropdownWithActiveElement(index);
+        }
+        else {
+          this.activeIndex = index;
+          this.change.emit({ value: element.value });
+        }
+      };
+      buildQueue();
+      const matched = searchIndex(reorder());
+      if (matched) {
+        setFocus(matched);
+      }
+    };
+    /// Event handlers ///
+    this.dropdownFocusoutHandler = (event) => {
+      const { relatedTarget } = event;
+      const isInDropdown = this.dropdownContainer.contains(relatedTarget);
+      const isInLightDom = !isInDropdown && this.hostElement.contains(relatedTarget);
+      if (isInDropdown || isInLightDom)
+        return;
+      if (!this.dropdownOpen)
+        return;
+      this.closeDropdown();
+    };
+    /* tslint:disable:cyclomatic-complexity */
+    this.dropdownKeydownHandler = (event) => {
+      event.stopPropagation();
+      const { activeIndex, searchable, optionElements, multiSelectHeader } = this;
+      const { key, shiftKey } = event;
+      if (this.readonly ||
+        (multiSelectHeader && multiSelectHeader.contains(event.target) && [' ', 'Enter'].includes(key)))
+        return;
+      switch (key) {
+        case ' ':
+        case 'Enter':
+          event.preventDefault();
+          const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
+          if (!newOption || newOption.disabled)
+            break;
+          this.selectOption(newOption, true);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          const isFirstOption = activeIndex === 0;
+          if (isFirstOption)
+            break;
+          if (activeIndex !== undefined) {
+            const nextIndex = this.getNextVisibleIndex(-1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+          }
+          else {
+            this.setDefaultActiveElement();
+          }
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          const isLastOption = activeIndex === optionElements.length - 1;
+          if (isLastOption)
+            break;
+          if (activeIndex !== undefined) {
+            const nextIndex = this.getNextVisibleIndex(1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+          }
+          else {
+            this.setDefaultActiveElement();
+          }
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(optionElements.length - 1);
+          break;
+        case 'PageUp':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));
+          break;
+        case 'PageDown':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.min(activeIndex + 10, optionElements.length - 1));
+          break;
+        case 'Tab':
+          if (shiftKey)
+            break;
+          const myOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
+          if (!myOption || myOption.disabled)
+            return;
+          if (myOption.selected)
+            return;
+          this.selectOption(myOption);
+          break;
+        case 'Esc':
+        case 'Escape':
+          this.closeDropdown();
+          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;
+      }
+    };
+    /* tslint:enable:cyclomatic-complexity */
+    this.inputKeydownHandler = (event) => {
+      event.stopPropagation();
+      const { key } = event;
+      const { optionElements, searchable } = this;
+      switch (key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(this.getLastEnabledIndex());
+          this.setFocusedOption();
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(optionElements.length - 1);
+          break;
+        case 'Escape':
+        case 'Esc':
+          this.closeDropdown();
+          break;
+        case 'Tab':
+          this.closeDropdown();
+          break;
+        default:
+          if (!key.match(/^[A-Za-z0-9]$/))
+            break;
+          if (searchable) {
+            this.openDropdownWithoutActiveElement();
+            break;
+          }
+          // search in non-searchable select: alpha-numeric only
+          this.searchAndFocus(key);
+      }
+    };
+    this.inputClickHandler = (event) => {
+      event.stopPropagation();
+      setPopProperties(this);
+      this.toggleDropdown();
+      this.focusInput();
+    };
+    this.inputInputHandler = (event) => {
+      event.stopPropagation();
+      const inputValue = this.inputField.value;
+      const eventValue = event.detail.value;
+      const didChangeText = inputValue !== eventValue;
+      const shouldClearValue = !!this.value && didChangeText;
+      if (shouldClearValue) {
+        this.selectOption(null);
+      }
+      if (!this.dropdownOpen)
+        this.openDropdownWithoutActiveElement();
+      this.prioritizeSearch = true;
+      this.searchText = eventValue;
+      this.input.emit({ query: eventValue });
+    };
+    this.inputFocusHandler = () => {
+      this.inputFocused = true;
+    };
+    this.inputBlurHandler = () => {
+      this.inputFocused = false;
+    };
+    this.inputChangeHandler = (event) => {
+      event.stopPropagation();
+    };
+    this.clickedElsewhere = (event) => {
+      const target = event.target;
+      if (target.localName === 'click-elsewhere') {
+        event.stopPropagation();
+        if (this.dropdownOpen) {
+          this.closeDropdown();
+        }
+      }
+    };
+    this.onCustomDisplayClick = (event) => {
+      event.stopPropagation();
+      this.focusInput();
+      this.toggleDropdown();
+    };
+    this.showSelectedOptions = (event) => {
+      event.stopImmediatePropagation();
+      this.onlyShowingSelected = true;
+      this.optionElements.forEach(optionElement => {
+        optionElement._multiSelectHidden = !optionElement.selected;
+      });
+    };
+    this.showAllOptions = (event) => {
+      event.stopPropagation();
+      this.onlyShowingSelected = false;
+      this.optionElements.forEach(optionElement => {
+        optionElement._multiSelectHidden = false;
+      });
+    };
+    this.label = undefined;
+    this.hideLabel = undefined;
+    this.value = undefined;
+    this.ariaLabel = undefined;
+    this.selectedOptions = [];
+    this.disabled = false;
+    this.readonly = false;
+    this.invalid = undefined;
+    this.errors = undefined;
+    this.multiple = false;
+    this.minRows = 3;
+    this.popDirection = undefined;
+    this.searchable = false;
+    this.multilineOptions = false;
+    this.optional = false;
+    this.dropdownOpen = false;
+    this.onlyShowingSelected = false;
+    this.activeOptionId = undefined;
+    this.searchText = '';
+    this.hasCustomDisplay = false;
+    this.inputFocused = false;
+    this.statusMessage = undefined;
+    this.prioritizeSearch = false;
+  }
+  /// Lifecycle Hooks ///
+  componentWillLoad() {
+    handleAriaLabel(this);
+  }
+  componentDidLoad() {
+    const observer = new MutationObserver(this.onMutationObserved);
+    observer.observe(this.hostElement, { childList: true, subtree: true });
+    this.mutationObserver = observer;
+    this.onMutationObserved();
+    overrideFocus(this.hostElement);
+    setTimeout(() => this.checkSelectedDisplay(), 0);
+  }
+  componentDidRender() {
+    setTimeout(() => {
+      this.scheduledAfterRender.forEach(fn => fn());
+      this.scheduledAfterRender = [];
+    }, 25);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver = null;
+  }
+  /// Getters ///
+  get isComponentFocused() {
+    return document.activeElement === this.hostElement || !!this.hostElement.querySelector(':focus');
+  }
+  get isSearchMode() {
+    return (this.searchable && this.inputFocused) || this.searchText;
+  }
+  get badgeValue() {
+    if (!this.multiple)
+      return;
+    const optionsLength = this.selectedOptions.length;
+    if (this.dropdownOpen && this.searchable)
+      return optionsLength || null;
+    else
+      return optionsLength > 1 ? `+${optionsLength - 1}` : null;
+  }
+  get minPopHeight() {
+    const { minRows } = this;
+    const firstOption = this.hostElement.querySelector('q2-option:not([hidden])');
+    const minHeight = firstOption ? window.getComputedStyle(firstOption).minHeight : '44px';
+    return minRows * parseInt(minHeight);
+  }
+  get selectedDisplay() {
+    if (this.prioritizeSearch || this.searchText)
+      return this.searchText;
+    if (this.hasCustomDisplay)
+      return '';
+    return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();
+  }
+  get selectedDisplaySlot() {
+    return this.hostElement.querySelector('[slot="_selected-display"]');
+  }
+  get firstSelectedValue() {
+    var _a, _b;
+    if (this.multiple)
+      return (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null;
+    return this.value;
+  }
+  get firstSelectedOptionElement() {
+    const { firstSelectedValue } = this;
+    return firstSelectedValue ? this.optionElements.find(({ value }) => value === firstSelectedValue) : null;
+  }
+  get optionElements() {
+    return Array.from(this.hostElement.querySelectorAll('q2-option'));
+  }
+  get visibleOptionElements() {
+    return Array.from(this.hostElement.querySelectorAll('q2-option:not([_multiselecthidden])'));
+  }
+  get wrapperClasses() {
+    const { errors } = this;
+    const classes = ['q2-select-container'];
+    if (this.dropdownOpen)
+      classes.push('dropdown-open');
+    if (Array.isArray(errors) && errors.length > 0)
+      classes.push('has-error');
+    if (this.inputFocused)
+      classes.push('is-focused');
+    if (this.searchable)
+      classes.push('is-searchable');
+    return classes.join(' ');
+  }
+  /// Watchers ///
+  ariaLabelObserver() {
+    handleAriaLabel(this);
+  }
+  valueUpdated() {
+    if (this.multiple)
+      return;
+    this.updateSingleOptionAttrs();
+  }
+  selectedOptionsUpdated() {
+    if (!this.multiple)
+      return;
+    this.updateMultipleOptionAttrs();
+  }
+  multilineOptionsChanged(newValue, oldValue) {
+    if (newValue === oldValue)
+      return;
+    this.optionElements.forEach(element => (element.multiline = newValue));
+  }
+  dropdownOpenChanged(isOpen) {
+    this.scheduledAfterRender.push(() => {
+      const { multiple, multiSelectHeader, dropdownContainer } = this;
+      const height = (isOpen && multiple && (multiSelectHeader === null || multiSelectHeader === void 0 ? void 0 : multiSelectHeader.offsetHeight)) || 0;
+      if (height) {
+        dropdownContainer.style.setProperty('--comp-multi-select-header-height', `${height}px`);
+      }
+      else {
+        dropdownContainer.style.removeProperty('--comp-multi-select-header-height');
+      }
+    });
+  }
+  /// Listeners ///
+  keydownHandler(event) {
+    this.inputKeydownHandler(event);
+  }
+  onHostElementChange(event) {
+    if (this.readonly)
+      return;
+    if (event.target !== this.hostElement || this.hostElement.onchange)
+      return;
+    if (this.multiple) {
+      this.selectedOptions = event.detail.selectedOptions;
+    }
+    else {
+      this.value = event.detail.value;
+    }
+  }
+  onHostElementInput(event) {
+    if (!this.searchable || event.target !== this.hostElement || this.hostElement.oninput)
+      return;
+    const options = this.optionElements;
+    const query = this.searchText.trim().toLocaleLowerCase();
+    let matchedCount = 0;
+    options.forEach(option => {
+      var _a;
+      if (query === '') {
+        option.hidden = false;
+        return;
+      }
+      const title = ((_a = option.firstElementChild) === null || _a === void 0 ? void 0 : _a.tagName) === 'Q2-CARD'
+        ? option.firstElementChild.title
+        : null;
+      const { display = '', innerText = '' } = option;
+      const searchParams = [display, title, innerText];
+      const matched = searchParams.some(text => { var _a; return (_a = text === null || text === void 0 ? void 0 : text.toLocaleLowerCase().includes(query)) !== null && _a !== void 0 ? _a : false; });
+      option.hidden = !matched;
+      if (matched)
+        matchedCount++;
+    });
+    const statusMessageLocString = query
+      ? 'tecton.element.select.searchable.results'
+      : 'tecton.element.select.allOptions';
+    const count = query ? matchedCount : options.length;
+    this.setStatusMessage(loc(statusMessageLocString, [count]));
+  }
+  delegateFocus(event) {
+    const fromHost = isRelatedTargetWithinHost(event, this.hostElement);
+    const prioritizeSearch = (this.prioritizeSearch = fromHost && this.searchable);
+    if (prioritizeSearch) {
+      this.clearSelectedDisplay();
+    }
+    else if (isEventFromElement(event, this.hostElement)) {
+      this.inputField.shadowRoot.querySelector('.input-field').focus();
+    }
+  }
+  handleFocusout(event) {
+    this.prioritizeSearch = !isRelatedTargetWithinHost(event, this.hostElement) && this.searchable;
+  }
+  clickHandler(event) {
+    const selectedOption = event.target.closest('q2-option');
+    if (!selectedOption ||
+      (selectedOption.hasAttribute('disabled') && selectedOption.getAttribute('disabled') !== 'false'))
+      return;
+    this.selectOption(selectedOption, true);
+  }
+  /// Helpers ///
+  getDefaultActiveIndex() {
+    const firstSelected = this.optionElements.findIndex(element => element.selected && !element.hidden);
+    if (firstSelected > -1)
+      return firstSelected;
+    const firstEnabled = this.optionElements.findIndex(element => !element.hidden);
+    if (firstEnabled > -1)
+      return firstEnabled;
+    else
+      return 0;
+  }
+  getLastEnabledIndex() {
+    const enabledIndexes = this.optionElements.reduce((acc, element, index) => {
+      if (!element.hidden && !element.disabled)
+        acc.push(index);
+      return acc;
+    }, []);
+    return enabledIndexes[enabledIndexes.length - 1];
+  }
+  setActiveOption() {
+    if (!this.dropdownOpen)
+      return;
+    const activeIndex = this.activeIndex;
+    this.optionElements.forEach((element, elementIndex) => {
+      if (activeIndex === elementIndex) {
+        element.active = true;
+        this.activeOptionId = element.optionId;
+      }
+      else {
+        element.active = false;
+      }
+    });
+  }
+  setFocusedOption() {
+    const option = this.optionElements[this.activeIndex];
+    if (!option)
+      return;
+    option.dispatchEvent(new FocusEvent('focus'));
+    option.focus();
+  }
+  calculateMultiSelectSelectedDisplay() {
+    var _a;
+    const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;
+    if (!firstSelectedValue)
+      return '';
+    if (firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display)
+      return loc(firstSelectedOptionElement.display);
+    if (multilineOptions && this.searchable)
+      return this.searchText;
+    if (multilineOptions)
+      return '';
+    return (_a = firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.value) !== null && _a !== void 0 ? _a : firstSelectedValue;
+  }
+  calculateSingleSelectSelectedDisplay() {
+    const { firstSelectedOptionElement } = this;
+    return ((firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display) && loc(firstSelectedOptionElement.display)) || this.value || '';
+  }
+  updateSingleOptionAttrs() {
+    const { value, guid, multilineOptions } = this;
+    this.optionElements.forEach((element, index) => {
+      element.selected = element.value === value;
+      element.optionId = `q2-select-${guid}-option-${index}`;
+      element.multiline = multilineOptions;
+    });
+  }
+  updateMultipleOptionAttrs() {
+    if (this.selectedOptions.length === 0) {
+      this.onlyShowingSelected = false;
+    }
+    const { selectedOptions, onlyShowingSelected, guid, multilineOptions } = this;
+    this.optionElements.forEach((element, index) => {
+      element.selected = selectedOptions.includes(element.value);
+      element._multiSelectHidden = onlyShowingSelected ? !element.selected : false;
+      element.optionId = `q2-select-${guid}-option-${index}`;
+      element.multiline = multilineOptions;
+    });
+  }
+  focusSelectedSibling(option) {
+    if (!this.onlyShowingSelected)
+      return;
+    const { visibleOptionElements } = this;
+    if (visibleOptionElements.length < 2)
+      return;
+    const optionIndex = visibleOptionElements.indexOf(option);
+    const visibleFocusIndex = optionIndex ? optionIndex - 1 : optionIndex + 1;
+    const optionToFocus = visibleOptionElements[visibleFocusIndex];
+    const focusIndex = this.optionElements.indexOf(optionToFocus);
+    this.activeIndex = focusIndex;
+    this.setFocusedOption();
+  }
+  selectOption(option, focusInputOnClose = false) {
+    var _a;
+    const value = (_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : '';
+    if (this.multiple) {
+      const isSelected = this.selectedOptions.includes(value);
+      if (isSelected) {
+        this.focusSelectedSibling(option);
+        this.change.emit({
+          selectedOptions: this.selectedOptions.filter(selectedValue => selectedValue !== value),
+        });
+      }
+      else if (value) {
+        this.change.emit({ selectedOptions: [...this.selectedOptions, value] });
+      }
+    }
+    else {
+      this.change.emit({ value });
+      this.closeDropdown();
+      if (focusInputOnClose)
+        this.focusInput();
+    }
+  }
+  scrollToActiveOption() {
+    const activeOption = this.optionElements[this.activeIndex];
+    activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
+  }
+  openDropdownWithoutActiveElement() {
+    if (this.readonly)
+      return;
+    this.activeIndex = undefined;
+    this.setActiveOption();
+    this.dropdownOpen = true;
+    this.scheduledAfterRender.push(resizeIframe);
+  }
+  openDropdownWithActiveElement(activeIndex) {
+    if (this.readonly)
+      return;
+    this.activeIndex = activeIndex;
+    this.dropdownOpen = true;
+    this.setActiveOption();
+    this.scheduledAfterRender.push(() => {
+      this.setFocusedOption();
+      this.scrollToActiveOption();
+      resizeIframe();
+    });
+  }
+  closeDropdown() {
+    this.dropdownOpen = false;
+    if (this.searchText) {
+      this.searchText = '';
+      this.input.emit({ query: '' });
+    }
+    this.scheduledAfterRender.push(resizeIframe);
+  }
+  toggleDropdown() {
+    if (this.disabled)
+      return;
+    if (this.dropdownOpen && !this.searchText) {
+      this.closeDropdown();
+    }
+    else {
+      this.openDropdownWithoutActiveElement();
+    }
+  }
+  adjustActiveOptionAndScroll(numToAdd) {
+    this.activeIndex += numToAdd;
+    this.setActiveOption();
+    this.setFocusedOption();
+    this.scrollToActiveOption();
+  }
+  setDefaultActiveElement() {
+    this.activeIndex = this.getDefaultActiveIndex();
+    this.setActiveOption();
+    this.setFocusedOption();
+  }
+  focusInput() {
+    var _a;
+    (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
+  }
+  getNextVisibleIndex(direction) {
+    let index = this.activeIndex + direction;
+    const { optionElements } = this;
+    while (index >= 0 && index <= optionElements.length - 1) {
+      const { display, visibility } = window.getComputedStyle(optionElements[index]);
+      if (display !== 'none' && visibility !== 'hidden') {
+        return index;
+      }
+      index = index + direction;
+    }
+    return -1;
+  }
+  setStatusMessage(message) {
+    clearTimeout(this.statusMessageTimer);
+    this.statusMessage = '';
+    this.statusMessageTimer = setTimeout(() => {
+      this.statusMessage = message;
+    }, 1000);
+  }
+  clearSelectedDisplay() {
+    var _a;
+    (_a = this.selectedDisplaySlot) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+  checkSelectedDisplay() {
+    let namedSlot = this.selectedDisplaySlot;
+    const { value, multiple, selectedOptions, multilineOptions, firstSelectedOptionElement, prioritizeSearch } = this;
+    const hasNoValue = !value && multiple && !selectedOptions.length;
+    if (prioritizeSearch || !multilineOptions || hasNoValue)
+      return this.clearSelectedDisplay();
+    if (!firstSelectedOptionElement || firstSelectedOptionElement.display)
+      return this.clearSelectedDisplay();
+    // Clone selected option and remove elements with hide-on-select attribute
+    const selectionClone = firstSelectedOptionElement.firstElementChild.cloneNode(true);
+    selectionClone.querySelectorAll('[hide-on-select]').forEach(element => element.remove());
+    if (namedSlot) {
+      const height = namedSlot.clientHeight === 0 ? 'auto' : `${namedSlot.clientHeight}px`;
+      namedSlot.style.setProperty('--comp-selected-display-height', height);
+      if (namedSlot.firstElementChild.outerHTML !== selectionClone.outerHTML) {
+        namedSlot.replaceChild(selectionClone, namedSlot.firstElementChild);
+      }
+    }
+    else {
+      namedSlot = document.createElement('div');
+      namedSlot.slot = '_selected-display';
+      namedSlot.appendChild(selectionClone);
+      this.hostElement.appendChild(namedSlot);
+    }
+    return namedSlot;
+  }
+  checkSelectedDisplayHeight() {
+    const { selectedDisplaySlot } = this;
+    if (!selectedDisplaySlot)
+      return;
+    selectedDisplaySlot.style.setProperty('--comp-selected-display-height', '44px');
+  }
+  /// DOM ///
+  renderCustomDisplay() {
+    const hasSelectedDisplay = this.checkSelectedDisplay();
+    if (!hasSelectedDisplay)
+      return;
+    this.checkSelectedDisplayHeight();
+    return (h("slot", { name: "_selected-display", slot: "custom-display" }));
+  }
+  render() {
+    const showAsPseudo = !this.searchable;
+    return (h("click-elsewhere", { class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, errors: (Array.isArray(this.errors) &&
+        this.errors.length > 0 &&
+        this.errors.map(error => loc(error))) ||
+        (this.invalid && ['tecton.element.select.invalid']) ||
+        [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, hideLabel: this.hideLabel, ariaExpanded: `${!!this.dropdownOpen}`, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: showAsPseudo, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.isComponentFocused ? 'primary' : undefined }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
+  }
+  optionsDropdown() {
+    const dropDirection = this.privatePopDirection === 'up' ? 'dropup' : '';
+    return (h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el), onKeyDown: this.dropdownKeydownHandler, onFocusout: this.dropdownFocusoutHandler }, this.multiple ? this.visibilityToggle() : '', h("div", { class: "q2-select-options", id: "dropdown", role: "listbox" }, h("slot", null))));
+  }
+  visibilityToggle() {
+    const selectedOptionsCount = this.selectedOptions.length;
+    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) }, loc('tecton.element.select.multiHeader.showing'), h("q2-btn", { class: `show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "aria-selected": !this.onlyShowingSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, label: loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, loc('tecton.element.select.multiHeader.all')), h("q2-btn", { class: `show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, "aria-selected": this.onlyShowingSelected || undefined, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [selectedOptionsCount]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "ariaLabel": ["ariaLabelObserver"],
+    "value": ["valueUpdated"],
+    "selectedOptions": ["selectedOptionsUpdated"],
+    "multilineOptions": ["multilineOptionsChanged"],
+    "dropdownOpen": ["dropdownOpenChanged"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-select", {
+    "label": [1537],
+    "hideLabel": [1540, "hide-label"],
+    "value": [1025],
+    "ariaLabel": [1537, "aria-label"],
+    "selectedOptions": [1032, "selected-options"],
+    "disabled": [516],
+    "readonly": [516],
+    "invalid": [516],
+    "errors": [16],
+    "multiple": [516],
+    "minRows": [2, "min-rows"],
+    "popDirection": [513, "pop-direction"],
+    "searchable": [516],
+    "multilineOptions": [516, "multiline-options"],
+    "optional": [516],
+    "dropdownOpen": [32],
+    "onlyShowingSelected": [32],
+    "activeOptionId": [32],
+    "searchText": [32],
+    "hasCustomDisplay": [32],
+    "inputFocused": [32],
+    "statusMessage": [32],
+    "prioritizeSearch": [32]
+  }, [[0, "keydown", "keydownHandler"], [0, "change", "onHostElementChange"], [0, "input", "onHostElementInput"], [0, "focus", "delegateFocus"], [0, "focusout", "handleFocusout"], [0, "click", "clickHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-select", "click-elsewhere", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Select$1);
+      }
+      break;
+    case "click-elsewhere":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "q2-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2Select = Q2Select$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2Select, defineCustomElement };