q2-tecton-elements 1.23.0-alpha.0 → 1.24.0

package/dist/components/index13.js

@@ -1,602 +1,517 @@
-import { h } from '@stencil/core/internal/client';
-
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire();
-		}
-	}, fn(module, module.exports), module.exports;
-}
-
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
-
-var smoothscroll = createCommonjsModule(function (module, exports) {
-/* smoothscroll v0.4.4 - 2019 - Dustan Kasten, Jeremias Menichelli - MIT License */
-(function () {
-
-  // polyfill
-  function polyfill() {
-    // aliases
-    var w = window;
-    var d = document;
-
-    // return if scroll behavior is supported and polyfill is not forced
-    if (
-      'scrollBehavior' in d.documentElement.style &&
-      w.__forceSmoothScrollPolyfill__ !== true
-    ) {
-      return;
-    }
-
-    // globals
-    var Element = w.HTMLElement || w.Element;
-    var SCROLL_TIME = 468;
-
-    // object gathering original scroll methods
-    var original = {
-      scroll: w.scroll || w.scrollTo,
-      scrollBy: w.scrollBy,
-      elementScroll: Element.prototype.scroll || scrollElement,
-      scrollIntoView: Element.prototype.scrollIntoView
-    };
-
-    // define timing method
-    var now =
-      w.performance && w.performance.now
-        ? w.performance.now.bind(w.performance)
-        : Date.now;
-
-    /**
-     * indicates if a the current browser is made by Microsoft
-     * @method isMicrosoftBrowser
-     * @param {String} userAgent
-     * @returns {Boolean}
-     */
-    function isMicrosoftBrowser(userAgent) {
-      var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/'];
-
-      return new RegExp(userAgentPatterns.join('|')).test(userAgent);
-    }
-
-    /*
-     * IE has rounding bug rounding down clientHeight and clientWidth and
-     * rounding up scrollHeight and scrollWidth causing false positives
-     * on hasScrollableSpace
-     */
-    var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;
-
-    /**
-     * changes scroll position inside an element
-     * @method scrollElement
-     * @param {Number} x
-     * @param {Number} y
-     * @returns {undefined}
-     */
-    function scrollElement(x, y) {
-      this.scrollLeft = x;
-      this.scrollTop = y;
-    }
-
-    /**
-     * returns result of applying ease math function to a number
-     * @method ease
-     * @param {Number} k
-     * @returns {Number}
-     */
-    function ease(k) {
-      return 0.5 * (1 - Math.cos(Math.PI * k));
-    }
-
-    /**
-     * indicates if a smooth behavior should be applied
-     * @method shouldBailOut
-     * @param {Number|Object} firstArg
-     * @returns {Boolean}
-     */
-    function shouldBailOut(firstArg) {
-      if (
-        firstArg === null ||
-        typeof firstArg !== 'object' ||
-        firstArg.behavior === undefined ||
-        firstArg.behavior === 'auto' ||
-        firstArg.behavior === 'instant'
-      ) {
-        // first argument is not an object/null
-        // or behavior is auto, instant or undefined
-        return true;
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { o as overrideFocus, n as nextPaint, i as isEventFromElement } from './index15.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{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 Q2OptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    this.popoverState = createEvent(this, "popoverState", 7);
+    this.ready = createEvent(this, "ready", 3);
+    this.scheduledAfterRender = [];
+    /// 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;
+          }
+          this.setDefaultActiveElement();
+          break;
+        case 'Enter':
+          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;
       }
-
-      if (typeof firstArg === 'object' && firstArg.behavior === 'smooth') {
-        // first argument is an object and behavior is smooth
-        return false;
-      }
-
-      // throw error when behavior is not supported
-      throw new TypeError(
-        'behavior member of ScrollOptions ' +
-          firstArg.behavior +
-          ' is not a valid value for enumeration ScrollBehavior.'
-      );
-    }
-
-    /**
-     * indicates if an element has scrollable space in the provided axis
-     * @method hasScrollableSpace
-     * @param {Node} el
-     * @param {String} axis
-     * @returns {Boolean}
-     */
-    function hasScrollableSpace(el, axis) {
-      if (axis === 'Y') {
-        return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight;
+    };
+    this.internalKeydownHandler = (event) => {
+      event.stopPropagation();
+      const { activeIndex, customSearch, allOptions } = this;
+      const { key, shiftKey } = event;
+      let newOption;
+      switch (key) {
+        case ' ':
+          if (this.searchString) {
+            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;
+          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;
       }
-
-      if (axis === 'X') {
-        return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth;
+    };
+    /* 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.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() {
+    overrideFocus(this.hostElement);
+    this.checkOptions();
+    this.selectedOptionsUpdated();
+    this.ready.emit();
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  /// Getters ///
+  get allContents() {
+    const rootSlot = this.getRootSlot(this.hostElement);
+    const acceptedTags = ['Q2-OPTGROUP', 'Q2-OPTION'];
+    return rootSlot.filter(element => acceptedTags.includes(element.tagName));
+  }
+  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);
+  }
+  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]);
     }
-
-    /**
-     * indicates if an element has a scrollable overflow property in the axis
-     * @method canOverflow
-     * @param {Node} el
-     * @param {String} axis
-     * @returns {Boolean}
-     */
-    function canOverflow(el, axis) {
-      var overflowValue = w.getComputedStyle(el, null)['overflow' + axis];
-
-      return overflowValue === 'auto' || overflowValue === 'scroll';
-    }
-
-    /**
-     * indicates if an element can be scrolled in either axis
-     * @method isScrollable
-     * @param {Node} el
-     * @param {String} axis
-     * @returns {Boolean}
-     */
-    function isScrollable(el) {
-      var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y');
-      var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
-
-      return isScrollableY || isScrollableX;
+    else {
+      return assignedElements;
     }
-
-    /**
-     * finds scrollable parent of an element
-     * @method findScrollableParent
-     * @param {Node} el
-     * @returns {Node} el
-     */
-    function findScrollableParent(el) {
-      while (el !== d.body && isScrollable(el) === false) {
-        el = el.parentNode || el.host;
-      }
-
-      return el;
+  }
+  scrollToActiveOption() {
+    const activeOption = this.allOptions[this.activeIndex];
+    activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
+  }
+  openDropdownWithActiveElement(activeIndex) {
+    if (this.disabled)
+      return;
+    this.activeIndex = activeIndex;
+    this.popoverState.emit({ open: true, action: 'open' });
+    this.setActiveOption();
+    this.setFocusedOption();
+    nextPaint(() => {
+      this.scrollToActiveOption();
+    });
+  }
+  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;
+  }
+  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;
+    });
+  }
+  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;
     }
-
-    /**
-     * self invoked function that, given a context, steps through scrolling
-     * @method step
-     * @param {Object} context
-     * @returns {undefined}
-     */
-    function step(context) {
-      var time = now();
-      var value;
-      var currentX;
-      var currentY;
-      var elapsed = (time - context.startTime) / SCROLL_TIME;
-
-      // avoid elapsed times higher than one
-      elapsed = elapsed > 1 ? 1 : elapsed;
-
-      // apply easing to elapsed time
-      value = ease(elapsed);
-
-      currentX = context.startX + (context.x - context.startX) * value;
-      currentY = context.startY + (context.y - context.startY) * value;
-
-      context.method.call(context.scrollable, currentX, currentY);
-
-      // scroll more if we have not reached our destination
-      if (currentX !== context.x || currentY !== context.y) {
-        w.requestAnimationFrame(step.bind(w, context));
-      }
+    else if (nextVisibleOptionIndex > allVisibleOptions.length - 1) {
+      nextVisibleOptionIndex = 0;
     }
-
-    /**
-     * scrolls window or element with a smooth behavior
-     * @method smoothScroll
-     * @param {Object|Node} el
-     * @param {Number} x
-     * @param {Number} y
-     * @returns {undefined}
-     */
-    function smoothScroll(el, x, y) {
-      var scrollable;
-      var startX;
-      var startY;
-      var method;
-      var startTime = now();
-
-      // define scroll context
-      if (el === d.body) {
-        scrollable = w;
-        startX = w.scrollX || w.pageXOffset;
-        startY = w.scrollY || w.pageYOffset;
-        method = original.scroll;
-      } else {
-        scrollable = el;
-        startX = el.scrollLeft;
-        startY = el.scrollTop;
-        method = scrollElement;
-      }
-
-      // scroll looping over a frame
-      step({
-        scrollable: scrollable,
-        method: method,
-        startTime: startTime,
-        startX: startX,
-        startY: startY,
-        x: x,
-        y: y
-      });
+    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;
     }
-
-    // ORIGINAL METHODS OVERRIDES
-    // w.scroll and w.scrollTo
-    w.scroll = w.scrollTo = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        original.scroll.call(
-          w,
-          arguments[0].left !== undefined
-            ? arguments[0].left
-            : typeof arguments[0] !== 'object'
-              ? arguments[0]
-              : w.scrollX || w.pageXOffset,
-          // use top prop, second argument if present or fallback to scrollY
-          arguments[0].top !== undefined
-            ? arguments[0].top
-            : arguments[1] !== undefined
-              ? arguments[1]
-              : w.scrollY || w.pageYOffset
-        );
-
-        return;
-      }
-
-      // LET THE SMOOTHNESS BEGIN!
-      smoothScroll.call(
-        w,
-        d.body,
-        arguments[0].left !== undefined
-          ? ~~arguments[0].left
-          : w.scrollX || w.pageXOffset,
-        arguments[0].top !== undefined
-          ? ~~arguments[0].top
-          : w.scrollY || w.pageYOffset
-      );
-    };
-
-    // w.scrollBy
-    w.scrollBy = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0])) {
-        original.scrollBy.call(
-          w,
-          arguments[0].left !== undefined
-            ? arguments[0].left
-            : typeof arguments[0] !== 'object' ? arguments[0] : 0,
-          arguments[0].top !== undefined
-            ? arguments[0].top
-            : arguments[1] !== undefined ? arguments[1] : 0
-        );
-
-        return;
-      }
-
-      // LET THE SMOOTHNESS BEGIN!
-      smoothScroll.call(
-        w,
-        d.body,
-        ~~arguments[0].left + (w.scrollX || w.pageXOffset),
-        ~~arguments[0].top + (w.scrollY || w.pageYOffset)
-      );
-    };
-
-    // Element.prototype.scroll and Element.prototype.scrollTo
-    Element.prototype.scroll = Element.prototype.scrollTo = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        // if one number is passed, throw error to match Firefox implementation
-        if (typeof arguments[0] === 'number' && arguments[1] === undefined) {
-          throw new SyntaxError('Value could not be converted');
-        }
-
-        original.elementScroll.call(
-          this,
-          // use left prop, first number argument or fallback to scrollLeft
-          arguments[0].left !== undefined
-            ? ~~arguments[0].left
-            : typeof arguments[0] !== 'object' ? ~~arguments[0] : this.scrollLeft,
-          // use top prop, second argument or fallback to scrollTop
-          arguments[0].top !== undefined
-            ? ~~arguments[0].top
-            : arguments[1] !== undefined ? ~~arguments[1] : this.scrollTop
-        );
-
-        return;
-      }
-
-      var left = arguments[0].left;
-      var top = arguments[0].top;
-
-      // LET THE SMOOTHNESS BEGIN!
-      smoothScroll.call(
-        this,
-        this,
-        typeof left === 'undefined' ? this.scrollLeft : ~~left,
-        typeof top === 'undefined' ? this.scrollTop : ~~top
-      );
-    };
-
-    // Element.prototype.scrollBy
-    Element.prototype.scrollBy = function() {
-      // avoid action when no arguments are passed
-      if (arguments[0] === undefined) {
-        return;
-      }
-
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        original.elementScroll.call(
-          this,
-          arguments[0].left !== undefined
-            ? ~~arguments[0].left + this.scrollLeft
-            : ~~arguments[0] + this.scrollLeft,
-          arguments[0].top !== undefined
-            ? ~~arguments[0].top + this.scrollTop
-            : ~~arguments[1] + this.scrollTop
-        );
-
-        return;
-      }
-
-      this.scroll({
-        left: ~~arguments[0].left + this.scrollLeft,
-        top: ~~arguments[0].top + this.scrollTop,
-        behavior: arguments[0].behavior
-      });
+    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(),
     };
