q2-tecton-elements 1.17.1 → 1.19.0

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

@@ -1,9 +1,9 @@
-import { Component, State, Prop, h, Listen, Element, Fragment, Event, } from '@stencil/core';
-import { isEventFromElement, loc, overrideFocus } from 'src/utils';
+import { h } from '@stencil/core';
+import { isEventFromElement, loc, overrideFocus, resizeIframe } from 'src/utils';
 export class Q2Pill {
   constructor() {
-    this.selectedOptions = [];
     this.scheduledAfterRender = [];
+    this.activateFirstOption = false;
     /// Helpers ///
     this.determineHasOptions = () => {
       const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
@@ -15,14 +15,16 @@ export class Q2Pill {
       this.open = false;
       this.primaryBtn.focus();
       this.change.emit({ value: null, values: [], active: false });
+      this.scheduledAfterRender.push(resizeIframe);
     };
     /// Event Handlers ///
-    this.handleClick = (event) => {
+    this.handleClick = async (event) => {
       event.stopPropagation();
       if (this.disabled)
         return;
       if (this.hasOptions) {
-        this.optionList.toggle();
+        this.activateFirstOption = false;
+        await this.popoverElement.toggle();
       }
       else {
         const { value, label } = this;
@@ -39,9 +41,11 @@ export class Q2Pill {
     this.handleKeydown = (event) => {
       if (!this.hasOptions || this.disabled)
         return;
+      this.activateFirstOption = true;
       this.optionList.handleExternalKeydown(event);
     };
     this.handleChange = event => {
+      event.stopPropagation();
       if (!this.hasOptions)
         return;
       const { value, values } = event.detail;
@@ -52,20 +56,29 @@ export class Q2Pill {
       }
       this.change.emit({ value, values, active: isActive });
     };
-    this.handleFocusout = (event) => {
-      const relatedTarget = event.relatedTarget;
-      if (Array.from(this.hostElement.children).includes(relatedTarget))
-        return;
-      if (relatedTarget && !(event.relatedTarget instanceof HTMLElement))
-        return;
-      if (relatedTarget && relatedTarget.closest('.btn-height-wrapper'))
-        return;
-      this.optionList.open = false;
-    };
     this.handleWrapperClick = () => {
       this.primaryBtn.focus();
       this.primaryBtn.click();
     };
+    this.onClickElsewhere = (event) => {
+      const target = event.target;
+      if (target.localName === 'click-elsewhere') {
+        event.stopPropagation();
+        this.popoverElement.open = false;
+      }
+    };
+    this.disabled = undefined;
+    this.active = undefined;
+    this.open = undefined;
+    this.multiple = undefined;
+    this.maxLength = undefined;
+    this.label = undefined;
+    this.value = undefined;
+    this.theme = undefined;
+    this.selectedOptions = [];
+    this.popoverMinHeight = 150;
+    this.popoverDirection = undefined;
+    this.hasOptions = undefined;
   }
   /// LifeCycle Hooks ///
   componentWillLoad() {
@@ -106,10 +119,17 @@ export class Q2Pill {
       return;
     this.primaryBtn.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.primaryBtn.focus();
+    }
   }
   /// DOM ///
   generateIcon() {
@@ -117,8 +137,7 @@ export class Q2Pill {
     const isButton = hasOptions && active;
     const TagName = isButton ? 'button' : 'div';
     const iconName = isButton || !hasOptions ? 'close' : 'chevron-down';
-    return (h(TagName, { class: "btn-close", onClick: isButton && this.clearSelectedOptions, disabled: isButton && this.disabled, "aria-label": isButton && loc('tecton.element.pill.clearSelection'), type: isButton && 'button' },
-      h("q2-icon", { type: iconName })));
+    return (h(TagName, { class: "btn-close", onClick: isButton && this.clearSelectedOptions, disabled: isButton && this.disabled, "aria-label": isButton && loc('tecton.element.pill.clearSelection'), type: isButton && 'button' }, h("q2-icon", { type: iconName })));
   }
   render() {
     const { hasOptions, active, open } = this;
@@ -127,222 +146,258 @@ export class Q2Pill {
       wrapperClassNames.push('has-icon');
     if (hasOptions)
       wrapperClassNames.push('has-options');
-    return (h(Fragment, null,
-      h("div", { class: wrapperClassNames.join(' ') },
-        h("div", { class: "btn-height-wrapper", onClick: this.handleWrapperClick, tabIndex: -1 },
-          h("button", { class: "btn-primary", type: "button", "test-id": "btn-control", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, onFocusout: this.handleFocusout, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent },
-            this.truncatedButtonContent,
-            !hasOptions && active && h("span", { class: "sr" },
-              "(",
-              loc('tecton.element.pill.active'),
-              ")"))),
-        this.generateIcon()),
-      this.hasOptions && (h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), open: this.open, onChange: this.handleChange, multiple: this.multiple, onFocusout: this.handleFocusout, selectedOptions: this.selectedOptions },
-        h("slot", null)))));
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: wrapperClassNames.join(' ') }, h("div", { class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { class: "btn-primary", "test-id": "btn-control", type: "button", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent }, this.truncatedButtonContent, !hasOptions && active && h("span", { class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon()), this.hasOptions && (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.primaryBtnWrapper, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection }, h("q2-option-list", { ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions }, h("slot", null))))));
   }
   static get is() { return "q2-pill"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": true
-    },
-    "active": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "active",
-      "reflect": true
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "open",
-      "reflect": true
-    },
-    "multiple": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "multiple",
-      "reflect": true
-    },
-    "maxLength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "active",
+        "reflect": true
       },
