q2-tecton-elements 1.55.4 → 1.56.0

package/dist/q2-tecton-elements/q2-action-sheet.entry.js

@@ -1,6 +1,6 @@
-import { r as t, c as i, h as e, F as o, g as a } from "./index-7a5365e2.js";
+import { r as t, c as e, h as i, F as o, g as a } from "./index-7a5365e2.js";
 
-import { l as s, w as r } from "./index-f2a66217.js";
+import { l as s, w as r } from "./index-c215e8ef.js";
 
 import { s as n } from "./sanitize-html-string-735c19f5.js";
 
@@ -8,20 +8,20 @@ const c = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;bo
 
 const d = c;
 
-var l = undefined && undefined.__rest || function(t, i) {
-  var e = {};
-  for (var o in t) if (Object.prototype.hasOwnProperty.call(t, o) && i.indexOf(o) < 0) e[o] = t[o];
+var l = undefined && undefined.__rest || function(t, e) {
+  var i = {};
+  for (var o in t) if (Object.prototype.hasOwnProperty.call(t, o) && e.indexOf(o) < 0) i[o] = t[o];
   if (t != null && typeof Object.getOwnPropertySymbols === "function") for (var a = 0, o = Object.getOwnPropertySymbols(t); a < o.length; a++) {
-    if (i.indexOf(o[a]) < 0 && Object.prototype.propertyIsEnumerable.call(t, o[a])) e[o[a]] = t[o[a]];
+    if (e.indexOf(o[a]) < 0 && Object.prototype.propertyIsEnumerable.call(t, o[a])) i[o[a]] = t[o[a]];
   }
-  return e;
+  return i;
 };
 
 const h = class {
   constructor(a) {
     t(this, a);
-    this.close = i(this, "close", 7);
-    this.ready = i(this, "ready", 3);
+    this.close = e(this, "close", 7);
+    this.ready = e(this, "ready", 3);
     this.initialSelectedOptions = [];
     this.maxHeight = .75;
     this.minHeight = .2;
@@ -30,41 +30,41 @@ const h = class {
       value: ""
     };
     this.generateOptgroup = t => {
-      const i = document.createElement("q2-optgroup");
-      if (t.label) i.setAttribute("label", t.label);
-      if (t.disabled) i.setAttribute("disabled", "");
-      if (!!t.options.length) t.options.forEach((t => i.appendChild(this.generateOption(t))));
-      return i;
+      const e = document.createElement("q2-optgroup");
+      if (t.label) e.setAttribute("label", t.label);
+      if (t.disabled) e.setAttribute("disabled", "");
+      if (!!t.options.length) t.options.forEach((t => e.appendChild(this.generateOption(t))));
+      return e;
     };
     this.generateOption = t => {
-      const i = document.createElement("q2-option");
-      const {innerHTML: e} = t, o = l(t, [ "innerHTML" ]);
-      if (e) i.innerHTML = n(e);
-      Object.entries(o).forEach((([t, e]) => {
-        if (e === undefined) return;
-        if (typeof e === "boolean") {
-          if (e) i.setAttribute(t, "");
+      const e = document.createElement("q2-option");
+      const {innerHTML: i} = t, o = l(t, [ "innerHTML" ]);
+      if (i) e.innerHTML = n(i);
+      Object.entries(o).forEach((([t, i]) => {
+        if (i === undefined) return;
+        if (typeof i === "boolean") {
+          if (i) e.setAttribute(t, "");
         } else {
-          i.setAttribute(t, e);
+          e.setAttribute(t, i);
         }
       }));
-      return i;
+      return e;
     };
     this.onCancel = t => {
-      var i, e;
+      var e, i;
       t.preventDefault();
       const {initialSelectedOptions: o} = this;
       this.hide({
-        value: (e = (i = o === null || o === void 0 ? void 0 : o[0]) === null || i === void 0 ? void 0 : i.value) !== null && e !== void 0 ? e : "",
+        value: (i = (e = o === null || o === void 0 ? void 0 : o[0]) === null || e === void 0 ? void 0 : e.value) !== null && i !== void 0 ? i : "",
         values: o,
         type: "cancel"
       });
     };
     this.onClick = t => {
-      const i = t.target;
-      if (!(i instanceof HTMLElement)) return;
-      const e = !!i.closest(".interior, q2-action-sheet");
-      if (e) return;
+      const e = t.target;
+      if (!(e instanceof HTMLElement)) return;
+      const i = !!e.closest(".interior, q2-action-sheet");
+      if (i) return;
       this.onCancel(t);
     };
     this.onListChange = t => {
@@ -86,30 +86,30 @@ const h = class {
     // #endregion
     // #region Render Methods
         this.renderList = ({data: t}) => {
-      const {listProps: i} = t;
-      return e(o, null, e("div", {
+      const {listProps: e} = t;
+      return i(o, null, i("div", {
         class: "content",
         ref: t => this.contentElement = t
-      }, e("q2-option-list", {
+      }, i("q2-option-list", {
         ref: t => this.optionListElement = t,
-        multiple: i.multiple,
-        noSelect: i.noSelect,
+        multiple: e.multiple,
+        noSelect: e.noSelect,
         onChange: this.onListChange,
         onPopoverState: this.onListPopoverStateChange,
-        selectedOptions: i.selectedOptions
-      }, e("slot", null))), e("footer", null, i.multiple && e("q2-btn", {
+        selectedOptions: e.selectedOptions
+      }, i("slot", null))), i("footer", null, e.multiple && i("q2-btn", {
         "test-id": "btnDone",
         intent: "workflow-primary",
         onClick: this.onListDone
       }, s("tecton.element.actionSheet.done"))));
     };
-    this.renderMessage = ({data: t}) => e("q2-message", {
+    this.renderMessage = ({data: t}) => i("q2-message", {
       type: t.type
-    }, t.title && e("h2", null, t.title), t.description && e("p", null, t.description));
-    this.renderSlot = () => e("div", {
+    }, t.title && i("h2", null, t.title), t.description && i("p", null, t.description));
+    this.renderSlot = () => i("div", {
       class: "content",
       ref: t => this.contentElement = t
-    }, e("slot", null));
+    }, i("slot", null));
     this.isScrollable = false;
     this.renderStatus = "is-closing";
     this.data = undefined;
@@ -171,9 +171,9 @@ const h = class {
     const {data: t} = this;
     if (!t) return;
     if (t.appearance === "list") {
-      const {event: i} = t;
-      if (i instanceof KeyboardEvent) {
-        this.optionListElement.handleExternalKeydown(i);
+      const {event: e} = t;
+      if (e instanceof KeyboardEvent) {
+        this.optionListElement.handleExternalKeydown(e);
       } else {
         this.optionListElement.focus();
       }
@@ -210,11 +210,11 @@ const h = class {
   }
   render() {
     var t;
-    const {data: i} = this;
-    const o = (i === null || i === void 0 ? void 0 : i.title) || this.title || !this.hideClose;
+    const {data: e} = this;
+    const o = (e === null || e === void 0 ? void 0 : e.title) || this.title || !this.hideClose;
     const a = this.renderStatus || "";
     let s = null;
-    switch (i === null || i === void 0 ? void 0 : i.appearance) {
+    switch (e === null || e === void 0 ? void 0 : e.appearance) {
      case "message":
       s = this.renderMessage;
       break;
@@ -227,35 +227,35 @@ const h = class {
       s = this.renderSlot;
       break;
     }
-    const r = (i === null || i === void 0 ? void 0 : i.appearance) || "slot";
+    const r = (e === null || e === void 0 ? void 0 : e.appearance) || "slot";
     const n = `interior is-${r}`;
-    return e("dialog", {
-      key: "fcadd164e925d3f162da360c51fc2c58a752862e",
+    return i("dialog", {
+      key: "556d963140d0cd87822dcd9b2fae4739793f56c3",
       ref: t => this.dialogElement = t,
       class: a,
       onClick: this.onClick
-    }, e("div", {
-      key: "b433f77c7ad9e0a96a567076c8629adb2dbf6dc8",
+    }, i("div", {
+      key: "d8061060c384136cb2941aa2e4d9628866946127",
       class: n
-    }, o && e("header", {
-      key: "d6eada64c40e41f0de9b84af14272cab8eb36560"
-    }, e("div", {
-      key: "ca1e8cab90a3affcc7e95ac2dbd4e8b46d9d7c81",
+    }, o && i("header", {
+      key: "cbd3bd7664b4e4b5b2facb7716174210e3e0ccfe"
+    }, i("div", {
+      key: "4f506806a80c41f84f5e0d3a0056523d3784c7d4",
       class: "title"
-    }, (i === null || i === void 0 ? void 0 : i.title) || this.title), !this.hideClose && e("q2-btn", {
-      key: "00831d5aa1caacb9a7dff5cfac59f7dd3161712c",
+    }, (e === null || e === void 0 ? void 0 : e.title) || this.title), !this.hideClose && i("q2-btn", {
+      key: "600f883b6809db14d53fede67e238d40c28a89d8",
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.actionSheet.close",
       "hide-label": true
-    }, e("q2-icon", {
-      key: "4cd522551cbe767ac76fdb6b2b91333b5a866009",
+    }, i("q2-icon", {
+      key: "1f80214fa5e66d1e031be2727a197f9137d3dfa3",
       type: "close"
-    }))), ((t = this.data) === null || t === void 0 ? void 0 : t.description) && e("p", {
-      key: "f2f46a11d8b749d83ccd8b5344b917f7bad88464"
-    }, i.description), s && e(s, {
-      key: "b708eb9b66bbe9cda2cacf144f75210859f32c06",
+    }))), ((t = this.data) === null || t === void 0 ? void 0 : t.description) && i("p", {
+      key: "1fbd683272184f40afe07eddcf146b4533d356a3"
+    }, e.description), s && i(s, {
+      key: "3cdf691ca2aa46de25ccde884f9b51542bd3e6df",
       data: this.data
     })));
   }

package/dist/q2-tecton-elements/q2-avatar.entry.js

@@ -1,6 +1,6 @@
 import { r as a, h as t, g as r } from "./index-7a5365e2.js";
 
-const i = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.avatar-img,.avatar-img-default{display:var(--tct-avatar-display, inline);object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)));border:var(--tct-avatar-border, none)}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{display:var(--tct-avatar-display, inline);height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%);border:var(--tct-avatar-border, none)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 48px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));border:var(--tct-avatar-border, none);background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));display:inline-flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--t-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--t-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));--tct-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill));color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";
+const i = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.avatar-img,.avatar-img-default{display:var(--tct-avatar-display, block);object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)));border:var(--tct-avatar-border, none)}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{display:var(--tct-avatar-display, block);height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%);border:var(--tct-avatar-border, none)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 48px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));border:var(--tct-avatar-border, none);background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));display:flex;align-items:center;justify-content:center}q2-icon{--tct-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--tct-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--tct-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));--tct-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill));color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--tct-icon-size));height:var(--tct-avatar-icon-size, var(--tct-icon-size))}";
 
 const e = i;
 
