q2-tecton-elements 1.15.0 → 1.16.1

package/dist/collection/components/q2-select/index.js

@@ -1,5 +1,5 @@
 import { Component, Prop, Element, h, Listen, State, Event, Watch, } from '@stencil/core';
-import { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus, setPopProperties } from 'src/utils';
+import { createGuid, handleAriaLabel, isEventFromElement, isRelatedTargetWithinHost, loc, overrideFocus, resizeIframe, setPopProperties, } from 'src/utils';
 export class Q2Select {
   constructor() {
     this.selectedOptions = [];
@@ -15,6 +15,7 @@ export class Q2Select {
     this.searchText = '';
     this.hasCustomDisplay = false;
     this.inputFocused = false;
+    this.prioritizeSearch = false;
     this.scheduledAfterRender = [];
     this.keyStore = {
       queue: [],
@@ -82,7 +83,7 @@ export class Q2Select {
         setFocus(matched);
       }
     };
-    ////// ACTIONS ////////
+    /// Event handlers ///
     this.dropdownFocusoutHandler = (event) => {
       const { relatedTarget } = event;
       const isInDropdown = this.dropdownContainer.contains(relatedTarget);
@@ -105,11 +106,10 @@ export class Q2Select {
         case ' ':
         case 'Enter':
           event.preventDefault();
-          event.stopPropagation();
           const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
           if (!newOption || newOption.disabled)
             break;
-          this.selectOption(newOption.value, true);
+          this.selectOption(newOption, true);
           break;
         case 'ArrowUp':
           event.preventDefault();
@@ -163,7 +163,9 @@ export class Q2Select {
           const myOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
           if (!myOption || myOption.disabled)
             return;
-          this.selectOption(myOption.value);
+          if (myOption.selected)
+            return;
+          this.selectOption(myOption);
           break;
         case 'Esc':
         case 'Escape':
@@ -180,10 +182,11 @@ export class Q2Select {
           break;
       }
     };
+    /* tslint:enable:cyclomatic-complexity */
     this.inputKeydownHandler = (event) => {
       event.stopPropagation();
-      const { key } = event;
-      const { optionElements, dropdownOpen, searchable } = this;
+      const { key, shiftKey } = event;
+      const { optionElements, searchable } = this;
       switch (key) {
         case 'ArrowDown':
           event.preventDefault();
@@ -204,19 +207,14 @@ export class Q2Select {
           break;
         case 'Escape':
         case 'Esc':
-          if (dropdownOpen) {
-            this.closeDropdown();
-          }
-          else {
-            this.searchText = '';
-          }
+          this.closeDropdown();
           break;
         case 'Tab':
-          if (dropdownOpen) {
-            this.closeDropdown();
-          }
+          this.closeDropdown();
           break;
         default:
+          if (shiftKey)
+            break;
           if (searchable) {
             this.openDropdownWithoutActiveElement();
             break;
@@ -240,10 +238,11 @@ export class Q2Select {
       const didChangeText = inputValue !== eventValue;
       const shouldClearValue = !!this.value && didChangeText;
       if (shouldClearValue) {
-        this.selectOption('');
+        this.selectOption(null);
       }
       if (!this.dropdownOpen)
         this.openDropdownWithoutActiveElement();
+      this.prioritizeSearch = true;
       this.searchText = eventValue;
       this.input.emit({ query: eventValue });
     };
@@ -265,6 +264,11 @@ export class Q2Select {
         }
       }
     };
+    this.onCustomDisplayClick = (event) => {
+      event.stopPropagation();
+      this.focusInput();
+      this.toggleDropdown();
+    };
     this.showSelectedOptions = (event) => {
       event.stopImmediatePropagation();
       this.onlyShowingSelected = true;
@@ -279,17 +283,189 @@ export class Q2Select {
         optionElement._multiSelectHidden = false;
       });
     };
-    this.onCustomDisplayClick = (event) => {
-      event.stopPropagation();
-      this.focusInput();
-      this.toggleDropdown();
-    };
   }
-  resizeIframe() {
-    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
+  /// 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);
+    const firstSelected = this.optionElements.findIndex(element => element.selected && !element.hidden);
     if (firstSelected > -1)
       return firstSelected;
     const firstEnabled = this.optionElements.findIndex(element => !element.hidden);
@@ -328,84 +504,67 @@ export class Q2Select {
     option.focus();
   }
   calculateMultiSelectSelectedDisplay() {
-    if (this.selectedOptions.length === 1) {
-      const selectedOption = this.optionElements.find(option => {
-        return option.value === this.selectedOptions[0];
-      });
-      return ((selectedOption && selectedOption.display && loc(selectedOption.display)) ||
-        (selectedOption && selectedOption.value) ||
-        this.selectedOptions[0]);
-    }
-    else if (this.selectedOptions.length > 1) {
-      return loc('tecton.element.select.multiDisplay', [this.selectedOptions.length]);
-    }
-    else {
+    var _a;
+    const { firstSelectedOptionElement, firstSelectedValue, multilineOptions } = this;
+    if (!firstSelectedValue)
       return '';
-    }
-  }
-  calculateSingleSelectSelectedDisplay() {
-    const selectedOption = this.optionElements.find(option => {
-      return this.value === option.value;
-    });
-    return (selectedOption && selectedOption.display && loc(selectedOption.display)) || this.value || '';
-  }
-  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.hasCustomDisplay && !this.searchText) {
+    if (firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.display)
+      return loc(firstSelectedOptionElement.display);
+    if (multilineOptions && this.searchable)
+      return this.searchText;
+    if (multilineOptions)
       return '';
-    }
-    if (this.searchable && this.dropdownOpen && !this.value) {
-      // when dropdown is open search selects show typing
-      // when closed they display the same as non searchable select (what is selected)
-      return this.searchText || '';
-    }
-    return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();
+    return (_a = firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.value) !== null && _a !== void 0 ? _a : firstSelectedValue;
   }
-  get selectedOptionsCount() {
-    return this.selectedOptions.length;
-  }
-  get optionElements() {
-    return Array.from(this.hostElement.querySelectorAll('q2-option'));
-  }
-  get wrapperClasses() {
-    const dropdownOpenClass = (this.dropdownOpen && ' dropdown-open') || '';
-    const errorClass = Array.isArray(this.errors) && this.errors.length > 0 ? ' has-error' : '';
-    const focusClass = this.inputFocused ? ' is-focused' : '';
-    const searchableClass = this.searchable ? ' is-searchable' : '';
-    return `q2-select-container${dropdownOpenClass}${errorClass}${focusClass}${searchableClass}`;
+  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 = this.value === element.value;
-      element.optionId = `q2-select-${this.guid}-option-${index}`;
-      element.multiline = this.multilineOptions;
+      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 = this.selectedOptions.includes(element.value);
-      element._multiSelectHidden = this.onlyShowingSelected ? !element.selected : false;
-      element.optionId = `q2-select-${this.guid}-option-${index}`;
-      element.multiline = this.multilineOptions;
+      element.selected = selectedOptions.includes(element.value);
+      element._multiSelectHidden = onlyShowingSelected ? !element.selected : false;
+      element.optionId = `q2-select-${guid}-option-${index}`;
+      element.multiline = multilineOptions;
     });
   }
-  selectOption(value, focusInputOnClose = false) {
+  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 {
+      else if (value) {
         this.change.emit({ selectedOptions: [...this.selectedOptions, value] });
       }
     }
@@ -426,7 +585,7 @@ export class Q2Select {
     this.activeIndex = undefined;
     this.setActiveOption();
     this.dropdownOpen = true;
-    this.scheduledAfterRender.push(this.resizeIframe);
+    this.scheduledAfterRender.push(resizeIframe);
   }
   openDropdownWithActiveElement(activeIndex) {
     if (this.readonly)
@@ -437,7 +596,7 @@ export class Q2Select {
     this.scheduledAfterRender.push(() => {
       this.setFocusedOption();
       this.scrollToActiveOption();
-      this.resizeIframe();
+      resizeIframe();
     });
   }
   closeDropdown() {
@@ -446,24 +605,16 @@ export class Q2Select {
       this.searchText = '';
       this.input.emit({ query: '' });
     }
-    this.scheduledAfterRender.push(this.resizeIframe);
+    this.scheduledAfterRender.push(resizeIframe);
   }
   toggleDropdown() {
-    if (this.disabled) {
+    if (this.disabled)
       return;
-    }
-    if (this.searchable) {
-      if (!this.dropdownOpen) {
-        this.openDropdownWithoutActiveElement();
-      }
+    if (this.dropdownOpen && !this.searchText) {
+      this.closeDropdown();
     }
     else {
-      if (this.dropdownOpen) {
-        this.closeDropdown();
-      }
-      else {
-        this.openDropdownWithoutActiveElement();
-      }
+      this.openDropdownWithoutActiveElement();
     }
   }
   adjustActiveOptionAndScroll(numToAdd) {
@@ -483,8 +634,9 @@ export class Q2Select {
   }
   getNextVisibleIndex(direction) {
     let index = this.activeIndex + direction;
-    while (index >= 0 && index <= this.optionElements.length - 1) {
-      const { display, visibility } = window.getComputedStyle(this.optionElements[index]);
+    const { optionElements } = this;
+    while (index >= 0 && index <= optionElements.length - 1) {
+      const { display, visibility } = window.getComputedStyle(optionElements[index]);
       if (display !== 'none' && visibility !== 'hidden') {
         return index;
       }
@@ -492,95 +644,6 @@ export class Q2Select {
     }
     return -1;
   }
-  ////////// 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);
-  }
-  componentDidRender() {
-    setTimeout(() => {
-      this.scheduledAfterRender.forEach(fn => fn());
-      this.scheduledAfterRender = [];
-    }, 25);
-  }
-  disconnectedCallback() {
-    if (this.mutationObserver) {
-      this.mutationObserver.disconnect();
-      this.mutationObserver = null;
-    }
-  }
-  ////////// OBSERVERS //////////
-  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 = this.multilineOptions;
-    });
-  }
-  onHostElementChange(event) {
-    if (this.readonly)
-      return;
-    if (event.target === this.hostElement && !this.hostElement.onchange) {
-      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) {
-      const options = this.optionElements;
-      const query = event.detail.query.trim().toLowerCase();
-      let matchedCount = 0;
-      options.forEach(option => {
-        if (query === '') {
-          option.style.display = '';
-          option.hidden = false;
-        }
-        else {
-          const { display = '', innerText = '' } = option;
-          const matched = display.toLowerCase().includes(query) || innerText.toLowerCase().includes(query);
-          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) {
-    if (!isEventFromElement(event, this.hostElement))
-      return;
-    this.inputField.shadowRoot.querySelector('.input-field').focus();
-  }
   setStatusMessage(message) {
     clearTimeout(this.statusMessageTimer);
     this.statusMessage = '';
@@ -588,25 +651,59 @@ export class Q2Select {
       this.statusMessage = message;
     }, 1000);
   }
-  clickHandler(event) {
-    const selected = event.target.closest('q2-option');
-    if (!selected || (selected.hasAttribute('disabled') && selected.getAttribute('disabled') !== 'false')) {
-      return;
+  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);
     }
-    this.selectOption(selected.getAttribute('value'), true);
+    return namedSlot;
   }
-  /* tslint:enable:cyclomatic-complexity */
-  keydownHandler(event) {
-    this.inputKeydownHandler(event);
+  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: !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 }),
+          [], 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()));
@@ -619,10 +716,11 @@ export class Q2Select {
         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: `option-toggle 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: `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, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [this.selectedOptionsCount]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
+      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]))));
   }
   static get is() { return "q2-select"; }
   static get encapsulation() { return "shadow"; }
