q2-tecton-elements 1.51.0 → 1.52.0

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

@@ -0,0 +1,73 @@
+import { r as t, h as e } from "./index-7a5365e2.js";
+
+const i = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}.formatted-text{color:var(--tct-formatted-text-color, inherit);font-size:var(--tct-formatted-text-font-size, inherit);font-weight:var(--tct-formatted-text-font-weight, inherit)}.formatted-text-small{color:var(--tct-formatted-text-small-color, inherit);font-size:var(--tct-formatted-text-small-font-size, 24px);font-weight:var(--tct-formatted-text-small-font-weight, 600)}.formatted-text-medium{color:var(--tct-formatted-text-medium-color, inherit);font-size:var(--tct-formatted-text-medium-font-size, 42px);font-weight:var(--tct-formatted-text-medium-font-weight, 600)}.formatted-text-large{color:var(--tct-formatted-text-large-color, inherit);font-size:var(--tct-formatted-text-large-font-size, 70px);font-weight:var(--tct-formatted-text-large-font-weight, 700)}";
+
+const o = i;
+
+const s = class {
+  constructor(e) {
+    t(this, e);
+    this.value = undefined;
+    this.locale = document.documentElement.lang || "en-US";
+    this.minimumIntegerDigits = 1;
+    this.minimumFractionDigits = 2;
+    this.maximumFractionDigits = 2;
+    this.signDisplay = "auto";
+    this.size = undefined;
+    this.slotSize = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    this.formatValue();
+  }
+  // #endregion
+  // #region Watchers
+  propsUpdated() {
+    this.formatValue();
+  }
+  // #endregion
+  // #region Local Methods
+  get formattedTextClasses() {
+    const t = [ "formatted-text" ];
+    const e = this.size ? this.size : this.slotSize;
+    if (!!e) t.push(`formatted-text-${e}`);
+    return t.join(" ");
+  }
+  formatValue() {
+    const t = {
+      style: "decimal",
+      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();
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const {formattedTextClasses: t} = this;
+    return e("div", {
+      key: "1957c3f976bc87c24859d94c27e1baf35da8fc03",
+      class: t,
+      "aria-label": this.formattedValue
+    }, e("span", {
+      key: "8dac0d558d205fc183d16c4aef922ab470eec6ab"
+    }, this.formattedValue));
+  }
+  static get watchers() {
+    return {
+      value: [ "propsUpdated" ],
+      locale: [ "propsUpdated" ],
+      size: [ "propsUpdated" ],
+      slotSize: [ "propsUpdated" ],
+      signDisplay: [ "propsUpdated" ]
+    };
+  }
+};
+
+s.style = o;
+
+export { s as q2_formatted_text };
+//# sourceMappingURL=q2-formatted-text.entry.js.map

package/dist/q2-tecton-elements/{p-7c9f8b62.entry.js.map → q2-formatted-text.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2FormattedTextCss","Q2FormattedTextStyle0","Q2FormattedText","document","documentElement","lang","componentWillLoad","this","formatValue","propsUpdated","formattedTextClasses","classes","sizeClass","size","slotSize","push","join","options","style","signDisplay","isNaN","minimumIntegerDigits","minimumFractionDigits","maximumFractionDigits","formattedValue","Intl","NumberFormat","locale","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    /** The value you want formatted.  */\n    @Prop({ reflect: true })\n    value: number;\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 minimum number of integer digits to use.  */\n    @Prop({ reflect: false })\n    minimumIntegerDigits: number = 1;\n\n    /** The minimum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    minimumFractionDigits: number = 2;\n\n    /** The maximum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    maximumFractionDigits: number = 2;\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    // #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":"2CAAA,MAAMA,EAAqB,g7CAC3B,MAAAC,EAAeD,E,MCEFE,EAAe,M,0DAeIC,SAASC,gBAAgBC,MAAQ,Q,0BAI9B,E,2BAIC,E,2BAIA,E,iBAY0B,O,4CAa1D,iBAAAC,GACIC,KAAKC,a,CAWT,YAAAC,GACIF,KAAKC,a,CAMT,wBAAIE,GACA,MAAMC,EAAU,CAAC,kBACjB,MAAMC,EAAYL,KAAKM,KAAON,KAAKM,KAAON,KAAKO,SAC/C,KAAMF,EAAWD,EAAQI,KAAK,kBAAkBH,KAChD,OAAOD,EAAQK,KAAK,I,CAGxB,WAAAR,GACI,MAAMS,EAAsB,CACxBC,MAAO,UACPC,YAAaZ,KAAKY,aAEtB,IAAKC,MAAMb,KAAKc,sBAAuBJ,EAAQI,qBAAuBd,KAAKc,qBAC3E,IAAKD,MAAMb,KAAKe,uBAAwBL,EAAQK,sBAAwBf,KAAKe,sBAC7E,IAAKF,MAAMb,KAAKgB,uBAAwBN,EAAQM,sBAAwBhB,KAAKgB,sBAE7EhB,KAAKiB,eAAiB,IAAIC,KAAKC,aAAanB,KAAKoB,OAAQV,GAASW,OAAOrB,KAAKsB,OAAOC,M,CAMzF,MAAAC,GACI,MAAMrB,qBAAEA,GAAyBH,KAEjC,OACIyB,EAAA,OAAAC,IAAA,2CACIC,MAAOxB,EAAoB,aACfH,KAAKiB,gBAEjBQ,EAAA,QAAAC,IAAA,4CAAO1B,KAAKiB,gB"}
+{"version":3,"names":["q2FormattedTextCss","Q2FormattedTextStyle0","Q2FormattedText","document","documentElement","lang","componentWillLoad","this","formatValue","propsUpdated","formattedTextClasses","classes","sizeClass","size","slotSize","push","join","options","style","signDisplay","isNaN","minimumIntegerDigits","minimumFractionDigits","maximumFractionDigits","formattedValue","Intl","NumberFormat","locale","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    /** The value you want formatted.  */\n    @Prop({ reflect: true })\n    value: number;\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 minimum number of integer digits to use.  */\n    @Prop({ reflect: false })\n    minimumIntegerDigits: number = 1;\n\n    /** The minimum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    minimumFractionDigits: number = 2;\n\n    /** The maximum number of fraction digits to use.  */\n    @Prop({ reflect: false })\n    maximumFractionDigits: number = 2;\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    // #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;;AAC3B,MAAAC,IAAeD;;MCEFE,IAAe;;;;kBAeIC,SAASC,gBAAgBC,QAAQ;gCAI9B;iCAIC;iCAIA;uBAY0B;;;;;;EAa1D,iBAAAC;IACIC,KAAKC;;;;EAWT,YAAAC;IACIF,KAAKC;;;;EAMT,wBAAIE;IACA,MAAMC,IAAU,EAAC;IACjB,MAAMC,IAAYL,KAAKM,OAAON,KAAKM,OAAON,KAAKO;IAC/C,MAAMF,GAAWD,EAAQI,KAAK,kBAAkBH;IAChD,OAAOD,EAAQK,KAAK;;EAGxB,WAAAR;IACI,MAAMS,IAAsB;MACxBC,OAAO;MACPC,aAAaZ,KAAKY;;IAEtB,KAAKC,MAAMb,KAAKc,uBAAuBJ,EAAQI,uBAAuBd,KAAKc;IAC3E,KAAKD,MAAMb,KAAKe,wBAAwBL,EAAQK,wBAAwBf,KAAKe;IAC7E,KAAKF,MAAMb,KAAKgB,wBAAwBN,EAAQM,wBAAwBhB,KAAKgB;IAE7EhB,KAAKiB,iBAAiB,IAAIC,KAAKC,aAAanB,KAAKoB,QAAQV,GAASW,OAAOrB,KAAKsB,OAAOC;;;;EAMzF,MAAAC;IACI,OAAMrB,sBAAEA,KAAyBH;IAEjC,OACIyB,EAAA;MAAAC,KAAA;MACIC,OAAOxB;MAAoB,cACfH,KAAKiB;OAEjBQ,EAAA;MAAAC,KAAA;OAAO1B,KAAKiB"}

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

@@ -0,0 +1,158 @@
+import { r as t, h as e, g as o } from "./index-7a5365e2.js";
+
+import { o as a, e as i } from "./index-d18e2a20.js";
+
+const r = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
+
+const n = r;
+
+const c = class {
+  constructor(e) {
+    t(this, e);
+    this.renderTrigger = 0;
+    this.clickable = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentDidLoad() {
+    if (typeof MutationObserver !== "undefined") {
+      const t = new MutationObserver((() => this.renderTrigger += 1));
+      t.observe(this.hostElement, {
+        childList: true,
+        subtree: true,
+        attributes: true
+      });
+      this.mutationObserver = t;
+    }
+    a(this.hostElement);
+  }
+  // #endregion
+  // #region Listeners
+  delegateFocus(t) {
+    var e;
+    if (this.clickable) {
+      (e = this.itemElement) === null || e === void 0 ? void 0 : e.focus();
+    } else {
+      t.preventDefault();
+    }
+  }
+  // #endregion
+  // #region Local Methods
+  get actionClasses() {
+    const t = [ "action" ];
+    if (!this.hasBulletSlotContent) {
+      t.push(`action-no-bullet`);
+    }
+    return t.join(" ");
+  }
+  get bulletClasses() {
+    const t = [ "bullet" ];
+    if (!this.hasFooterSlotContent) {
+      t.push(`bullet-no-footer`);
+    }
+    return t.join(" ");
+  }
+  get footerClasses() {
+    const t = [ "footer" ];
+    if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+      t.push(`footer-no-action-nor-bullet`);
+    } else if (!this.hasActionSlotContent) {
+      t.push(`footer-no-action`);
+    } else if (!this.hasBulletSlotContent) {
+      t.push(`footer-no-bullet`);
+    }
+    return t.join(" ");
+  }
+  get hasActionSlotContent() {
+    return i(this.hostElement, "action");
+  }
+  get hasBodySlotContent() {
+    return i(this.hostElement, "body");
+  }
+  get hasBulletSlotContent() {
+    return i(this.hostElement, "bullet");
+  }
+  get hasFooterSlotContent() {
+    return i(this.hostElement, "footer");
+  }
+  get hasHeaderSlotContent() {
+    return i(this.hostElement, "header");
+  }
+  get itemClasses() {
+    const t = [ "item" ];
+    if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+      t.push(`item-no-action-nor-bullet`);
+    } else if (!this.hasActionSlotContent) {
+      t.push(`item-no-action`);
+    } else if (!this.hasBulletSlotContent) {
+      t.push(`item-no-bullet`);
+    }
+    if (!this.hasFooterSlotContent) {
+      t.push(`item-no-footer`);
+    }
+    return t.join(" ");
+  }
+  get mainClasses() {
+    const t = [ "main" ];
+    if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {
+      t.push(`main-no-action-nor-bullet`);
+    } else if (!this.hasBulletSlotContent) {
+      t.push(`main-no-bullet`);
+    }
+    return t.join(" ");
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const {clickable: t} = this;
+    return e("div", {
+      key: "0829fd5b35d9479ab8a7dae744e8a09e90a1a128",
+      "test-id": "itemContainer",
+      class: this.itemClasses,
+      ref: t => this.itemElement = t,
+      role: t ? "button" : undefined,
+      tabIndex: t ? 0 : undefined
+    }, this.hasBulletSlotContent && e("div", {
+      key: "6fba2ecbbe6fe30121f15cda9cc5026a5c5468c2",
+      class: this.bulletClasses
+    }, e("slot", {
+      key: "9bd9880d99124c1102725b5ce6ca49ac1e229cf9",
+      name: "bullet"
+    })), e("div", {
+      key: "0c184236511ba043c91a009c93680858e34de545",
+      class: this.mainClasses
+    }, this.hasHeaderSlotContent && e("div", {
+      key: "2570b5fd60955dbbc97f5f3d941a5d653785fb0e",
+      class: "header"
+    }, e("slot", {
+      key: "a438cafe8aeded03ee814f736ae897852a9f1415",
+      name: "header"
+    })), this.hasBodySlotContent && e("div", {
+      key: "270585a7a4ca111aedd4baeab101c353814aa72c",
+      class: "body"
+    }, e("slot", {
+      key: "cc95afec425e06c0a9edccedb0420207ccab88a0",
+      name: "body"
+    }))), this.hasActionSlotContent && e("div", {
+      key: "c6a32baa731bd79c57a625d615058442a5bc764a",
+      class: this.actionClasses
+    }, e("slot", {
+      key: "2b3104f1e0b4eed5e605c5784468f608240a881b",
+      name: "action"
+    })), this.hasFooterSlotContent && e("div", {
+      key: "0a989b6ec5ca51e55fb44d0e90f57fe792a6bf35",
+      class: this.footerClasses
+    }, e("slot", {
+      key: "76ae62c0b433f78b187853da2cf40394f7ca315e",
+      name: "footer"
+    })));
+  }
+  get hostElement() {
+    return o(this);
+  }
+};
+
+c.style = n;
+
+export { c as q2_item };
+//# sourceMappingURL=q2-item.entry.js.map

package/dist/q2-tecton-elements/{p-7c9a0122.entry.js.map → q2-item.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2ItemCss","Q2ItemStyle0","Q2Item","componentDidLoad","MutationObserver","observer","this","renderTrigger","observe","hostElement","childList","subtree","attributes","mutationObserver","overrideFocus","delegateFocus","event","clickable","_a","itemElement","focus","preventDefault","actionClasses","classes","hasBulletSlotContent","push","join","bulletClasses","hasFooterSlotContent","footerClasses","hasActionSlotContent","hasSlotContent","hasBodySlotContent","hasHeaderSlotContent","itemClasses","mainClasses","render","h","key","class","ref","el","role","undefined","tabIndex","name"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n.action {\n    --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n    --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n    --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    align-items: center;\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n    --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n    --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n    text-align: center;\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, 0);\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    itemElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\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    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (this.clickable) {\n            this.itemElement?.focus();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasBulletSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get bulletClasses() {\n        const classes = ['bullet'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`footer-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasBulletSlotContent() {\n        return hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`item-no-bullet`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`main-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { clickable } = this;\n        return (\n            <div\n                test-id=\"itemContainer\"\n                class={this.itemClasses}\n                ref={el => (this.itemElement = el)}\n                role={clickable ? 'button' : undefined}\n                tabIndex={clickable ? 0 : undefined}\n            >\n                {this.hasBulletSlotContent && (\n                    <div class={this.bulletClasses}>\n                        <slot name=\"bullet\" />\n                    </div>\n                )}\n                <div class={this.mainClasses}>\n                    {this.hasHeaderSlotContent && (\n                        <div class=\"header\">\n                            <slot name=\"header\" />\n                        </div>\n                    )}\n                    {this.hasBodySlotContent && (\n                        <div class=\"body\">\n                            <slot name=\"body\" />\n                        </div>\n                    )}\n                </div>\n                {this.hasActionSlotContent && (\n                    <div class={this.actionClasses}>\n                        <slot name=\"action\" />\n                    </div>\n                )}\n                {this.hasFooterSlotContent && (\n                    <div class={this.footerClasses}>\n                        <slot name=\"footer\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2ItemCss","Q2ItemStyle0","Q2Item","componentDidLoad","MutationObserver","observer","this","renderTrigger","observe","hostElement","childList","subtree","attributes","mutationObserver","overrideFocus","delegateFocus","event","clickable","_a","itemElement","focus","preventDefault","actionClasses","classes","hasBulletSlotContent","push","join","bulletClasses","hasFooterSlotContent","footerClasses","hasActionSlotContent","hasSlotContent","hasBodySlotContent","hasHeaderSlotContent","itemClasses","mainClasses","render","h","key","class","ref","el","role","undefined","tabIndex","name"],"sources":["src/components/q2-item/q2-item.scss?tag=q2-item&encapsulation=shadow","src/components/q2-item/q2-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host {\n    display: block;\n}\n\n:host([clickable]) {\n    cursor: pointer;\n    --comp-background: #{var-list(\n            --tct-btn-primary-background,\n            --tct-btn-primary-bg,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    .item {\n        --comp-border-radius: #{var-list(--tct-item-border-radius, --app-border-radius-1, 4px)};\n        --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n        --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n        --comp-hover-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n        --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);\n        --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n        @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n        &:hover {\n            box-shadow: var(--comp-hover-box-shadow);\n        }\n        &:active {\n            box-shadow: var(--comp-active-box-shadow);\n        }\n        &:focus-visible {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n\n.action {\n    --tct-btn-icon-height: #{var-list(--tct-item-action-icon-height, --app-scale-6x, 30px)};\n    --tct-btn-icon-width: #{var-list(--tct-item-action-icon-width, --app-scale-6x, 30px)};\n    --tct-icon-size: #{var-list(--tct-item-action-icon-size, --app-scale-6x, 30px)};\n    --tct-radio-label-hidden-columns: 18px;\n    --tct-radio-label-margin-right: 0;\n    --tct-radio-margin: 0;\n\n    align-items: center;\n    display: flex;\n    grid-row: 1;\n    justify-content: center;\n\n    &-no-bullet {\n        grid-column: 2;\n    }\n}\n\n.body {\n    color: var-list(--tct-item-body-color, --t-textA, #747474);\n    font-size: var-list(--tct-item-body-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-item-body-font-weight, 400);\n}\n\n.bullet {\n    --tct-avatar-fallback-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-fallback-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n    --tct-avatar-height: #{var-list(--tct-item-avatar-height, --app-scale-7x, 35px)};\n    --tct-avatar-width: #{var-list(--tct-item-avatar-width, --app-scale-7x, 35px)};\n\n    grid-column: 1;\n    grid-row-start: 1;\n    grid-row-end: 3;\n    padding-top: var-list(--tct-item-bullet-padding-top, --app-scale-1x, 5px);\n    text-align: center;\n\n    &-no-footer {\n        grid-row-end: 2;\n    }\n}\n\n.footer {\n    grid-column-start: 2;\n    grid-column-end: 4;\n    grid-row: 2;\n\n    &-no-action-nor-bullet {\n        grid-column-start: 1;\n        grid-column-end: 2;\n    }\n\n    &-no-action {\n        grid-column-start: 2;\n        grid-column-end: 3;\n    }\n\n    &-no-bullet {\n        grid-column-start: 1;\n        grid-column-end: 3;\n    }\n}\n\n.header {\n    color: var-list(--tct-item-header-color, --t-text, #4d4d4d);\n    font-size: var-list(--tct-item-header-font-size, 16px);\n    font-weight: var-list(--tct-item-header-font-weight, 600);\n    line-height: var-list(--tct-item-header-line-height, 1.5);\n}\n\n.item {\n    border: var(--tct-item-border);\n    border-radius: var(--comp-border-radius);\n    transition: var(--comp-btn-tween);\n    transition-property: box-shadow;\n    column-gap: var-list(--tct-item-horizontal-spacing, --app-scale-3x, 15px);\n    display: grid;\n    grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(\n            var(--app-scale-5x, 25px),\n            auto\n        );\n    grid-template-rows: auto auto;\n    padding: var(--tct-item-padding, 0);\n    row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));\n\n    &-no-action-nor-bullet {\n        grid-template-columns: auto;\n    }\n\n    &-no-action {\n        grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr);\n    }\n\n    &-no-footer {\n        grid-template-rows: auto;\n    }\n\n    &-no-bullet {\n        grid-template-columns: minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);\n    }\n}\n\n.main {\n    grid-column: 2;\n    grid-row: 1;\n\n    &-no-action-nor-bullet {\n        grid-column: 1;\n    }\n\n    &-no-bullet {\n        grid-column: 1;\n    }\n}\n","import { Component, Element, Listen, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-item',\n    styleUrl: 'q2-item.scss',\n    shadow: true,\n})\nexport class Q2Item {\n    // #region Own Properties\n\n    itemElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\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    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Makes the item clickable. */\n    @Prop({ reflect: true })\n    clickable: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(() => (this.renderTrigger += 1));\n            observer.observe(this.hostElement, { childList: true, subtree: true, attributes: true });\n            this.mutationObserver = observer;\n        }\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (this.clickable) {\n            this.itemElement?.focus();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get actionClasses() {\n        const classes = ['action'];\n        if (!this.hasBulletSlotContent) {\n            classes.push(`action-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get bulletClasses() {\n        const classes = ['bullet'];\n        if (!this.hasFooterSlotContent) {\n            classes.push(`bullet-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get footerClasses() {\n        const classes = ['footer'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`footer-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`footer-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`footer-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get hasActionSlotContent() {\n        return hasSlotContent(this.hostElement, 'action');\n    }\n\n    get hasBodySlotContent() {\n        return hasSlotContent(this.hostElement, 'body');\n    }\n\n    get hasBulletSlotContent() {\n        return hasSlotContent(this.hostElement, 'bullet');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    get hasHeaderSlotContent() {\n        return hasSlotContent(this.hostElement, 'header');\n    }\n\n    get itemClasses() {\n        const classes = ['item'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`item-no-action-nor-bullet`);\n        } else if (!this.hasActionSlotContent) {\n            classes.push(`item-no-action`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`item-no-bullet`);\n        }\n        if (!this.hasFooterSlotContent) {\n            classes.push(`item-no-footer`);\n        }\n\n        return classes.join(' ');\n    }\n\n    get mainClasses() {\n        const classes = ['main'];\n        if (!this.hasActionSlotContent && !this.hasBulletSlotContent) {\n            classes.push(`main-no-action-nor-bullet`);\n        } else if (!this.hasBulletSlotContent) {\n            classes.push(`main-no-bullet`);\n        }\n\n        return classes.join(' ');\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { clickable } = this;\n        return (\n            <div\n                test-id=\"itemContainer\"\n                class={this.itemClasses}\n                ref={el => (this.itemElement = el)}\n                role={clickable ? 'button' : undefined}\n                tabIndex={clickable ? 0 : undefined}\n            >\n                {this.hasBulletSlotContent && (\n                    <div class={this.bulletClasses}>\n                        <slot name=\"bullet\" />\n                    </div>\n                )}\n                <div class={this.mainClasses}>\n                    {this.hasHeaderSlotContent && (\n                        <div class=\"header\">\n                            <slot name=\"header\" />\n                        </div>\n                    )}\n                    {this.hasBodySlotContent && (\n                        <div class=\"body\">\n                            <slot name=\"body\" />\n                        </div>\n                    )}\n                </div>\n                {this.hasActionSlotContent && (\n                    <div class={this.actionClasses}>\n                        <slot name=\"action\" />\n                    </div>\n                )}\n                {this.hasFooterSlotContent && (\n                    <div class={this.footerClasses}>\n                        <slot name=\"footer\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,146 @@
+import { r as t, c as e, h as i } from "./index-7a5365e2.js";
+
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:center;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;height:var(--tct-legend-item-height, var(--app-scale-9x, 45px));opacity:1;padding-block:0;padding-inline:var(--tct-legend-item-padding-inline, var(--app-scale-2x, 10px));transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, var(--app-line-height, 1.428571429em));text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, var(--app-line-height, 1.428571429em));text-align:right}";
+
+const s = n;
+
+const a = class {
+  constructor(i) {
+    t(this, i);
+    this.click = e(this, "click", 7);
+    this.mouseenter = e(this, "mouseenter", 7);
+    this.mouseleave = e(this, "mouseleave", 7);
+    this.hoveredItemIndex = -1;
+    this.selectedItemIndex = -1;
+    this.data = [];
+    this.format = "default";
+    this.hoveredItemId = null;
+    this.selectedItemId = null;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    this.watchHoveredItemId(this.hoveredItemId);
+    this.watchSelectedItemId(this.selectedItemId);
+  }
+  // #endregion
+  // #region Watchers
+  watchHoveredItemId(t) {
+    const e = this.getDataIndexForId(t);
+    this.hoveredItemIndex = e;
+  }
+  watchSelectedItemId(t) {
+    const e = this.getDataIndexForId(t);
+    this.selectedItemIndex = e;
+  }
+  // #endregion
+  // #region Local Methods
+  get dataWithClasses() {
+    return this.data.map(((t, e) => Object.assign(Object.assign({}, t), {
+      classes: {
+        "item-button": true,
+        "item-button-faded": this.isItemButtonFaded(e),
+        "item-button-selected": this.isItemButtonSelected(e)
+      }
+    })));
+  }
+  formatValue(t) {
+    const e = parseFloat(t.toString());
+    if (this.format === "currency") {
+      return Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD"
+      }).format(e);
+    }
+    return Intl.NumberFormat("en-US").format(e);
+  }
+  getDataIndexForId(t) {
+    const e = this.data.findIndex((e => e.id === t));
+    return e >= 0 ? e : -1;
+  }
+  isItemButtonFaded(t) {
+    if (this.isItemButtonSelected(t) || t == this.hoveredItemIndex) return false;
+    if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;
+    return this.hoveredItemIndex >= 0 && t !== this.hoveredItemIndex;
+  }
+  isItemButtonSelected(t) {
+    return t === this.selectedItemIndex;
+  }
+  onClick(t, e) {
+    t.stopPropagation();
+    const i = this.getDataIndexForId(e.id);
+    if (this.selectedItemIndex === i) {
+      this.selectedItemIndex = -1;
+      if (t.detail === 0) {
+        // Keyboard click
+        this.hoveredItemIndex = -1;
+      } else {
+        // Mouse click
+        this.hoveredItemIndex = i;
+      }
+      this.click.emit(null);
+      return;
+    }
+    this.selectedItemIndex = i;
+    this.click.emit(this.data[i]);
+  }
+  onClickElsewhere(t) {
+    t.selectedItemIndex = -1;
+  }
+  onMouseEnter(t, e) {
+    t.stopPropagation();
+    const i = this.getDataIndexForId(e.id);
+    this.hoveredItemIndex = i;
+    this.mouseenter.emit(this.data[i]);
+  }
+  onMouseLeave(t, e) {
+    t.stopPropagation();
+    const i = this.getDataIndexForId(e.id);
+    this.hoveredItemIndex = -1;
+    this.mouseleave.emit(this.data[i]);
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return i("click-elsewhere", {
+      key: "b80e97d61b66d2a3950c0e680d8f6fdf0594391a",
+      onChange: () => this.onClickElsewhere(this)
+    }, i("ul", {
+      key: "14dc772fa9b1608e415573e90d4c2780c12adef5"
+    }, this.dataWithClasses.map((t => i("li", {
+      class: "item"
+    }, i("button", {
+      "test-id": "item",
+      "aria-label": `${t.name} ${this.formatValue(t.value)}`,
+      class: t.classes,
+      onClick: e => this.onClick(e, t),
+      onMouseEnter: e => this.onMouseEnter(e, t),
+      onMouseLeave: e => this.onMouseLeave(e, t)
+    }, i("span", {
+      "test-id": "itemColor",
+      class: "item-color-indicator",
+      style: {
+        backgroundColor: t.color
+      },
+      "aria-hidden": "true"
+    }), i("span", {
+      "test-id": "itemName",
+      class: "item-name"
+    }, t.name), i("span", {
+      id: `item-${t.id}`,
+      "test-id": "itemValue",
+      class: "item-value"
+    }, this.formatValue(t.value))))))));
+  }
+  static get watchers() {
+    return {
+      hoveredItemId: [ "watchHoveredItemId" ],
+      selectedItemId: [ "watchSelectedItemId" ]
+    };
+  }
+};
+
+a.style = s;
+
+export { a as q2_legend };
+//# sourceMappingURL=q2-legend.entry.js.map

