q2-tecton-elements 1.9.5 → 1.10.0

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

@@ -114,6 +114,10 @@ label {
 .input-container {
     display: flex;
     align-items: center;
+    --comp-input-horizontal-gap: var(
+        --tct-input-horizontal-gap,
+        var(--t-input-horizontal-gap, 8px)
+    );
     --comp-input-border-top-left-radius: var(
         --tct-input-border-top-left-radius,
         var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
@@ -239,21 +243,27 @@ input::placeholder,
     text-overflow: ellipsis;
 }
 
+.input-icons-container-left:empty {
+    display: none;
+}
 .input-icons-container-left {
     display: flex;
     flex-direction: row;
     align-items: center;
+    gap: var(--comp-input-horizontal-gap);
+    padding-left: var(--comp-input-horizontal-gap);
 }
-.input-icons-container-left q2-icon {
-    position: absolute;
+
+.input-icons-container-right:empty {
+    display: none;
 }
+
 .input-icons-container-right {
     display: flex;
-    gap: var(--tct-scale-2, var(--app-scale-2, 10px));
     flex-direction: row;
-    padding-left: 3px;
     align-items: center;
-    margin-right: var(--tct-scale-2, var(--app-scale-2, 10px));
+    gap: var(--comp-input-horizontal-gap);
+    padding-right: var(--comp-input-horizontal-gap);
 }
 .input-icons-container-right .btn-visibility-toggle {
     color: var(--tct-primary, var(--t-primary, #006eb2));
@@ -278,16 +288,15 @@ q2-icon {
     );
 }
 
-.icon-left {
-    left: var(--tct-scale-1, var(--app-scale-1, 5px));
-}
-
 .icon-left-muted {
     opacity: 0.5;
 }
 
 .input-prefix,
 .input-suffix {
+    margin-left: calc(var(--comp-input-horizontal-gap) * -1);
+    margin-right: calc(var(--comp-input-horizontal-gap) * -1);
+    width: 3em;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -299,8 +308,6 @@ q2-icon {
         var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) -
             var(--tct-input-focus-border-bottom-width, 1px)
     );
-    width: 3em;
-    bottom: var(--tct-input-border-bottom-width, 1px);
     font-size: var(--tct-input-prefix-font-size, inherit);
     color: var(--tct-input-prefix-font-color, inherit);
     background-color: var(
@@ -312,21 +319,6 @@ q2-icon {
 }
 
 .input-prefix {
-    left: var(--tct-input-border-left-width, 1px);
-    border-right: 1px solid
-        var(
-            --tct-input-prefix-border-color,
-            var(
-                --tct-input-border-color,
-                var(
-                    --t-input-border,
-                    var(
-                        --tct-gray-11,
-                        var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))
-                    )
-                )
-            )
-        );
     border-top-left-radius: calc(
         var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) -
             var(--tct-input-border-left-width, 1px)
@@ -339,21 +331,6 @@ q2-icon {
 }
 
 .input-suffix {
-    right: var(--tct-input-border-right-width, 1px);
-    border-left: 1px solid
-        var(
-            --tct-input-prefix-border-color,
-            var(
-                --tct-input-border-color,
-                var(
-                    --t-input-border,
-                    var(
-                        --tct-gray-11,
-                        var(--t-gray-11, var(--tct-gray-l1, var(--app-grayl1, #cccccc)))
-                    )
-                )
-            )
-        );
     border-top-right-radius: calc(
         var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) -
             var(--tct-input-border-right-width, 1px)
@@ -416,39 +393,10 @@ q2-icon {
     cursor: not-allowed;
 }
 
-.has-focus .input-prefix {
-    border-top-left-radius: calc(
-        var(--comp-input-border-top-left-radius) - var(--tct-input-focus-border-top-width, 1px) -
-            var(--tct-input-focus-border-left-width, 1px)
-    );
-    border-bottom-left-radius: calc(
-        var(--comp-input-border-bottom-left-radius) -
-            var(--tct-input-focus-border-bottom-width, 1px) -
-            var(--tct-input-focus-border-left-width, 1px)
-    );
-}
-
-.has-focus .input-suffix {
-    border-top-left-radius: calc(
-        var(--comp-input-border-top-left-radius) - var(--tct-input-focus-border-top-width, 1px) -
-            var(--tct-input-focus-border-left-width, 1px)
-    );
-    border-bottom-left-radius: calc(
-        var(--comp-input-border-bottom-left-radius) -
-            var(--tct-input-focus-border-bottom-width, 1px) -
-            var(--tct-input-focus-border-left-width, 1px)
-    );
-}
-
 .right-aligned .input-field {
     text-align: right;
 }
 
-.right-aligned .icon-error {
-    left: var(--tct-scale-2, var(--app-scale-2, 10px));
-    right: auto;
-}
-
 .has-error label {
     color: var(--tct-input-error-label-font-color, var(--tct-input-label-font-color, inherit));
 }
@@ -472,65 +420,12 @@ q2-icon {
     border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));
 }
 
-.has-error.has-icon-right.left-aligned .btn-clear {
-    right: calc(2 * var(--comp-input-icon-clearance));
-}
-
-.has-error.has-clear.has-icon-right.left-aligned .input-field {
-    padding-right: calc(3 * var(--comp-input-icon-clearance));
-}
-
-.has-error.right-aligned .input-field {
-    padding-left: var(--comp-input-icon-clearance);
-}
-
-.has-error.right-aligned.has-prefix .input-field {
-    padding-left: calc(var(--comp-input-prefix-clearance) + var(--comp-input-icon-clearance));
-}
-
-.has-error.right-aligned.has-icon-left .input-field {
-    padding-left: calc(2 * var(--comp-input-icon-clearance));
-}
-
-.has-error.right-aligned .icon-left {
-    left: var(--comp-input-icon-clearance);
-}
-
-.has-prefix .input-field {
-    padding-left: var(--comp-input-prefix-clearance);
-}
-
-.has-prefix.right-aligned .icon-error {
-    left: var(--comp-input-prefix-clearance);
-    margin-left: var(--tct-scale-1, 5px);
-}
-
-.has-suffix .icon-error,
-.has-suffix .btn-clear {
-    right: var(--comp-input-prefix-clearance);
-}
-
-.has-suffix.has-error .btn-clear {
-    right: calc(var(--comp-input-prefix-clearance) + var(--comp-input-icon-clearance));
-}
-
-.has-icon-left .input-field {
-    padding-left: var(--comp-input-icon-clearance);
-}
-
-.has-icon-left.has-icon-separator .input-field {
-    padding-left: calc(var(--comp-input-icon-clearance) + 14px);
-}
-.has-icon-left.has-icon-separator .icon-left {
+.icon-left {
     width: 26px;
     height: 26px;
-    left: 8px;
 }
-.has-icon-left.has-icon-separator .input-container .vertical-separator {
-    position: absolute;
-    left: var(--tct-input-border-left-width, 1px);
+.vertical-separator {
     height: calc(var(--comp-input-min-height) - 2px);
-    width: 3em;
     border-right: 1px solid
         var(
             --tct-input-prefix-border-color,

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

@@ -1,28 +1,95 @@
-import { Component, Prop, h, Element } from '@stencil/core';
+import { Component, Prop, h, Event, Element, Watch, Fragment } from '@stencil/core';
 export class Q2Option {
   constructor() {
+    this.role = 'option';
+    this.tabindex = '-1';
     this._multiSelectHidden = false;
-    this.onOptionClick = (event) => {
+    this.onClick = (event) => {
       event.stopImmediatePropagation();
-      const disabled = this.disabled || this.disabledGroup;
-      !disabled && this.hostElement.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      const { disabled, disabledGroup } = this;
+      if (disabled || disabledGroup)
+        return;
+      this.click.emit();
     };
   }
+  connectedCallback() {
+    this.checkDisabledStatus();
+    this.checkSelectedStatus();
+    this.checkMultiSelectHiddenStatus();
+  }
+  checkDisabledStatus() {
+    const { disabled, disabledGroup, hostElement } = this;
+    const isDisabled = disabled || disabledGroup;
+    if (isDisabled)
+      hostElement.setAttribute('aria-disabled', 'true');
+    else
+      hostElement.removeAttribute('aria-disabled');
+  }
+  checkSelectedStatus() {
+    const { selected, hostElement } = this;
+    if (selected)
+      hostElement.setAttribute('aria-selected', 'true');
+    else
+      hostElement.removeAttribute('aria-selected');
+  }
+  checkMultiSelectHiddenStatus() {
+    const { _multiSelectHidden, hostElement } = this;
+    if (_multiSelectHidden)
+      hostElement.setAttribute('aria-hidden', 'true');
+    else
+      hostElement.removeAttribute('aria-hidden');
+  }
   render() {
-    return (h("div", { role: "option", "aria-selected": `${this.selected}`, "aria-disabled": `${this.disabledGroup || this.disabled || false}`, id: this.optionId, hidden: this._multiSelectHidden || this.hidden || false, class: "q2-option-container", tabindex: "0", onClick: this.onOptionClick },
-      h("div", { class: "q2-option-selection" }, this.selected ? (h("q2-icon", { type: "checkmark", class: "q2-option-selection-icon" })) : ('')),
-      h("div", { class: "q2-option-content" },
+    return (h(Fragment, null,
+      this.selected && h("q2-icon", { type: "checkmark" }),
+      h("div", { class: "content", onClick: this.onClick },
         h("slot", null))));
   }
   static get is() { return "q2-option"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]
   }; }
   static get properties() { return {
+    "role": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "role",
+      "reflect": true,
+      "defaultValue": "'option'"
+    },
+    "tabindex": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tabindex",
+      "reflect": true,
+      "defaultValue": "'-1'"
+    },
     "display": {
       "type": "string",
       "mutable": false,
@@ -195,5 +262,34 @@ export class Q2Option {
       "defaultValue": "false"
     }
   }; }
+  static get events() { return [{
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "disabled",
+      "methodName": "checkDisabledStatus"
+    }, {
+      "propName": "disabledGroup",
+      "methodName": "checkDisabledStatus"
+    }, {
+      "propName": "selected",
+      "methodName": "checkSelectedStatus"
+    }, {
+      "propName": "_multiSelectHidden",
+      "methodName": "checkMultiSelectHiddenStatus"
+    }]; }
 }

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

@@ -64,54 +64,48 @@ button {
     visibility: hidden;
 }
 
-
 :host {
-    display: block;
-}
-
-.q2-option-container {
-    --comp-option-selected-icon-size: var(
-        --tct-option-selected-icon-size,
-        var(--tct-scale-3, var(--app-scale-3, 15px))
-    );
+  padding: 0 var(--tct-scale-2, var(--app-scale-2, 10px));
+  min-height: 44px;
+  align-items: center;
+  cursor: pointer;
+  grid-template-columns: var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px))) 1fr;
+  align-items: center;
+  grid-template-areas: "icon content";
+  gap: var(--tct-scale-1, var(--app-scale-1, 5px));
 }
 
-.q2-option-container:not([hidden]) {
-    padding: var(--tct-scale-2, var(--app-scale-2, 10px));
-    min-height: 44px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
+:host([aria-disabled]) {
+  cursor: not-allowed;
+  opacity: var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));
+  pointer-events: none;
 }
 
-.q2-option-container[aria-disabled='true'] {
-    cursor: not-allowed;
-    opacity: var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));
+:host([aria-hidden]) {
+  display: none;
 }
 
-.q2-option-container:not([aria-disabled='true']):hover,
-:host([active]) .q2-option-container,
-:host(:focus) .q2-option-container {
-    background-color: var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
-    color: var(--tct-option-active-font-color, inherit);
+:host(:not([hidden]):not([aria-hidden])) {
+  display: grid;
 }
 
-.q2-option-selection {
-    flex: 0 0 var(--comp-option-selected-icon-size);
-    margin-right: var(--tct-scale-1, var(--app-scale-1, 5px));
+:host(:not([aria-disabled]):hover),
+:host([active]),
+:host(:focus) {
+  background-color: var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
 }
 
-.q2-option-selection-icon {
-    width: var(--comp-option-selected-icon-size);
-    height: var(--comp-option-selected-icon-size);
+q2-icon {
+  grid-area: icon;
+  --tct-icon-size: var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px)));
 }
 
-.q2-option-content {
-    flex: 1 1 auto;
-}
-
-:host(:not([multiline])) .q2-option-content {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.content {
+  display: block;
+  grid-area: content;
 }
+:host(:not([multiline])) .content {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}