q2-tecton-elements 1.28.2 → 1.29.0

package/dist/components/index14.js

@@ -1,193 +1,570 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as resizeIframe, w as waitForNextPaint } from './index15.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { o as overrideFocus, w as waitForNextPaint, n as nextPaint, a as isEventFromElement } from './index16.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}:host{display:block;width:100%}:host([align=right]){display:block;position:absolute;right:0;text-align:end;left:unset}.container{display:none;overflow:hidden;opacity:0;height:0;position:absolute;top:var(--tct-popover-top, var(--t-popover-top, initial));visibility:hidden;background-color:var(--tct-popover-background-color, var(--t-popover-background-color, var(--app-white, #ffffff)));color:var(--tct-popover-text-color, var(--t-popover-text-color, var(--t-text, #4d4d4d)));z-index:var(--tct-popover-z-index, var(--t-popover-z-index, 100));width:max-content;min-width:var(--tct-popover-min-width, var(--t-popover-min-width, 135px));box-shadow:var(--tct-popover-box-shadow, var(--t-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));text-align:start;left:0;transition:opacity var(--app-tween-1, 0.2s ease), max-height var(--app-tween-1, 0.2s ease);border-radius:var(--tct-popover-border-radius, var(--t-popover-border-radius, 0));max-height:var(--comp-pop-max-height);--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}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([block]) .container{left:unset;right:unset;width:100%;min-width:unset}:host([align=right]) .container{right:0;text-align:end;left:unset}.container :host([open]){display:block}:host([open]) .container.show{height:auto;overflow:auto;opacity:1;visibility:visible}.container.up{bottom:var(--comp-pop-offset)}click-elsewhere{position:relative;display:block}.content{height:auto}";
+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}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
 
-const Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.popoverStateChanged = createEvent(this, "popoverStateChanged", 7);
+    this.change = createEvent(this, "change", 7);
+    this.popoverState = createEvent(this, "popoverState", 7);
+    this.ready = createEvent(this, "ready", 3);
     this.scheduledAfterRender = [];
-    /// Helpers ///
-    this.viewPortChanged = () => {
-      if (!this.open)
-        return;
-      this.determinePopDirection();
+    this.keyStore = {
+      queue: [],
+      lastPressedAt: new Date(),
     };
-    this.direction = undefined;
+    this.searchAndFocus = (keyValue, shouldSelect) => {
+      // pseudo search in non-searchable select
+      const reorder = () => {
+        this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;
+        const list = this.allOptions.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.length = 0;
+        }
+        if (this.keyStore.queue.length !== 1 || this.keyStore.queue[0] !== keyValue) {
+          this.keyStore.queue.push(keyValue);
+        }
+        this.keyStore.lastPressedAt = now;
+      };
+      const searchIndex = (list) => {
+        const keyStr = this.keyStore.queue.join('');
+        return list.find(v => {
+          return (!v.element.disabled &&
+            v.element.display &&
+            (v.element.display.match(new RegExp(`^${keyStr}`, 'i')) ||
+              v.element.display.replace(/\s/g, '').match(new RegExp(`^${keyStr}`, 'i'))));
+        });
+      };
+      const setFocus = ({ index }) => {
+        if (this.multiple) {
+          // multiple: should open to make sure that which options are selected
+          this.openDropdownWithActiveElement(index);
+        }
+        else {
+          this.activeIndex = index;
+          if (shouldSelect)
+            this.selectOption(this.allOptions[index]);
+          else
+            this.setActiveElement(index);
+        }
+      };
+      buildQueue();
+      const matched = searchIndex(reorder());
+      if (matched) {
+        setFocus(matched);
+      }
+    };
+    /// Event Handlers ///
+    /* tslint:disable:cyclomatic-complexity */
+    this.externalKeydownHandler = (event) => {
+      event.stopPropagation();
+      const { activeIndex, customSearch, allOptions } = this;
+      const { key } = event;
+      let nextIndex;
+      switch (key) {
+        case ' ':
+          if (this.searchString) {
+            if (customSearch)
+              break;
+            this.searchOptions(key, true);
+            break;
+          }
+          else if (this.role === 'menu') {
+            this.activeIndex = 0;
+            this.openDropdownWithActiveElement(0);
+          }
+          else {
+            this.setDefaultActiveElement();
+          }
+          break;
+        case 'Enter':
+          if (this.role === 'menu') {
+            this.activeIndex = 0;
+            this.openDropdownWithActiveElement(0);
+          }
+          else {
+            this.setDefaultActiveElement();
+          }
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          this.activeIndex = 0;
+          nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(-1);
+          if (nextIndex === -1)
+            break;
+          this.openDropdownWithActiveElement(nextIndex);
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          this.activeIndex = 0;
+          nextIndex = !!this.selectedOptions.length ? this.getDefaultActiveIndex() : this.getNextVisibleIndex(0);
+          if (nextIndex === -1)
+            break;
+          this.openDropdownWithActiveElement(nextIndex);
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(allOptions.length - 1);
+          break;
+        case 'PageUp':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.max((activeIndex || 0) - 10, 0));
+          break;
+        case 'PageDown':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.min((activeIndex || 0) + 10, allOptions.length - 1));
+          break;
+        case 'Tab':
+          this.popoverState.emit({ open: false, action: 'close' });
+          break;
+        case 'Esc':
+        case 'Escape':
+          if (this.noSelect)
+            this.setActiveElement(null);
+          this.popoverState.emit({ open: false, action: 'close' });
+          break;
+        default:
+          if (customSearch)
+            break;
+          if (!key.match(/^[\w]$/))
+            break;
+          this.searchOptions(key, true);
+          break;
+      }
+    };
+    this.internalKeydownHandler = (event) => {
+      event.stopPropagation();
+      const { activeIndex, customSearch, allOptions } = this;
+      const { key, shiftKey } = event;
+      let newOption;
+      switch (key) {
+        case ' ':
+          if (this.searchString && !this.multiple) {
+            if (customSearch)
+              break;
+            this.searchOptions(key, false);
+            break;
+          }
+          event.preventDefault();
+          newOption = allOptions.find(element => element.active);
+          if (!newOption || newOption.disabled)
+            break;
+          this.selectOption(newOption);
+          break;
+        case 'Enter':
+          event.preventDefault();
+          newOption = allOptions.find(element => element.active);
+          if (!newOption || newOption.disabled)
+            break;
+          this.selectOption(newOption);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          const isFirstOptionActive = activeIndex === 0;
+          if (isFirstOptionActive)
+            break;
+          if (activeIndex === undefined) {
+            this.setDefaultActiveElement();
+            break;
+          }
+          else {
+            const nextIndex = this.getNextVisibleIndex(-1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+            break;
+          }
+        case 'ArrowDown':
+          event.preventDefault();
+          const isLastOptionActive = activeIndex === allOptions.length - 1;
+          if (isLastOptionActive)
+            break;
+          if (activeIndex === undefined) {
+            this.setDefaultActiveElement();
+            break;
+          }
+          else {
+            const nextIndex = this.getNextVisibleIndex(1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+            break;
+          }
+        case 'Home':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(allOptions.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, allOptions.length - 1));
+          break;
+        case 'Tab':
+          if (shiftKey)
+            break;
+          if (this.multiple && this.role === 'listbox')
+            break;
+          newOption = allOptions.find(element => element.active);
+          if (!newOption || newOption.disabled)
+            return;
+          this.selectOption(newOption);
+          break;
+        case 'Esc':
+        case 'Escape':
+          if (this.noSelect)
+            this.setActiveElement(null);
+          this.popoverState.emit({ open: false, action: 'close' });
+          break;
+        default:
+          if (customSearch)
+            break;
+          if (!key.match(/^[\w]$/))
+            break;
+          this.searchOptions(key, false);
+          break;
+      }
+    };
+    /* tslint:enable:cyclomatic-complexity */
+    this.focusoutHandler = (event) => {
+      const { relatedTarget } = event;
+      const isInDropdown = this.allOptions.includes(relatedTarget);
+      const isInLightDom = !isInDropdown && this.hostElement.contains(relatedTarget);
+      if (isInDropdown || isInLightDom) {
+        event.stopPropagation();
+      }
+    };
+    this.clickHandler = (event) => {
+      const target = event.target;
+      const option = target.closest('q2-option');
+      this.selectOption(option);
+    };
+    this.role = 'listbox';
+    this.customSearch = undefined;
+    this.noSelect = undefined;
     this.align = undefined;
-    this.open = undefined;
-    this.block = undefined;
-    this.minHeight = undefined;
-    this.controlElement = undefined;
-    this.currentDirection = undefined;
-    this.show = false;
-  }
-  /// Lifecycle hooks ///
+    this.selectedOptions = [];
+    this.multiple = undefined;
+    this.disabled = undefined;
+    this.showSelected = undefined;
+    this.type = undefined;
+    this.hasOptions = undefined;
+  }
+  /// LifeCycle Hooks ///
+  componentWillLoad() {
+    this.hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
+  }
   componentDidLoad() {
-    if (this.open)
-      this.determinePopDirection();
+    overrideFocus(this.hostElement);
+    this.checkOptions();
+    this.selectedOptionsUpdated();
+    this.ready.emit();
   }
   componentDidRender() {
-    setTimeout(() => {
-      this.scheduledAfterRender.forEach(fn => fn());
-      this.scheduledAfterRender = [];
-    }, 25);
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
   }
