q2-tecton-elements 1.18.0 → 1.19.1

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

@@ -1,9 +1,7 @@
-import { Component, Prop, Element, State, Watch, h, Fragment, Listen } from '@stencil/core';
+import { h, Fragment } from '@stencil/core';
 import { handleAriaLabel, isEventFromElement, loc, overrideFocus, setPopProperties } from 'src/utils';
 export class Q2Dropdown {
   constructor() {
-    this.type = 'icon';
-    this.dropdownOpen = false;
     this.scheduledAfterRender = [];
     this.dropdownItemSelector = 'q2-dropdown-item:not([disabled]):not([separator])';
     ///// Actions ////////
@@ -93,6 +91,19 @@ export class Q2Dropdown {
         return;
       }
     };
+    this.type = 'icon';
+    this.icon = undefined;
+    this.label = undefined;
+    this.hideLabel = undefined;
+    this.ariaLabel = undefined;
+    this.disabled = undefined;
+    this.popDirection = undefined;
+    this.name = undefined;
+    this.context = undefined;
+    this.contextValue = undefined;
+    this.resolvedType = undefined;
+    this.block = undefined;
+    this.dropdownOpen = false;
   }
   resizeIframe() {
     return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
@@ -251,256 +262,260 @@ export class Q2Dropdown {
   }
   render() {
     const btnProps = this.toggleButtonProps;
-    return (h("click-elsewhere", { class: `dropdown-container${this.dropdownOpen ? ' dropdown-open' : ''}`, onChange: this.onClickElsewhere },
-      h("q2-btn", { ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' },
-        h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null,
-        this.icon ? h("q2-icon", { type: this.icon }) : ' ',
-        this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))),
-      h("div", { ref: el => (this.dropdownContainer = el), class: `q2-element-dropdown ${this.privatePopDirection === 'up' ? 'dropup' : ''}`, role: "menu", onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown },
-        h("div", null,
-          h("slot", null),
-          this.dropdownOpen && (h("q2-btn", { class: "sr close-dropdown", onFocus: this.closeDropdown }))))));
+    return (h("click-elsewhere", { class: `dropdown-container${this.dropdownOpen ? ' dropdown-open' : ''}`, onChange: this.onClickElsewhere }, h("q2-btn", { ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("div", { ref: el => (this.dropdownContainer = el), class: `q2-element-dropdown ${this.privatePopDirection === 'up' ? 'dropup' : ''}`, role: "menu", onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown }, h("div", null, h("slot", null), this.dropdownOpen && (h("q2-btn", { class: "sr close-dropdown", onFocus: this.closeDropdown }))))));
   }
   static get is() { return "q2-dropdown"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": true,
-      "defaultValue": "'icon'"
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "icon",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "hideLabel": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hide-label",
-      "reflect": true
-    },
-    "ariaLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "aria-label",
-      "reflect": true
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": true
-    },
-    "popDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'up' | 'down'",
-        "resolved": "\"down\" | \"up\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'icon'"
       },
-      "attribute": "pop-direction",
-      "reflect": true
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "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": "name",
-      "reflect": true
-    },
-    "context": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "hideLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
       },
-      "attribute": "context",
-      "reflect": true
-    },
-    "contextValue": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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": ""
+      "popDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'up' | 'down'",
+          "resolved": "\"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pop-direction",
+        "reflect": true
       },
-      "attribute": "context-value",
-      "reflect": true
-    },
-    "resolvedType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "context": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "context",
+        "reflect": true
       },
-      "attribute": "resolved-type",
-      "reflect": true
-    },
-    "block": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "contextValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "context-value",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "resolvedType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "resolved-type",
+        "reflect": true
       },
-      "attribute": "block",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "dropdownOpen": {}
-  }; }
+      "block": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "block",
+        "reflect": true
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dropdownOpen": {}
+    };
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "ariaLabel",
-      "methodName": "ariaLabelObserver"
-    }, {
-      "propName": "name",
-      "methodName": "nameHandler"
-    }, {
-      "propName": "context",
-      "methodName": "contextHandler"
-    }, {
-      "propName": "contextValue",
-      "methodName": "contextValueHandler"
-    }, {
-      "propName": "resolvedType",
-      "methodName": "resolvedTypeHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "focus",
-      "method": "delegateFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "ariaLabel",
+        "methodName": "ariaLabelObserver"
+      }, {
+        "propName": "name",
+        "methodName": "nameHandler"
+      }, {
+        "propName": "context",
+        "methodName": "contextHandler"
+      }, {
+        "propName": "contextValue",
+        "methodName": "contextValueHandler"
+      }, {
+        "propName": "resolvedType",
+        "methodName": "resolvedTypeHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "focus",
+        "method": "delegateFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-dropdown/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 {