q2-tecton-elements 1.58.3 → 1.59.0

package/dist/collection/components/q2-currency/q2-currency.css

@@ -70,10 +70,48 @@ button {
 }
 
 .currency {
-  color: var(--tct-currency-color, inherit);
+  --comp-currency-color: var(--tct-currency-color, var(--t-text, #4d4d4d));
+  color: var(--comp-currency-color);
   font-size: var(--tct-currency-font-size, inherit);
   font-weight: var(--tct-currency-font-weight, inherit);
 }
+.currency.positive {
+  color: var(--tct-currency-positive-color, var(--comp-currency-color));
+}
+.currency.negative {
+  color: var(--tct-currency-negative-color, var(--comp-currency-color));
+}
+.currency.debit.positive {
+  color: var(--tct-currency-debit-positive-color, var(--const-stoplight-success, #0e8a00));
+}
+.currency.debit.negative {
+  color: var(--tct-currency-debit-negative-color, var(--const-stoplight-alert, #d20a0a));
+}
+.currency.credit.positive {
+  color: var(--tct-currency-credit-positive-color, var(--const-stoplight-alert, #d20a0a));
+}
+.currency.credit.negative {
+  color: var(--tct-currency-credit-negative-color, var(--const-stoplight-success, #0e8a00));
+}
+.currency.masked {
+  line-height: 1;
+}
+.currency.masked.positive {
+  background: var(--tct-currency-masked-positive-background, linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%));
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-background-clip: text;
+  -moz-text-fill-color: transparent;
+}
+.currency.masked.negative {
+  background: var(--tct-currency-masked-negative-background, linear-gradient(180deg, var(--t-text, #4d4d4d) 0%, #b3b3b3 100%));
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-background-clip: text;
+  -moz-text-fill-color: transparent;
+}
 
 .currency-small {
   color: var(--tct-currency-small-color, inherit);
@@ -83,7 +121,7 @@ button {
 .currency-small .superscript {
   vertical-align: super;
   color: var(--tct-currency-small-superscript-color, inherit);
-  font-size: var(--tct-currency-small-superscript-font-size, var(--app-font-size-small, 12px));
+  font-size: var(--tct-currency-small-superscript-font-size, 0.5em);
   font-weight: var(--tct-currency-small-superscript-font-weight, 700);
 }
 
@@ -95,7 +133,7 @@ button {
 .currency-medium .superscript {
   vertical-align: super;
   color: var(--tct-currency-medium-superscript-color, inherit);
-  font-size: var(--tct-currency-medium-superscript-font-size, 21px);
+  font-size: var(--tct-currency-medium-superscript-font-size, 0.5em);
   font-weight: var(--tct-currency-medium-superscript-font-weight, 700);
 }
 
@@ -107,6 +145,6 @@ button {
 .currency-large .superscript {
   vertical-align: super;
   color: var(--tct-currency-large-superscript-color, inherit);
-  font-size: var(--tct-currency-large-superscript-font-size, 35px);
+  font-size: var(--tct-currency-large-superscript-font-size, 0.5em);
   font-weight: var(--tct-currency-large-superscript-font-weight, 800);
 }

package/dist/collection/components/q2-currency/q2-currency.js

@@ -9,9 +9,10 @@ export class Q2Currency {
          * Determine how the positive or negative sign should display.
          *
          * Behavior:
+         * - `accounting`: No sign displays for positive amounts and parentheses wrap negative amounts.
          * - `always`: Always display the sign.
-         * - `auto`: Sign displays for negative numbers only, including negative zero.
-         * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.
+         * - `auto`: Sign displays for negative amounts only, including negative zero.
+         * - `exceptZero`: Sign displays for positive and negative amounts, but not zero.
          * - `never`: Never display the sign.
          */
         this.signDisplay = 'auto';
@@ -24,13 +25,13 @@ export class Q2Currency {
     // #endregion
     // #region Public Methods API
     /**
-     * A method to select a tab pane corresponding with the value.
+     * A method to retrieve the displayed currency value.
      *
      * @testOnly
      */
     async displayedMessageValue() {
         const currency = this.hostElement.shadowRoot.querySelector('[test-id="q2CurrencyInner"]');
-        return currency === null || currency === void 0 ? void 0 : currency.ariaLabel;
+        return (currency === null || currency === void 0 ? void 0 : currency.getAttribute('aria-label')) || '';
     }
     // #endregion
     // #region Watchers
@@ -58,8 +59,13 @@ export class Q2Currency {
         return amount;
     }
     get currencyClasses() {
+        const { size, slotSize, isNegativeAmount, variant } = this;
         const classes = ['currency'];
-        const sizeClass = this.size ? this.size : this.slotSize;
+        const sizeClass = size ? size : slotSize;
+        const sign = isNegativeAmount ? 'negative' : 'positive';
+        classes.push(sign);
+        if (!!variant)
+            classes.push(variant);
         if (!!sizeClass)
             classes.push(`currency-${sizeClass}`);
         return classes.join(' ');
@@ -86,6 +92,11 @@ export class Q2Currency {
     get hasPlusMinusSign() {
         return this.formattedParts.some((part) => part.type === 'minusSign' || part.type === 'plusSign');
     }
+    get isNegativeAmount() {
+        const hasNegativePart = this.formattedParts.some((part) => part.type === 'minusSign');
+        const hasNegativeDash = String(this.amount).startsWith('-');
+        return hasNegativePart || hasNegativeDash;
+    }
     get plusMinusSign() {
         const { formattedParts, hasPlusMinusSign } = this;
         if (!hasPlusMinusSign)
@@ -94,8 +105,9 @@ export class Q2Currency {
         return sign.value;
     }
     get shouldSuperscriptFraction() {
+        var _a;
         const fractionIndex = this.formattedParts.findIndex((part) => part.type === 'fraction');
-        const commaBeforeFraction = this.formattedParts[fractionIndex - 1].value === ',';
+        const commaBeforeFraction = ((_a = this.formattedParts[fractionIndex - 1]) === null || _a === void 0 ? void 0 : _a.value) === ',';
         if (commaBeforeFraction || !this.currencyIsFront || this.sizeValue === 'small' || !this.sizeProvided)
             return false;
         return true;
@@ -115,7 +127,7 @@ export class Q2Currency {
         const formatOptions = new Intl.NumberFormat(this.locale, {
             style: 'currency',
             currency: this.currency,
-            signDisplay: this.signDisplay,
+            signDisplay: this.signDisplay === 'accounting' ? 'never' : this.signDisplay,
         });
         this.formattedParts = formatOptions.formatToParts(this.amount);
         this.readableCurrency = formatOptions.format(this.amount);
@@ -123,8 +135,8 @@ export class Q2Currency {
     // #endregion
     // #region Render Methods
     render() {
-        const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, } = this;
-        return (h("div", { key: 'fbcb104524d149fcf0ea516d3d7062e2abd2efc9', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && h("span", { key: 'b0616d4dfffa6f97a196a5d3d42e53f4e977685c' }, plusMinusSign), currencyIsFront && h("span", { key: 'aafd7db7a616f78cbc697681cbf3c14a87d53978', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: 'cf30e6eaa0cb6eb2ab6ca6c9e0d56208b3171c52' }, amountCore), h("span", { key: '91771c99e2001976f67283b6a3eafbb4fea08cfb', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '242f487962506d42d512427198f8ddc8a29fd12c', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
+        const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, signDisplay, isNegativeAmount, } = this;
+        return (h("div", { key: '15e4db8a4c25c1b1bea2382abd5e4dbf28e36090', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '5474998b938cf27ff7db553534f08f028dd61347' }, '('), hasPlusMinusSign && h("span", { key: '10caf4a1a73a08e9fb31b52fb0a70e1ab2f69d10' }, plusMinusSign), currencyIsFront && h("span", { key: '6b78b88b1af0c58237933add94b2b0fef9fc8e53', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: 'e87cd1eaf3805a619f98d40faa29a6145bebde84' }, amountCore), h("span", { key: 'cb6822a0919027c08303b1e2759bea96c0605552', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: 'e22b1b657f06ebec478573e6e0b8fe4b83b229ba', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '4adea6d83042aea5f8fd78f248c95304735ee7e2' }, ')')));
     }
     static get is() { return "q2-currency"; }
     static get encapsulation() { return "shadow"; }
@@ -204,15 +216,15 @@ export class Q2Currency {
                 "attribute": "sign-display",
                 "mutable": false,
                 "complexType": {
-                    "original": "'never' | 'auto' | 'always' | 'exceptZero'",
-                    "resolved": "\"always\" | \"auto\" | \"exceptZero\" | \"never\"",
+                    "original": "'accounting' | 'always' | 'auto' | 'exceptZero' | 'never'",
+                    "resolved": "\"accounting\" | \"always\" | \"auto\" | \"exceptZero\" | \"never\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determine how the positive or negative sign should display.\n\nBehavior:\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."
+                    "text": "Determine how the positive or negative sign should display.\n\nBehavior:\n- `accounting`: No sign displays for positive amounts and parentheses wrap negative amounts.\n- `always`: Always display the sign.\n- `auto`: Sign displays for negative amounts only, including negative zero.\n- `exceptZero`: Sign displays for positive and negative amounts, but not zero.\n- `never`: Never display the sign."
                 },
                 "getter": false,
                 "setter": false,
@@ -259,6 +271,25 @@ export class Q2Currency {
                 "getter": false,
                 "setter": false,
                 "reflect": true
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'debit' | 'credit' | 'masked'",
+                    "resolved": "\"credit\" | \"debit\" | \"masked\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant controls how the currency is colored and exposes unique CSS overrides.\nThe `debit` and `credit` variants align styling with common practices for coloring debit and credit accounts.\nThe `masked` variant exposes the ability to use gradients and images to color the currency."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
             }
         };
     }
@@ -277,7 +308,7 @@ export class Q2Currency {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "A method to select a tab pane corresponding with the value.",
+                    "text": "A method to retrieve the displayed currency value.",
                     "tags": [{
                             "name": "testOnly",
                             "text": undefined
@@ -306,6 +337,9 @@ export class Q2Currency {
             }, {
                 "propName": "signDisplay",
                 "methodName": "propsUpdated"
+            }, {
+                "propName": "variant",
+                "methodName": "propsUpdated"
             }];
     }
 }

package/dist/collection/components/q2-currency/q2-currency.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-currency.js","sourceRoot":"","sources":["../../../../src/components/q2-currency/q2-currency.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Watch, h, ComponentInterface, Element, Method } from '@stencil/core';\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The parts of the formatted number. */\n    formattedParts: Intl.NumberFormatPart[];\n    /** @private The full currency for aria-label purposes. */\n    readableCurrency: string;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The amount you want formatted.  */\n    @Prop({ reflect: true })\n    amount: number;\n\n    /** Formats the `amount` to a specific currency. */\n    @Prop({ reflect: true })\n    currency: string = 'USD';\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    /**\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';\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async displayedMessageValue() {\n        const currency = this.hostElement.shadowRoot.querySelector('[test-id=\"q2CurrencyInner\"]');\n        return currency?.ariaLabel;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('amount')\n    @Watch('currency')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    propsUpdated() {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get amountCore(): string {\n        const { formattedParts, shouldSuperscriptFraction } = this;\n        let amount: string = '';\n\n        for (const part of formattedParts) {\n            if (\n                part.type === 'integer' ||\n                part.type === 'decimal' ||\n                part.type === 'group' ||\n                part.type === 'literal'\n            ) {\n                amount += part.value;\n            }\n        }\n\n        // removes trailing decimal point if superscripting the fraction\n        if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n        // removes end whitespace that breaks formatting\n        amount = amount.trimEnd();\n\n        return amount;\n    }\n\n    get currencyClasses(): string {\n        const classes = ['currency'];\n        const sizeClass = this.size ? this.size : this.slotSize;\n\n        if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n        return classes.join(' ');\n    }\n\n    get currencyIsFront(): boolean {\n        const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        if (index === 0 || index === 1) return true;\n        return false;\n    }\n\n    get currencySymbol(): string {\n        const { formattedParts, currencyIsFront } = this;\n        const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        const symbol = formattedParts[currencyIndex].value;\n        return currencyIsFront ? symbol : ' ' + symbol;\n    }\n\n    get fraction(): string {\n        const { formattedParts } = this;\n        const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        if (!fraction) return;\n\n        return fraction.value;\n    }\n\n    get hasPlusMinusSign(): boolean {\n        return this.formattedParts.some(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n    }\n\n    get plusMinusSign(): string {\n        const { formattedParts, hasPlusMinusSign } = this;\n        if (!hasPlusMinusSign) return;\n\n        const sign = formattedParts.find(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n        return sign.value;\n    }\n\n    get shouldSuperscriptFraction(): boolean {\n        const fractionIndex = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        const commaBeforeFraction = this.formattedParts[fractionIndex - 1].value === ',';\n\n        if (commaBeforeFraction || !this.currencyIsFront || this.sizeValue === 'small' || !this.sizeProvided)\n            return false;\n\n        return true;\n    }\n\n    get shouldSuperscriptSymbol(): boolean {\n        if (!this.currencyIsFront || this.sizeProvided) return true;\n\n        return false;\n    }\n\n    get sizeProvided(): boolean {\n        return !!this.size || !!this.slotSize;\n    }\n\n    get sizeValue(): string {\n        return this.size ? this.size : this.slotSize;\n    }\n\n    formatCurrency() {\n        const formatOptions = new Intl.NumberFormat(this.locale, {\n            style: 'currency',\n            currency: this.currency,\n            signDisplay: this.signDisplay,\n        });\n        this.formattedParts = formatOptions.formatToParts(this.amount);\n        this.readableCurrency = formatOptions.format(this.amount);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const {\n            hasPlusMinusSign,\n            plusMinusSign,\n            currencyIsFront,\n            currencySymbol,\n            shouldSuperscriptSymbol,\n            amountCore,\n            fraction,\n            shouldSuperscriptFraction,\n            readableCurrency,\n            currencyClasses,\n        } = this;\n\n        return (\n            <div\n                test-id=\"q2CurrencyInner\"\n                class={currencyClasses}\n                aria-label={readableCurrency}\n            >\n                {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n                {currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n                <span>{amountCore}</span>\n                <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n                {!currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-currency.js","sourceRoot":"","sources":["../../../../src/components/q2-currency/q2-currency.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Watch, h, ComponentInterface, Element, Method } from '@stencil/core';\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The parts of the formatted number. */\n    formattedParts: Intl.NumberFormatPart[];\n    /** @private The full currency for aria-label purposes. */\n    readableCurrency: string;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The amount you want formatted.  */\n    @Prop({ reflect: true })\n    amount: number;\n\n    /** Formats the `amount` to a specific currency. */\n    @Prop({ reflect: true })\n    currency: string = 'USD';\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    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `accounting`: No sign displays for positive amounts and parentheses wrap negative amounts.\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative amounts only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative amounts, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'accounting' | 'always' | 'auto' | 'exceptZero' | 'never' = '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';\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    /**\n     * The variant controls how the currency is colored and exposes unique CSS overrides.\n     * The `debit` and `credit` variants align styling with common practices for coloring debit and credit accounts.\n     * The `masked` variant exposes the ability to use gradients and images to color the currency.\n     */\n    @Prop({ reflect: true })\n    variant: 'debit' | 'credit' | 'masked';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to retrieve the displayed currency value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async displayedMessageValue() {\n        const currency = this.hostElement.shadowRoot.querySelector('[test-id=\"q2CurrencyInner\"]');\n        return currency?.getAttribute('aria-label') || '';\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('amount')\n    @Watch('currency')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    @Watch('variant')\n    propsUpdated() {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get amountCore(): string {\n        const { formattedParts, shouldSuperscriptFraction } = this;\n        let amount: string = '';\n\n        for (const part of formattedParts) {\n            if (\n                part.type === 'integer' ||\n                part.type === 'decimal' ||\n                part.type === 'group' ||\n                part.type === 'literal'\n            ) {\n                amount += part.value;\n            }\n        }\n\n        // removes trailing decimal point if superscripting the fraction\n        if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n        // removes end whitespace that breaks formatting\n        amount = amount.trimEnd();\n\n        return amount;\n    }\n\n    get currencyClasses(): string {\n        const { size, slotSize, isNegativeAmount, variant } = this;\n        const classes = ['currency'];\n        const sizeClass = size ? size : slotSize;\n        const sign = isNegativeAmount ? 'negative' : 'positive';\n\n        classes.push(sign);\n        if (!!variant) classes.push(variant);\n        if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n        return classes.join(' ');\n    }\n\n    get currencyIsFront(): boolean {\n        const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        if (index === 0 || index === 1) return true;\n        return false;\n    }\n\n    get currencySymbol(): string {\n        const { formattedParts, currencyIsFront } = this;\n        const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        const symbol = formattedParts[currencyIndex].value;\n        return currencyIsFront ? symbol : ' ' + symbol;\n    }\n\n    get fraction(): string {\n        const { formattedParts } = this;\n        const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        if (!fraction) return;\n\n        return fraction.value;\n    }\n\n    get hasPlusMinusSign(): boolean {\n        return this.formattedParts.some(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n    }\n\n    get isNegativeAmount(): boolean {\n        const hasNegativePart = this.formattedParts.some((part: Intl.NumberFormatPart) => part.type === 'minusSign');\n        const hasNegativeDash = String(this.amount).startsWith('-');\n        return hasNegativePart || hasNegativeDash;\n    }\n\n    get plusMinusSign(): string {\n        const { formattedParts, hasPlusMinusSign } = this;\n        if (!hasPlusMinusSign) return;\n\n        const sign = formattedParts.find(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n        return sign.value;\n    }\n\n    get shouldSuperscriptFraction(): boolean {\n        const fractionIndex = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        const commaBeforeFraction = this.formattedParts[fractionIndex - 1]?.value === ',';\n\n        if (commaBeforeFraction || !this.currencyIsFront || this.sizeValue === 'small' || !this.sizeProvided)\n            return false;\n\n        return true;\n    }\n\n    get shouldSuperscriptSymbol(): boolean {\n        if (!this.currencyIsFront || this.sizeProvided) return true;\n\n        return false;\n    }\n\n    get sizeProvided(): boolean {\n        return !!this.size || !!this.slotSize;\n    }\n\n    get sizeValue(): string {\n        return this.size ? this.size : this.slotSize;\n    }\n\n    formatCurrency() {\n        const formatOptions = new Intl.NumberFormat(this.locale, {\n            style: 'currency',\n            currency: this.currency,\n            signDisplay: this.signDisplay === 'accounting' ? 'never' : this.signDisplay,\n        });\n        this.formattedParts = formatOptions.formatToParts(this.amount);\n        this.readableCurrency = formatOptions.format(this.amount);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const {\n            hasPlusMinusSign,\n            plusMinusSign,\n            currencyIsFront,\n            currencySymbol,\n            shouldSuperscriptSymbol,\n            amountCore,\n            fraction,\n            shouldSuperscriptFraction,\n            readableCurrency,\n            currencyClasses,\n            signDisplay,\n            isNegativeAmount,\n        } = this;\n\n        return (\n            <div\n                test-id=\"q2CurrencyInner\"\n                class={currencyClasses}\n                aria-label={readableCurrency}\n            >\n                {signDisplay === 'accounting' && isNegativeAmount && <span>{'('}</span>}\n                {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n                {currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n                <span>{amountCore}</span>\n                <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n                {!currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n                {signDisplay === 'accounting' && isNegativeAmount && <span>{')'}</span>}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-detail/q2-detail.js

@@ -102,7 +102,7 @@ export class Q2Detail {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '90561750f346b07815d6fa42076104e9c229503d', class: this.detailClasses }, this.hasLabel && (h("div", { key: '6ddeb20f72cc9d309a0382b55b451bc82a9986a4', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'b9fd947bd8e42a62376fa6a401e81343898193a4', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
+        return (h("div", { key: '0bcc193663fa2730a1da75169d29563c3a14a311', class: this.detailClasses }, this.hasLabel && (h("div", { key: '703d7e91f10a223bfdd2f9cb6975a7c15029d450', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: '811569a0eff620ab21ce49e8a91379c5ea06be86', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
     }
     static get is() { return "q2-detail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-example/q2-example.js

@@ -118,7 +118,7 @@ export class Q2Example {
             }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
     }
     render() {
-        return h(Host, { key: 'dbe4a678c04f60cc08aabd47cc9fa3871265e0f0', attribute: "navigation" }, this.renderMenuInner());
+        return h(Host, { key: '8139598dfeeceeaef460ad83acae011c3badbebb', attribute: "navigation" }, this.renderMenuInner());
     }
     static get is() { return "q2-example"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-form/q2-form.js

@@ -8,7 +8,7 @@ export class Q2Checkbox {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6e0a67a4fed55809b56ecff76c213a299f6e27bd', class: "container" }, h("slot", { key: 'da7ac7244b4953d28ed6382dd1a09cc97b4a6f3e' })));
+        return (h("div", { key: '2cb63c515c7df055a3549d04135d235dd2055738', class: "container" }, h("slot", { key: 'a50bf633942f06fbce47d945ec7a05eeefa7bb8c' })));
     }
     static get is() { return "q2-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-formatted-text/q2-formatted-text.js

@@ -58,7 +58,7 @@ export class Q2FormattedText {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: '0af18c53d8fa788cabd68b542c60d8fee98c632c', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: 'ac6995260060b2120c61f90a9b72a194256464a1' }, this.formattedValue)));
+        return (h("div", { key: '08fe8c32d469d77afdb886addcced59c6a6edbcc', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '6f5031262bf199f7887eb0b1f9ef1d8f920a29fc' }, this.formattedValue)));
     }
     static get is() { return "q2-formatted-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-input/q2-input.js

@@ -176,11 +176,12 @@ export class Q2Input {
             this.textHidden = !this.textHidden;
         };
         this.validateInput = () => {
-            var _a, _b;
+            var _a, _b, _c;
             this.validity = (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.validity;
             if (((_b = this.validity) === null || _b === void 0 ? void 0 : _b.valid) === false) {
                 this.invalid.emit();
             }
+            return !!((_c = this.validity) === null || _c === void 0 ? void 0 : _c.valid);
         };
     }
     // #endregion
@@ -240,7 +241,7 @@ export class Q2Input {
      */
     async checkValidity() {
         this.inputRef.checkValidity();
-        this.validateInput();
+        return this.validateInput();
     }
     /**
      * Emulates clicking the clear button when the input is clearable.
@@ -643,7 +644,7 @@ export class Q2Input {
     }
     renderInputContainerDOM() {
         const { hasInputLeftSlot, hasInputRightSlot } = this;
-        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), h("div", { class: "input-icons-container-right" }, h("q2-btn", { class: this.clearClasses.join(' '), label: loc('tecton.element.input.clear', [this.label]), hideLabel: true, "test-id": "clearButton", onClick: this.onClearInput }, h("q2-icon", { type: "close", class: "icon-clear" })), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasError && this.type !== 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" }))));
+        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), h("div", { class: "input-icons-container-right" }, h("q2-btn", { class: this.clearClasses.join(' '), label: loc('tecton.element.input.clear', [this.label]), hideLabel: true, "test-id": "clearButton", onClick: this.onClearInput, onKeyDown: e => e.stopPropagation() }, h("q2-icon", { type: "close", class: "icon-clear" })), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasError && this.type !== 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" }))));
     }
     renderPseudoInputDOM() {
         const showPlaceholder = !this.value && !!this.placeholder;
@@ -660,7 +661,7 @@ export class Q2Input {
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (h(Host, { key: '94de6859228b9e57400ee4c48f60200e5ee04b0e', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '680591185b170f1d527b363b41488f354ae7d05f', class: this.wrapperClasses }, h("div", { key: '5c2499e85f9aeeff06e5404d0ebd5f8ddbbd1047', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
+        return (h(Host, { key: '7ec6adb05155d11846fd68e6e06bea2f07ba9caf', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: 'cfcde15de76e44cd280abbcc3e4c7bd2aa41ef80', class: this.wrapperClasses }, h("div", { key: '0b0f96352fa75f19d040e87a35a41ae3575ae228', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
     }
     static get is() { return "q2-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1668,7 +1669,7 @@ export class Q2Input {
         return {
             "checkValidity": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
+                    "signature": "() => Promise<boolean>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -1676,7 +1677,7 @@ export class Q2Input {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<boolean>"
                 },
                 "docs": {
                     "text": "Emulates firing checkValidity on `<input>`, emits `invalid` event if validation failed.",