-
-    // Element.prototype.scrollIntoView
-    Element.prototype.scrollIntoView = function() {
-      // avoid smooth behavior if not required
-      if (shouldBailOut(arguments[0]) === true) {
-        original.scrollIntoView.call(
-          this,
-          arguments[0] === undefined ? true : arguments[0]
-        );
-
-        return;
+    let values = [];
+    if (multiple) {
+      const { selectedOptions } = this;
+      const isAlreadySelected = selectedOptions.find(option => option.value === selectedValue);
+      if (isAlreadySelected) {
+        values = selectedOptions.filter(({ value }) => value !== selectedValue);
       }
-
-      // LET THE SMOOTHNESS BEGIN!
-      var scrollableParent = findScrollableParent(this);
-      var parentRects = scrollableParent.getBoundingClientRect();
-      var clientRects = this.getBoundingClientRect();
-
-      if (scrollableParent !== d.body) {
-        // reveal element inside parent
-        smoothScroll.call(
-          this,
-          scrollableParent,
-          scrollableParent.scrollLeft + clientRects.left - parentRects.left,
-          scrollableParent.scrollTop + clientRects.top - parentRects.top
-        );
-
-        // reveal parent in viewport unless is fixed
-        if (w.getComputedStyle(scrollableParent).position !== 'fixed') {
-          w.scrollBy({
-            left: parentRects.left,
-            top: parentRects.top,
-            behavior: 'smooth'
-          });
-        }
-      } else {
-        // reveal element in viewport
-        w.scrollBy({
-          left: clientRects.left,
-          top: clientRects.top,
-          behavior: 'smooth'
-        });
+      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' });
   }
-
-  {
-    // commonjs
-    module.exports = { polyfill: polyfill };
+  adjustActiveOptionAndScroll(numToAdd) {
+    this.activeIndex += numToAdd;
+    this.setActiveOption();
+    this.setFocusedOption();
+    this.scrollToActiveOption();
   }
-
-}());
-});
-
-function isRelatedTargetWithinHost(event, element) {
-  return event.relatedTarget !== element && !element.contains(event.relatedTarget);
-}
-function isEventFromElement(event, element) {
-  var _a;
-  return ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) === element;
-}
-function overrideFocus(hostElement) {
-  hostElement.focus = () => hostElement === null || hostElement === void 0 ? void 0 : hostElement.dispatchEvent(new FocusEvent('focus', { bubbles: false }));
-}
-function addSmoothScrollPolyfill() {
-  if (!isSafari())
-    return false;
-  smoothscroll.polyfill();
-  return (window.__forceSmoothScrollPolyfill__ = true);
-}
-function isFirefox() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  return userAgent.includes('firefox');
-}
-function isTouchDevice() {
-  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-}
-function isSafari() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  return userAgent.includes('safari') && !userAgent.includes('chrome');
-}
-let guid = 1000;
-function createGuid() {
-  return guid++;
-}
-function nextPaint(fn, execute) {
-  if (execute)
-    fn();
-  else
-    requestAnimationFrame(() => nextPaint(fn, true));
-}
-function loc(key, subs) {
-  var _a, _b, _c;
-  if (!key)
-    return '';
-  if (((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.noString) === true) {
-    return key;
-  }
-  return (_c = (_b = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _b === void 0 ? void 0 : _b.loc(key, subs)) !== null && _c !== void 0 ? _c : key;
-}
-function labelDOM(target) {
-  const { label, hideLabel } = target;
-  if (!label || hideLabel)
-    return;
-  let helpText = '';
-  if (target.optional) {
-    helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'));
+  resetTimer() {
+    if (this.searchStringTimer) {
+      clearTimeout(this.searchStringTimer);
+    }
+    this.searchStringTimer = window.setTimeout(() => {
+      this.searchString = null;
+    }, 2000);
   }
-  if (target.readonly) {
-    helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.readonly'));
+  searchOptions(key, shouldSelect) {
+    this.resetTimer();
+    let searchString = this.searchString ? `${this.searchString}${key}` : key;
+    searchString = searchString.replace(/[^\w\s]/gi, '');
+    this.searchString = searchString;
+    const searchRegEx = new RegExp(`^${searchString}`, 'i');
+    const { allOptions } = this;
+    const foundIndex = allOptions.findIndex(option => option.value === searchString || option.textContent.trim().match(searchRegEx));
+    if (foundIndex === -1)
+      return;
+    if (shouldSelect)
+      this.selectOption(this.allOptions[foundIndex]);
+    else
+      this.setActiveElement(foundIndex);
   }
-  return (h("label", { htmlFor: target.inputId, class: target.readonly ? 'readonly-field' : '' },
-    loc(target.label),
-    helpText));
-}
-function handleAriaLabel(target) {
-  const { ariaLabel } = target;
-  if (!ariaLabel)
-    return;
-  if ('hideLabel' in target)
-    target.hideLabel = true;
-  target.label = loc(ariaLabel);
-  target.ariaLabel = undefined;
-}
-function messagesDOM(target) {
-  const type = target.hasError ? 'danger' : 'info';
-  return (h("div", { class: "messages-container" },
-    h("q2-message", { appearance: "minimal", description: true, type: type },
-      h("ul", { id: target.inputDescribedBy }, target.messages.map(message => (h("li", null, loc(message))))))));
-}
-function setMessageHeight(target) {
-  const messageContainer = target.hostElement.shadowRoot.querySelector('.messages-container');
-  const q2Message = messageContainer.querySelector('q2-message');
-  nextPaint(() => {
-    const height = target.showMessages && target.hasFocus ? q2Message.getBoundingClientRect().height : 0;
-    if (messageContainer.style.getPropertyValue('height') === `${height}px`)
+  /// Watchers ///
+  showSelectedUpdated(showSelected) {
+    if (showSelected && this.selectedOptions.length === 0) {
+      this.showSelected = false;
       return;
-    if (height === 0) {
-      q2Message.classList.add('invisible');
-      messageContainer.style.removeProperty('height');
+    }
+    this.allOptions.forEach(option => (option._multiSelectHidden = showSelected ? !option.selected : false));
+  }
+  selectedOptionsUpdated() {
+    if (this.multiple) {
+      this.updateMultipleOptionAttrs();
     }
     else {
-      q2Message.classList.remove('invisible');
-      messageContainer.style.setProperty('height', `${height}px`);
+      this.updateSingleOptionAttrs();
     }
-  });
-}
-function setPopProperties(target) {
-  const { dropdownContainer, popDirection } = target;
-  if (dropdownContainer) {
-    dropdownContainer.style.maxHeight = null;
-  }
-  if (popDirection) {
-    return (target.privatePopDirection = popDirection);
-  }
-  const controlElement = target.inputField || target.controlElement;
-  const minPopHeight = target.minPopHeight || null;
-  // Add sizable so that we can capture the height
-  dropdownContainer.classList.add('sizable');
-  const dropdownHeight = dropdownContainer.getBoundingClientRect().height;
-  dropdownContainer.classList.remove('sizable');
-  const { top: topOffset, height } = controlElement.getBoundingClientRect();
-  const bottomOffset = window.innerHeight - topOffset - height;
-  const canShowFullSizeBelow = bottomOffset > dropdownHeight;
-  const canShowFullSizeAbove = dropdownHeight <= topOffset;
-  // Prefer full size above or below
-  if (canShowFullSizeBelow) {
-    return (target.privatePopDirection = 'down');
-  }
-  else if (canShowFullSizeAbove || !minPopHeight) {
-    determinePopOffset(target);
-    return (target.privatePopDirection = 'up');
-  }
-  // If full size will not fit and minHeight is set, then make as tall as possible
-  const displayBuffer = 5;
-  const canShowSmallBelow = bottomOffset >= minPopHeight + displayBuffer;
-  if (canShowSmallBelow) {
-    const maxBelowHeight = Math.max(bottomOffset - displayBuffer, minPopHeight);
-    dropdownContainer.style.maxHeight = `${maxBelowHeight}px`;
-    return (target.privatePopDirection = 'down');
-  }
-  else {
-    const maxAboveHeight = Math.max(topOffset, minPopHeight);
-    dropdownContainer.style.maxHeight = `${maxAboveHeight}px`;
-    determinePopOffset(target);
-    return (target.privatePopDirection = 'up');
   }
-}
-const determinePopOffset = ({ dropdownContainer, inputField }) => {
-  var _a, _b;
-  if (!inputField)
+  /// 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 {
+      this.setDefaultActiveElement();
+    }
+  }
+  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() {
+    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 {
+    "showSelected": ["showSelectedUpdated"],
+    "selectedOptions": ["selectedOptionsUpdated"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-option-list", {
+    "role": [513],
+    "customSearch": [516, "custom-search"],
+    "noSelect": [516, "no-select"],
+    "align": [513],
+    "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 inputFieldHeight = (_b = (_a = inputField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input-field')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height;
-  dropdownContainer.style.setProperty('--comp-dropup-offset', `${inputFieldHeight}px`);
-};
-const resizeIframe = () => {
-  var _a, _b;
-  return (_b = (_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
-};
-// Handling color attribute (deprecated)
-const handleColor = (target) => {
-  if (!target.intent && ['primary', 'secondary'].includes(target.color)) {
-    target.intent = `workflow-${target.color}`;
-    target.color = undefined;
-  }
-};
+  }
+  const components = ["q2-option-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-option-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2OptionList);
+      }
+      break;
+  } });
+}
+defineCustomElement();
 
-export { isTouchDevice as a, isRelatedTargetWithinHost as b, createGuid as c, addSmoothScrollPolyfill as d, setMessageHeight as e, labelDOM as f, handleColor as g, handleAriaLabel as h, isEventFromElement as i, isFirefox as j, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, resizeIframe as r, setPopProperties as s };
+export { Q2OptionList as Q, defineCustomElement as d };