-      "attribute": "max-length",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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": ""
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiple",
+        "reflect": true
       },
-      "attribute": "label",
-      "reflect": true
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-length",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "attribute": "value",
-      "reflect": true
-    },
-    "theme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'secondary' | 'tertiary'",
-        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
-        "references": {}
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "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
-    },
-    "selectedOptions": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "IOptionValue[]",
-        "resolved": "IOptionValue[]",
-        "references": {
-          "IOptionValue": {
-            "location": "import",
-            "path": "../q2-option-list"
+      "selectedOptions": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "IOptionValue[]",
+          "resolved": "IOptionValue[]",
+          "references": {
+            "IOptionValue": {
+              "location": "import",
+              "path": "../q2-option-list"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    }
-  }; }
-  static get states() { return {
-    "hasOptions": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "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; values: IOptionValue[]; active: boolean }",
-        "resolved": "{ value: string; values: IOptionValue[]; active: boolean; }",
-        "references": {
-          "IOptionValue": {
-            "location": "import",
-            "path": "../q2-option-list"
+      "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": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ value: string; values: IOptionValue[]; active: boolean }",
+          "resolved": "{ value: string; values: IOptionValue[]; active: boolean; }",
+          "references": {
+            "IOptionValue": {
+              "location": "import",
+              "path": "../q2-option-list"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   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-pill/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,16 +68,21 @@ button {
 :host {
   display: inline-block;
   position: relative;
+  line-height: 0;
 }
 
 :host(:not(:last-child)) {
   margin-inline-end: var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)));
 }
 
+q2-popover,
 .btn-wrapper {
   --comp-pill-min-height: var(--tct-pill-min-height, var(--t-pill-min-height, 44px));
-  --comp-pill-btn-border-width: var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));
   --comp-pill-btn-height: var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px));
+}
+
+.btn-wrapper {
+  --comp-pill-btn-border-width: var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));
   --comp-close-size: 0px;
   --comp-btn-background: var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));
   --compt-hover-btn-background: var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));
@@ -118,11 +123,6 @@ button {
   --comp-hover-active-btn-border-color: var(--t-tertiary-l3, #eff8fd);
 }
 
-q2-option-list {
-  position: absolute;
-  left: 0;
-}
-
 .btn-height-wrapper {
   height: var(--comp-pill-min-height);
   display: flex;
@@ -228,4 +228,9 @@ div.btn-close {
 :host([active]) button.btn-close:focus, :host([active]) button.btn-close:hover {
   background: var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));
   border-color: var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))));
+}
+
+q2-popover {
+  position: relative;
+  top: calc((var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2 * -1);
 }