q2-tecton-elements 1.21.1 → 1.22.0

package/dist/components/index11.js

@@ -0,0 +1,383 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { o as overrideFocus, i as isEventFromElement } from './index13.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.scheduledAfterRender = [];
+    /// Event Handlers ///
+    /* tslint:disable:cyclomatic-complexity */
+    this.keydownHandler = (event, ignoreSelectionEvents) => {
+      event.stopPropagation();
+      const { activeIndex, customSearch, allOptions } = this;
+      const { key, shiftKey } = event;
+      let newOption;
+      switch (key) {
+        case ' ':
+        case 'Enter':
+          if (ignoreSelectionEvents) {
+            this.setDefaultActiveElement();
+            break;
+          }
+          event.preventDefault();
+          newOption = allOptions.find(element => element.active);
+          if (!newOption || newOption.disabled)
+            break;
+          this.selectOption(newOption.value);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          const isFirstOption = activeIndex === 0;
+          if (isFirstOption)
+            break;
+          if (activeIndex === undefined) {
+            this.setDefaultActiveElement();
+          }
+          else {
+            const nextIndex = this.getNextVisibleIndex(-1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+          }
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          const isLastOption = activeIndex === allOptions.length - 1;
+          if (isLastOption)
+            break;
+          if (activeIndex === undefined) {
+            this.setDefaultActiveElement();
+          }
+          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 (ignoreSelectionEvents)
+            break;
+          if (shiftKey)
+            break;
+          newOption = allOptions.find(element => element.active);
+          if (!newOption || newOption.disabled)
+            return;
+          this.selectOption(newOption.value);
+          break;
+        case 'Esc':
+        case 'Escape':
+          if (this.noSelect)
+            this.setActiveElement(null);
+          this.popoverState.emit({ open: false });
+          break;
+        default:
+          if (customSearch)
+            break;
+          if (!key.match(/^[A-Za-z0-9]$/))
+            break;
+          // search in non-searchable select: alpha-numeric only
+          this.searchAndFocus(key);
+          break;
+      }
+    };
+    /* tslint:enable:cyclomatic-complexity */
+    this.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;
+      if (target.localName !== 'q2-option' || target.disabled) {
+        return;
+      }
+      this.selectOption(target.value);
+    };
+    this.role = 'listbox';
+    this.direction = 'down';
+    this.customSearch = undefined;
+    this.noSelect = undefined;
+    this.align = undefined;
+    this.selectedOptions = [];
+    this.multiple = undefined;
+    this.disabled = 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();
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  /// Getters ///
+  get allOptions() {
+    return this.getRootSlot(this.hostElement);
+  }
+  /// Helpers ///
+  checkOptions() {
+    const { noSelect, type, allOptions } = this;
+    if (!noSelect && !type)
+      return;
+    const optionRole = type === 'menu' ? 'menuitem' : 'option';
+    allOptions.forEach(option => {
+      if (noSelect)
+        option.noSelect = true;
+      if (type)
+        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 {
+      return assignedElements;
+    }
+  }
+  scrollToActiveOption() {
+    const activeOption = this.allOptions[this.activeIndex];
+    activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
+  }
+  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);
+  }
+  openDropdownWithActiveElement(activeIndex) {
+    if (this.disabled)
+      return;
+    this.activeIndex = activeIndex;
+    this.popoverState.emit({ open: true });
+    this.setActiveOption();
+    this.setFocusedOption();
+    this.scheduledAfterRender.push(() => {
+      this.scrollToActiveOption();
+      this.resizeIframe();
+    });
+  }
+  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, _b;
+    const { allOptions, selectedOptions } = this;
+    const singleValue = (_b = (_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : undefined;
+    allOptions.forEach(element => {
+      element.selected = element.value === singleValue;
+    });
+  }
+  updateMultipleOptionAttrs() {
+    const { allOptions, selectedOptions } = this;
+    const selectedValues = selectedOptions.map(option => option.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;
+    setTimeout(() => {
+      option.focus();
+    }, 25);
+  }
+  getNextVisibleIndex(direction) {
+    let index = this.activeIndex + direction;
+    while (index >= 0 && index <= this.allOptions.length - 1) {
+      const { display, visibility } = window.getComputedStyle(this.allOptions[index]);
+      if (display !== 'none' && visibility !== 'hidden') {
+        return index;
+      }
+      index = index + direction;
+    }
+    return -1;
+  }
+  selectOption(selectedValue) {
+    const option = this.allOptions.find(({ value }) => value === selectedValue);
+    const valueObject = {
+      value: selectedValue,
+      display: option.display || option.innerText.trim(),
+    };
+    const { multiple, noSelect } = this;
+    let values;
+    if (multiple) {
+      const { selectedOptions = [] } = this;
+      const isAlreadySelected = !!selectedOptions.find(({ value }) => value === selectedValue);
+      if (isAlreadySelected) {
+        values = selectedOptions.filter(({ value }) => value !== selectedValue);
+      }
+      else {
+        values = [...selectedOptions, valueObject];
+      }
+    }
+    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 });
+  }
+  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);
+  }
+  searchAndFocus(key) {
+    this.resetTimer();
+    let searchString = this.searchString ? `${this.searchString}${key}` : key;
+    searchString = searchString.replace(/[^0-9a-z]/gi, '');
+    this.searchString = searchString;
+    const searchRegEx = new RegExp(searchString, 'i');
+    const foundIndex = this.allOptions.findIndex(option => option.value === searchString || option.textContent.match(searchRegEx));
+    if (foundIndex === -1)
+      return;
+    this.setActiveElement(foundIndex);
+  }
+  /// Watchers ///
+  selectedOptionsUpdated() {
+    if (this.multiple) {
+      this.updateMultipleOptionAttrs();
+    }
+    else {
+      this.updateSingleOptionAttrs();
+    }
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.popoverState.emit({ open: true });
+    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) {
+    const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
+    if (keysThatTriggerOpen.includes(event.key)) {
+      this.popoverState.emit({ open: true });
+    }
+    const keysThatTriggerDefault = ['ArrowDown', 'ArrowUp'];
+    if (keysThatTriggerDefault.includes(event.key)) {
+      event.preventDefault();
+      this.setDefaultActiveElement();
+    }
+    else {
+      this.keydownHandler(event, true);
+    }
+  }
+  /// 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.keydownHandler, onClick: this.clickHandler }, h("slot", null)))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "selectedOptions": ["selectedOptionsUpdated"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-option-list", {
+    "role": [513],
+    "direction": [513],
+    "customSearch": [516, "custom-search"],
+    "noSelect": [516, "no-select"],
+    "align": [513],
+    "selectedOptions": [1040],
+    "multiple": [516],
+    "disabled": [516],
+    "type": [1],
+    "hasOptions": [32],
+    "setDefaultActiveElement": [64],
+    "setActiveElement": [64],
+    "handleExternalKeydown": [64]
+  }, [[0, "focus", "delegateFocus"], [0, "click", "handleClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  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 { Q2OptionList as Q, defineCustomElement as d };

package/dist/components/index12.js

@@ -0,0 +1,125 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+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}*{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:inline-flex;width:100%}.container{display:block;overflow:hidden;opacity:0;height:0;position:absolute;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);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%}:host([align=right]) .container{right:0;text-align:end;left:unset}:host([open]) .container{display:block;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 Q2Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.popoverStateChanged = createEvent(this, "popoverStateChanged", 7);
+    this.privateDirection = 'down';
+    this.direction = undefined;
+    this.align = undefined;
+    this.open = undefined;
+    this.block = undefined;
+    this.minHeight = undefined;
+    this.controlElement = undefined;
+  }
+  /// Lifecycle hooks ///
+  componentDidLoad() {
+    if (this.open)
+      this.determinePopDirection();
+  }
+  componentWillRender() {
+    if (this.containerElement && this.containerElement && this.open)
+      this.determinePopDirection();
+  }
+  /// Methods ///
+  async toggle() {
+    this.open = !this.open;
+  }
+  /// Watchers ///
+  openChanged(open) {
+    this.popoverStateChanged.emit({ open });
+  }
+  /// Listeners ///
+  popoverStateHandler(event) {
+    const { detail: { open }, } = event;
+    if (open === this.open)
+      return;
+    this.open = open;
+    event.stopPropagation();
+  }
+  /// Helpers ///
+  determinePopDirection() {
+    var _a;
+    const { containerElement, contentElement, direction, controlElement } = this;
+    if (containerElement)
+      containerElement.style.maxHeight = null;
+    if (direction) {
+      return (this.privateDirection = direction);
+    }
+    const contentHeight = contentElement.clientHeight;
+    const { top: topOffset, height } = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {
+      top: 0,
+      height: 0,
+    };
+    const bottomOffset = window.innerHeight - topOffset - height;
+    const canShowFullSizeBelow = bottomOffset > contentHeight;
+    const canShowFullSizeAbove = contentHeight <= topOffset;
+    // Prefer full size above or below
+    if (canShowFullSizeBelow) {
+      return (this.privateDirection = 'down');
+    }
+    else if (canShowFullSizeAbove || !this.minHeight) {
+      this.determinePopOffset();
+      return (this.privateDirection = 'up');
+    }
+    // If full size will not fit and minHeight is set, then make as tall as possible
+    const { minHeight = 150 } = this;
+    const displayBuffer = 5;
+    const canShowSmallBelow = bottomOffset >= minHeight + displayBuffer;
+    if (canShowSmallBelow) {
+      const maxBelowHeight = Math.max(bottomOffset - displayBuffer, minHeight);
+      containerElement.style.setProperty('--comp-pop-max-height', `${maxBelowHeight}px`);
+      return (this.privateDirection = 'down');
+    }
+    else {
+      const maxAboveHeight = Math.max(topOffset, minHeight);
+      containerElement.style.setProperty('--comp-pop-max-height', `${maxAboveHeight}px`);
+      this.determinePopOffset();
+      return (this.privateDirection = 'up');
+    }
+  }
+  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`);
+  }
+  /// DOM ///
+  render() {
+    const containerClasses = ['container', this.privateDirection];
+    return (h("div", { ref: el => (this.containerElement = el), class: containerClasses.join(' '), role: "menu" }, h("div", { ref: el => (this.contentElement = el), class: "content" }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "open": ["openChanged"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-popover", {
+    "direction": [513],
+    "align": [513],
+    "open": [1540],
+    "block": [516],
+    "minHeight": [2, "min-height"],
+    "controlElement": [16],
+    "toggle": [64]
+  }, [[0, "popoverState", "popoverStateHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-popover":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Popover);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Q2Popover as Q, defineCustomElement as d };