@@ -52,9 +52,9 @@ const c = class {
     const e = (this.name || this.initials) && (!this.src || this.badSrc);
     const c = !this.name && !this.initials && (!this.src || this.badSrc);
     return t("div", {
-      key: "1d329487fd99584197298679c5509a741d8bbd05"
+      key: "d9721ec70f2f1162159d401c3d6e25bc7d757387"
     }, r && t("img", {
-      key: "c3707d989ee5c51247da10e9e4112ff44d274d0f",
+      key: "4453493c5432082368a77764dfb9851571a70237",
       class: i ? "avatar-img" : "avatar-img-default",
       "test-id": "userImage",
       src: this.src,
@@ -62,7 +62,7 @@ const c = class {
       onLoad: this.onLoad,
       alt: this.name || ""
     }), e && t("svg", {
-      key: "0b3521e7db6b93bb34b60ade469ca34322ffb273",
+      key: "10303ff815e3839035e0f1ab466b9999c3c1ad95",
       viewBox: "0 0 100 100",
       preserveAspectRatio: "xMidYMid meet",
       "test-id": "userInitials",
@@ -70,18 +70,18 @@ const c = class {
       "aria-label": this.name,
       "aria-hidden": !this.name && "true"
     }, t("text", {
-      key: "ed394397c95e4c3ca580ba9b151f5151b18c17c8",
+      key: "9fa420ccf432f2ccf5d2e99555489ac5fbc28358",
       x: "50",
       y: "50",
       "dominant-baseline": "central",
       "text-anchor": "middle",
       "aria-hidden": "true"
     }, a)), c && t("div", {
-      key: "cb5591d95fd07d284ed115568d5688a6b13b3562",
+      key: "20da7ea3494eb9a403b0a7c5d038c097003c15e1",
       "test-id": "fallbackIcon",
       class: "fallback"
     }, t("q2-icon", {
-      key: "fe4ba5b90b1258d81eab0328a09317504e209bae",
+      key: "a7b493de65050f601d395e183dcec0ff4382011a",
       type: this.icon
     })));
   }

package/dist/q2-tecton-elements/q2-avatar.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2AvatarCss","Q2AvatarStyle0","Q2Avatar","this","onError","badSrc","onLoad","isLoaded","srcDidUpdate","computedInitials","initials","name","result","substr","parts","split","firstCharacter","lastCharacter","length","undefined","toUpperCase","render","showImg","src","showInitials","showFallback","h","key","class","alt","viewBox","preserveAspectRatio","x","y","type","icon"],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, inline);\n    object-fit: cover;\n    height: var-list(--tct-avatar-img-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-img-width, --tct-avatar-width, 44px);\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n    border: var(--tct-avatar-border, none);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, inline);\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\n}\n\n.size-1 {\n    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n}\n.size-2 {\n    --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n}\n.size-3 {\n    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n}\n.size-4 {\n    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: var-list(--tct-avatar-fallback-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-fallback-width, --tct-avatar-width, 44px);\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    border: var(--tct-avatar-border, none);\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --t-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --t-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --t-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --t-icon-size);\n    height: var-list(--tct-avatar-icon-size, --t-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={isLoaded ? 'avatar-img' : 'avatar-img-default'}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAc;;AACpB,MAAAC,IAAeD;;MCEFE,IAAQ;;;IAuEjBC,KAAAC,UAAU;MACND,KAAKE,SAAS;AAAI;IAGtBF,KAAAG,SAAS;MACLH,KAAKI,WAAW;AAAI;kBAlEN;oBAGE;gBAOL;;;;;;;EAwBf,YAAAC;IACIL,KAAKE,SAAS;;;;EAMlB,oBAAII;IACA,OAAMC,UAAEA,GAAQC,MAAEA,KAASR;IAC3B,KAAKO,MAAaC,GAAM;IAExB,IAAIC,IAAS;IACb,IAAIF,GAAU;MACVE,IAASF,EAASG,OAAO,GAAG;WACzB,IAAIF,GAAM;MACb,MAAMG,IAAQH,EAAKI,MAAM;MACzB,MAAMC,IAAiBF,EAAM,GAAG;MAChC,MAAMG,IAAgBH,EAAMI,SAAS,IAAIJ,EAAMA,EAAMI,SAAS,GAAG,KAAKC;MACtEP,KAAUI;MACV,IAAIC,GAAeL,KAAUK;;IAGjCL,IAASA,MAAM,QAANA,WAAM,aAANA,EAAQQ;IAEjB,OAAOR;;;;EAcX,MAAAS;IACI,OAAMZ,kBAAEA,KAAqBN;IAC7B,MAAMmB,IAAUnB,KAAKoB,QAAQpB,KAAKE;IAClC,MAAME,IAAWJ,KAAKI;IACtB,MAAMiB,KAAgBrB,KAAKQ,QAAQR,KAAKO,eAAeP,KAAKoB,OAAOpB,KAAKE;IACxE,MAAMoB,KAAgBtB,KAAKQ,SAASR,KAAKO,cAAcP,KAAKoB,OAAOpB,KAAKE;IAExE,OACIqB,EAAA;MAAAC,KAAA;OACKL,KACGI,EAAA;MAAAC,KAAA;MACIC,OAAOrB,IAAW,eAAe;MAAoB,WAC7C;MACRgB,KAAKpB,KAAKoB;MACVnB,SAASD,KAAKC;MACdE,QAAQH,KAAKG;MACbuB,KAAK1B,KAAKQ,QAAQ;QAGzBa,KACGE,EAAA;MAAAC,KAAA;MACIG,SAAQ;MACRC,qBAAoB;MAAe,WAC3B;MACRH,OAAO,wBAAwBnB,EAAiBS;MAAQ,cAC5Cf,KAAKQ;MAAI,gBACPR,KAAKQ,QAAQ;OAE3Be,EAAA;MAAAC,KAAA;MACIK,GAAE;MACFC,GAAE;MAAI,qBACY;MAAS,eACf;MAAQ,eACR;OAEXxB,KAIZgB,KACGC,EAAA;MAAAC,KAAA;MAAA,WACY;MACRC,OAAM;OAENF,EAAA;MAAAC,KAAA;MAASO,MAAM/B,KAAKgC"}
+{"version":3,"names":["q2AvatarCss","Q2AvatarStyle0","Q2Avatar","this","onError","badSrc","onLoad","isLoaded","srcDidUpdate","computedInitials","initials","name","result","substr","parts","split","firstCharacter","lastCharacter","length","undefined","toUpperCase","render","showImg","src","showInitials","showFallback","h","key","class","alt","viewBox","preserveAspectRatio","x","y","type","icon"],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\n    height: var-list(--tct-avatar-img-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-img-width, --tct-avatar-width, 44px);\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n    border: var(--tct-avatar-border, none);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, block);\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\n}\n\n.size-1 {\n    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n}\n.size-2 {\n    --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n}\n.size-3 {\n    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n}\n.size-4 {\n    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: var-list(--tct-avatar-fallback-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-fallback-width, --tct-avatar-width, 44px);\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    border: var(--tct-avatar-border, none);\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --tct-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --tct-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --tct-icon-size);\n    height: var-list(--tct-avatar-icon-size, --tct-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={isLoaded ? 'avatar-img' : 'avatar-img-default'}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAc;;AACpB,MAAAC,IAAeD;;MCEFE,IAAQ;;;IAuEjBC,KAAAC,UAAU;MACND,KAAKE,SAAS;AAAI;IAGtBF,KAAAG,SAAS;MACLH,KAAKI,WAAW;AAAI;kBAlEN;oBAGE;gBAOL;;;;;;;EAwBf,YAAAC;IACIL,KAAKE,SAAS;;;;EAMlB,oBAAII;IACA,OAAMC,UAAEA,GAAQC,MAAEA,KAASR;IAC3B,KAAKO,MAAaC,GAAM;IAExB,IAAIC,IAAS;IACb,IAAIF,GAAU;MACVE,IAASF,EAASG,OAAO,GAAG;WACzB,IAAIF,GAAM;MACb,MAAMG,IAAQH,EAAKI,MAAM;MACzB,MAAMC,IAAiBF,EAAM,GAAG;MAChC,MAAMG,IAAgBH,EAAMI,SAAS,IAAIJ,EAAMA,EAAMI,SAAS,GAAG,KAAKC;MACtEP,KAAUI;MACV,IAAIC,GAAeL,KAAUK;;IAGjCL,IAASA,MAAM,QAANA,WAAM,aAANA,EAAQQ;IAEjB,OAAOR;;;;EAcX,MAAAS;IACI,OAAMZ,kBAAEA,KAAqBN;IAC7B,MAAMmB,IAAUnB,KAAKoB,QAAQpB,KAAKE;IAClC,MAAME,IAAWJ,KAAKI;IACtB,MAAMiB,KAAgBrB,KAAKQ,QAAQR,KAAKO,eAAeP,KAAKoB,OAAOpB,KAAKE;IACxE,MAAMoB,KAAgBtB,KAAKQ,SAASR,KAAKO,cAAcP,KAAKoB,OAAOpB,KAAKE;IAExE,OACIqB,EAAA;MAAAC,KAAA;OACKL,KACGI,EAAA;MAAAC,KAAA;MACIC,OAAOrB,IAAW,eAAe;MAAoB,WAC7C;MACRgB,KAAKpB,KAAKoB;MACVnB,SAASD,KAAKC;MACdE,QAAQH,KAAKG;MACbuB,KAAK1B,KAAKQ,QAAQ;QAGzBa,KACGE,EAAA;MAAAC,KAAA;MACIG,SAAQ;MACRC,qBAAoB;MAAe,WAC3B;MACRH,OAAO,wBAAwBnB,EAAiBS;MAAQ,cAC5Cf,KAAKQ;MAAI,gBACPR,KAAKQ,QAAQ;OAE3Be,EAAA;MAAAC,KAAA;MACIK,GAAE;MACFC,GAAE;MAAI,qBACY;MAAS,eACf;MAAQ,eACR;OAEXxB,KAIZgB,KACGC,EAAA;MAAAC,KAAA;MAAA,WACY;MACRC,OAAM;OAENF,EAAA;MAAAC,KAAA;MAASO,MAAM/B,KAAKgC"}