q2-tecton-elements 1.17.1 → 1.19.0

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

@@ -1,8 +1,8 @@
-import { Component, State, Prop, h, Listen, Element, Fragment, Event, } from '@stencil/core';
+import { h } from '@stencil/core';
 import { isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2Tag {
   constructor() {
-    this.role = 'listitem';
+    this.activateFirstOption = false;
     /// Getters ///
     /// Helpers
     this.determineHasOptions = () => {
@@ -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,9 +26,11 @@ export class Q2Tag {
     };
     this.handleClick = (event) => {
       event.stopPropagation();
-      this.optionList.toggle();
+      this.activateFirstOption = false;
+      this.popoverElement.toggle();
     };
     this.handleKeydown = (event) => {
+      this.activateFirstOption = true;
       this.optionList.handleExternalKeydown(event);
     };
     this.handleButtonFocusout = (event) => {
@@ -31,18 +40,17 @@ 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();
     };
+    this.open = undefined;
+    this.role = 'listitem';
+    this.label = undefined;
+    this.theme = undefined;
+    this.popoverMinHeight = 150;
+    this.popoverDirection = undefined;
+    this.hasOptions = undefined;
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
@@ -65,10 +73,17 @@ 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.activateFirstOption) {
+      this.optionList.focus();
+      this.activateFirstOption = false;
+    }
+    else {
+      this.optionList.setActiveElement(null);
       this.dropdownBtn.focus();
+    }
   }
   /// DOM ///
   render() {
@@ -76,125 +91,165 @@ export class Q2Tag {
     const wrapperClassNames = ['tag-wrapper'];
     if (hasOptions)
       wrapperClassNames.push('has-options');
-    return (h(Fragment, null,
-      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)))));
+    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-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection }, 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"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "open",
-      "reflect": true
-    },
-    "role": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "role",
-      "reflect": true,
-      "defaultValue": "'listitem'"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "role": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "role",
+        "reflect": true,
+        "defaultValue": "'listitem'"
       },
-      "attribute": "label",
-      "reflect": true
-    },
-    "theme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'secondary' | 'tertiary'",
-        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary' | 'tertiary'",
+          "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "theme",
+        "reflect": true
       },
-      "attribute": "theme",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "hasOptions": {}
-  }; }
-  static get events() { return [{
-      "method": "click",
-      "name": "click",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "popoverMinHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popover-min-height",
+        "reflect": false,
+        "defaultValue": "150"
       },
-      "complexType": {
-        "original": "{ value: string }",
-        "resolved": "{ value: string; }",
-        "references": {}
+      "popoverDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'up' | 'down'",
+          "resolved": "\"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popover-direction",
+        "reflect": false
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "hasOptions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "click",
+        "name": "click",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ value: string }",
+          "resolved": "{ value: string; }",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
-  static get listeners() { return [{
-      "name": "focus",
-      "method": "delegateFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "optionListState",
-      "method": "optionListStateEvent",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "focus",
+        "method": "delegateFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "popoverStateChanged",
+        "method": "popoverStateHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C);
 }
 
 :host {
@@ -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;
 }