q2-tecton-elements 1.18.0 → 1.19.0

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

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Listen, Watch, h } from '@stencil/core';
+import { h } from '@stencil/core';
 import { loc, handleAriaLabel } from 'src/utils';
 export class Q2DropdownItem {
   constructor() {
@@ -38,6 +38,12 @@ export class Q2DropdownItem {
     this.onRemoveBtnFocus = (event) => {
       event.stopPropagation();
     };
+    this.disabled = undefined;
+    this.removable = undefined;
+    this.separator = undefined;
+    this.label = undefined;
+    this.ariaLabel = undefined;
+    this.value = undefined;
   }
   /////// LIFECYCLE HOOKS //////
   componentWillLoad() {
@@ -82,135 +88,140 @@ export class Q2DropdownItem {
     return (h("div", { class: "dropdown-separator", role: "separator", "test-id": "dropdownItemSeparator" }));
   }
   itemDOM() {
-    return (h("div", { class: "dropdown-item-wrapper" },
-      h("q2-btn", { class: "dropdown-item", label: this.innerLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" },
-        h("div", { class: "dropdown-item-content" },
-          h("slot", null))),
-      !!this.removable ? (h("q2-btn", { class: "remove-dropdown-item", label: this.removeLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" },
-        h("q2-icon", { type: "close" }))) : ('')));
+    return (h("div", { class: "dropdown-item-wrapper" }, h("q2-btn", { class: "dropdown-item", label: this.innerLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "dropdown-item-content" }, h("slot", null))), !!this.removable ? (h("q2-btn", { class: "remove-dropdown-item", label: this.removeLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" }))) : ('')));
   }
   static get is() { return "q2-dropdown-item"; }
   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
-    },
-    "removable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "removable",
-      "reflect": true
-    },
-    "separator": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "separator",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  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
       },
-      "attribute": "label",
-      "reflect": true
-    },
-    "ariaLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "removable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "removable",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "separator": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "separator",
+        "reflect": true
       },
-      "attribute": "aria-label",
-      "reflect": true
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "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": ""
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
       },
-      "attribute": "value",
-      "reflect": true
-    }
-  }; }
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true
+      }
+    };
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "ariaLabel",
-      "methodName": "ariaLabelObserver"
-    }]; }
-  static get listeners() { return [{
-      "name": "focus",
-      "method": "onHostElementFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "ariaLabel",
+        "methodName": "ariaLabelObserver"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "focus",
+        "method": "onHostElementFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-dropdown-item/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 {
@@ -66,8 +66,9 @@ button {
 }
 
 .dropdown-separator {
-  margin: 0 var(--tct-scale-1, var(--app-scale-1x, 5px));
-  border-bottom: 1px solid var(--tct-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
+  --comp-default-separator-margin: 0 var(--tct-scale-1, var(--app-scale-3x, 15px));
+  margin: var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));
+  border-bottom: 1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
 }
 
 .dropdown-item-wrapper {
@@ -77,15 +78,16 @@ button {
 .dropdown-item {
   min-height: 44px;
   flex: 1 1 100%;
-  padding: var(--tct-dropdown-item-padding, 2px);
+  padding: var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px));
 }
 
 .dropdown-item-content {
-  padding: 12px var(--tct-scale-3, var(--app-scale-3x, 15px));
+  --comp-default-content-padding: 12px var(--app-scale-3x, 15px);
+  padding: var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));
   text-align: left;
-  background-color: var(--tct-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))));
-  color: var(--tct-dropdown-item-font-color, inherit);
-  transition: background-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+  background-color: var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff)))));
+  color: var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));
+  transition: background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
@@ -93,8 +95,8 @@ button {
 
 :host(:not([disabled])) .dropdown-item-content:hover,
 :host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {
-  background-color: var(--tct-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))));
-  color: var(--tct-dropdown-item-selected-font-color, inherit);
+  background-color: var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2)))))));
+  color: var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit));
 }
 
 .remove-dropdown-item {