q2-tecton-elements 1.51.1 → 1.52.1

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

@@ -0,0 +1,153 @@
+import { r, h as t, g as e } from "./index-7a5365e2.js";
+
+const s = "*{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}.currency{color:var(--tct-currency-color, inherit);font-size:var(--tct-currency-font-size, inherit);font-weight:var(--tct-currency-font-weight, inherit)}.currency-small{color:var(--tct-currency-small-color, inherit);font-size:var(--tct-currency-small-font-size, 24px);font-weight:var(--tct-currency-small-font-weight, 600)}.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-weight:var(--tct-currency-small-superscript-font-weight, 700)}.currency-medium{color:var(--tct-currency-medium-color, inherit);font-size:var(--tct-currency-medium-font-size, 42px);font-weight:var(--tct-currency-medium-font-weight, 600)}.currency-medium .superscript{vertical-align:super;color:var(--tct-currency-medium-superscript-color, inherit);font-size:var(--tct-currency-medium-superscript-font-size, 16px);font-weight:var(--tct-currency-medium-superscript-font-weight, 700)}.currency-large{color:var(--tct-currency-large-color, inherit);font-size:var(--tct-currency-large-font-size, 70px);font-weight:var(--tct-currency-large-font-weight, 700)}.currency-large .superscript{vertical-align:super;color:var(--tct-currency-large-superscript-color, inherit);font-size:var(--tct-currency-large-superscript-font-size, 28px);font-weight:var(--tct-currency-large-superscript-font-weight, 800)}";
+
+const n = s;
+
+const i = class {
+  constructor(t) {
+    r(this, t);
+    this.amount = undefined;
+    this.currency = "USD";
+    this.locale = document.documentElement.lang || "en-US";
+    this.signDisplay = "auto";
+    this.size = undefined;
+    this.slotSize = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    this.formatCurrency();
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * A method to select a tab pane corresponding with the value.
+     *
+     * @testOnly
+     */
+  async displayedMessageValue() {
+    const r = this.hostElement.shadowRoot.querySelector('[test-id="q2CurrencyInner"]');
+    return r === null || r === void 0 ? void 0 : r.ariaLabel;
+  }
+  // #endregion
+  // #region Watchers
+  propsUpdated() {
+    this.formatCurrency();
+  }
+  // #endregion
+  // #region Local Methods
+  get amountCore() {
+    const {formattedParts: r, shouldSuperscriptFraction: t} = this;
+    let e = "";
+    for (const t of r) {
+      if (t.type === "integer" || t.type === "decimal" || t.type === "group" || t.type === "literal") {
+        e += t.value;
+      }
+    }
+    // removes trailing decimal point if superscripting the fraction
+        if (t && e[e.length - 1] === ".") e = e.slice(0, -1);
+    // removes end whitespace that breaks formatting
+        e = e.trimEnd();
+    return e;
+  }
+  get currencyClasses() {
+    const r = [ "currency" ];
+    const t = this.size ? this.size : this.slotSize;
+    if (!!t) r.push(`currency-${t}`);
+    return r.join(" ");
+  }
+  get currencyIsFront() {
+    const r = this.formattedParts.findIndex((r => r.type === "currency"));
+    if (r === 0 || r === 1) return true;
+    return false;
+  }
+  get currencySymbol() {
+    const {formattedParts: r, currencyIsFront: t} = this;
+    const e = r.findIndex((r => r.type === "currency"));
+    const s = r[e].value;
+    return t ? s : " " + s;
+  }
+  get fraction() {
+    const {formattedParts: r} = this;
+    const t = r.find((r => r.type === "fraction"));
+    if (!t) return;
+    return t.value;
+  }
+  get hasPlusMinusSign() {
+    return this.formattedParts.some((r => r.type === "minusSign" || r.type === "plusSign"));
+  }
+  get plusMinusSign() {
+    const {formattedParts: r, hasPlusMinusSign: t} = this;
+    if (!t) return;
+    const e = r.find((r => r.type === "minusSign" || r.type === "plusSign"));
+    return e.value;
+  }
+  get shouldSuperscriptFraction() {
+    const r = this.formattedParts.findIndex((r => r.type === "fraction"));
+    const t = this.formattedParts[r - 1].value === ",";
+    if (t || !this.currencyIsFront || this.sizeValue === "small" || !this.sizeProvided) return false;
+    return true;
+  }
+  get shouldSuperscriptSymbol() {
+    if (!this.currencyIsFront || this.sizeProvided) return true;
+    return false;
+  }
+  get sizeProvided() {
+    return !!this.size || !!this.slotSize;
+  }
+  get sizeValue() {
+    return this.size ? this.size : this.slotSize;
+  }
+  formatCurrency() {
+    const r = new Intl.NumberFormat(this.locale, {
+      style: "currency",
+      currency: this.currency,
+      signDisplay: this.signDisplay
+    });
+    this.formattedParts = r.formatToParts(this.amount);
+    this.readableCurrency = r.format(this.amount);
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    const {hasPlusMinusSign: r, plusMinusSign: e, currencyIsFront: s, currencySymbol: n, shouldSuperscriptSymbol: i, amountCore: c, fraction: o, shouldSuperscriptFraction: a, readableCurrency: u, currencyClasses: l} = this;
+    return t("div", {
+      key: "a2427d807ba868ebff71438f4422e075205da869",
+      "test-id": "q2CurrencyInner",
+      class: l,
+      "aria-label": u
+    }, r && t("span", {
+      key: "594c8cd84fd3226b2d8170ee9a05532f57bb0d6f"
+    }, e), s && t("span", {
+      key: "f726da3911833f35f0fe5c5b68d9d341acf5af27",
+      class: i ? "superscript" : ""
+    }, n), t("span", {
+      key: "08644b7c1397237676dc00a81552ba7badefa38e"
+    }, c), t("span", {
+      key: "cab6f51a4af6067122f3c2994d79f0d9fb828c14",
+      class: a ? "superscript" : ""
+    }, o), !s && t("span", {
+      key: "1f1265a8bf437499d0d613f47b7c2f357e22165c",
+      class: i ? "superscript" : ""
+    }, n));
+  }
+  get hostElement() {
+    return e(this);
+  }
+  static get watchers() {
+    return {
+      amount: [ "propsUpdated" ],
+      currency: [ "propsUpdated" ],
+      locale: [ "propsUpdated" ],
+      size: [ "propsUpdated" ],
+      slotSize: [ "propsUpdated" ],
+      signDisplay: [ "propsUpdated" ]
+    };
+  }
+};
+
+i.style = n;
+
+export { i as q2_currency };
+//# sourceMappingURL=q2-currency.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2CurrencyCss","Q2CurrencyStyle0","Q2Currency","document","documentElement","lang","componentWillLoad","this","formatCurrency","displayedMessageValue","currency","hostElement","shadowRoot","querySelector","ariaLabel","propsUpdated","amountCore","formattedParts","shouldSuperscriptFraction","amount","part","type","value","length","slice","trimEnd","currencyClasses","classes","sizeClass","size","slotSize","push","join","currencyIsFront","index","findIndex","currencySymbol","currencyIndex","symbol","fraction","find","hasPlusMinusSign","some","plusMinusSign","sign","fractionIndex","commaBeforeFraction","sizeValue","sizeProvided","shouldSuperscriptSymbol","formatOptions","Intl","NumberFormat","locale","style","signDisplay","formatToParts","readableCurrency","format","render","h","key","class"],"sources":["src/components/q2-currency/q2-currency.scss?tag=q2-currency&encapsulation=shadow","src/components/q2-currency/q2-currency.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.currency {\n    color: var-list(--tct-currency-color, inherit);\n    font-size: var-list(--tct-currency-font-size, inherit);\n    font-weight: var-list(--tct-currency-font-weight, inherit);\n}\n\n.currency-small {\n    color: var-list(--tct-currency-small-color, inherit);\n    font-size: var-list(--tct-currency-small-font-size, 24px);\n    font-weight: var-list(--tct-currency-small-font-weight, 600);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-small-superscript-color, inherit);\n        font-size: var-list(--tct-currency-small-superscript-font-size, --app-font-size-small, 12px);\n        font-weight: var-list(--tct-currency-small-superscript-font-weight, 700);\n    }\n}\n\n.currency-medium {\n    color: var-list(--tct-currency-medium-color, inherit);\n    font-size: var-list(--tct-currency-medium-font-size, 42px);\n    font-weight: var-list(--tct-currency-medium-font-weight, 600);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-medium-superscript-color, inherit);\n        font-size: var-list(--tct-currency-medium-superscript-font-size, 16px);\n        font-weight: var-list(--tct-currency-medium-superscript-font-weight, 700);\n    }\n}\n\n.currency-large {\n    color: var-list(--tct-currency-large-color, inherit);\n    font-size: var-list(--tct-currency-large-font-size, 70px);\n    font-weight: var-list(--tct-currency-large-font-weight, 700);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-large-superscript-color, inherit);\n        font-size: var-list(--tct-currency-large-superscript-font-size, 28px);\n        font-weight: var-list(--tct-currency-large-superscript-font-weight, 800);\n    }\n}\n","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"],"mappings":"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"}