q2-tecton-elements 1.62.6 → 1.63.0

package/dist/q2-tecton-elements/q2-editable-field.entry.js

@@ -1,14 +1,14 @@
-import { r as t, c as e, h as i, g as s } from "./index-CGkHOjh1.js";
+import { r as t, c as i, h as e, g as s } from "./index-CGkHOjh1.js";
 
-import { e as a, o as r, a as n, w as d, l } from "./index-LNnzUeDP.js";
+import { d as a, o as r, i as n, w as d, l } from "./index-YJ5sXwiE.js";
 
 const h = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper .begin-edit,.q2-editable-field-wrapper .save-edit,.q2-editable-field-wrapper .cancel-edit{flex:0 0 44px;--tct-btn-icon-hover-background:var(--tct-editable-field-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-editable-field-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-editable-field-btn-icon-stroke-secondary, var(--app-gray, #747474))}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";
 
 const o = class {
-  constructor(i) {
-    t(this, i);
-    this.change = e(this, "change", 7);
-    this.input = e(this, "input", 7);
+  constructor(e) {
+    t(this, e);
+    this.change = i(this, "change", 7);
+    this.input = i(this, "input", 7);
     this.scheduledAfterRender = [];
     /** Controls the edit state of the element. */    this.editing = false;
     /**
@@ -58,13 +58,13 @@ const o = class {
     };
     this.saveClick = t => {
       t && t.stopPropagation();
-      const e = this.hostElement.shadowRoot.querySelector("q2-input").value;
-      this.defaultValue = e;
+      const i = this.hostElement.shadowRoot.querySelector("q2-input").value;
+      this.defaultValue = i;
       this.change.emit({
         editing: false,
         name: "save",
-        value: this.innerValue || e,
-        formattedValue: this.formattedValue || e
+        value: this.innerValue || i,
+        formattedValue: this.formattedValue || i
       });
     };
   }
@@ -151,13 +151,13 @@ const o = class {
      * `change` event will be emitted.
      *
      * @testOnly
-     */  async setValue(t, e = {
+     */  async setValue(t, i = {
     clickSave: true
   }) {
     await this.clickEdit();
     await d();
     await this.inputElement.setValue(t);
-    if (e.clickSave) {
+    if (i.clickSave) {
       await this.clickSave();
       await d();
     }
@@ -167,15 +167,15 @@ const o = class {
   ariaLabelObserver() {
     a(this);
   }
-  observesEditing(t, e) {
-    if (t === e) return;
+  observesEditing(t, i) {
+    if (t === i) return;
     this.scheduledAfterRender.push(this.hostElement.focus);
   }
   errorsObserver() {
-    const {editing: t, hasErrors: e} = this;
-    const i = this.hostElement.shadowRoot.activeElement;
-    const s = (i === null || i === void 0 ? void 0 : i.tagName) === "Q2-INPUT";
-    if (s || !i || !t || !e) return;
+    const {editing: t, hasErrors: i} = this;
+    const e = this.hostElement.shadowRoot.activeElement;
+    const s = (e === null || e === void 0 ? void 0 : e.tagName) === "Q2-INPUT";
+    if (s || !e || !t || !i) return;
     this.inputElement.focus();
   }
   // #endregion
@@ -193,10 +193,10 @@ const o = class {
     return `q2-editable-field-wrapper ${this.editing ? "editing" : ""}`;
   }
   generateEditStateDOM() {
-    return i("div", {
+    return e("div", {
       class: this.wrapperClass,
       hidden: !this.editing
-    }, i("q2-input", {
+    }, e("q2-input", {
       ref: t => this.inputElement = t,
       label: this.locLabel,
       hideLabel: this.hideLabel,
@@ -212,36 +212,36 @@ const o = class {
       onChange: this.inputChange,
       onKeyDown: this.inputKeyDown,
       onClick: this.inputClick
-    }), i("q2-btn", {
+    }), e("q2-btn", {
       ref: t => this.cancelBtnElement = t,
       class: "cancel-edit",
       label: `${l("tecton.element.editableField.cancel")} ${this.locLabel}`,
       "hide-label": true,
       "test-id": "cancelButton",
       onClick: this.cancelClick
-    }, i("q2-icon", {
+    }, e("q2-icon", {
       type: "close"
-    })), i("q2-btn", {
+    })), e("q2-btn", {
       ref: t => this.saveBtnElement = t,
       class: "save-edit",
       label: `${l("tecton.element.editableField.save")} ${this.locLabel}`,
       "hide-label": true,
       "test-id": "saveButton",
       onClick: this.saveClick
-    }, i("q2-icon", {
+    }, e("q2-icon", {
       type: "checkmark"
     })));
   }
   generateReadStateDOM() {
     if (this.persistentLabel && this.locLabel) {
-      return i("div", {
+      return e("div", {
         class: this.wrapperClass,
         hidden: this.editing
-      }, i("dl", null, i("dt", {
+      }, e("dl", null, e("dt", {
         class: "read-state-label"
-      }, this.locLabel), i("dd", null, i("span", {
+      }, this.locLabel), e("dd", null, e("span", {
         class: "text-wrapper"
-      }, this.formattedValue || this.value), i("q2-btn", {
+      }, this.formattedValue || this.value), e("q2-btn", {
         ref: t => this.editBtnElement = t,
         class: "begin-edit",
         label: `${l("tecton.element.editableField.edit")} ${this.locLabel}`,
@@ -249,16 +249,16 @@ const o = class {
         disabled: this.disabled,
         "test-id": "editButton",
         onClick: this.editClick
-      }, i("q2-icon", {
+      }, e("q2-icon", {
         type: "edit"
       })))));
     }
-    return i("div", {
+    return e("div", {
       class: this.wrapperClass,
       hidden: this.editing
-    }, i("div", {
+    }, e("div", {
       class: "text-wrapper"
-    }, this.formattedValue || this.value), i("q2-btn", {
+    }, this.formattedValue || this.value), e("q2-btn", {
       ref: t => this.editBtnElement = t,
       class: "begin-edit",
       label: `${l("tecton.element.editableField.edit")} ${this.locLabel}`,
@@ -266,14 +266,14 @@ const o = class {
       disabled: this.disabled,
       "test-id": "editButton",
       onClick: this.editClick
-    }, i("q2-icon", {
+    }, e("q2-icon", {
       type: "edit"
     })));
   }
   // #endregion
   // #region Render Methods
   render() {
-    return i("div", {
+    return e("div", {
       key: "cd976a515db2bc31d2fb16cae89358d5363dad9a"
     }, this.generateEditStateDOM(), this.generateReadStateDOM());
   }

package/dist/q2-tecton-elements/q2-file-picker.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, F as r, g as o } from "./index-CGkHOjh1.js";
 
-import { l as a, h as s } from "./index-LNnzUeDP.js";
+import { l as a, h as s } from "./index-YJ5sXwiE.js";
 
 const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-width:var(--tct-file-picker-drop-zone-border-width, 2px);color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;max-width:var(--tct-file-picker-drop-zone-max-width, 640px);min-width:var(--tct-file-picker-drop-zone-min-width, 320px);padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.drop-zone-disabled{opacity:var(--tct-file-picker-drop-zone-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-info{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);max-width:var(--tct-file-picker-drop-zone-max-width, 640px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
 

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

@@ -1 +1 @@
-{"version":3,"file":"q2-formatted-text.entry.esm.js","sources":["src/components/q2-formatted-text/q2-formatted-text.scss?tag=q2-formatted-text&encapsulation=shadow","src/components/q2-formatted-text/q2-formatted-text.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.formatted-text {\n    color: var-list(--tct-formatted-text-color, inherit);\n    font-size: var-list(--tct-formatted-text-font-size, inherit);\n    font-weight: var-list(--tct-formatted-text-font-weight, inherit);\n}\n\n.formatted-text-small {\n    color: var-list(--tct-formatted-text-small-color, inherit);\n    font-size: var-list(--tct-formatted-text-small-font-size, 24px);\n    font-weight: var-list(--tct-formatted-text-small-font-weight, 600);\n}\n\n.formatted-text-medium {\n    color: var-list(--tct-formatted-text-medium-color, inherit);\n    font-size: var-list(--tct-formatted-text-medium-font-size, 42px);\n    font-weight: var-list(--tct-formatted-text-medium-font-weight, 600);\n}\n\n.formatted-text-large {\n    color: var-list(--tct-formatted-text-large-color, inherit);\n    font-size: var-list(--tct-formatted-text-large-font-size, 70px);\n    font-weight: var-list(--tct-formatted-text-large-font-weight, 700);\n}\n","import { IDict } from '@/util';\nimport { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The formatted text to display */\n    formattedValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n    @Prop({ reflect: true })\n    locale: string | string[] = document.documentElement.lang || 'en-US';\n\n    /** The maximum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    maximumFractionDigits: number = 2;\n\n    /** The minimum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    minimumFractionDigits: number = 2;\n\n    /** The minimum number of integer digits to use.  */\n    @Prop({ reflect: false })\n    minimumIntegerDigits: number = 1;\n\n    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative numbers only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n    /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' | undefined;\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    /** The value you want formatted.  */\n    @Prop({ reflect: true })\n    value: number;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatValue();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('value')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    propsUpdated() {\n        this.formatValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get formattedTextClasses(): string {\n        const classes = ['formatted-text'];\n        const sizeClass = this.size ? this.size : this.slotSize;\n        if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n        return classes.join(' ');\n    }\n\n    formatValue() {\n        const options: IDict<any> = {\n            style: 'decimal',\n            signDisplay: this.signDisplay,\n        };\n        if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n        if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n        if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n        this.formattedValue = new Intl.NumberFormat(this.locale, options).format(this.value).trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { formattedTextClasses } = this;\n\n        return (\n            <div\n                class={formattedTextClasses}\n                aria-label={this.formattedValue}\n            >\n                <span>{this.formattedValue}</span>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,u7CAAu7C;;MCGr8C,eAAe,GAAA,MAAA;AAD5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;QAYI,IAAM,CAAA,MAAA,GAAsB,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,OAAO;;AAIpE,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAoB,CAAA,oBAAA,GAAW,CAAC;AAEhC;;;;;;;;AAQG;AAEH,QAAA,IAAW,CAAA,WAAA,GAA+C,MAAM;AAwEnE;;;IAvDG,iBAAiB,GAAA;QACb,IAAI,CAAC,WAAW,EAAE;;;;IAWtB,YAAY,GAAA;QACR,IAAI,CAAC,WAAW,EAAE;;;;AAMtB,IAAA,IAAI,oBAAoB,GAAA;AACpB,QAAA,MAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ;QACvD,IAAI,CAAC,CAAC,SAAS;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,SAAS,CAAA,CAAE,CAAC;AAC5D,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG5B,WAAW,GAAA;AACP,QAAA,MAAM,OAAO,GAAe;AACxB,YAAA,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC;AACD,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;AAAE,YAAA,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB;AAC/F,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;AAClG,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;QAElG,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE;;;;IAM/F,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI;AAErC,QAAA,QACI,4DACI,KAAK,EAAE,oBAAoB,EACf,YAAA,EAAA,IAAI,CAAC,cAAc,EAAA,EAE/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,cAAc,CAAQ,CAChC;;;;;;;;;;;;;;"}
+{"version":3,"file":"q2-formatted-text.entry.esm.js","sources":["src/components/q2-formatted-text/q2-formatted-text.scss?tag=q2-formatted-text&encapsulation=shadow","src/components/q2-formatted-text/q2-formatted-text.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.formatted-text {\n    color: var-list(--tct-formatted-text-color, inherit);\n    font-size: var-list(--tct-formatted-text-font-size, inherit);\n    font-weight: var-list(--tct-formatted-text-font-weight, inherit);\n}\n\n.formatted-text-small {\n    color: var-list(--tct-formatted-text-small-color, inherit);\n    font-size: var-list(--tct-formatted-text-small-font-size, 24px);\n    font-weight: var-list(--tct-formatted-text-small-font-weight, 600);\n}\n\n.formatted-text-medium {\n    color: var-list(--tct-formatted-text-medium-color, inherit);\n    font-size: var-list(--tct-formatted-text-medium-font-size, 42px);\n    font-weight: var-list(--tct-formatted-text-medium-font-weight, 600);\n}\n\n.formatted-text-large {\n    color: var-list(--tct-formatted-text-large-color, inherit);\n    font-size: var-list(--tct-formatted-text-large-font-size, 70px);\n    font-weight: var-list(--tct-formatted-text-large-font-weight, 700);\n}\n","import { IDict } from '@/util';\nimport { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The formatted text to display */\n    formattedValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n    @Prop({ reflect: true })\n    locale: string | string[] = document.documentElement.lang || 'en-US';\n\n    /** The maximum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    maximumFractionDigits: number = 2;\n\n    /** The minimum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    minimumFractionDigits: number = 2;\n\n    /** The minimum number of integer digits to use.  */\n    @Prop({ reflect: false })\n    minimumIntegerDigits: number = 1;\n\n    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative numbers only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n    /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' | undefined;\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    /** The value you want formatted.  */\n    @Prop({ reflect: true })\n    value: number;\n\n    /**\n     * The format style for the number.\n     * - `decimal`: Standard number formatting, locale-aware (default).\n     * - `percent`: Percentage formatting, locale-aware.\n     */\n    @Prop({ reflect: true })\n    format: 'decimal' | 'percent' = 'decimal';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatValue();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('value')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    @Watch('format')\n    propsUpdated() {\n        this.formatValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get formattedTextClasses(): string {\n        const classes = ['formatted-text'];\n        const sizeClass = this.size ? this.size : this.slotSize;\n        if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n        return classes.join(' ');\n    }\n\n    formatValue() {\n        const options: IDict<any> = {\n            style: this.format,\n            signDisplay: this.signDisplay,\n        };\n        if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n        if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n        if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n        // For percent format, divide by 100 so users can pass intuitive values (e.g., 25 → 25%, 0.5 → 0.5%, 100 → 100%)\n        const valueToFormat = this.format === 'percent' ? this.value / 100 : this.value;\n        this.formattedValue = new Intl.NumberFormat(this.locale, options).format(valueToFormat).trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { formattedTextClasses } = this;\n\n        return (\n            <div\n                class={formattedTextClasses}\n                aria-label={this.formattedValue}\n            >\n                <span>{this.formattedValue}</span>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,u7CAAu7C;;MCGr8C,eAAe,GAAA,MAAA;AAD5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;QAYI,IAAM,CAAA,MAAA,GAAsB,QAAQ,CAAC,eAAe,CAAC,IAAI,IAAI,OAAO;;AAIpE,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAqB,CAAA,qBAAA,GAAW,CAAC;;AAIjC,QAAA,IAAoB,CAAA,oBAAA,GAAW,CAAC;AAEhC;;;;;;;;AAQG;AAEH,QAAA,IAAW,CAAA,WAAA,GAA+C,MAAM;AAchE;;;;AAIG;AAEH,QAAA,IAAM,CAAA,MAAA,GAA0B,SAAS;AA+D5C;;;IA1DG,iBAAiB,GAAA;QACb,IAAI,CAAC,WAAW,EAAE;;;;IAYtB,YAAY,GAAA;QACR,IAAI,CAAC,WAAW,EAAE;;;;AAMtB,IAAA,IAAI,oBAAoB,GAAA;AACpB,QAAA,MAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ;QACvD,IAAI,CAAC,CAAC,SAAS;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,SAAS,CAAA,CAAE,CAAC;AAC5D,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG5B,WAAW,GAAA;AACP,QAAA,MAAM,OAAO,GAAe;YACxB,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,WAAW,EAAE,IAAI,CAAC,WAAW;SAChC;AACD,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC;AAAE,YAAA,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB;AAC/F,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;AAClG,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAAE,YAAA,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB;;QAGlG,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;QAC/E,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,EAAE;;;;IAMlG,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI;AAErC,QAAA,QACI,4DACI,KAAK,EAAE,oBAAoB,EACf,YAAA,EAAA,IAAI,CAAC,cAAc,EAAA,EAE/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,cAAc,CAAQ,CAChC;;;;;;;;;;;;;;;"}

package/dist/q2-tecton-elements/q2-formatted-text.entry.js

@@ -20,6 +20,11 @@ const o = class {
          * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.
          * - `never`: Never display the sign.
          */    this.signDisplay = "auto";
+    /**
+         * The format style for the number.
+         * - `decimal`: Standard number formatting, locale-aware (default).
+         * - `percent`: Percentage formatting, locale-aware.
+         */    this.format = "decimal";
   }
   // #endregion
   // #region Component Lifecycle Events
@@ -41,24 +46,26 @@ const o = class {
   }
   formatValue() {
     const t = {
-      style: "decimal",
+      style: this.format,
       signDisplay: this.signDisplay
     };
     if (!isNaN(this.minimumIntegerDigits)) t.minimumIntegerDigits = this.minimumIntegerDigits;
     if (!isNaN(this.minimumFractionDigits)) t.minimumFractionDigits = this.minimumFractionDigits;
     if (!isNaN(this.maximumFractionDigits)) t.maximumFractionDigits = this.maximumFractionDigits;
-    this.formattedValue = new Intl.NumberFormat(this.locale, t).format(this.value).trim();
+    // For percent format, divide by 100 so users can pass intuitive values (e.g., 25 → 25%, 0.5 → 0.5%, 100 → 100%)
+        const e = this.format === "percent" ? this.value / 100 : this.value;
+    this.formattedValue = new Intl.NumberFormat(this.locale, t).format(e).trim();
   }
   // #endregion
   // #region Render Methods
   render() {
     const {formattedTextClasses: t} = this;
     return e("div", {
-      key: "08fe8c32d469d77afdb886addcced59c6a6edbcc",
+      key: "1274a8a0dd15b93bb1748ea17b12a3dbe148a0ca",
       class: t,
       "aria-label": this.formattedValue
     }, e("span", {
-      key: "6f5031262bf199f7887eb0b1f9ef1d8f920a29fc"
+      key: "6fe7e20ecf26a5b1e24966360646aeb6f6526f1e"
     }, this.formattedValue));
   }
   static get watchers() {
@@ -67,7 +74,8 @@ const o = class {
       locale: [ "propsUpdated" ],
       size: [ "propsUpdated" ],
       slotSize: [ "propsUpdated" ],
-      signDisplay: [ "propsUpdated" ]
+      signDisplay: [ "propsUpdated" ],
+      format: [ "propsUpdated" ]
     };
   }
 };

package/dist/q2-tecton-elements/q2-formatted-text.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2FormattedTextCss","Q2FormattedText","constructor","hostRef","this","locale","document","documentElement","lang","maximumFractionDigits","minimumFractionDigits","minimumIntegerDigits","signDisplay","componentWillLoad","formatValue","propsUpdated","formattedTextClasses","classes","sizeClass","size","slotSize","push","join","options","style","isNaN","formattedValue","Intl","NumberFormat","format","value","trim","render","h","key","class"],"sources":["src/components/q2-formatted-text/q2-formatted-text.scss?tag=q2-formatted-text&encapsulation=shadow","src/components/q2-formatted-text/q2-formatted-text.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.formatted-text {\n    color: var-list(--tct-formatted-text-color, inherit);\n    font-size: var-list(--tct-formatted-text-font-size, inherit);\n    font-weight: var-list(--tct-formatted-text-font-weight, inherit);\n}\n\n.formatted-text-small {\n    color: var-list(--tct-formatted-text-small-color, inherit);\n    font-size: var-list(--tct-formatted-text-small-font-size, 24px);\n    font-weight: var-list(--tct-formatted-text-small-font-weight, 600);\n}\n\n.formatted-text-medium {\n    color: var-list(--tct-formatted-text-medium-color, inherit);\n    font-size: var-list(--tct-formatted-text-medium-font-size, 42px);\n    font-weight: var-list(--tct-formatted-text-medium-font-weight, 600);\n}\n\n.formatted-text-large {\n    color: var-list(--tct-formatted-text-large-color, inherit);\n    font-size: var-list(--tct-formatted-text-large-font-size, 70px);\n    font-weight: var-list(--tct-formatted-text-large-font-weight, 700);\n}\n","import { IDict } from '@/util';\nimport { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The formatted text to display */\n    formattedValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n    @Prop({ reflect: true })\n    locale: string | string[] = document.documentElement.lang || 'en-US';\n\n    /** The maximum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    maximumFractionDigits: number = 2;\n\n    /** The minimum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    minimumFractionDigits: number = 2;\n\n    /** The minimum number of integer digits to use.  */\n    @Prop({ reflect: false })\n    minimumIntegerDigits: number = 1;\n\n    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative numbers only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n    /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' | undefined;\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    /** The value you want formatted.  */\n    @Prop({ reflect: true })\n    value: number;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatValue();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('value')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    propsUpdated() {\n        this.formatValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get formattedTextClasses(): string {\n        const classes = ['formatted-text'];\n        const sizeClass = this.size ? this.size : this.slotSize;\n        if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n        return classes.join(' ');\n    }\n\n    formatValue() {\n        const options: IDict<any> = {\n            style: 'decimal',\n            signDisplay: this.signDisplay,\n        };\n        if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n        if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n        if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n        this.formattedValue = new Intl.NumberFormat(this.locale, options).format(this.value).trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { formattedTextClasses } = this;\n\n        return (\n            <div\n                class={formattedTextClasses}\n                aria-label={this.formattedValue}\n            >\n                <span>{this.formattedValue}</span>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAqB;;MCGdC,IAAe;EAD5B,WAAAC,CAAAC;;;;8GAYIC,KAAMC,SAAsBC,SAASC,gBAAgBC,QAAQ;6DAI7DJ,KAAqBK,wBAAW;6DAIhCL,KAAqBM,wBAAW;4DAIhCN,KAAoBO,uBAAW;;;;;;;;;eAY/BP,KAAWQ,cAA+C;AAwE7D;;;EAvDG,iBAAAC;IACIT,KAAKU;;;;EAWT,YAAAC;IACIX,KAAKU;;;;EAMT,wBAAIE;IACA,MAAMC,IAAU,EAAC;IACjB,MAAMC,IAAYd,KAAKe,OAAOf,KAAKe,OAAOf,KAAKgB;IAC/C,MAAMF,GAAWD,EAAQI,KAAK,kBAAkBH;IAChD,OAAOD,EAAQK,KAAK;;EAGxB,WAAAR;IACI,MAAMS,IAAsB;MACxBC,OAAO;MACPZ,aAAaR,KAAKQ;;IAEtB,KAAKa,MAAMrB,KAAKO,uBAAuBY,EAAQZ,uBAAuBP,KAAKO;IAC3E,KAAKc,MAAMrB,KAAKM,wBAAwBa,EAAQb,wBAAwBN,KAAKM;IAC7E,KAAKe,MAAMrB,KAAKK,wBAAwBc,EAAQd,wBAAwBL,KAAKK;IAE7EL,KAAKsB,iBAAiB,IAAIC,KAAKC,aAAaxB,KAAKC,QAAQkB,GAASM,OAAOzB,KAAK0B,OAAOC;;;;EAMzF,MAAAC;IACI,OAAMhB,sBAAEA,KAAyBZ;IAEjC,OACI6B,EAAA;MAAAC,KAAA;MACIC,OAAOnB;MACK,cAAAZ,KAAKsB;OAEjBO,EAAA;MAAAC,KAAA;OAAO9B,KAAKsB","ignoreList":[]}
+{"version":3,"names":["q2FormattedTextCss","Q2FormattedText","constructor","hostRef","this","locale","document","documentElement","lang","maximumFractionDigits","minimumFractionDigits","minimumIntegerDigits","signDisplay","format","componentWillLoad","formatValue","propsUpdated","formattedTextClasses","classes","sizeClass","size","slotSize","push","join","options","style","isNaN","valueToFormat","value","formattedValue","Intl","NumberFormat","trim","render","h","key","class"],"sources":["src/components/q2-formatted-text/q2-formatted-text.scss?tag=q2-formatted-text&encapsulation=shadow","src/components/q2-formatted-text/q2-formatted-text.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.formatted-text {\n    color: var-list(--tct-formatted-text-color, inherit);\n    font-size: var-list(--tct-formatted-text-font-size, inherit);\n    font-weight: var-list(--tct-formatted-text-font-weight, inherit);\n}\n\n.formatted-text-small {\n    color: var-list(--tct-formatted-text-small-color, inherit);\n    font-size: var-list(--tct-formatted-text-small-font-size, 24px);\n    font-weight: var-list(--tct-formatted-text-small-font-weight, 600);\n}\n\n.formatted-text-medium {\n    color: var-list(--tct-formatted-text-medium-color, inherit);\n    font-size: var-list(--tct-formatted-text-medium-font-size, 42px);\n    font-weight: var-list(--tct-formatted-text-medium-font-weight, 600);\n}\n\n.formatted-text-large {\n    color: var-list(--tct-formatted-text-large-color, inherit);\n    font-size: var-list(--tct-formatted-text-large-font-size, 70px);\n    font-weight: var-list(--tct-formatted-text-large-font-weight, 700);\n}\n","import { IDict } from '@/util';\nimport { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n@Component({ tag: 'q2-formatted-text', shadow: true, styleUrl: 'q2-formatted-text.scss' })\nexport class Q2FormattedText implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The formatted text to display */\n    formattedValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n    @Prop({ reflect: true })\n    locale: string | string[] = document.documentElement.lang || 'en-US';\n\n    /** The maximum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    maximumFractionDigits: number = 2;\n\n    /** The minimum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    minimumFractionDigits: number = 2;\n\n    /** The minimum number of integer digits to use.  */\n    @Prop({ reflect: false })\n    minimumIntegerDigits: number = 1;\n\n    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative numbers only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n    /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' | undefined;\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-formatted-text texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    /** The value you want formatted.  */\n    @Prop({ reflect: true })\n    value: number;\n\n    /**\n     * The format style for the number.\n     * - `decimal`: Standard number formatting, locale-aware (default).\n     * - `percent`: Percentage formatting, locale-aware.\n     */\n    @Prop({ reflect: true })\n    format: 'decimal' | 'percent' = 'decimal';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatValue();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('value')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    @Watch('format')\n    propsUpdated() {\n        this.formatValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get formattedTextClasses(): string {\n        const classes = ['formatted-text'];\n        const sizeClass = this.size ? this.size : this.slotSize;\n        if (!!sizeClass) classes.push(`formatted-text-${sizeClass}`);\n        return classes.join(' ');\n    }\n\n    formatValue() {\n        const options: IDict<any> = {\n            style: this.format,\n            signDisplay: this.signDisplay,\n        };\n        if (!isNaN(this.minimumIntegerDigits)) options.minimumIntegerDigits = this.minimumIntegerDigits;\n        if (!isNaN(this.minimumFractionDigits)) options.minimumFractionDigits = this.minimumFractionDigits;\n        if (!isNaN(this.maximumFractionDigits)) options.maximumFractionDigits = this.maximumFractionDigits;\n\n        // For percent format, divide by 100 so users can pass intuitive values (e.g., 25 → 25%, 0.5 → 0.5%, 100 → 100%)\n        const valueToFormat = this.format === 'percent' ? this.value / 100 : this.value;\n        this.formattedValue = new Intl.NumberFormat(this.locale, options).format(valueToFormat).trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { formattedTextClasses } = this;\n\n        return (\n            <div\n                class={formattedTextClasses}\n                aria-label={this.formattedValue}\n            >\n                <span>{this.formattedValue}</span>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAqB;;MCGdC,IAAe;EAD5B,WAAAC,CAAAC;;;;8GAYIC,KAAMC,SAAsBC,SAASC,gBAAgBC,QAAQ;6DAI7DJ,KAAqBK,wBAAW;6DAIhCL,KAAqBM,wBAAW;4DAIhCN,KAAoBO,uBAAW;;;;;;;;;eAY/BP,KAAWQ,cAA+C;;;;;eAoB1DR,KAAMS,SAA0B;AA+DnC;;;EA1DG,iBAAAC;IACIV,KAAKW;;;;EAYT,YAAAC;IACIZ,KAAKW;;;;EAMT,wBAAIE;IACA,MAAMC,IAAU,EAAC;IACjB,MAAMC,IAAYf,KAAKgB,OAAOhB,KAAKgB,OAAOhB,KAAKiB;IAC/C,MAAMF,GAAWD,EAAQI,KAAK,kBAAkBH;IAChD,OAAOD,EAAQK,KAAK;;EAGxB,WAAAR;IACI,MAAMS,IAAsB;MACxBC,OAAOrB,KAAKS;MACZD,aAAaR,KAAKQ;;IAEtB,KAAKc,MAAMtB,KAAKO,uBAAuBa,EAAQb,uBAAuBP,KAAKO;IAC3E,KAAKe,MAAMtB,KAAKM,wBAAwBc,EAAQd,wBAAwBN,KAAKM;IAC7E,KAAKgB,MAAMtB,KAAKK,wBAAwBe,EAAQf,wBAAwBL,KAAKK;;QAG7E,MAAMkB,IAAgBvB,KAAKS,WAAW,YAAYT,KAAKwB,QAAQ,MAAMxB,KAAKwB;IAC1ExB,KAAKyB,iBAAiB,IAAIC,KAAKC,aAAa3B,KAAKC,QAAQmB,GAASX,OAAOc,GAAeK;;;;EAM5F,MAAAC;IACI,OAAMhB,sBAAEA,KAAyBb;IAEjC,OACI8B,EAAA;MAAAC,KAAA;MACIC,OAAOnB;MACK,cAAAb,KAAKyB;OAEjBK,EAAA;MAAAC,KAAA;OAAO/B,KAAKyB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"q2-icon.entry.esm.js","sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    position: relative;\n    fill: none;\n}\n\n:host([inline]) {\n    height: 1em;\n    width: 1em;\n}\n\nsvg {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n    stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n    stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n    transition: var(--tct-icon-transition, none);\n\n    &.brand {\n        stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n    }\n\n    &.browsersos {\n        stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n    }\n}\n\n.stroke-primary {\n    stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n    stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n    fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n    fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n    fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    // #region Own Properties\n\n    spriteGroup: SVGElement;\n    spritePrefix: string = 'tecton-sprite-';\n    spriteUse: SVGElement;\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    iconClone: SVGSymbolElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true })\n    type: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.handleIcon();\n    }\n\n    componentDidRender(): void {\n        if (!this.iconClone) return;\n        this.spriteGroup?.firstElementChild?.remove();\n        const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n        // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n        this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n    }\n\n    disconnectedCallback(): void {\n        this.spriteGroup = null;\n        this.spriteUse = null;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('type')\n    handleIcon() {\n        if (this.isCustom) {\n            this.setCustomSVGAttrs();\n        } else if (this.type) {\n            this.fetchSprite();\n        } else {\n            this.iconClone = null;\n            this.spriteGroup?.firstElementChild?.remove();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    get isCustom() {\n        return this.type === 'custom';\n    }\n\n    get spriteElement() {\n        const { spriteId } = this;\n        if (!spriteId) return;\n        return document.querySelector<HTMLElement>(`#${spriteId}`);\n    }\n\n    get spriteEventName() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tct-loaded-${spriteFileName}`;\n    }\n\n    get spriteFileName() {\n        if (this.isCustom) return;\n        return iconMap[this.type];\n    }\n\n    get spriteId() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `${this.spritePrefix}${spriteFileName}`;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n            this.cloneSpriteNode();\n            return true;\n        }\n\n        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the sprite is loaded\n        spriteContainer.addEventListener(\n            spriteEventName,\n            () => {\n                this.cloneSpriteNode();\n            },\n            { once: true }\n        );\n\n        // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n        if (spriteElement) return true;\n\n        // If sprite element does not exist, create a placeholder\n        // This will let other icons know the sprite is being loaded\n        spriteElement = document.createElement('div');\n        spriteElement.id = spriteId;\n        spriteContainer.appendChild(spriteElement);\n        return false;\n    }\n\n    cloneSpriteNode() {\n        const spriteNode = document.getElementById(`tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n    }\n\n    async fetchSprite() {\n        const { spriteFileName, spriteId, spriteEventName } = this;\n\n        const spriteExists = this.checkForSprite();\n        if (spriteExists) return;\n\n        if (!spriteFileName) return;\n        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n        const response = await fetch(spritePath);\n        const data = await response.text();\n        const wrappingDiv = document.createElement('div');\n        wrappingDiv.innerHTML = data;\n        const svg = wrappingDiv.querySelector('svg');\n\n        svg.id = spriteId;\n        svg.setAttribute('data-loaded', '');\n\n        let { spriteElement } = this;\n        if (spriteElement?.tagName === 'SVG') return;\n\n        if (typeof spriteElement.replaceWith === 'function') {\n            spriteElement.replaceWith(svg);\n        } else {\n            spriteElement.parentNode.replaceChild(svg, spriteElement);\n        }\n\n        spriteElement = document.getElementById(spriteId);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    setCustomSVGAttrs() {\n        const innerSVG = this.hostElement.querySelector('svg');\n\n        if (!innerSVG) return;\n\n        innerSVG.setAttribute('role', 'img');\n        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n        const { label } = this;\n        if (label) {\n            const title = document.createElement('title');\n            const labelId = `label-${createGuid()}`;\n            title.id = labelId;\n            title.textContent = label;\n            innerSVG.appendChild(title);\n            innerSVG.setAttribute('aria-labelledby', labelId);\n        } else {\n            innerSVG.setAttribute('aria-hidden', 'true');\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, type } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={!!label ? undefined : 'true'}\n                role={!!label ? 'img' : undefined}\n                aria-labelledby={!!label ? 'label' : undefined}\n                viewBox={this.iconCloneViewBox}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class={this.spriteFileName}\n            >\n                {!!label && <title id=\"label\">{label}</title>}\n                {!!type && <use ref={el => (this.spriteUse = el)} />}\n                <g ref={el => (this.spriteGroup = el)}></g>\n            </svg>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-icon.entry.esm.js","sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    position: relative;\n    fill: none;\n}\n\n:host([inline]) {\n    height: 1em;\n    width: 1em;\n}\n\nsvg {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, --tct-icon-group-stroke-width, 2);\n    stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n    stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n    transition: var(--tct-icon-transition, none);\n\n    &.brand {\n        stroke-width: var-list(--tct-icon-group-brand-stroke-width, 1);\n    }\n\n    &.browsersos {\n        stroke-width: var-list(--tct-icon-group-browsersos-stroke-width, 1);\n    }\n}\n\n.stroke-primary {\n    stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n    stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n    fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n    fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.brand-filled {\n    fill: var-list(--tct-brand-icon-fill, --tct-icon-fill, currentColor);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    // #region Own Properties\n\n    spriteGroup: SVGElement;\n    spritePrefix: string = 'tecton-sprite-';\n    spriteUse: SVGElement;\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    iconClone: SVGSymbolElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true })\n    inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true })\n    type: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.spriteGroup = null;\n        this.spriteUse = null;\n    }\n\n    componentWillLoad() {\n        this.handleIcon();\n    }\n\n    componentDidRender(): void {\n        if (!this.iconClone) return;\n        this.spriteGroup?.firstElementChild?.remove();\n        const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n        // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n        this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('type')\n    handleIcon() {\n        if (this.isCustom) {\n            this.setCustomSVGAttrs();\n        } else if (this.type) {\n            this.fetchSprite();\n        } else {\n            this.iconClone = null;\n            this.spriteGroup?.firstElementChild?.remove();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    get isCustom() {\n        return this.type === 'custom';\n    }\n\n    get spriteElement() {\n        const { spriteId } = this;\n        if (!spriteId) return;\n        return document.querySelector<HTMLElement>(`#${spriteId}`);\n    }\n\n    get spriteEventName() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tct-loaded-${spriteFileName}`;\n    }\n\n    get spriteFileName() {\n        if (this.isCustom) return;\n        return iconMap[this.type];\n    }\n\n    get spriteId() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `${this.spritePrefix}${spriteFileName}`;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.getElementById(spriteId);\n\n        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n            this.cloneSpriteNode();\n            return true;\n        }\n\n        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the sprite is loaded\n        spriteContainer.addEventListener(\n            spriteEventName,\n            () => {\n                this.cloneSpriteNode();\n            },\n            { once: true }\n        );\n\n        // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n        if (spriteElement) return true;\n\n        // If sprite element does not exist, create a placeholder\n        // This will let other icons know the sprite is being loaded\n        spriteElement = document.createElement('div');\n        spriteElement.id = spriteId;\n        spriteContainer.appendChild(spriteElement);\n        return false;\n    }\n\n    cloneSpriteNode() {\n        const spriteNode = document.getElementById(`tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n    }\n\n    async fetchSprite() {\n        const { spriteFileName, spriteId, spriteEventName } = this;\n\n        const spriteExists = this.checkForSprite();\n        if (spriteExists) return;\n\n        if (!spriteFileName) return;\n        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n        const response = await fetch(spritePath);\n        const data = await response.text();\n        const wrappingDiv = document.createElement('div');\n        wrappingDiv.innerHTML = data;\n        const svg = wrappingDiv.querySelector('svg');\n\n        svg.id = spriteId;\n        svg.setAttribute('data-loaded', '');\n\n        let { spriteElement } = this;\n        if (spriteElement?.tagName === 'SVG') return;\n\n        if (typeof spriteElement.replaceWith === 'function') {\n            spriteElement.replaceWith(svg);\n        } else {\n            spriteElement.parentNode.replaceChild(svg, spriteElement);\n        }\n\n        spriteElement = document.getElementById(spriteId);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    setCustomSVGAttrs() {\n        const innerSVG = this.hostElement.querySelector('svg');\n\n        if (!innerSVG) return;\n\n        innerSVG.setAttribute('role', 'img');\n        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n        const { label } = this;\n        if (label) {\n            const title = document.createElement('title');\n            const labelId = `label-${createGuid()}`;\n            title.id = labelId;\n            title.textContent = label;\n            innerSVG.appendChild(title);\n            innerSVG.setAttribute('aria-labelledby', labelId);\n        } else {\n            innerSVG.setAttribute('aria-hidden', 'true');\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { label, type } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={!!label ? undefined : 'true'}\n                role={!!label ? 'img' : undefined}\n                aria-labelledby={!!label ? 'label' : undefined}\n                viewBox={this.iconCloneViewBox}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class={this.spriteFileName}\n            >\n                {!!label && <title id=\"label\">{label}</title>}\n                {!!type && <use ref={el => (this.spriteUse = el)} />}\n                <g ref={el => (this.spriteGroup = el)}></g>\n            </svg>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,giGAAgiG;;MCMriG,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAKI,QAAA,IAAY,CAAA,YAAA,GAAW,gBAAgB;AAoN1C;;;IAnLG,oBAAoB,GAAA;AAChB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;IAGzB,iBAAiB,GAAA;QACb,IAAI,CAAC,UAAU,EAAE;;IAGrB,kBAAkB,GAAA;;QACd,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;QACrB,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,0CAAE,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE;AAC7C,QAAA,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;;AAGnE,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,YAAY,CAAC,MAAM,EAAE,IAAI,aAAa,CAAC,EAAE,CAAA,CAAE,CAAC;;;;IAOhE,UAAU,GAAA;;AACN,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAI,CAAC,iBAAiB,EAAE;;AACrB,aAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YAClB,IAAI,CAAC,WAAW,EAAE;;aACf;AACH,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACrB,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,0CAAE,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE;;;;;AAOrD,IAAA,IAAI,gBAAgB,GAAA;;QAChB,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,YAAY,CAAC,SAAS,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,WAAW;;AAGjE,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;;AAGjC,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;AACzB,QAAA,IAAI,CAAC,QAAQ;YAAE;QACf,OAAO,QAAQ,CAAC,aAAa,CAAc,IAAI,QAAQ,CAAA,CAAE,CAAC;;AAG9D,IAAA,IAAI,eAAe,GAAA;AACf,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,cAAc;YAAE;QACrB,OAAO,CAAA,WAAA,EAAc,cAAc,CAAA,CAAE;;AAGzC,IAAA,IAAI,cAAc,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;AAG7B,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,CAAC,cAAc;YAAE;AACrB,QAAA,OAAO,GAAG,IAAI,CAAC,YAAY,CAAG,EAAA,cAAc,EAAE;;IAGlD,cAAc,GAAA;;AACV,QAAA,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI;AAC1C,QAAA,MAAM,eAAe,GAAG,0BAA0B,EAAE;QACpD,IAAI,aAAa,GAAgB,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;;AAGlE,QAAA,IAAI,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,YAAY,CAAC,aAAa,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,KAAK,EAAE;YACrD,IAAI,CAAC,eAAe,EAAE;AACtB,YAAA,OAAO,IAAI;;;;AAKf,QAAA,eAAe,CAAC,gBAAgB,CAC5B,eAAe,EACf,MAAK;YACD,IAAI,CAAC,eAAe,EAAE;AAC1B,SAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACjB;;AAGD,QAAA,IAAI,aAAa;AAAE,YAAA,OAAO,IAAI;;;AAI9B,QAAA,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,aAAa,CAAC,EAAE,GAAG,QAAQ;AAC3B,QAAA,eAAe,CAAC,WAAW,CAAC,aAAa,CAAC;AAC1C,QAAA,OAAO,KAAK;;IAGhB,eAAe,GAAA;AACX,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAO,IAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAC9D,QAAA,IAAI,CAAC,SAAS,GAAG,UAAU,GAAI,UAAU,CAAC,SAAS,CAAC,IAAI,CAAsB,GAAG,SAAS;;AAG9F,IAAA,MAAM,WAAW,GAAA;QACb,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,IAAI;AAE1D,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;AAC1C,QAAA,IAAI,YAAY;YAAE;AAElB,QAAA,IAAI,CAAC,cAAc;YAAE;QACrB,MAAM,UAAU,GAAG,YAAY,CAAC,UAAU,cAAc,CAAA,WAAA,CAAa,CAAC;AACtE,QAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC;AACxC,QAAA,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;QAClC,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACjD,QAAA,WAAW,CAAC,SAAS,GAAG,IAAI;QAC5B,MAAM,GAAG,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC;AAE5C,QAAA,GAAG,CAAC,EAAE,GAAG,QAAQ;AACjB,QAAA,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;AAEnC,QAAA,IAAI,EAAE,aAAa,EAAE,GAAG,IAAI;QAC5B,IAAI,CAAA,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,KAAK;YAAE;AAEtC,QAAA,IAAI,OAAO,aAAa,CAAC,WAAW,KAAK,UAAU,EAAE;AACjD,YAAA,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC;;aAC3B;YACH,aAAa,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,EAAE,aAAa,CAAC;;AAG7D,QAAA,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;AACjD,QAAA,aAAa,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;;IAGpF,iBAAiB,GAAA;QACb,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC;AAEtD,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC;AACpC,QAAA,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,4BAA4B,CAAC;AAE5D,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;QACtB,IAAI,KAAK,EAAE;YACP,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,YAAA,MAAM,OAAO,GAAG,CAAA,MAAA,EAAS,UAAU,EAAE,EAAE;AACvC,YAAA,KAAK,CAAC,EAAE,GAAG,OAAO;AAClB,YAAA,KAAK,CAAC,WAAW,GAAG,KAAK;AACzB,YAAA,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,YAAA,QAAQ,CAAC,YAAY,CAAC,iBAAiB,EAAE,OAAO,CAAC;;aAC9C;AACH,YAAA,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;;;;;IAOpD,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;AAC5B,QAAA,OAAO,IAAI,CAAC,QAAQ,IAChB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,KAER,CACiB,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,CAAC,CAAC,KAAK,GAAG,SAAS,GAAG,MAAM,EACzC,IAAI,EAAE,CAAC,CAAC,KAAK,GAAG,KAAK,GAAG,SAAS,EAChB,iBAAA,EAAA,CAAC,CAAC,KAAK,GAAG,OAAO,GAAG,SAAS,EAC9C,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAA,EAEzB,CAAC,CAAC,KAAK,IAAI,CAAA,CAAA,OAAA,EAAA,EAAO,EAAE,EAAC,OAAO,EAAE,EAAA,KAAK,CAAS,EAC5C,CAAC,CAAC,IAAI,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAI,CAAA,EACpD,CAAA,CAAA,GAAA,EAAA,EAAG,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAM,CAAA,CACzC,CACT;;;;;;;;;;;;"}