q2-tecton-elements 1.18.0 → 1.19.0

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

@@ -1,4 +1,4 @@
-import { Component, Prop, Event, h, Fragment, Listen, Element, State, Watch, } from '@stencil/core';
+import { h, Fragment, } from '@stencil/core';
 import { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';
 const SUPPORTED_THEME_COLORS = [
   'primary',
@@ -20,9 +20,6 @@ const SUPPORTED_THEME_COLORS = [
 const STOPLIGHT_COLORS = ['info', 'success', 'warning', 'alert'];
 export class Q2Card {
   constructor() {
-    this.isTouch = isTouchDevice();
-    this.isAutoTouch = false;
-    this.isAutoSmall = false;
     this.handleClick = (event) => {
       if (this.url)
         return true;
@@ -30,6 +27,20 @@ export class Q2Card {
       event.stopPropagation();
       this.click.emit();
     };
+    this.title = undefined;
+    this.description = undefined;
+    this.avatarName = undefined;
+    this.avatarInitials = undefined;
+    this.avatarIcon = undefined;
+    this.avatarSrc = undefined;
+    this.isSmall = undefined;
+    this.bar = undefined;
+    this.isStatic = undefined;
+    this.isTouch = isTouchDevice();
+    this.url = undefined;
+    this.target = undefined;
+    this.isAutoTouch = false;
+    this.isAutoSmall = false;
   }
   componentWillLoad() {
     this.checkBar();
@@ -90,14 +101,7 @@ export class Q2Card {
     }
   }
   generateContent() {
-    return (h(Fragment, null,
-      this.bar && (h("div", { class: "bar", "test-id": "bar", style: { '--comp-bar-color': this.barColor } })),
-      this.generateAvatar(),
-      h("div", { class: "content", "test-id": "contentContainer", ref: e => (this.containerElement = e) },
-        this.title && h("h3", { "test-id": "title" }, this.title),
-        this.description && h("p", { "test-id": "description" }, this.description),
-        h("slot", null)),
-      this.isTouch && !this.isStatic && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
+    return (h(Fragment, null, this.bar && (h("div", { class: "bar", "test-id": "bar", style: { '--comp-bar-color': this.barColor } })), this.generateAvatar(), h("div", { class: "content", "test-id": "contentContainer", ref: e => (this.containerElement = e) }, this.title && h("h3", { "test-id": "title" }, this.title), this.description && h("p", { "test-id": "description" }, this.description), h("slot", null)), this.isTouch && !this.isStatic && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
   }
   generateContainerClasses() {
     const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch, isStatic, } = this;
@@ -124,249 +128,263 @@ export class Q2Card {
   }
   static get is() { return "q2-card"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "title": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "title",
-      "reflect": true
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "description",
-      "reflect": true
-    },
-    "avatarName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "avatar-name",
-      "reflect": true
-    },
-    "avatarInitials": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "avatar-initials",
-      "reflect": true
-    },
-    "avatarIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "avatar-icon",
-      "reflect": true
-    },
-    "avatarSrc": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "avatar-src",
-      "reflect": true
-    },
-    "isSmall": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-small",
-      "reflect": true
-    },
-    "bar": {
-      "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 {
+      "title": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "title",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": true
       },
-      "attribute": "bar",
-      "reflect": true
-    },
-    "isStatic": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "avatarName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "avatar-name",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "avatarInitials": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "avatar-initials",
+        "reflect": true
       },
-      "attribute": "is-static",
-      "reflect": true
-    },
-    "isTouch": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "avatarIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "avatar-icon",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "avatarSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "avatar-src",
+        "reflect": true
       },
-      "attribute": "is-touch",
-      "reflect": true,
-      "defaultValue": "isTouchDevice()"
-    },
-    "url": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "isSmall": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-small",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "bar": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bar",
+        "reflect": true
       },
-      "attribute": "url",
-      "reflect": true
-    },
-    "target": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'_self' | '_blank' | '_parent' | '_top'",
-        "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
-        "references": {}
+      "isStatic": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-static",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "isTouch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-touch",
+        "reflect": true,
+        "defaultValue": "isTouchDevice()"
       },
-      "attribute": "target",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "isAutoTouch": {},
-    "isAutoSmall": {}
-  }; }
-  static get events() { return [{
-      "method": "click",
-      "name": "click",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "url",
+        "reflect": true
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_self' | '_blank' | '_parent' | '_top'",
+          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target",
+        "reflect": true
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "isAutoTouch": {},
+      "isAutoSmall": {}
+    };
+  }
+  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": "bar",
-      "methodName": "checkBar"
-    }]; }
-  static get listeners() { return [{
-      "name": "focus",
-      "method": "onHostElementFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "bar",
+        "methodName": "checkBar"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "focus",
+        "method": "onHostElementFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/q2-card/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 {
@@ -111,11 +111,18 @@ button {
   box-shadow: var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))));
 }
 @media (hover: hover) {
+  .container:is(button), .container:is(a) {
+    --comp-card-hover-box-shadow: var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))));
+  }
   .container:is(button):hover, .container:is(button):active, .container:is(button):focus, .container:is(a):hover, .container:is(a):active, .container:is(a):focus {
     color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
+    box-shadow: var(--const-double-focus-ring);
   }
   .container:is(button):hover, .container:is(a):hover {
-    box-shadow: var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))));
+    box-shadow: var(--comp-card-hover-box-shadow);
+  }
+  .container:is(button):focus:hover, .container:is(a):focus:hover {
+    box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);
   }
   .container:is(button):active, .container:is(a):active {
     box-shadow: var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));