package/dist/q2-tecton-elements/{p-ff8f1a32.entry.js.map → q2-legend.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["q2LegendCss","Q2LegendStyle0","Q2Legend","componentWillLoad","this","watchHoveredItemId","hoveredItemId","watchSelectedItemId","selectedItemId","newItemId","newItemIndex","getDataIndexForId","hoveredItemIndex","selectedItemIndex","dataWithClasses","data","map","item","index","Object","assign","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","format","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","click","emit","onClickElsewhere","obj","onMouseEnter","mouseenter","onMouseLeave","mouseleave","render","h","key","onChange","class","name","backgroundColor","color"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n}\n\nul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.item-button {\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n    display: flex;\n    height: var-list(--tct-legend-item-height, --app-scale-9x, 45px);\n    opacity: 1;\n    padding-block: 0;\n    padding-inline: #{var-list(--tct-legend-item-padding-inline, --app-scale-2x, 10px)};\n    transition: opacity var(--app-tween-1, 0.2s ease);\n    width: 100%;\n\n    &:hover {\n        cursor: pointer;\n    }\n\n    &-faded > * {\n        opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n    }\n}\n\n.item-color-indicator {\n    border-radius: 50%;\n    display: inline-block;\n    flex-shrink: 0;\n    height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n    width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n    color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-name-font-weight, 600);\n    line-height: var-list(--tct-legend-item-name-line-height, --app-line-height, 1.428571429em);\n    text-align: left;\n}\n\n.item-value {\n    color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-legend-item-value-font-weight, 400);\n    line-height: var-list(--tct-legend-item-value-line-height, --app-line-height, 1.428571429em);\n    text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IDonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    click: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseenter: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseleave: EventEmitter<IDonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            this.click.emit(null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        this.click.emit(this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        this.mouseenter.emit(this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        this.mouseleave.emit(this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2LegendCss","Q2LegendStyle0","Q2Legend","componentWillLoad","this","watchHoveredItemId","hoveredItemId","watchSelectedItemId","selectedItemId","newItemId","newItemIndex","getDataIndexForId","hoveredItemIndex","selectedItemIndex","dataWithClasses","data","map","item","index","Object","assign","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","format","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","click","emit","onClickElsewhere","obj","onMouseEnter","mouseenter","onMouseLeave","mouseleave","render","h","key","onChange","class","name","backgroundColor","color"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n}\n\nul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.item-button {\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n    display: flex;\n    height: var-list(--tct-legend-item-height, --app-scale-9x, 45px);\n    opacity: 1;\n    padding-block: 0;\n    padding-inline: #{var-list(--tct-legend-item-padding-inline, --app-scale-2x, 10px)};\n    transition: opacity var(--app-tween-1, 0.2s ease);\n    width: 100%;\n\n    &:hover {\n        cursor: pointer;\n    }\n\n    &-faded > * {\n        opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n    }\n}\n\n.item-color-indicator {\n    border-radius: 50%;\n    display: inline-block;\n    flex-shrink: 0;\n    height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n    width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n    color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-name-font-weight, 600);\n    line-height: var-list(--tct-legend-item-name-line-height, --app-line-height, 1.428571429em);\n    text-align: left;\n}\n\n.item-value {\n    color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-legend-item-value-font-weight, 400);\n    line-height: var-list(--tct-legend-item-value-line-height, --app-line-height, 1.428571429em);\n    text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IDonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    click: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseenter: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseleave: EventEmitter<IDonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            this.click.emit(null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        this.click.emit(this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        this.mouseenter.emit(this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        this.mouseleave.emit(this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,83 @@
+import { r as t, c as i, h as n, g as o } from "./index-7a5365e2.js";
+
+const e = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host:active{box-shadow:none}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link-container.standalone .link{color:var(--tct-link-color-standalone, var(--t-primary));height:var(--tct-link-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:0.5}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";
+
+const r = e;
+
+const l = class {
+  constructor(n) {
+    t(this, n);
+    this.tctClick = i(this, "tctClick", 7);
+    this.disabled = false;
+    this.href = "#";
+    this.label = undefined;
+    this.referrerpolicy = undefined;
+    this.target = undefined;
+    this.tctTitle = undefined;
+    this.variant = "inline";
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * A method for click.
+     *
+     * @testOnly
+     */
+  async clickLink() {
+    const t = this.hostElement.shadowRoot.querySelector(`[test-id="linkAnchor"]`);
+    t === null || t === void 0 ? void 0 : t.click();
+  }
+  // #endregion
+  // #region Local Methods
+  get classes() {
+    const t = [ "link-container" ];
+    if (this.variant) t.push(this.variant);
+    if (!!this.disabled) t.push("disabled");
+    return t.join(" ");
+  }
+  handleClick(t) {
+    t.stopPropagation();
+    if (this.disabled) return;
+    this.tctClick.emit({
+      target: this.target,
+      referrerpolicy: this.referrerpolicy,
+      href: this.href
+    });
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return this.variant === "standalone" ? n("div", {
+      class: this.classes,
+      "aria-label": this.label
+    }, n("a", {
+      class: "link",
+      onClick: t => this.handleClick(t),
+      href: !!this.disabled ? undefined : this.href,
+      target: this.target || "_self",
+      referrerPolicy: this.referrerpolicy || undefined,
+      title: this.tctTitle || undefined,
+      "test-id": "linkAnchor"
+    }, n("span", {
+      class: "label"
+    }, this.label), n("q2-icon", {
+      type: "chevron-right"
+    }))) : n("a", {
+      class: this.classes,
+      onClick: t => this.handleClick(t),
+      href: !!this.disabled ? undefined : this.href,
+      target: this.target || "_self",
+      referrerPolicy: this.referrerpolicy || undefined,
+      title: this.tctTitle || undefined,
+      "test-id": "linkAnchor"
+    }, this.label);
+  }
+  get hostElement() {
+    return o(this);
+  }
+};
+
+l.style = r;
+
+export { l as q2_link };
+//# sourceMappingURL=q2-link.entry.js.map