q2-tecton-elements 1.14.2 → 1.15.1-alpha.0

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6d5ed7cc.js';
-import { c as createGuid, s as setPopProperties, l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-14e81efa.js';
+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 './index-2ca8c93c.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-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}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--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(--tct-scale-3, var(--app-scale-3, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--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, 0 0 0 2px #33b4ff)}: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, #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 = class {
   constructor(hostRef) {
@@ -21,6 +21,7 @@ const Q2Select = class {
     this.searchText = '';
     this.hasCustomDisplay = false;
     this.inputFocused = false;
+    this.prioritizeSearch = false;
     this.scheduledAfterRender = [];
     this.keyStore = {
       queue: [],
@@ -88,7 +89,7 @@ const Q2Select = class {
         setFocus(matched);
       }
     };
-    ////// ACTIONS ////////
+    /// Event handlers ///
     this.dropdownFocusoutHandler = (event) => {
       const { relatedTarget } = event;
       const isInDropdown = this.dropdownContainer.contains(relatedTarget);
@@ -111,11 +112,10 @@ const Q2Select = class {
         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();
@@ -169,7 +169,9 @@ const Q2Select = class {
           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':
@@ -186,10 +188,11 @@ const Q2Select = class {
           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();
@@ -210,14 +213,14 @@ const Q2Select = class {
           break;
         case 'Escape':
         case 'Esc':
-          if (dropdownOpen) {
-            this.closeDropdown();
-          }
-          else {
-            this.searchText = '';
-          }
+          this.closeDropdown();
+          break;
+        case 'Tab':
+          this.closeDropdown();
           break;
         default:
+          if (shiftKey)
+            break;
           if (searchable) {
             this.openDropdownWithoutActiveElement();
             break;
@@ -241,10 +244,11 @@ const Q2Select = class {
       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 });
     };
@@ -266,6 +270,11 @@ const Q2Select = class {
         }
       }
     };
+    this.onCustomDisplayClick = (event) => {
+      event.stopPropagation();
+      this.focusInput();
+      this.toggleDropdown();
+    };
     this.showSelectedOptions = (event) => {
       event.stopImmediatePropagation();
       this.onlyShowingSelected = true;
@@ -280,17 +289,189 @@ const Q2Select = class {
         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);
@@ -329,84 +510,67 @@ const Q2Select = class {
     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();
-  }
-  get selectedOptionsCount() {
-    return this.selectedOptions.length;
+    return (_a = firstSelectedOptionElement === null || firstSelectedOptionElement === void 0 ? void 0 : firstSelectedOptionElement.value) !== null && _a !== void 0 ? _a : firstSelectedValue;
   }
-  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] });
       }
     }
@@ -427,7 +591,7 @@ const Q2Select = class {
     this.activeIndex = undefined;
     this.setActiveOption();
     this.dropdownOpen = true;
-    this.scheduledAfterRender.push(this.resizeIframe);
+    this.scheduledAfterRender.push(resizeIframe);
   }
   openDropdownWithActiveElement(activeIndex) {
     if (this.readonly)
@@ -438,7 +602,7 @@ const Q2Select = class {
     this.scheduledAfterRender.push(() => {
       this.setFocusedOption();
       this.scrollToActiveOption();
-      this.resizeIframe();
+      resizeIframe();
     });
   }
   closeDropdown() {
@@ -447,24 +611,16 @@ const Q2Select = class {
       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) {
@@ -484,8 +640,9 @@ const Q2Select = class {
   }
   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;
       }
@@ -493,94 +650,6 @@ const Q2Select = class {
     }
     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 = '';
-        }
-        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,37 +657,73 @@ const Q2Select = class {
       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);
+      }
     }
-    this.selectOption(selected.getAttribute('value'), true);
+    else {
+      namedSlot = document.createElement('div');
+      namedSlot.slot = '_selected-display';
+      namedSlot.appendChild(selectionClone);
+      this.hostElement.appendChild(namedSlot);
+    }
+    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 }), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
+        [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, 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() {
-    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]))));
+    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 getElement(this); }
   static get watchers() { return {
     "ariaLabel": ["ariaLabelObserver"],
     "value": ["valueUpdated"],
     "selectedOptions": ["selectedOptionsUpdated"],
-    "multilineOptions": ["multilineOptionsChanged"]
+    "multilineOptions": ["multilineOptionsChanged"],
+    "dropdownOpen": ["dropdownOpenChanged"]
   }; }
 };
 Q2Select.style = stylesCss;