q2-tecton-elements 1.17.1 → 1.18.0

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

@@ -0,0 +1,245 @@
+import { Component, Prop, h, Element, Watch, Method, Listen, Event, } from '@stencil/core';
+export class Q2Popover {
+  constructor() {
+    this.privateDirection = 'down';
+  }
+  /// 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))));
+  }
+  static get is() { return "q2-popover"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "direction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'up' | 'down'",
+        "resolved": "\"down\" | \"up\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "direction",
+      "reflect": true
+    },
+    "align": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'left' | 'right'",
+        "resolved": "\"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "align",
+      "reflect": true
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true
+    },
+    "block": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "block",
+      "reflect": true
+    },
+    "minHeight": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min-height",
+      "reflect": false
+    },
+    "controlElement": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "popoverStateChanged",
+      "name": "popoverStateChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ open: boolean }",
+        "resolved": "{ open: boolean; }",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "toggle": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "openChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "popoverState",
+      "method": "popoverStateHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/q2-popover/styles.css

@@ -0,0 +1,205 @@
+* {
+  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;
+  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-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;
+  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;
+}

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

@@ -185,7 +185,7 @@ export class Q2Select {
     /* tslint:enable:cyclomatic-complexity */
     this.inputKeydownHandler = (event) => {
       event.stopPropagation();
-      const { key, shiftKey } = event;
+      const { key } = event;
       const { optionElements, searchable } = this;
       switch (key) {
         case 'ArrowDown':
@@ -213,14 +213,12 @@ export class Q2Select {
           this.closeDropdown();
           break;
         default:
-          if (shiftKey)
+          if (!key.match(/^[A-Za-z0-9]$/))
             break;
           if (searchable) {
             this.openDropdownWithoutActiveElement();
             break;
           }
-          if (!key.match(/^[A-Za-z0-9]$/))
-            break;
           // search in non-searchable select: alpha-numeric only
           this.searchAndFocus(key);
       }

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

@@ -1,4 +1,4 @@
-import { Component, State, Prop, h, Listen, Element, Fragment, Event, } from '@stencil/core';
+import { Component, State, Prop, h, Listen, Element, Event } from '@stencil/core';
 import { isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2Tag {
   constructor() {
@@ -10,6 +10,13 @@ export class Q2Tag {
       this.hasOptions = hasOptions;
     };
     /// Event Handlers ///
+    this.onClickElsewhere = (event) => {
+      const target = event.target;
+      if (target.localName === 'click-elsewhere') {
+        event.stopPropagation();
+        this.popoverElement.open = false;
+      }
+    };
     this.handleChange = event => {
       event.stopPropagation();
       if (!this.hasOptions)
@@ -19,7 +26,7 @@ export class Q2Tag {
     };
     this.handleClick = (event) => {
       event.stopPropagation();
-      this.optionList.toggle();
+      this.popoverElement.toggle();
     };
     this.handleKeydown = (event) => {
       this.optionList.handleExternalKeydown(event);
@@ -31,14 +38,6 @@ export class Q2Tag {
         return;
       this.open = false;
     };
-    this.handleOptionListFocusout = (event) => {
-      const relatedTarget = event.relatedTarget;
-      if (relatedTarget && !(event.relatedTarget instanceof HTMLElement))
-        return;
-      if (relatedTarget && relatedTarget.closest('.btn-wrapper'))
-        return;
-      this.open = false;
-    };
     this.handleWrapperClick = () => {
       this.dropdownBtn.focus();
       this.dropdownBtn.click();
@@ -65,9 +64,12 @@ export class Q2Tag {
       return;
     this.dropdownBtn.focus();
   }
-  optionListStateEvent({ detail: { open } }) {
-    this.open = open;
-    if (!open)
+  popoverStateHandler({ detail: { open } }) {
+    if (this.open !== open)
+      this.open = open;
+    if (open)
+      this.optionList.focus();
+    else
       this.dropdownBtn.focus();
   }
   /// DOM ///
@@ -76,14 +78,15 @@ export class Q2Tag {
     const wrapperClassNames = ['tag-wrapper'];
     if (hasOptions)
       wrapperClassNames.push('has-options');
-    return (h(Fragment, null,
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere },
       h("div", { class: wrapperClassNames.join(' '), onClick: e => e.stopPropagation() },
         h("div", { class: "tag" }, this.label),
         this.hasOptions && (h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick },
           h("button", { ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-haspopup": "true", "aria-expanded": open ? 'true' : 'false', "aria-label": loc('tecton.element.tag.viewOptions') },
             h("q2-icon", { type: "options" }))))),
-      this.hasOptions && (h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), open: this.open, onChange: this.handleChange, onFocusout: this.handleOptionListFocusout, align: "right", type: "menu", "no-select": true },
-        h("slot", null)))));
+      this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open },
+        h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, align: "right", type: "menu", "no-select": true },
+          h("slot", null))))));
   }
   static get is() { return "q2-tag"; }
   static get encapsulation() { return "shadow"; }
@@ -191,8 +194,8 @@ export class Q2Tag {
       "capture": false,
       "passive": false
     }, {
-      "name": "optionListState",
-      "method": "optionListStateEvent",
+      "name": "popoverStateChanged",
+      "method": "popoverStateHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/q2-tag/styles.css

@@ -68,6 +68,7 @@ button {
 :host {
   display: inline-block;
   position: relative;
+  line-height: 0;
 }
 
 :host(:not(:last-child)) {
@@ -132,9 +133,4 @@ button {
   justify-content: center;
   padding: 0;
   --tct-icon-size: 18px;
-}
-
-q2-option-list {
-  position: absolute;
-  right: 0;
 }