-  disconnectedCallback() {
-    this.removeViewportListeners();
+  /// Getters ///
+  get allContents() {
+    const rootSlot = this.getRootSlot(this.hostElement);
+    const acceptedTags = ['Q2-OPTGROUP', 'Q2-OPTION'];
+    return rootSlot.filter(element => acceptedTags.includes(element.tagName));
   }
-  /// Methods ///
-  async toggle() {
-    this.open = !this.open;
+  get allOptions() {
+    const contents = this.allContents;
+    const extractOptions = (elements) => {
+      return elements.reduce((acc, element) => {
+        if (element.tagName === 'Q2-OPTGROUP') {
+          return [...acc, ...extractOptions(Array.from(element.children))];
+        }
+        else if (element.tagName === 'Q2-OPTION') {
+          return [...acc, element];
+        }
+        else {
+          return acc;
+        }
+      }, []);
+    };
+    return extractOptions(contents);
   }
-  /// Watchers ///
-  openChanged(open) {
-    this.popoverStateChanged.emit({ open });
-    this.scheduledAfterRender.push(resizeIframe);
-    if (open) {
-      this.addViewportListeners();
-      this.determinePopDirection();
+  get allVisibleOptions() {
+    return this.allOptions.filter(option => !option.hidden && !option._multiSelectHidden && !option.disabled && !option.disabledGroup);
+  }
+  /// Helpers ///
+  async checkOptions() {
+    const { type } = this;
+    const options = await this.getOptions();
+    if (!type)
+      return;
+    const optionRole = type === 'menu' ? 'menuitem' : 'option';
+    options.forEach(option => {
+      option.role = optionRole;
+    });
+  }
+  getRootSlot(element) {
+    var _a;
+    const slot = element.querySelector('slot');
+    const assignedElements = (_a = slot === null || slot === void 0 ? void 0 : slot.assignedElements()) !== null && _a !== void 0 ? _a : Array.from(element.children);
+    const hasAnotherSlot = !!assignedElements.length && assignedElements[0].tagName === 'SLOT';
+    if (hasAnotherSlot) {
+      return this.getRootSlot(assignedElements[0]);
     }
     else {
-      this.removeViewportListeners();
-      // Reset currentDirection after close transition completes
-      this.containerElement.addEventListener('transitionend', () => {
-        if (this.open)
-          return;
-        this.currentDirection = undefined;
-        this.containerElement.style.removeProperty('display');
-        this.containerElement.style.removeProperty('--comp-pop-max-height');
-      }, { once: true });
-      this.show = false;
+      return assignedElements;
     }
   }
-  /// Listeners ///
-  popoverStateHandler(event) {
-    const { detail: { open }, } = event;
-    if (open === this.open)
+  scrollToActiveOption() {
+    const activeOption = this.allOptions[this.activeIndex];
+    activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
+  }
+  async openDropdownWithActiveElement(activeIndex) {
+    if (this.disabled)
       return;
-    this.open = open;
-    event.stopPropagation();
+    this.activeIndex = activeIndex;
+    this.popoverState.emit({ open: true, action: 'open' });
+    await waitForNextPaint();
+    this.setActiveOption();
+    await waitForNextPaint();
+    this.setFocusedOption();
+    this.scrollToActiveOption();
   }
-  addViewportListeners() {
-    // window.visualViewport.addEventListener('scroll', this.viewPortChanged);
-    window.visualViewport.addEventListener('resize', this.viewPortChanged);
+  getDefaultActiveIndex() {
+    const { allOptions } = this;
+    const firstSelected = allOptions.findIndex(element => element.selected);
+    if (firstSelected > -1)
+      return firstSelected;
+    const firstEnabled = allOptions.findIndex(element => !element.hidden);
+    if (firstEnabled > -1)
+      return firstEnabled;
+    return 0;
   }
-  removeViewportListeners() {
-    // window.visualViewport.removeEventListener('scroll', this.viewPortChanged);
-    window.visualViewport.removeEventListener('resize', this.viewPortChanged);
+  updateSingleOptionAttrs() {
+    var _a;
+    const { allOptions, selectedOptions } = this;
+    const selectedValue = ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) || undefined;
+    allOptions.forEach(element => {
+      element.selected = element.value === selectedValue;
+    });
   }
-  async setDirectionAndShow(direction) {
-    if (direction === 'up') {
-      this.determinePopOffset();
+  updateMultipleOptionAttrs() {
+    const { allOptions, selectedOptions } = this;
+    const selectedValues = selectedOptions.map(({ value }) => value);
+    allOptions.forEach(element => {
+      element.selected = selectedValues.includes(element.value);
+    });
+  }
+  setActiveOption() {
+    const activeIndex = this.activeIndex;
+    this.allOptions.forEach((element, elementIndex) => {
+      element.active = activeIndex === elementIndex;
+    });
+  }
+  setFocusedOption() {
+    const option = this.allOptions[this.activeIndex];
+    if (!option)
+      return;
+    const isHostElementVisible = !!this.hostElement.offsetParent;
+    if (isHostElementVisible)
+      option.focus();
+    else
+      nextPaint(() => option.focus());
+  }
+  getNextVisibleIndex(direction) {
+    const { allVisibleOptions, allOptions, activeIndex } = this;
+    const activeOption = allOptions[activeIndex];
+    const visibleActiveOptionIndex = allVisibleOptions.indexOf(activeOption);
+    let nextVisibleOptionIndex = visibleActiveOptionIndex + direction;
+    if (nextVisibleOptionIndex < 0) {
+      nextVisibleOptionIndex = allVisibleOptions.length - 1;
     }
-    this.currentDirection = direction;
-    this.show = true;
-  }
-  async determinePopDirection() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const { containerElement, contentElement, direction, controlElement, currentDirection } = this;
-    if (containerElement)
-      containerElement.style.maxHeight = null;
-    // If the direction is already set then use it, otherwise use the current direction
-    const currentOrStatedDirection = direction !== null && direction !== void 0 ? direction : currentDirection;
-    // Set the container to block so we can get the height
-    containerElement.style.setProperty('display', 'block');
-    await waitForNextPaint();
-    // Determine the dimensions of the control element
-    const { top: topOffset, height } = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {
-      top: 0,
-      height: 0,
+    else if (nextVisibleOptionIndex > allVisibleOptions.length - 1) {
+      nextVisibleOptionIndex = 0;
+    }
+    const nextVisibleOption = allVisibleOptions[nextVisibleOptionIndex];
+    return allOptions.indexOf(nextVisibleOption);
+  }
+  focusSelectedSibling(option) {
+    const { allVisibleOptions, allOptions } = this;
+    const hasNoSiblings = allVisibleOptions.length < 2;
+    if (hasNoSiblings) {
+      this.showSelected = false;
+      return;
+    }
+    const selectedOptionVisibleIndex = allVisibleOptions.indexOf(option);
+    const nextVisibleSiblingIndex = selectedOptionVisibleIndex
+      ? selectedOptionVisibleIndex - 1
+      : selectedOptionVisibleIndex + 1;
+    const nextVisibleSibling = allVisibleOptions[nextVisibleSiblingIndex];
+    const nextSiblingIndex = allOptions.indexOf(nextVisibleSibling);
+    this.activeIndex = nextSiblingIndex;
+    this.setFocusedOption();
+    this.scheduledAfterRender.push(() => {
+      option._multiSelectHidden = !option.selected;
+    });
+  }
+  selectOption(selectedOption) {
+    const { multiple, noSelect, showSelected } = this;
+    if (!selectedOption || selectedOption.disabled || selectedOption.disabledGroup)
+      return;
+    const selectedValue = selectedOption.value;
+    const valueObject = {
+      value: selectedValue,
+      display: selectedOption.display || selectedOption.innerText.trim(),
     };
-    const contentHeight = contentElement.clientHeight;
-    const scrollY = ((_c = (_b = window.Tecton) === null || _b === void 0 ? void 0 : _b.platformDimensions) === null || _c === void 0 ? void 0 : _c.scrollY) ||
-      ((_d = window.visualViewport) === null || _d === void 0 ? void 0 : _d.offsetTop) || // Only Android Chrome provides this which we need when scrolled
-      0;
-    const innerHeight = ((_f = (_e = window.Tecton) === null || _e === void 0 ? void 0 : _e.platformDimensions) === null || _f === void 0 ? void 0 : _f.innerHeight) || ((_g = window.visualViewport) === null || _g === void 0 ? void 0 : _g.height) || window.innerHeight;
-    const bottomOffset = scrollY + innerHeight - topOffset - height;
-    const canShowFullSizeBelow = bottomOffset > contentHeight;
-    const canShowFullSizeAbove = contentHeight <= topOffset;
-    let determinedDirection;
-    // Show the full-size popover below or above if it will fit
-    if (currentOrStatedDirection === 'down' && canShowFullSizeBelow)
-      return this.setDirectionAndShow('down');
-    else if (currentOrStatedDirection === 'up' && canShowFullSizeAbove)
-      return this.setDirectionAndShow('up');
-    else if (currentOrStatedDirection === undefined && canShowFullSizeBelow)
-      determinedDirection = 'down';
-    else if (currentOrStatedDirection === undefined && canShowFullSizeAbove)
-      determinedDirection = 'up';
-    if (determinedDirection)
-      return this.setDirectionAndShow(determinedDirection);
-    // If full size will not fit then make it as tall as possible
-    const { minHeight = 150 } = this;
-    const displayBuffer = 5;
-    const canShowMinHeightBelow = bottomOffset >= minHeight + displayBuffer;
-    let maxHeight;
-    if (currentOrStatedDirection === 'down') {
-      maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
-      determinedDirection = 'down';
+    let values = [];
+    if (multiple) {
+      const { selectedOptions } = this;
+      const isAlreadySelected = selectedOptions.find(option => option.value === selectedValue);
+      if (isAlreadySelected) {
+        values = selectedOptions.filter(({ value }) => value !== selectedValue);
+      }
+      else {
+        values = [...selectedOptions, valueObject];
+      }
+      if (showSelected)
+        this.focusSelectedSibling(selectedOption);
+    }
+    else {
+      values = [valueObject];
+    }
+    if (noSelect)
+      this.setActiveElement(null);
+    else
+      this.selectedOptions = values;
+    this.change.emit({ value: selectedValue, values });
+    if (multiple)
+      return;
+    this.popoverState.emit({ open: false, action: 'select' });
+  }
+  adjustActiveOptionAndScroll(numToAdd) {
+    this.activeIndex += numToAdd;
+    this.setActiveOption();
+    this.setFocusedOption();
+    this.scrollToActiveOption();
+  }
+  resetTimer() {
+    if (this.searchStringTimer) {
+      clearTimeout(this.searchStringTimer);
+    }
+    this.searchStringTimer = window.setTimeout(() => {
+      this.searchString = null;
+    }, 2000);
+  }
+  searchOptions(key, shouldSelect) {
+    this.searchString = key;
+    this.searchAndFocus(key, shouldSelect);
+  }
+  /// Watchers ///
+  showSelectedUpdated(showSelected) {
+    if (showSelected && this.selectedOptions.length === 0) {
+      this.showSelected = false;
+      return;
+    }
+    this.allOptions.forEach(option => (option._multiSelectHidden = showSelected ? !option.selected : false));
+  }
+  selectedOptionsUpdated() {
+    if (this.multiple) {
+      this.updateMultipleOptionAttrs();
     }
-    else if (currentOrStatedDirection === 'up') {
-      maxHeight = Math.max(topOffset - displayBuffer, minHeight);
-      determinedDirection = 'up';
+    else {
+      this.updateSingleOptionAttrs();
     }
-    else if (canShowMinHeightBelow) {
-      maxHeight = Math.max(bottomOffset - displayBuffer, minHeight);
-      determinedDirection = 'down';
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.popoverState.emit({ open: true, action: 'open' });
+    const { activeIndex } = this;
+    if (typeof activeIndex === 'number' && activeIndex > -1) {
+      this.setActiveOption();
+      this.setFocusedOption();
     }
     else {
-      maxHeight = Math.max(topOffset - scrollY - displayBuffer, minHeight);
-      determinedDirection = 'up';
+      this.setDefaultActiveElement();
     }
-    containerElement.style.setProperty('--comp-pop-max-height', `${maxHeight}px`);
-    return this.setDirectionAndShow(determinedDirection);
   }
-  determinePopOffset() {
-    var _a;
-    const { controlElement, containerElement } = this;
-    const dropdownHeight = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 0;
-    containerElement.style.setProperty('--comp-pop-offset', `${dropdownHeight}px`);
+  handleClick(event) {
+    event.stopPropagation();
+  }
+  /// Public Methods ///
+  async setDefaultActiveElement() {
+    this.activeIndex = this.getDefaultActiveIndex();
+    this.setActiveOption();
+    this.setFocusedOption();
+  }
+  async setActiveElement(index) {
+    this.activeIndex = index;
+    this.setActiveOption();
+    this.setFocusedOption();
+  }
+  async handleExternalKeydown(event) {
+    this.externalKeydownHandler(event);
+  }
+  async getContents() {
+    return this.allContents;
+  }
+  async getOptions() {
+    return this.allOptions;
   }
   /// DOM ///
   render() {
-    const containerClasses = ['container', this.currentDirection];
-    if (this.show)
-      containerClasses.push('show');
-    return (h("div", { ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer" }, h("div", { ref: el => (this.contentElement = el), class: "content" }, h("slot", null))));
+    return (h(Host, null, h("div", { class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { class: "options", role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", null)))));
   }
   get hostElement() { return this; }
   static get watchers() { return {
-    "open": ["openChanged"]
+    "showSelected": ["showSelectedUpdated"],
+    "selectedOptions": ["selectedOptionsUpdated"]
   }; }
   static get style() { return stylesCss; }
-}, [1, "q2-popover", {
-    "direction": [513],
+}, [1, "q2-option-list", {
+    "role": [513],
+    "customSearch": [516, "custom-search"],
+    "noSelect": [516, "no-select"],
     "align": [513],
-    "open": [1540],
-    "block": [516],
-    "minHeight": [2, "min-height"],
-    "controlElement": [16],
-    "currentDirection": [32],
-    "show": [32],
-    "toggle": [64]
-  }, [[0, "popoverState", "popoverStateHandler"]]]);
+    "selectedOptions": [1040],
+    "multiple": [516],
+    "disabled": [516],
+    "showSelected": [1540, "show-selected"],
+    "type": [1],
+    "hasOptions": [32],
+    "setDefaultActiveElement": [64],
+    "setActiveElement": [64],
+    "handleExternalKeydown": [64],
+    "getContents": [64],
+    "getOptions": [64]
+  }, [[0, "focus", "delegateFocus"], [0, "click", "handleClick"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["q2-popover"];
+  const components = ["q2-option-list"];
   components.forEach(tagName => { switch (tagName) {
-    case "q2-popover":
+    case "q2-option-list":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, Q2Popover);
+        customElements.define(tagName, Q2OptionList);
       }
       break;
   } });
 }
 defineCustomElement();
 
-export { Q2Popover as Q, defineCustomElement as d };
+export { Q2OptionList as Q, defineCustomElement as d };