@@ -635,7 +733,7 @@ export class Q2Select {
   static get properties() { return {
     "label": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -652,7 +750,7 @@ export class Q2Select {
     },
     "hideLabel": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -686,7 +784,7 @@ export class Q2Select {
     },
     "ariaLabel": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -902,7 +1000,8 @@ export class Q2Select {
     "searchText": {},
     "hasCustomDisplay": {},
     "inputFocused": {},
-    "statusMessage": {}
+    "statusMessage": {},
+    "prioritizeSearch": {}
   }; }
   static get events() { return [{
       "method": "change",
@@ -948,8 +1047,17 @@ export class Q2Select {
     }, {
       "propName": "multilineOptions",
       "methodName": "multilineOptionsChanged"
+    }, {
+      "propName": "dropdownOpen",
+      "methodName": "dropdownOpenChanged"
     }]; }
   static get listeners() { return [{
+      "name": "keydown",
+      "method": "keydownHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
       "name": "change",
       "method": "onHostElementChange",
       "target": undefined,
@@ -968,14 +1076,14 @@ export class Q2Select {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "clickHandler",
+      "name": "focusout",
+      "method": "handleFocusout",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "keydown",
-      "method": "keydownHandler",
+      "name": "click",
+      "method": "clickHandler",
       "target": undefined,
       "capture": false,
       "passive": false