q2-tecton-elements 1.67.2 → 1.68.0

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

@@ -1,8 +1,8 @@
-import { r as t, c as o, h as e, F as i, g as a } from "./index-CGkHOjh1.js";
+import { r as t, c as i, h as o, F as e, g as a } from "./index-CGkHOjh1.js";
 
-import { l as r, w as s } from "./index-C4PILj1_.js";
+import { l as s, w as r } from "./index-C5gj0T_3.js";
 
-import { s as n, a as c } from "./sanitize-html-string-B35VmRc9.js";
+import { s as n, a as c } from "./sanitize-html-string-DPHNpMWE.js";
 
 import { m as d } from "./mirror-emit-DUjY_ucm.js";
 
@@ -11,9 +11,9 @@ const l = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline
 const h = class {
   constructor(a) {
     t(this, a);
-    this.close = o(this, "close", 7);
-    this.ready = o(this, "ready", 3);
-    this.tctClose = o(this, "tctClose", 7);
+    this.close = i(this, "close", 7);
+    this.ready = i(this, "ready", 3);
+    this.tctClose = i(this, "tctClose", 7);
     this.initialSelectedOptions = [];
     this.maxHeight = .75;
     this.minHeight = .2;
@@ -25,42 +25,133 @@ const h = class {
     // #region State Properties
         this.isScrollable = false;
     this.renderStatus = "is-closing";
+    /**
+         * Focuses the last visible (non-hidden, non-disabled) option in the option list.
+         * Uses the async getOptions() method, but is invoked after preventDefault() has
+         * already been called synchronously by the caller.
+         */    this.focusLastVisibleOption = async () => {
+      if (!this.optionListElement) return;
+      const t = await this.optionListElement.getOptions();
+      const i = t.slice().reverse().find((t => !t.hidden && !t.disabled));
+      if (i) {
+        i.focus();
+      }
+    };
     this.generateOptgroup = t => {
-      const o = document.createElement("q2-optgroup");
-      if (t.label) o.setAttribute("label", t.label);
-      if (t.disabled) o.setAttribute("disabled", "");
-      if (!!t.options.length) t.options.forEach((t => o.appendChild(this.generateOption(t))));
-      return o;
+      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;
     };
     this.generateOption = t => {
-      const o = document.createElement("q2-option");
-      const {innerHTML: e, ...i} = t;
-      if (e) o.innerHTML = n(e);
-      Object.entries(i).forEach((([t, e]) => {
-        if (e === undefined) return;
-        if (typeof e === "boolean") {
-          if (e) o.setAttribute(t, "");
+      const i = document.createElement("q2-option");
+      const {innerHTML: o, ...e} = t;
+      if (o) i.innerHTML = n(o);
+      Object.entries(e).forEach((([t, o]) => {
+        if (o === undefined) return;
+        if (typeof o === "boolean") {
+          if (o) i.setAttribute(t, "");
         } else {
-          o.setAttribute(t, e);
+          i.setAttribute(t, o);
         }
       }));
-      return o;
+      return i;
+    };
+    /**
+         * Handles keyboard navigation within the action sheet dialog.
+         * Manages Tab navigation between options and action buttons (close/done).
+         * Allows Tab to exit to browser chrome when reaching boundaries.
+         *
+         * NOTE: This handler is intentionally synchronous. `event.preventDefault()`
+         * must be called before the browser processes the Tab key (i.e., during the
+         * synchronous portion of the keydown event). Introducing an `await` here
+         * allows the browser to shift focus before preventDefault runs, which causes
+         * Tab from the close button to escape the dialog instead of cycling back to
+         * the options.
+         * @param event - The keyboard event.
+         */    this.handleDialogKeydown = t => {
+      const {data: i} = this;
+      // Only activate for list appearance with an option list
+            if (!i || i.appearance !== "list" || !this.optionListElement) return;
+      const {key: o, shiftKey: e} = t;
+      if (o !== "Tab") return;
+      const a = this.hostElement.shadowRoot.activeElement;
+      const s = this.closeButtonElement;
+      const r = this.doneButtonElement;
+      const n = a === s;
+      const c = a === r;
+      // q2-option lives in light DOM, so document.activeElement is the option element itself when focused.
+      // Avoid `await optionListElement.getOptions()` here — that defers the handler past
+      // the browser's default Tab handling, making preventDefault() ineffective.
+            const d = document.activeElement;
+      const l = !!d && (d.tagName === "Q2-OPTION" || d.tagName === "Q2-DROPDOWN-ITEM") && this.hostElement.contains(d);
+      if (e) {
+        // Shift+Tab: if on close button
+        if (n) {
+          // With a done button (multi-select): allow default to exit to browser.
+          // Browser Shift+Tab from the URL bar lands on the done button (last
+          // tabbable in DOM order), which redirects to the last option via
+          // focusLastVisibleOption — so choices remain reachable.
+          if (r) {
+            // Let it bubble - exits to browser chrome
+            return;
+          }
+          // Without a done button (single-select): redirect to the last visible
+          // option. Otherwise focus would exit to the URL bar and the next
+          // Shift+Tab back into the page would land on the close button (the
+          // only tabbable in the modal), trapping the user in URL ↔ close
+          // with no path back to choices.
+                    t.preventDefault();
+          this.focusLastVisibleOption();
+        }
+        // Shift+Tab: if on done button, focus last option
+         else if (c) {
+          t.preventDefault();
+          this.focusLastVisibleOption();
+        }
+        // Shift+Tab: if on any option, go to close button
+         else if (l && s) {
+          t.preventDefault();
+          s.focus();
+        }
+      } else {
+        // Forward Tab: if on close button, skip to first/selected option
+        if (n) {
+          t.preventDefault();
+          this.optionListElement.focus();
+        }
+        // Forward Tab: if on done button, allow default to exit to browser
+         else if (c) {
+          // Let it bubble - exits to browser chrome
+          return;
+        }
+        // Forward Tab: if on any option
+         else if (l) {
+          if (r) {
+            // With done button: go to done button
+            t.preventDefault();
+            r.focus();
+          }
+          // else: No done button - allow default Tab behavior to exit to browser
+                }
+      }
     };
     this.onCancel = t => {
-      var o, e;
+      var i, o;
       t.preventDefault();
-      const {initialSelectedOptions: i} = this;
+      const {initialSelectedOptions: e} = this;
       this.hide({
-        value: (e = (o = i === null || i === void 0 ? void 0 : i[0]) === null || o === void 0 ? void 0 : o.value) !== null && e !== void 0 ? e : "",
-        values: i,
+        value: (o = (i = e === null || e === void 0 ? void 0 : e[0]) === null || i === void 0 ? void 0 : i.value) !== null && o !== void 0 ? o : "",
+        values: e,
         type: "cancel"
       });
     };
     this.onClick = t => {
-      const o = t.target;
-      if (!(o instanceof HTMLElement)) return;
-      const e = !!o.closest(".interior, q2-action-sheet");
-      if (e) return;
+      const i = t.target;
+      if (!(i instanceof HTMLElement)) return;
+      const o = !!i.closest(".interior, q2-action-sheet");
+      if (o) return;
       this.onCancel(t);
     };
     this.onListChange = t => {
@@ -83,42 +174,46 @@ const h = class {
     // #endregion
     // #region Render Methods
         this.renderList = ({data: t}) => {
-      const {listProps: o, slotsHtml: a = []} = t;
-      return e(i, null, a.filter((t => t.slot === "top")).map((t => e("div", {
+      const {listProps: i, slotsHtml: a = []} = t;
+      return o(e, null, a.filter((t => t.slot === "top")).map((t => o("div", {
         innerHTML: c(t.html)
-      }))), e("div", {
+      }))), o("div", {
         class: "content",
         ref: t => this.contentElement = t
-      }, e("q2-option-list", {
+      }, o("q2-option-list", {
         ref: t => this.optionListElement = t,
-        multiple: o.multiple,
-        noSelect: o.noSelect,
+        multiple: i.multiple,
+        noSelect: i.noSelect,
         onChange: this.onListChange,
         onPopoverState: this.onListPopoverStateChange,
-        selectedOptions: o.selectedOptions
-      }, e("slot", null))), e("footer", null, o.multiple && e("q2-btn", {
+        selectedOptions: i.selectedOptions
+      }, o("slot", null))), o("footer", null, i.multiple && o("q2-btn", {
+        ref: t => this.doneButtonElement = t,
         "test-id": "btnDone",
         intent: "workflow-primary",
         onClick: this.onListDone
-      }, r("tecton.element.actionSheet.done"))), a.filter((t => t.slot === "bottom")).map((t => e("div", {
+      }, s("tecton.element.actionSheet.done"))), a.filter((t => t.slot === "bottom")).map((t => o("div", {
         innerHTML: c(t.html)
       }))));
     };
-    this.renderMessage = ({data: t}) => e("q2-message", {
+    this.renderMessage = ({data: t}) => o("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 && o("h2", null, t.title), t.description && o("p", null, t.description));
+    this.renderSlot = () => o("div", {
       class: "content",
       ref: t => this.contentElement = t
-    }, e("slot", null));
+    }, o("slot", null));
   }
   // #endregion
   // #region Component Lifecycle Events
   disconnectedCallback() {
     this.dialogElement.removeEventListener("cancel", this.onCancel);
+    this.dialogElement.removeEventListener("keydown", this.handleDialogKeydown, true);
   }
   componentDidLoad() {
     this.dialogElement.addEventListener("cancel", this.onCancel);
+    // Use capture phase to intercept Tab before option-list handles it
+        this.dialogElement.addEventListener("keydown", this.handleDialogKeydown, true);
     this.ready.emit();
   }
   // #endregion
@@ -147,7 +242,7 @@ const h = class {
   }
   async show() {
     this.showPreHook();
-    await s();
+    await r();
     this.updateDialogMinMaxHeight();
     this.storeInitialValues();
     if (this.dialogElement.open) return;
@@ -167,9 +262,9 @@ const h = class {
     const {data: t} = this;
     if (!t) return;
     if (t.appearance === "list") {
-      const {event: o} = t;
-      if (o instanceof KeyboardEvent) {
-        this.optionListElement.handleExternalKeydown(o);
+      const {event: i} = t;
+      if (i instanceof KeyboardEvent) {
+        this.optionListElement.handleExternalKeydown(i);
       } else {
         this.optionListElement.focus();
       }
@@ -206,52 +301,53 @@ const h = class {
   }
   render() {
     var t;
-    const {data: o} = this;
-    const i = (o === null || o === void 0 ? void 0 : o.title) || this.title || !this.hideClose;
+    const {data: i} = this;
+    const e = (i === null || i === void 0 ? void 0 : i.title) || this.title || !this.hideClose;
     const a = this.renderStatus || "";
-    let r = null;
-    switch (o === null || o === void 0 ? void 0 : o.appearance) {
+    let s = null;
+    switch (i === null || i === void 0 ? void 0 : i.appearance) {
      case "message":
-      r = this.renderMessage;
+      s = this.renderMessage;
       break;
 
      case "list":
-      r = this.renderList;
+      s = this.renderList;
       break;
 
      default:
-      r = this.renderSlot;
+      s = this.renderSlot;
       break;
     }
-    const s = (o === null || o === void 0 ? void 0 : o.appearance) || "slot";
-    const n = `interior is-${s}`;
-    return e("dialog", {
-      key: "7ef6d64d3f29d01edcc5ba09c6917e08eb27ed0d",
+    const r = (i === null || i === void 0 ? void 0 : i.appearance) || "slot";
+    const n = `interior is-${r}`;
+    return o("dialog", {
+      key: "4a0e3a165326ab9e724600d7e030fa39095dcda0",
       ref: t => this.dialogElement = t,
       class: a,
       onClick: this.onClick
-    }, e("div", {
-      key: "a7da46ce286106d4a14edd50a2ed926b0adb7c84",
+    }, o("div", {
+      key: "9848ffb2d692a788ad1cf1d606f3cfd8638501ae",
       class: n
-    }, i && e("header", {
-      key: "8de945c05de298bf044cb01b872e2f0db17d9910"
-    }, e("div", {
-      key: "b4ec8e173b7109456d927e3f3ceeb8e6e936243d",
+    }, e && o("header", {
+      key: "2a573e272202699a8bf225ae74263aea107f4e5d"
+    }, o("div", {
+      key: "6ea6f8b415ecba0414d337efc1ce4cfdb0ec0cc9",
       class: "title"
-    }, (o === null || o === void 0 ? void 0 : o.title) || this.title), !this.hideClose && e("q2-btn", {
-      key: "ccb610c96edec66abf9f5b353c973e8af9702472",
+    }, (i === null || i === void 0 ? void 0 : i.title) || this.title), !this.hideClose && o("q2-btn", {
+      key: "8f5efe5b235afadcaba63cd9ab0906c01cbb07a0",
+      ref: t => this.closeButtonElement = t,
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.actionSheet.close",
       "hide-label": true
-    }, e("q2-icon", {
-      key: "1989ba1b179b5053719a78a1d4b9359734f23f36",
+    }, o("q2-icon", {
+      key: "af64434f4d0ec15d183a91501e48cc550fc2532e",
       type: "close"
-    }))), ((t = this.data) === null || t === void 0 ? void 0 : t.description) && e("p", {
-      key: "13fc69d21bf48b27f22555630a25c7019ede5a2e"
-    }, o.description), r && e(r, {
-      key: "ec78bb8ee37838b38c32405c4292b6836e5deb5f",
+    }))), ((t = this.data) === null || t === void 0 ? void 0 : t.description) && o("p", {
+      key: "a2044acff20cfc72cbde4d0899d34e51ac390984"
+    }, i.description), s && o(s, {
+      key: "558338b884c43bc014cc577581646fe830b7bc77",
       data: this.data
     })));
   }

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

@@ -1 +1 @@
-{"version":3,"names":["q2ActionSheetCss","Q2ActionSheet","constructor","hostRef","this","initialSelectedOptions","maxHeight","minHeight","selectedOptions","values","value","isScrollable","renderStatus","generateOptgroup","option","optgroupElement","document","createElement","label","setAttribute","disabled","options","length","forEach","opt","appendChild","generateOption","optionElement","innerHTML","attributes","sanitizeHTMLString","Object","entries","key","undefined","onCancel","event","preventDefault","hide","_b","_a","type","onClick","eventTarget","target","HTMLElement","isInContent","closest","onListChange","detail","onListDone","onListPopoverStateChange","open","action","renderList","data","listProps","slotsHtml","h","Fragment","filter","entry","slot","map","sanitizeActionSheetSlotHtml","html","class","ref","el","contentElement","optionListElement","multiple","noSelect","onChange","onPopoverState","intent","loc","renderMessage","title","description","renderSlot","disconnectedCallback","dialogElement","removeEventListener","componentDidLoad","addEventListener","ready","emit","mirrorEmit","close","hidePostHook","once","show","showPreHook","waitForNextPaint","updateDialogMinMaxHeight","storeInitialValues","showModal","focusContent","appearance","KeyboardEvent","handleExternalKeydown","focus","hostElement","windowHeight","window","innerHeight","style","setProperty","Math","floor","render","showHeader","hideClose","RenderContent","interiorClasses"],"sources":["src/components/q2-action-sheet/q2-action-sheet.scss?tag=q2-action-sheet&encapsulation=shadow","src/components/q2-action-sheet/q2-action-sheet.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-action-sheet-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;\n    --comp-border-radius: #{var-list(--tct-action-sheet-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-action-sheet-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-action-sheet-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-action-sheet-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-action-sheet-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-action-sheet-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-action-sheet-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-action-sheet-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-action-sheet-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-action-sheet-max-width, 400px)};\n    --comp-dialog-max-height: #{var-list(--tct-action-sheet-max-height, --comp-action-sheet-computed-max-height, 75vh)};\n    --comp-dialog-min-height: #{var-list(--tct-action-sheet-min-height, --comp-action-sheet-computed-min-height, 20vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-action-sheet-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    min-height: var(--comp-dialog-min-height);\n    max-height: var(--comp-dialog-max-height);\n\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-action-sheet-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        &.is-opening,\n        &.is-open {\n            transform: translateY(-100%);\n\n            @media screen and (min-width: 1200px) {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n\n    @media screen and (min-width: 1200px) {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 0;\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n}\n\n.interior {\n    display: grid;\n    grid-template-rows: 44px 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    // Scroll overlays\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n\n    [slot=\"popover-top\"] {\n        padding: var-list(--tct-dropdown-popover-top-slot-padding, 0);\n        border-bottom: var-list(--tct-dropdown-slot-border-top);\n    }\n\n    [slot=\"popover-bottom\"] {\n        padding: var-list(--tct-dropdown-popover-bottom-slot-padding, 0);\n        border-top: var-list(--tct-dropdown-slot-border-bottom);\n    }\n}\n\nheader {\n    display: grid;\n    grid-template-columns: var(--comp-close-button-size) 1fr var(--comp-close-button-size);\n    grid-template-areas: '. title close';\n    gap: var(--comp-dialog-gap);\n\n    .title {\n        grid-area: title;\n        text-align: center;\n        line-height: var(--comp-header-height);\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n\nfooter {\n    display: flex;\n    justify-content: end;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Element,\n    Fragment,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport { loc, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString, { sanitizeActionSheetSlotHtml } from 'src/utils/sanitize-html-string';\nimport type {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/types/action-sheet';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Action Sheet\n * @category Display\n * @summary Use for presenting a modal sheet.\n */\n@Component({ tag: 'q2-action-sheet', shadow: true, styleUrl: 'q2-action-sheet.scss' })\nexport class Q2ActionSheet implements ComponentInterface {\n    // #region Own Properties\n\n    contentElement: HTMLDivElement;\n    dialogElement: HTMLDialogElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    maxHeight: number = 0.75;\n    minHeight: number = 0.2;\n    optionListElement: HTMLQ2OptionListElement;\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isScrollable: boolean = false;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ mutable: true })\n    data: ActionSheetData;\n\n    @Prop()\n    hideClose: boolean;\n\n    @Prop()\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the action sheet is closed.\n     * @deprecated Use 'tctClose' instead\n     */\n    @Event()\n    close: EventEmitter<ActionSheetListCloseData>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    ready: EventEmitter;\n\n    /**\n     * Emitted when the action sheet is closed.\n     */\n    @Event()\n    tctClose: EventEmitter<ActionSheetListCloseData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        mirrorEmit(this, ['close', 'tctClose'], data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (innerHTML) optionElement.innerHTML = sanitizeHTMLString(innerHTML);\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps, slotsHtml = [] } = data;\n        return (\n            <Fragment>\n                {slotsHtml\n                    .filter(entry => entry.slot === 'top')\n                    .map(entry => (\n                        <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n                    ))}\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n                {slotsHtml\n                    .filter(entry => entry.slot === 'bottom')\n                    .map(entry => (\n                        <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n                    ))}\n            </Fragment>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2ActionSheetCss","Q2ActionSheet","constructor","hostRef","this","initialSelectedOptions","maxHeight","minHeight","selectedOptions","values","value","isScrollable","renderStatus","focusLastVisibleOption","async","optionListElement","allOptions","getOptions","lastVisibleOption","slice","reverse","find","opt","hidden","disabled","focus","generateOptgroup","option","optgroupElement","document","createElement","label","setAttribute","options","length","forEach","appendChild","generateOption","optionElement","innerHTML","attributes","sanitizeHTMLString","Object","entries","key","undefined","handleDialogKeydown","event","data","appearance","shiftKey","shadowActiveElement","hostElement","shadowRoot","activeElement","closeButton","closeButtonElement","doneButton","doneButtonElement","isInCloseButton","isInDoneButton","isOnOption","tagName","contains","preventDefault","onCancel","hide","_b","_a","type","onClick","eventTarget","target","HTMLElement","isInContent","closest","onListChange","detail","onListDone","onListPopoverStateChange","open","action","renderList","listProps","slotsHtml","h","Fragment","filter","entry","slot","map","sanitizeActionSheetSlotHtml","html","class","ref","el","contentElement","multiple","noSelect","onChange","onPopoverState","intent","loc","renderMessage","title","description","renderSlot","disconnectedCallback","dialogElement","removeEventListener","componentDidLoad","addEventListener","ready","emit","mirrorEmit","close","hidePostHook","once","show","showPreHook","waitForNextPaint","updateDialogMinMaxHeight","storeInitialValues","showModal","focusContent","KeyboardEvent","handleExternalKeydown","windowHeight","window","innerHeight","style","setProperty","Math","floor","render","showHeader","hideClose","RenderContent","interiorClasses"],"sources":["src/components/q2-action-sheet/q2-action-sheet.scss?tag=q2-action-sheet&encapsulation=shadow","src/components/q2-action-sheet/q2-action-sheet.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-action-sheet-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;\n    --comp-border-radius: #{var-list(--tct-action-sheet-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-action-sheet-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-action-sheet-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-action-sheet-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-action-sheet-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-action-sheet-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-action-sheet-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-action-sheet-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-action-sheet-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-action-sheet-max-width, 400px)};\n    --comp-dialog-max-height: #{var-list(--tct-action-sheet-max-height, --comp-action-sheet-computed-max-height, 75vh)};\n    --comp-dialog-min-height: #{var-list(--tct-action-sheet-min-height, --comp-action-sheet-computed-min-height, 20vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-action-sheet-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    min-height: var(--comp-dialog-min-height);\n    max-height: var(--comp-dialog-max-height);\n\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-action-sheet-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        &.is-opening,\n        &.is-open {\n            transform: translateY(-100%);\n\n            @media screen and (min-width: 1200px) {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n\n    @media screen and (min-width: 1200px) {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 0;\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n}\n\n.interior {\n    display: grid;\n    grid-template-rows: 44px 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    // Scroll overlays\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n\n    [slot=\"popover-top\"] {\n        padding: var-list(--tct-dropdown-popover-top-slot-padding, 0);\n        border-bottom: var-list(--tct-dropdown-slot-border-top);\n    }\n\n    [slot=\"popover-bottom\"] {\n        padding: var-list(--tct-dropdown-popover-bottom-slot-padding, 0);\n        border-top: var-list(--tct-dropdown-slot-border-bottom);\n    }\n}\n\nheader {\n    display: grid;\n    grid-template-columns: var(--comp-close-button-size) 1fr var(--comp-close-button-size);\n    grid-template-areas: '. title close';\n    gap: var(--comp-dialog-gap);\n\n    .title {\n        grid-area: title;\n        text-align: center;\n        line-height: var(--comp-header-height);\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n\nfooter {\n    display: flex;\n    justify-content: end;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Element,\n    Fragment,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport { loc, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString, { sanitizeActionSheetSlotHtml } from 'src/utils/sanitize-html-string';\nimport type {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/types/action-sheet';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Action Sheet\n * @category Display\n * @summary Use for presenting a modal sheet.\n */\n@Component({ tag: 'q2-action-sheet', shadow: true, styleUrl: 'q2-action-sheet.scss' })\nexport class Q2ActionSheet implements ComponentInterface {\n    // #region Own Properties\n\n    closeButtonElement: HTMLQ2BtnElement;\n    contentElement: HTMLDivElement;\n    dialogElement: HTMLDialogElement;\n    doneButtonElement: HTMLQ2BtnElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    maxHeight: number = 0.75;\n    minHeight: number = 0.2;\n    optionListElement: HTMLQ2OptionListElement;\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    isScrollable: boolean = false;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ mutable: true })\n    data: ActionSheetData;\n\n    @Prop()\n    hideClose: boolean;\n\n    @Prop()\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the action sheet is closed.\n     * @deprecated Use 'tctClose' instead\n     */\n    @Event()\n    close: EventEmitter<ActionSheetListCloseData>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    ready: EventEmitter;\n\n    /**\n     * Emitted when the action sheet is closed.\n     */\n    @Event()\n    tctClose: EventEmitter<ActionSheetListCloseData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.dialogElement.removeEventListener('keydown', this.handleDialogKeydown, true);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        // Use capture phase to intercept Tab before option-list handles it\n        this.dialogElement.addEventListener('keydown', this.handleDialogKeydown, true);\n        this.ready.emit();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        mirrorEmit(this, ['close', 'tctClose'], data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    /**\n     * Focuses the last visible (non-hidden, non-disabled) option in the option list.\n     * Uses the async getOptions() method, but is invoked after preventDefault() has\n     * already been called synchronously by the caller.\n     */\n    focusLastVisibleOption = async () => {\n        if (!this.optionListElement) return;\n        const allOptions = await this.optionListElement.getOptions();\n        const lastVisibleOption = allOptions\n            .slice()\n            .reverse()\n            .find(opt => !opt.hidden && !opt.disabled);\n        if (lastVisibleOption) {\n            lastVisibleOption.focus();\n        }\n    };\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (innerHTML) optionElement.innerHTML = sanitizeHTMLString(innerHTML);\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    /**\n     * Handles keyboard navigation within the action sheet dialog.\n     * Manages Tab navigation between options and action buttons (close/done).\n     * Allows Tab to exit to browser chrome when reaching boundaries.\n     *\n     * NOTE: This handler is intentionally synchronous. `event.preventDefault()`\n     * must be called before the browser processes the Tab key (i.e., during the\n     * synchronous portion of the keydown event). Introducing an `await` here\n     * allows the browser to shift focus before preventDefault runs, which causes\n     * Tab from the close button to escape the dialog instead of cycling back to\n     * the options.\n     * @param event - The keyboard event.\n     */\n    handleDialogKeydown = (event: KeyboardEvent) => {\n        const { data } = this;\n        // Only activate for list appearance with an option list\n        if (!data || data.appearance !== 'list' || !this.optionListElement) return;\n\n        const { key, shiftKey } = event;\n        if (key !== 'Tab') return;\n\n        const shadowActiveElement = this.hostElement.shadowRoot.activeElement;\n        const closeButton = this.closeButtonElement;\n        const doneButton = this.doneButtonElement;\n\n        const isInCloseButton = shadowActiveElement === closeButton;\n        const isInDoneButton = shadowActiveElement === doneButton;\n\n        // q2-option lives in light DOM, so document.activeElement is the option element itself when focused.\n        // Avoid `await optionListElement.getOptions()` here — that defers the handler past\n        // the browser's default Tab handling, making preventDefault() ineffective.\n        const activeElement = document.activeElement;\n        const isOnOption =\n            !!activeElement &&\n            (activeElement.tagName === 'Q2-OPTION' || activeElement.tagName === 'Q2-DROPDOWN-ITEM') &&\n            this.hostElement.contains(activeElement);\n\n        if (shiftKey) {\n            // Shift+Tab: if on close button\n            if (isInCloseButton) {\n                // With a done button (multi-select): allow default to exit to browser.\n                // Browser Shift+Tab from the URL bar lands on the done button (last\n                // tabbable in DOM order), which redirects to the last option via\n                // focusLastVisibleOption — so choices remain reachable.\n                if (doneButton) {\n                    // Let it bubble - exits to browser chrome\n                    return;\n                }\n                // Without a done button (single-select): redirect to the last visible\n                // option. Otherwise focus would exit to the URL bar and the next\n                // Shift+Tab back into the page would land on the close button (the\n                // only tabbable in the modal), trapping the user in URL ↔ close\n                // with no path back to choices.\n                event.preventDefault();\n                this.focusLastVisibleOption();\n            }\n            // Shift+Tab: if on done button, focus last option\n            else if (isInDoneButton) {\n                event.preventDefault();\n                this.focusLastVisibleOption();\n            }\n            // Shift+Tab: if on any option, go to close button\n            else if (isOnOption && closeButton) {\n                event.preventDefault();\n                closeButton.focus();\n            }\n        } else {\n            // Forward Tab: if on close button, skip to first/selected option\n            if (isInCloseButton) {\n                event.preventDefault();\n                this.optionListElement.focus();\n            }\n            // Forward Tab: if on done button, allow default to exit to browser\n            else if (isInDoneButton) {\n                // Let it bubble - exits to browser chrome\n                return;\n            }\n            // Forward Tab: if on any option\n            else if (isOnOption) {\n                if (doneButton) {\n                    // With done button: go to done button\n                    event.preventDefault();\n                    doneButton.focus();\n                }\n                // else: No done button - allow default Tab behavior to exit to browser\n            }\n        }\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps, slotsHtml = [] } = data;\n        return (\n            <Fragment>\n                {slotsHtml\n                    .filter(entry => entry.slot === 'top')\n                    .map(entry => (\n                        <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n                    ))}\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            ref={el => (this.doneButtonElement = el)}\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n                {slotsHtml\n                    .filter(entry => entry.slot === 'bottom')\n                    .map(entry => (\n                        <div innerHTML={sanitizeActionSheetSlotHtml(entry.html)}></div>\n                    ))}\n            </Fragment>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    ref={el => (this.closeButtonElement = el)}\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"q2-avatar.entry.esm.js","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-wrapper {\n    position: relative;\n    border: 1px solid transparent;\n    padding: 1px;\n    border-radius: 100%;\n\n    .hover-ring {\n        display: flex;\n    }\n    &:hover {\n        border-color: var-list(\n            --tct-avatar-background,\n            --tct-avatar-bg,\n            --t-gray-8,\n            #9e9e9e\n        );\n    }\n\n    .decorator {\n        height: var(--app-scale-3x, 15px);\n        width: var(--app-scale-3x, 15px);\n        background-color: var-list(--tct-avatar-decorator-background-color, --t-base, #ffffff);\n        border-radius: 100%;\n        box-shadow: var-list(\n            --app-shadow-1,\n            #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n        );\n        position: absolute;\n        bottom: 0;\n        right: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        ::slotted(q2-icon) {\n            color: var-list(--tct-avatar-decorator-color, #000000);\n        }\n    }\n\n    &.size-small {\n        height: var(--tct-avatar-small-size, 24px);\n        width: var(--tct-avatar-small-size, 24px);\n        .decorator {\n            height: var(--app-scale-2x, 10px);\n            width: var(--app-scale-2x, 10px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--tct-avatar-decorator-small-icon-size, 8px);\n                width: var(--tct-avatar-decorator-small-icon-size, 8px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-size, --tct-avatar-width, 44px);\n        .decorator {\n            height: var(--app-scale-3x, 15px);\n            width: var(--app-scale-3x, 15px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--app-scale-2x, 10px);\n                width: var(--app-scale-2x, 10px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-large {\n        height: var(--tct-avatar-large-size, 64px);\n        width: var(--tct-avatar-large-size, 64px);\n        .decorator {\n            height: var(--app-scale-4x, 20px);\n            width: var(--app-scale-4x, 20px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: 14px;\n                width: 14px;\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n}\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\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    height: 100%;\n    width: 100%;\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    backdrop-filter: var(--tct-avatar-backdrop-filter);\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    height: 100%;\n    width: 100%;\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: 100%;\n    width: 100%;\n    border-radius: var-list(\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-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    q2-icon {\n        --tct-icon-size: #{var-list(--tct-avatar-icon-size, 65%)};\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-avatar-icon-stroke-primary,\n                currentcolor\n            )};\n        --tct-icon-stroke-secondary: #{var-list(\n                --tct-avatar-icon-stroke-secondary,\n                currentcolor\n            )};\n        --tct-icon-fill: #{var-list(--tct-avatar-icon-fill)};\n        color: var-list(--tct-avatar-icon-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}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n/**\n * @name Avatar\n * @category Display\n * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.\n *\n * @slot decorator - An optional affordance indicator to display in the top-right corner\n */\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Own Properties\n\n    private decoratorObserver: MutationObserver;\n\n    // #endregion\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    hasDecorator: 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    /**  Determines how large to make the avatar */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.decoratorObserver) {\n            this.decoratorObserver.disconnect();\n        }\n    }\n\n    componentWillLoad() {\n        this.checkDecorator();\n    }\n\n    componentDidLoad() {\n        this.setupDecoratorObserver();\n    }\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    checkDecorator() {\n        const decoratorElements = Array.from(this.el.children).filter(\n            child => child.getAttribute('slot') === 'decorator'\n        );\n        this.hasDecorator = decoratorElements.length > 0;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    private setupDecoratorObserver() {\n        // Set up MutationObserver to watch for changes to the host element's children\n        this.decoratorObserver = new MutationObserver(() => {\n            this.checkDecorator();\n        });\n\n        // Observe changes to the host element's children (light DOM)\n        this.decoratorObserver.observe(this.el, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['slot'],\n        });\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 class={`avatar-wrapper size-${this.size}`}>\n                {this.hasDecorator && (\n                    <div class=\"decorator\">\n                        <slot name=\"decorator\" />\n                    </div>\n                )}\n\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 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"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-avatar.entry.esm.js","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@import './variables';\n\n.avatar-wrapper {\n    position: relative;\n    border: 1px solid transparent;\n    padding: 1px;\n    border-radius: 100%;\n\n    .hover-ring {\n        display: flex;\n    }\n    &:hover {\n        border-color: var-list(\n            --tct-avatar-background,\n            --tct-avatar-bg,\n            --t-gray-8,\n            #9e9e9e\n        );\n    }\n\n    .decorator {\n        height: var(--app-scale-3x, 15px);\n        width: var(--app-scale-3x, 15px);\n        background-color: var-list(--tct-avatar-decorator-background-color, --t-base, #ffffff);\n        border-radius: 100%;\n        box-shadow: var-list(\n            --app-shadow-1,\n            #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n        );\n        position: absolute;\n        bottom: 0;\n        right: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        ::slotted(q2-icon) {\n            color: var-list(--tct-avatar-decorator-color, #000000);\n        }\n    }\n\n    &.size-small {\n        height: var(--tct-avatar-small-size, 24px);\n        width: var(--tct-avatar-small-size, 24px);\n        .decorator {\n            height: var(--app-scale-2x, 10px);\n            width: var(--app-scale-2x, 10px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--tct-avatar-decorator-small-icon-size, 8px);\n                width: var(--tct-avatar-decorator-small-icon-size, 8px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-size, --tct-avatar-width, 44px);\n        .decorator {\n            height: var(--app-scale-3x, 15px);\n            width: var(--app-scale-3x, 15px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--app-scale-2x, 10px);\n                width: var(--app-scale-2x, 10px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-large {\n        height: var(--tct-avatar-large-size, 64px);\n        width: var(--tct-avatar-large-size, 64px);\n        .decorator {\n            height: var(--app-scale-4x, 20px);\n            width: var(--app-scale-4x, 20px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: 14px;\n                width: 14px;\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n}\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\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    height: 100%;\n    width: 100%;\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    backdrop-filter: var(--tct-avatar-backdrop-filter);\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    height: 100%;\n    width: 100%;\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: 100%;\n    width: 100%;\n    border-radius: var-list(\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-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    q2-icon {\n        --tct-icon-size: #{var-list(--tct-avatar-icon-size, 65%)};\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-avatar-icon-stroke-primary,\n                currentcolor\n            )};\n        --tct-icon-stroke-secondary: #{var-list(\n                --tct-avatar-icon-stroke-secondary,\n                currentcolor\n            )};\n        --tct-icon-fill: #{var-list(--tct-avatar-icon-fill)};\n        color: var-list(--tct-avatar-icon-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}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n/**\n * @name Avatar\n * @category Display\n * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.\n *\n * @slot decorator - An optional affordance indicator to display in the top-right corner\n */\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Own Properties\n\n    private decoratorObserver: MutationObserver;\n\n    // #endregion\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    hasDecorator: 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    /**  Determines how large to make the avatar */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.decoratorObserver) {\n            this.decoratorObserver.disconnect();\n        }\n    }\n\n    componentWillLoad() {\n        this.checkDecorator();\n    }\n\n    componentDidLoad() {\n        this.setupDecoratorObserver();\n    }\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    checkDecorator() {\n        const decoratorElements = Array.from(this.el.children).filter(\n            child => child.getAttribute('slot') === 'decorator'\n        );\n        this.hasDecorator = decoratorElements.length > 0;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    private setupDecoratorObserver() {\n        // Set up MutationObserver to watch for changes to the host element's children\n        this.decoratorObserver = new MutationObserver(() => {\n            this.checkDecorator();\n        });\n\n        // Observe changes to the host element's children (light DOM)\n        this.decoratorObserver.observe(this.el, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['slot'],\n        });\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 class={`avatar-wrapper size-${this.size}`}>\n                {this.hasDecorator && (\n                    <div class=\"decorator\">\n                        <slot name=\"decorator\" />\n                    </div>\n                )}\n\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 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"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":["q2AvatarCss","Q2Avatar","constructor","hostRef","this","badSrc","hasDecorator","isLoaded","icon","size","onError","onLoad","disconnectedCallback","decoratorObserver","disconnect","componentWillLoad","checkDecorator","componentDidLoad","setupDecoratorObserver","srcDidUpdate","computedInitials","initials","name","result","substr","parts","split","firstCharacter","lastCharacter","length","undefined","toUpperCase","decoratorElements","Array","from","el","children","filter","child","getAttribute","MutationObserver","observe","childList","subtree","attributes","attributeFilter","render","showImg","src","showInitials","showFallback","h","key","class","alt","viewBox","preserveAspectRatio","x","y","type"],"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-wrapper {\n    position: relative;\n    border: 1px solid transparent;\n    padding: 1px;\n    border-radius: 100%;\n\n    .hover-ring {\n        display: flex;\n    }\n    &:hover {\n        border-color: var-list(\n            --tct-avatar-background,\n            --tct-avatar-bg,\n            --t-gray-8,\n            #9e9e9e\n        );\n    }\n\n    .decorator {\n        height: var(--app-scale-3x, 15px);\n        width: var(--app-scale-3x, 15px);\n        background-color: var-list(--tct-avatar-decorator-background-color, --t-base, #ffffff);\n        border-radius: 100%;\n        box-shadow: var-list(\n            --app-shadow-1,\n            #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n        );\n        position: absolute;\n        bottom: 0;\n        right: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        ::slotted(q2-icon) {\n            color: var-list(--tct-avatar-decorator-color, #000000);\n        }\n    }\n\n    &.size-small {\n        height: var(--tct-avatar-small-size, 24px);\n        width: var(--tct-avatar-small-size, 24px);\n        .decorator {\n            height: var(--app-scale-2x, 10px);\n            width: var(--app-scale-2x, 10px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--tct-avatar-decorator-small-icon-size, 8px);\n                width: var(--tct-avatar-decorator-small-icon-size, 8px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-size, --tct-avatar-width, 44px);\n        .decorator {\n            height: var(--app-scale-3x, 15px);\n            width: var(--app-scale-3x, 15px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--app-scale-2x, 10px);\n                width: var(--app-scale-2x, 10px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-large {\n        height: var(--tct-avatar-large-size, 64px);\n        width: var(--tct-avatar-large-size, 64px);\n        .decorator {\n            height: var(--app-scale-4x, 20px);\n            width: var(--app-scale-4x, 20px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: 14px;\n                width: 14px;\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n}\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\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    height: 100%;\n    width: 100%;\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    backdrop-filter: var(--tct-avatar-backdrop-filter);\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    height: 100%;\n    width: 100%;\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: 100%;\n    width: 100%;\n    border-radius: var-list(\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-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    q2-icon {\n        --tct-icon-size: #{var-list(--tct-avatar-icon-size, 65%)};\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-avatar-icon-stroke-primary,\n                currentcolor\n            )};\n        --tct-icon-stroke-secondary: #{var-list(\n                --tct-avatar-icon-stroke-secondary,\n                currentcolor\n            )};\n        --tct-icon-fill: #{var-list(--tct-avatar-icon-fill)};\n        color: var-list(--tct-avatar-icon-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}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n/**\n * @name Avatar\n * @category Display\n * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.\n *\n * @slot decorator - An optional affordance indicator to display in the top-right corner\n */\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Own Properties\n\n    private decoratorObserver: MutationObserver;\n\n    // #endregion\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    hasDecorator: 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    /**  Determines how large to make the avatar */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.decoratorObserver) {\n            this.decoratorObserver.disconnect();\n        }\n    }\n\n    componentWillLoad() {\n        this.checkDecorator();\n    }\n\n    componentDidLoad() {\n        this.setupDecoratorObserver();\n    }\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    checkDecorator() {\n        const decoratorElements = Array.from(this.el.children).filter(\n            child => child.getAttribute('slot') === 'decorator'\n        );\n        this.hasDecorator = decoratorElements.length > 0;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    private setupDecoratorObserver() {\n        // Set up MutationObserver to watch for changes to the host element's children\n        this.decoratorObserver = new MutationObserver(() => {\n            this.checkDecorator();\n        });\n\n        // Observe changes to the host element's children (light DOM)\n        this.decoratorObserver.observe(this.el, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['slot'],\n        });\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 class={`avatar-wrapper size-${this.size}`}>\n                {this.hasDecorator && (\n                    <div class=\"decorator\">\n                        <slot name=\"decorator\" />\n                    </div>\n                )}\n\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 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;;MCUPC,IAAQ;EADrB,WAAAC,CAAAC;;;;QAgBIC,KAAMC,SAAY;IAGlBD,KAAYE,eAAY;IAGxBF,KAAQG,WAAY;;;6GAOpBH,KAAII,OAAW;uDAkBfJ,KAAIK,OAAiC;IA6DrCL,KAAOM,UAAG;MACNN,KAAKC,SAAS;AAAI;IAGtBD,KAAMO,SAAG;MACLP,KAAKG,WAAW;AAAI;AA+E3B;;;EAxIG,oBAAAK;IACI,IAAIR,KAAKS,mBAAmB;MACxBT,KAAKS,kBAAkBC;;;EAI/B,iBAAAC;IACIX,KAAKY;;EAGT,gBAAAC;IACIb,KAAKc;;;;EAOT,YAAAC;IACIf,KAAKC,SAAS;;;;EAMlB,oBAAIe;IACA,OAAMC,UAAEA,GAAQC,MAAEA,KAASlB;IAC3B,KAAKiB,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,MAAA,QAAAA,WAAM,aAANA,EAAQQ;IAEjB,OAAOR;;EAGX,cAAAP;IACI,MAAMgB,IAAoBC,MAAMC,KAAK9B,KAAK+B,GAAGC,UAAUC,QACnDC,KAASA,EAAMC,aAAa,YAAY;IAE5CnC,KAAKE,eAAe0B,EAAkBH,SAAS;;EAW3C,sBAAAX;;IAEJd,KAAKS,oBAAoB,IAAI2B,kBAAiB;MAC1CpC,KAAKY;AAAgB;;QAIzBZ,KAAKS,kBAAkB4B,QAAQrC,KAAK+B,IAAI;MACpCO,WAAW;MACXC,SAAS;MACTC,YAAY;MACZC,iBAAiB,EAAC;;;;;EAO1B,MAAAC;IACI,OAAM1B,kBAAEA,KAAqBhB;IAC7B,MAAM2C,IAAU3C,KAAK4C,QAAQ5C,KAAKC;IAClC,MAAME,IAAWH,KAAKG;IACtB,MAAM0C,KAAgB7C,KAAKkB,QAAQlB,KAAKiB,eAAejB,KAAK4C,OAAO5C,KAAKC;IACxE,MAAM6C,KAAgB9C,KAAKkB,SAASlB,KAAKiB,cAAcjB,KAAK4C,OAAO5C,KAAKC;IAExE,OACI8C,EAAA;MAAAC,KAAA;MAAKC,OAAO,uBAAuBjD,KAAKK;OACnCL,KAAKE,gBACF6C,EAAK;MAAAC,KAAA;MAAAC,OAAM;OACPF,EAAA;MAAAC,KAAA;MAAM9B,MAAK;SAIlByB,KACGI,EACI;MAAAC,KAAA;MAAAC,OAAO,GAAG9C,IAAW,eAAe;MAAsB,WAClD;MACRyC,KAAK5C,KAAK4C;MACVtC,SAASN,KAAKM;MACdC,QAAQP,KAAKO;MACb2C,KAAKlD,KAAKkB,QAAQ;QAGzB2B,KACGE,EACI;MAAAC,KAAA;MAAAG,SAAQ;MACRC,qBAAoB;MACZ;MACRH,OAAO,iCAAiCjC,EAAiBS;MAAQ,cACrDzB,KAAKkB;MAAI,gBACPlB,KAAKkB,QAAQ;OAE3B6B,EAAA;MAAAC,KAAA;MACIK,GAAE;MACFC,GAAE;MAAI,qBACY;MAAS,eACf;MACA;OAEXtC,KAIZ8B,KACGC,EAAA;MAAAC,KAAA;MAAA,WACY;MACRC,OAAM;OAENF,EAAS;MAAAC,KAAA;MAAAO,MAAMvD,KAAKI","ignoreList":[]}
+{"version":3,"names":["q2AvatarCss","Q2Avatar","constructor","hostRef","this","badSrc","hasDecorator","isLoaded","icon","size","onError","onLoad","disconnectedCallback","decoratorObserver","disconnect","componentWillLoad","checkDecorator","componentDidLoad","setupDecoratorObserver","srcDidUpdate","computedInitials","initials","name","result","substr","parts","split","firstCharacter","lastCharacter","length","undefined","toUpperCase","decoratorElements","Array","from","el","children","filter","child","getAttribute","MutationObserver","observe","childList","subtree","attributes","attributeFilter","render","showImg","src","showInitials","showFallback","h","key","class","alt","viewBox","preserveAspectRatio","x","y","type"],"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@import './variables';\n\n.avatar-wrapper {\n    position: relative;\n    border: 1px solid transparent;\n    padding: 1px;\n    border-radius: 100%;\n\n    .hover-ring {\n        display: flex;\n    }\n    &:hover {\n        border-color: var-list(\n            --tct-avatar-background,\n            --tct-avatar-bg,\n            --t-gray-8,\n            #9e9e9e\n        );\n    }\n\n    .decorator {\n        height: var(--app-scale-3x, 15px);\n        width: var(--app-scale-3x, 15px);\n        background-color: var-list(--tct-avatar-decorator-background-color, --t-base, #ffffff);\n        border-radius: 100%;\n        box-shadow: var-list(\n            --app-shadow-1,\n            #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n        );\n        position: absolute;\n        bottom: 0;\n        right: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        ::slotted(q2-icon) {\n            color: var-list(--tct-avatar-decorator-color, #000000);\n        }\n    }\n\n    &.size-small {\n        height: var(--tct-avatar-small-size, 24px);\n        width: var(--tct-avatar-small-size, 24px);\n        .decorator {\n            height: var(--app-scale-2x, 10px);\n            width: var(--app-scale-2x, 10px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--tct-avatar-decorator-small-icon-size, 8px);\n                width: var(--tct-avatar-decorator-small-icon-size, 8px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-size, --tct-avatar-width, 44px);\n        .decorator {\n            height: var(--app-scale-3x, 15px);\n            width: var(--app-scale-3x, 15px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: var(--app-scale-2x, 10px);\n                width: var(--app-scale-2x, 10px);\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n    &.size-large {\n        height: var(--tct-avatar-large-size, 64px);\n        width: var(--tct-avatar-large-size, 64px);\n        .decorator {\n            height: var(--app-scale-4x, 20px);\n            width: var(--app-scale-4x, 20px);\n            aspect-ratio: 1/1;\n            ::slotted(q2-icon) {\n                height: 14px;\n                width: 14px;\n                aspect-ratio: 1/1;\n            }\n        }\n    }\n}\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\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    height: 100%;\n    width: 100%;\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    backdrop-filter: var(--tct-avatar-backdrop-filter);\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    height: 100%;\n    width: 100%;\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: 100%;\n    width: 100%;\n    border-radius: var-list(\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-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    q2-icon {\n        --tct-icon-size: #{var-list(--tct-avatar-icon-size, 65%)};\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-avatar-icon-stroke-primary,\n                currentcolor\n            )};\n        --tct-icon-stroke-secondary: #{var-list(\n                --tct-avatar-icon-stroke-secondary,\n                currentcolor\n            )};\n        --tct-icon-fill: #{var-list(--tct-avatar-icon-fill)};\n        color: var-list(--tct-avatar-icon-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}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n/**\n * @name Avatar\n * @category Display\n * @summary Use for displaying photos, initials, or icons for people, businesses, or accounts.\n *\n * @slot decorator - An optional affordance indicator to display in the top-right corner\n */\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Own Properties\n\n    private decoratorObserver: MutationObserver;\n\n    // #endregion\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    hasDecorator: 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    /**  Determines how large to make the avatar */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.decoratorObserver) {\n            this.decoratorObserver.disconnect();\n        }\n    }\n\n    componentWillLoad() {\n        this.checkDecorator();\n    }\n\n    componentDidLoad() {\n        this.setupDecoratorObserver();\n    }\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    checkDecorator() {\n        const decoratorElements = Array.from(this.el.children).filter(\n            child => child.getAttribute('slot') === 'decorator'\n        );\n        this.hasDecorator = decoratorElements.length > 0;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    private setupDecoratorObserver() {\n        // Set up MutationObserver to watch for changes to the host element's children\n        this.decoratorObserver = new MutationObserver(() => {\n            this.checkDecorator();\n        });\n\n        // Observe changes to the host element's children (light DOM)\n        this.decoratorObserver.observe(this.el, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['slot'],\n        });\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 class={`avatar-wrapper size-${this.size}`}>\n                {this.hasDecorator && (\n                    <div class=\"decorator\">\n                        <slot name=\"decorator\" />\n                    </div>\n                )}\n\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 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;;MCUPC,IAAQ;EADrB,WAAAC,CAAAC;;;;QAgBIC,KAAMC,SAAY;IAGlBD,KAAYE,eAAY;IAGxBF,KAAQG,WAAY;;;6GAOpBH,KAAII,OAAW;uDAkBfJ,KAAIK,OAAiC;IA6DrCL,KAAOM,UAAG;MACNN,KAAKC,SAAS;AAAI;IAGtBD,KAAMO,SAAG;MACLP,KAAKG,WAAW;AAAI;AA+E3B;;;EAxIG,oBAAAK;IACI,IAAIR,KAAKS,mBAAmB;MACxBT,KAAKS,kBAAkBC;;;EAI/B,iBAAAC;IACIX,KAAKY;;EAGT,gBAAAC;IACIb,KAAKc;;;;EAOT,YAAAC;IACIf,KAAKC,SAAS;;;;EAMlB,oBAAIe;IACA,OAAMC,UAAEA,GAAQC,MAAEA,KAASlB;IAC3B,KAAKiB,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,MAAA,QAAAA,WAAM,aAANA,EAAQQ;IAEjB,OAAOR;;EAGX,cAAAP;IACI,MAAMgB,IAAoBC,MAAMC,KAAK9B,KAAK+B,GAAGC,UAAUC,QACnDC,KAASA,EAAMC,aAAa,YAAY;IAE5CnC,KAAKE,eAAe0B,EAAkBH,SAAS;;EAW3C,sBAAAX;;IAEJd,KAAKS,oBAAoB,IAAI2B,kBAAiB;MAC1CpC,KAAKY;AAAgB;;QAIzBZ,KAAKS,kBAAkB4B,QAAQrC,KAAK+B,IAAI;MACpCO,WAAW;MACXC,SAAS;MACTC,YAAY;MACZC,iBAAiB,EAAC;;;;;EAO1B,MAAAC;IACI,OAAM1B,kBAAEA,KAAqBhB;IAC7B,MAAM2C,IAAU3C,KAAK4C,QAAQ5C,KAAKC;IAClC,MAAME,IAAWH,KAAKG;IACtB,MAAM0C,KAAgB7C,KAAKkB,QAAQlB,KAAKiB,eAAejB,KAAK4C,OAAO5C,KAAKC;IACxE,MAAM6C,KAAgB9C,KAAKkB,SAASlB,KAAKiB,cAAcjB,KAAK4C,OAAO5C,KAAKC;IAExE,OACI8C,EAAA;MAAAC,KAAA;MAAKC,OAAO,uBAAuBjD,KAAKK;OACnCL,KAAKE,gBACF6C,EAAK;MAAAC,KAAA;MAAAC,OAAM;OACPF,EAAA;MAAAC,KAAA;MAAM9B,MAAK;SAIlByB,KACGI,EACI;MAAAC,KAAA;MAAAC,OAAO,GAAG9C,IAAW,eAAe;MAAsB,WAClD;MACRyC,KAAK5C,KAAK4C;MACVtC,SAASN,KAAKM;MACdC,QAAQP,KAAKO;MACb2C,KAAKlD,KAAKkB,QAAQ;QAGzB2B,KACGE,EACI;MAAAC,KAAA;MAAAG,SAAQ;MACRC,qBAAoB;MACZ;MACRH,OAAO,iCAAiCjC,EAAiBS;MAAQ,cACrDzB,KAAKkB;MAAI,gBACPlB,KAAKkB,QAAQ;OAE3B6B,EAAA;MAAAC,KAAA;MACIK,GAAE;MACFC,GAAE;MAAI,qBACY;MAAS,eACf;MACA;OAEXtC,KAIZ8B,KACGC,EAAA;MAAAC,KAAA;MAAA,WACY;MACRC,OAAM;OAENF,EAAS;MAAAC,KAAA;MAAAO,MAAMvD,KAAKI","ignoreList":[]}