q2-tecton-elements 1.60.4 → 1.61.1

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

@@ -0,0 +1,176 @@
+import { r as t, h as e, g as r } from "./index-CGkHOjh1.js";
+
+import { l as i } from "./index-LNnzUeDP.js";
+
+const o = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{width:100%}.meter-container{--comp-meter-bar-height:var(--tct-meter-bar-height, 10px);--comp-meter-bar-border-radius:var(--tct-meter-bar-border-radius, calc(var(--comp-meter-bar-height) / 2));--comp-meter-dot-height:var(--tct-meter-dot-size, var(--tct-meter-bar-height, 10px));--comp-meter-dot-border-style:var(--tct-meter-dot-border-style, solid);--comp-meter-dot-border-width:var(--tct-meter-dot-border-width, calc(0.2 * var(--comp-meter-bar-height)));--comp-meter-dot-border-color:var(--tct-meter-dot-border-color, #FFFFFF);--comp-meter-dot-border-radius:var(--tct-meter-dot-border-radius, 50%);--comp-meter-dot-background-color:var(--tct-meter-dot-background-color, var(--t-primary, #6A4A9E));--comp-meter-tick-height:var(--tct-meter-ticket-height, calc(0.4 * var(--comp-meter-bar-height)));--comp-meter-bar-shadow:var(--tct-meter-bar-shadow);--comp-meter-bar-border:var(--tct-meter-bar-border)}:host([animated]:not([animated=false])) .meter-container{--comp-meter-bar-transition:var(--tct-meter-bar-transition, width 0.2s ease-in-out);--comp-meter-dot-transition:var(--tct-meter-dot-transition, left 0.2s ease-in-out)}:host([dotted]:not([dotted=false])) .meter-container{--comp-meter-dot-visibility:visible}:host([segments]:not([segments=""]):not([segments="0"]):not([segments="1"])) .meter-container{--comp-meter-tick-visibility:visible}.meter-container .label{font-size:var(--tct-meter-label-font-size, 14px);font-weight:var(--tct-meter-label-font-weight, 600);color:var(--tct-meter-label-color, var(--t-text, #4D4D4D));margin:var(--tct-meter-label-margin, 5px 0)}.meter-container .description{font-size:var(--tct-meter-description-font-size, 14px);font-weight:var(--tct-meter-description-font-weight, 400);color:var(--tct-meter-description-color, #000000);line-height:var(--tct-meter-description-line-height, 21px);margin:var(--tct-meter-description-margin, 5px 0)}.meter-container .bar-container{position:relative}.meter-container .bar-container .bars{position:relative;top:0;left:0;width:100%;height:var(--comp-meter-bar-height);background-color:var(--tct-meter-bar-background-color, var(--t-primary-completed2, #E0DEEF));margin:var(--tct-meter-bar-margin, 5px 0);border:var(--comp-meter-bar-border);border-radius:var(--comp-meter-bar-border-radius);box-shadow:var(--comp-meter-bar-shadow)}.meter-container .bar-container .bars .completed-bar,.meter-container .bar-container .bars .suggested-bar,.meter-container .bar-container .bars .tick-bar{height:100%;position:absolute;top:0;left:0;border-radius:var(--comp-meter-bar-border-radius);transition:var(--comp-meter-bar-transition, none)}.meter-container .bar-container .bars .completed-bar{background-color:var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E));min-width:calc(var(--comp-meter-bar-height));width:0%;z-index:2}.meter-container .bar-container .bars .suggested-bar{background-color:var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3));min-width:calc(var(--comp-meter-bar-height));width:0%;z-index:1}.meter-container .bar-container .bars .tick-bar{visibility:var(--comp-meter-tick-visibility, hidden);width:100%;z-index:3;display:flex;justify-content:space-evenly;align-items:center}.meter-container .bar-container .bars .tick-bar .tick{width:100%;border-right-width:var(--tct-meter-tick-width, 1px);border-right-color:var(--tct-meter-tick-color, var(--t-primary-l5, #B4A0D3));border-right-style:solid;height:var(--comp-meter-tick-height)}.meter-container .bar-container .bars .tick-bar .tick.tick-right{border-right-color:var(--tct-meter-tick-right-color, var(--t-a11y-gray-color-AA, #949494))}.meter-container .bar-container .bars .tick-bar .tick:last-child{border-color:transparent}.meter-container .bar-container .dot-container{position:absolute;line-height:0;left:0;top:calc(50% - var(--comp-meter-dot-height) / 2 - var(--comp-meter-dot-border-width));transform:translateX(-50%);transition:var(--comp-meter-dot-transition, none);z-index:4}.meter-container .bar-container .dot-container .dot{visibility:var(--comp-meter-dot-visibility, hidden);width:calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));height:calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));background-color:var(--comp-meter-dot-background-color);border-style:var(--comp-meter-dot-border-style);border-width:var(--comp-meter-dot-border-width);border-color:var(--comp-meter-dot-border-color);border-radius:var(--comp-meter-dot-border-radius);box-shadow:var(--tct-meter-dot-box-shadow, var(--app-shadow-1))}.meter-container .bar-container .dot-container.suggested q2-tooltip .dot{visibility:hidden}.meter-container .legends{display:flex;flex-direction:row;justify-content:space-between;color:var(--tct-meter-legend-label-color, var(--t-textA, #767676));font-weight:var(--tct-meter-legend-font-weight, 400);margin:var(--tct-meter-legend-margin, 5px 0)}.meter-container .legends .left{display:flex;flex-direction:row}.meter-container .legends .left .completed,.meter-container .legends .left .suggested{display:flex;flex-direction:row;align-items:center}.meter-container .legends .left .completed .dot,.meter-container .legends .left .suggested .dot{margin-right:var(--tct-meter-dot-gap, 5px);border-radius:var(--tct-meter-legend-dot-radius, var(--app-border-radius-3, 5px));width:var(--tct-meter-legend-bar-width, 7px);height:var(--tct-meter-legend-bar-height, 7px)}.meter-container .legends .left .completed .legend-label,.meter-container .legends .left .suggested .legend-label{font-size:inherit}.meter-container .legends .left .completed{margin-right:var(--tct-meter-legend-gap, 20px)}.meter-container .legends .left .completed .dot{background-color:var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E))}.meter-container .legends .left .suggested .dot{background-color:var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3))}.meter-container .legends .right .max{font-size:inherit;text-align:right}';
+
+const a = class {
+  constructor(e) {
+    t(this, e);
+    // #region Own Properties
+        this.scheduledAfterRender = [];
+    // #endregion
+    // #region Public Property API
+    /**
+         * Shows loading animation for bars, default is true.
+         */    this.animated = true;
+    /**
+         * Shows a circle shaped dot indicator on completed bar, default is true.
+         */    this.dotted = true;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    if (this.animated) {
+      const t = this.completedValue;
+      const e = this.suggestedValue;
+      this.completedValue = "0";
+      this.suggestedValue = "0";
+      this.scheduledAfterRender.push((() => {
+        this.completedValue = t;
+        this.suggestedValue = e;
+      }));
+    }
+  }
+  componentDidRender() {
+    var t;
+    (t = this.scheduledAfterRender) === null || t === void 0 ? void 0 : t.forEach((t => t()));
+    this.scheduledAfterRender = [];
+  }
+  // #endregion
+  // #region Local Methods
+  get ariaLabel() {
+    const t = [];
+    t.push(`${i(this.label || "")} meter showing,`);
+    t.push(`${this.completedValue || "zero"} ${i(this.completedLabel || "")},`);
+    t.push(`${this.suggestedValue || ""} ${i(this.suggestedLabel || "")},`);
+    t.push(`out of ${this.maxValue || ""} ${i(this.maxLabel || "")}`);
+    return t.join(" ");
+  }
+  convertToPercentage(t, e, r) {
+    let i = Number((r || "100").trim().replace(/[$,]/g, ""));
+    let o = Math.round(100 * Number((t || "0").trim().replace(/[$,]/g, "")) / i);
+    let a = Math.round(100 * Number((e || "0").trim().replace(/[$,]/g, "")) / i);
+    i = isNaN(i) ? 100 : i;
+    o = isNaN(o) ? 0 : o;
+    a = isNaN(a) ? 0 : a;
+    return [ Math.min(100, o), Math.min(100, a) ];
+  }
+  // #endregion
+  // #region Render Methods
+  renderBar(t, r) {
+    r = Math.max(t, r);
+    const o = {};
+    const a = {};
+    if (t === 0) {
+      o.transform = `translateX(0%)`;
+      o.left = "calc(0% - var(--comp-meter-dot-border-width))";
+    } else if (t === 100) {
+      o.transform = `translateX(-100%)`;
+      o.left = "100%";
+    } else if (0 < t && t < 100) {
+      o.left = `${Math.max(1, Math.min(99, t))}%`;
+    }
+    if (r === 0) {
+      a.transform = `translateX(0%)`;
+      a.left = "0%";
+    } else if (r === 100) {
+      a.transform = `translateX(-100%)`;
+      a.left = "100%";
+    } else if (0 < r && r < 100) {
+      a.left = `${Math.max(1, Math.min(99, r))}%`;
+    }
+    return e("div", {
+      class: "bar-container"
+    }, e("div", {
+      class: "bars"
+    }, e("div", {
+      class: "completed-bar",
+      style: {
+        width: `${t}%`
+      }
+    }), this.suggestedValue && this.suggestedLabel && e("div", {
+      class: "suggested-bar",
+      style: {
+        width: `${r}%`
+      }
+    }), this.segments && !isNaN(this.segments) && this.segments > 1 ? e("div", {
+      class: "tick-bar"
+    }, Array.from(new Array(this.segments)).map(((r, i) => {
+      const o = [ "tick" ];
+      // color changes on ticks for greater than completed value
+            if (Math.round(100 * (i + 1) / this.segments) > t) o.push("tick-right");
+      return e("div", {
+        class: o.join(" ")
+      });
+    }))) : ""), e("div", {
+      class: "dot-container completed",
+      style: o
+    }, e("q2-tooltip", {
+      label: this.tooltipCompleted ? i(this.tooltipCompleted) : this.completedValue,
+      position: "n",
+      immediate: true
+    }, e("div", {
+      class: "dot"
+    }))), r > t ? e("div", {
+      class: "dot-container suggested",
+      style: a
+    }, e("q2-tooltip", {
+      label: this.tooltipSuggested ? i(this.tooltipSuggested) : this.suggestedValue,
+      position: "n",
+      immediate: true
+    }, e("div", {
+      class: "dot"
+    }))) : "");
+  }
+  render() {
+    const [t, r] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
+    return e("div", {
+      key: "b8981bc8729facaaef2e964661ab23cf387b9f44",
+      class: "meter-container",
+      "aria-label": this.ariaLabel,
+      role: "group"
+    }, this.label && e("div", {
+      key: "9afeac3d6dc96eab3fad6b18769a876cf3c54441",
+      class: "label",
+      "aria-label": i(this.label)
+    }, i(this.label)), this.description && e("div", {
+      key: "33144dd03846ae006cf6f6259ba920929834d1ec",
+      class: "description",
+      "aria-label": i(this.description)
+    }, i(this.description)), this.renderBar(t, r), e("div", {
+      key: "c19752e3c533c9a73044040876759b17ce3cccf9",
+      class: "legends"
+    }, e("div", {
+      key: "df11def26d05cb38f649440a2cd0f71a531738aa",
+      class: "left"
+    }, this.completedValue || this.completedLabel ? e("div", {
+      class: "completed"
+    }, e("div", {
+      class: "dot"
+    }), e("div", {
+      class: "legend-label"
+    }, this.completedValue, " ", i(this.completedLabel))) : "", this.suggestedValue || this.suggestedLabel ? e("div", {
+      class: "suggested"
+    }, e("div", {
+      class: "dot"
+    }), e("div", {
+      class: "legend-label"
+    }, this.suggestedValue, " ", i(this.suggestedLabel))) : ""), e("div", {
+      key: "c61bcf49cc7611e6a62265d15fe9eeb02c7ca17f",
+      class: "right"
+    }, e("div", {
+      key: "871a5ba7cef98a7671b6c16d56d6e382d500d009",
+      class: "max"
+    }, this.maxValue, " ", i(this.maxLabel)))));
+  }
+  get hostElement() {
+    return r(this);
+  }
+};
+
+a.style = o;
+
+export { a as q2_meter };
+//# sourceMappingURL=q2-meter.entry.esm.js.map
+//# sourceMappingURL=q2-meter.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["q2MeterCss","Q2Meter","constructor","hostRef","this","scheduledAfterRender","animated","dotted","componentWillLoad","_completedValue","completedValue","_suggestedValue","suggestedValue","push","componentDidRender","_a","forEach","fn","ariaLabel","label","loc","completedLabel","suggestedLabel","maxValue","maxLabel","join","convertToPercentage","max","Number","trim","replace","completed","Math","round","suggested","isNaN","min","renderBar","completedDotStyles","suggestedDotStyles","transform","left","h","class","style","width","segments","Array","from","map","_","i","classes","tooltipCompleted","position","immediate","tooltipSuggested","render","key","role","description"],"sources":["src/components/q2-meter/q2-meter.scss?tag=q2-meter&encapsulation=shadow","src/components/q2-meter/q2-meter.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    width: 100%;\n}\n\n.meter-container {\n    --comp-meter-bar-height: #{var-list(--tct-meter-bar-height, 10px)};\n    --comp-meter-bar-border-radius: #{var-list(--tct-meter-bar-border-radius, calc(var(--comp-meter-bar-height) / 2))};\n    --comp-meter-dot-height: #{var-list(--tct-meter-dot-size, --tct-meter-bar-height, 10px)};\n    --comp-meter-dot-border-style: #{var-list(--tct-meter-dot-border-style, solid)};\n    --comp-meter-dot-border-width: #{var-list(--tct-meter-dot-border-width, calc(0.2 * var(--comp-meter-bar-height)))};\n    --comp-meter-dot-border-color: #{var-list(--tct-meter-dot-border-color, #FFFFFF)};\n    --comp-meter-dot-border-radius: #{var-list(--tct-meter-dot-border-radius, 50%)};\n    --comp-meter-dot-background-color: #{var-list(--tct-meter-dot-background-color, --t-primary, #6A4A9E)};\n    --comp-meter-tick-height: #{var-list(--tct-meter-ticket-height, calc(0.4 * var(--comp-meter-bar-height)))};\n    --comp-meter-bar-shadow: #{var-list(--tct-meter-bar-shadow)};\n    --comp-meter-bar-border: #{var-list(--tct-meter-bar-border)};\n\n    :host([animated]:not([animated='false'])) & {\n        --comp-meter-bar-transition: #{var-list(--tct-meter-bar-transition, #{width 0.2s ease-in-out})};\n        --comp-meter-dot-transition: #{var-list(--tct-meter-dot-transition, #{left 0.2s ease-in-out})};\n    }\n\n    :host([dotted]:not([dotted='false'])) & {\n        --comp-meter-dot-visibility: visible;\n    }\n\n    :host([segments]:not([segments='']):not([segments='0']):not([segments='1'])) & {\n        --comp-meter-tick-visibility: visible;\n    }\n\n    .label {\n        font-size: var-list(--tct-meter-label-font-size, 14px);\n        font-weight: var-list(--tct-meter-label-font-weight, 600);\n        color: var-list(--tct-meter-label-color, --t-text, #4D4D4D);\n        margin: var-list(--tct-meter-label-margin, #{5px 0});\n    }\n    .description {\n        font-size: var-list(--tct-meter-description-font-size, 14px);\n        font-weight: var-list(--tct-meter-description-font-weight, 400);\n        color: var-list(--tct-meter-description-color, #000000);\n        line-height: var-list(--tct-meter-description-line-height, 21px);\n        margin: var-list(--tct-meter-description-margin, #{5px 0});\n    }\n    .bar-container {\n        position: relative;\n        .bars {\n            position: relative;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: var(--comp-meter-bar-height);\n            background-color: var-list(--tct-meter-bar-background-color, --t-primary-completed2, #E0DEEF);\n            margin: var-list(--tct-meter-bar-margin, #{5px 0});\n            border: var-list(--comp-meter-bar-border);\n            border-radius: var(--comp-meter-bar-border-radius);\n            box-shadow: var-list(--comp-meter-bar-shadow);\n            .completed-bar,\n            .suggested-bar,\n            .tick-bar {\n                height: 100%;\n                position: absolute;\n                top: 0;\n                left: 0;\n                border-radius: var(--comp-meter-bar-border-radius);\n                transition: var-list(--comp-meter-bar-transition, none);\n            }\n            .completed-bar {\n                background-color: var-list(--tct-meter-completed-bar-background-color, --t-primary, #6A4A9E);\n                min-width: calc(var(--comp-meter-bar-height));\n                width: 0%;\n                z-index: 2;\n            }\n            .suggested-bar {\n                background-color: var-list(--tct-meter-suggested-bar-background-color, --t-primary-l5, #B4A0D3);\n                min-width: calc(var(--comp-meter-bar-height));\n                width: 0%;\n                z-index: 1;\n            }\n            .tick-bar {\n                visibility: var-list(--comp-meter-tick-visibility, hidden);\n                width: 100%;\n                z-index: 3;\n                display: flex;\n                justify-content: space-evenly;\n                align-items: center;\n                .tick {\n                    width: 100%;\n                    border-right-width: var-list(--tct-meter-tick-width, 1px);\n                    border-right-color: var-list(--tct-meter-tick-color, --t-primary-l5, #B4A0D3);\n                    border-right-style: solid;\n                    height: var(--comp-meter-tick-height);\n                    &.tick-right {\n                        border-right-color: var-list(--tct-meter-tick-right-color, --t-a11y-gray-color-AA, #949494);\n                    }\n                    &:last-child {\n                        border-color: transparent;\n                    }\n\n                }\n            }\n        }\n        .dot-container {\n            position: absolute;\n            line-height: 0;\n            left: 0;\n            top: calc(50% - var(--comp-meter-dot-height) / 2 - var(--comp-meter-dot-border-width));\n            transform: translateX(-50%);\n            transition: var(--comp-meter-dot-transition, none);\n            z-index: 4;\n            .dot {\n                visibility: var-list(--comp-meter-dot-visibility, hidden);\n                width: calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));\n                height: calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));\n                background-color: var(--comp-meter-dot-background-color);\n                border-style: var(--comp-meter-dot-border-style);\n                border-width: var(--comp-meter-dot-border-width);\n                border-color: var(--comp-meter-dot-border-color);\n                border-radius: var(--comp-meter-dot-border-radius);\n                box-shadow: var-list(--tct-meter-dot-box-shadow, --app-shadow-1);\n            }\n            &.suggested {\n                q2-tooltip {\n                    .dot {\n                        visibility: hidden;\n                    }\n                }\n            }\n        }\n    }\n    .legends {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        color: var-list(--tct-meter-legend-label-color, --t-textA, #767676);\n        font-weight: var-list(--tct-meter-legend-font-weight, 400);\n        margin: var-list(--tct-meter-legend-margin, #{5px 0});\n        .left {\n            display: flex;\n            flex-direction: row;\n            .completed,\n            .suggested {\n                display: flex;\n                flex-direction: row;\n                align-items: center;\n                .dot {\n                    margin-right: var-list(--tct-meter-dot-gap, 5px);\n                    border-radius: var-list(--tct-meter-legend-dot-radius, --app-border-radius-3, 5px);\n                    width: var-list(--tct-meter-legend-bar-width, 7px);\n                    height: var-list(--tct-meter-legend-bar-height, 7px);\n                }\n                .legend-label {\n                    font-size: inherit;\n                }\n            }\n            .completed {\n                margin-right: var-list(--tct-meter-legend-gap, 20px);\n                .dot {\n                    background-color: var-list(--tct-meter-completed-bar-background-color, --t-primary, #6A4A9E);\n                }\n            }\n            .suggested {\n                .dot {\n                    background-color: var-list(--tct-meter-suggested-bar-background-color, --t-primary-l5, #B4A0D3);\n                }\n            }\n        }\n        .right {\n            .max {\n                font-size: inherit;\n                text-align: right;\n            }\n        }\n    }\n}\n\n","import { loc } from '@/utils';\nimport { Component, Prop, h, ComponentInterface, Element } from '@stencil/core';\n@Component({ tag: 'q2-meter', shadow: true, styleUrl: 'q2-meter.scss' })\nexport class Q2Meter implements ComponentInterface {\n    // #region Own Properties\n\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Shows loading animation for bars, default is true.\n     */\n    @Prop({ reflect: true })\n    animated: boolean = true;\n\n    /**\n     * Defines the label for the completed bar, which appears at the bottom in the legend section.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    completedLabel: string;\n\n    /**\n     * Defines the value for the completed bar.\n     */\n    @Prop({ reflect: true })\n    completedValue: string;\n\n    /**\n     * Defines the description for the meter, which appears at the top just below the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Shows a circle shaped dot indicator on completed bar, default is true.\n     */\n    @Prop({ reflect: true })\n    dotted: boolean = true;\n\n    /**\n     * Defines the label for the meter, which appears at the top.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Defines the label for the base bar, which appears at the bottom in the legend.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    maxLabel: string;\n\n    /**\n     * Defines the value for the base bar.\n     */\n    @Prop({ reflect: true })\n    maxValue: string;\n\n    /**\n     * Shows thin tick bars based on the number of segments provided.\n     */\n    @Prop({ reflect: true })\n    segments: number;\n\n    /**\n     * Defines the label for the suggested bar, which appears at the bottom in the legend.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    suggestedLabel: string;\n\n    /**\n     * Defines the value for the suggested bar.\n     */\n    @Prop({ reflect: true })\n    suggestedValue: string;\n\n    /**\n     * Defines custom text for the completed bar tooltip.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    tooltipCompleted: string;\n\n    /**\n     * Defines custom text for the suggested bar tooltip.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    tooltipSuggested: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void {\n        if (this.animated) {\n            const _completedValue = this.completedValue;\n            const _suggestedValue = this.suggestedValue;\n            this.completedValue = '0';\n            this.suggestedValue = '0';\n            this.scheduledAfterRender.push(() => {\n                this.completedValue = _completedValue;\n                this.suggestedValue = _suggestedValue;\n            });\n        }\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get ariaLabel() {\n        const label = [];\n        label.push(`${loc(this.label || '')} meter showing,`);\n        label.push(`${this.completedValue || 'zero'} ${loc(this.completedLabel || '')},`);\n        label.push(`${this.suggestedValue || ''} ${loc(this.suggestedLabel || '')},`);\n        label.push(`out of ${this.maxValue || ''} ${loc(this.maxLabel || '')}`);\n        return label.join(' ');\n    }\n\n    convertToPercentage(completedValue: string, suggestedValue: string, maxValue: string) {\n        let max = Number((maxValue || '100').trim().replace(/[$,]/g, ''));\n        let completed = Math.round((100 * Number((completedValue || '0').trim().replace(/[$,]/g, ''))) / max);\n        let suggested = Math.round((100 * Number((suggestedValue || '0').trim().replace(/[$,]/g, ''))) / max);\n        max = isNaN(max) ? 100 : max;\n        completed = isNaN(completed) ? 0 : completed;\n        suggested = isNaN(suggested) ? 0 : suggested;\n        return [Math.min(100, completed), Math.min(100, suggested)];\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderBar(completed: number, suggested: number) {\n        suggested = Math.max(completed, suggested);\n        const completedDotStyles: { left?: string; transform?: string } = {};\n        const suggestedDotStyles: { left?: string; transform?: string } = {};\n\n        if (completed === 0) {\n            completedDotStyles.transform = `translateX(0%)`;\n            completedDotStyles.left = 'calc(0% - var(--comp-meter-dot-border-width))';\n        } else if (completed === 100) {\n            completedDotStyles.transform = `translateX(-100%)`;\n            completedDotStyles.left = '100%';\n        } else if (0 < completed && completed < 100) {\n            completedDotStyles.left = `${Math.max(1, Math.min(99, completed))}%`;\n        }\n\n        if (suggested === 0) {\n            suggestedDotStyles.transform = `translateX(0%)`;\n            suggestedDotStyles.left = '0%';\n        } else if (suggested === 100) {\n            suggestedDotStyles.transform = `translateX(-100%)`;\n            suggestedDotStyles.left = '100%';\n        } else if (0 < suggested && suggested < 100) {\n            suggestedDotStyles.left = `${Math.max(1, Math.min(99, suggested))}%`;\n        }\n\n        return (\n            <div class=\"bar-container\">\n                <div class=\"bars\">\n                    <div\n                        class=\"completed-bar\"\n                        style={{ width: `${completed}%` }}\n                    ></div>\n                    {this.suggestedValue && this.suggestedLabel && (\n                        <div\n                            class=\"suggested-bar\"\n                            style={{ width: `${suggested}%` }}\n                        ></div>\n                    )}\n                    {this.segments && !isNaN(this.segments) && this.segments > 1 ? (\n                        <div class=\"tick-bar\">\n                            {Array.from(new Array(this.segments)).map((_, i) => {\n                                const classes = ['tick'];\n                                // color changes on ticks for greater than completed value\n                                if (Math.round((100 * (i + 1)) / this.segments) > completed) classes.push('tick-right');\n                                return <div class={classes.join(' ')}></div>;\n                            })}\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                </div>\n                <div\n                    class=\"dot-container completed\"\n                    style={completedDotStyles}\n                >\n                    <q2-tooltip\n                        label={this.tooltipCompleted ? loc(this.tooltipCompleted) : this.completedValue}\n                        position=\"n\"\n                        immediate\n                    >\n                        <div class=\"dot\"></div>\n                    </q2-tooltip>\n                </div>\n                {suggested > completed ? (\n                    <div\n                        class=\"dot-container suggested\"\n                        style={suggestedDotStyles}\n                    >\n                        <q2-tooltip\n                            label={this.tooltipSuggested ? loc(this.tooltipSuggested) : this.suggestedValue}\n                            position=\"n\"\n                            immediate\n                        >\n                            <div class=\"dot\"></div>\n                        </q2-tooltip>\n                    </div>\n                ) : (\n                    ''\n                )}\n            </div>\n        );\n    }\n\n    render() {\n        const [completed, suggested] = this.convertToPercentage(\n            this.completedValue,\n            this.suggestedValue,\n            this.maxValue\n        );\n        return (\n            <div\n                class=\"meter-container\"\n                aria-label={this.ariaLabel}\n                role=\"group\"\n            >\n                {this.label && (\n                    <div\n                        class=\"label\"\n                        aria-label={loc(this.label)}\n                    >\n                        {loc(this.label)}\n                    </div>\n                )}\n                {this.description && (\n                    <div\n                        class=\"description\"\n                        aria-label={loc(this.description)}\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n                {this.renderBar(completed, suggested)}\n                <div class=\"legends\">\n                    <div class=\"left\">\n                        {this.completedValue || this.completedLabel ? (\n                            <div class=\"completed\">\n                                <div class=\"dot\"></div>\n                                <div class=\"legend-label\">\n                                    {this.completedValue} {loc(this.completedLabel)}\n                                </div>\n                            </div>\n                        ) : (\n                            ''\n                        )}\n                        {this.suggestedValue || this.suggestedLabel ? (\n                            <div class=\"suggested\">\n                                <div class=\"dot\"></div>\n                                <div class=\"legend-label\">\n                                    {this.suggestedValue} {loc(this.suggestedLabel)}\n                                </div>\n                            </div>\n                        ) : (\n                            ''\n                        )}\n                    </div>\n                    <div class=\"right\">\n                        <div class=\"max\">\n                            {this.maxValue} {loc(this.maxLabel)}\n                        </div>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,12 +1,12 @@
 import { r as t, c as i, h as o, g as a } from "./index-CGkHOjh1.js";
 
-import { f as e, w as r, h as s } from "./index-xCuy-dFb.js";
+import { f as e, w as r, h as s } from "./index-LNnzUeDP.js";
 
-import { s as d } from "./sanitize-html-string-DL0kgllh.js";
+import { s as c } from "./sanitize-html-string-DOVERJq5.js";
 
-const n = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .message{font-size:1rem}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:flex;justify-content:space-between}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0;padding-top:0.5rem}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}';
+const d = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes showBackdrop{from{opacity:0}}@keyframes hideBackdrop{to{opacity:0}}dialog{--comp-border-radius-default:var(--app-scale-3x, 15px);--comp-border-radius:var(--tct-modal-border-radius, var(--comp-border-radius-default));--comp-desktop-border-radius:var(--tct-modal-border-radius, var(--app-scale-3x, 15px));--comp-close-button-size:var(--tct-modal-close-button-size, var(--t-a11y-min-size, 44px));--comp-header-height:var(--tct-modal-header-height, var(--t-a11y-min-size, 44px));--comp-dialog-background:var(--tct-modal-background, var(--t-base, #ffffff));--comp-dialog-color:var(--tct-modal-color, var(--t-text, #4d4d4d));--comp-dialog-padding:var(--tct-modal-padding, var(--app-scale-3x, 15px));--comp-content-gradient-height:var(--tct-modal-content-gradient-height, var(--app-scale-2x, 10px));--comp-dialog-gap:var(--tct-modal-gap, var(--app-scale-2x, 10px));--comp-dialog-max-width:var(--tct-modal-max-width, 600px);--comp-dialog-max-height:var(--tct-modal-max-height, 100vh);--comp-dialog-min-height:var(--tct-modal-min-height, 40vh);--comp-dialog-box-shadow:var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));position:fixed;top:100%;bottom:unset;color:var(--comp-dialog-color);background:var(--comp-dialog-background);transition:transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));width:100%;max-width:var(--comp-dialog-max-width);border:0;border-radius:var(--comp-border-radius);box-shadow:var(--comp-dialog-box-shadow);padding:0;height:auto;overflow:hidden}dialog::backdrop{opacity:0;background:var(--tct-modal-backdrop-background, var(--t-top-a2, rgba(13, 13, 13, 0.6)))}dialog[open]{border-radius:var(--comp-desktop-border-radius);top:0px;bottom:0px;height:fit-content;transform:translateY(10%);opacity:1}dialog[open].is-opening,dialog[open].is-open{opacity:1;transform:translateY(0)}dialog[open].is-opening::backdrop,dialog[open].is-open::backdrop{opacity:1;animation:showBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}dialog[open].is-closing{transform:translateY(10%)}dialog[open].is-closing::backdrop{animation:hideBackdrop var(--tct-modal-tween, var(--app-tween-2, 0.4s ease))}.content{overflow-y:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.content::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.content::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.content::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.content .icon{height:var(--tct-modal-icon-size, var(--app-scale-9x, 45px));margin:var(--tct-modal-icon-margin, var(--app-scale-2x, 10px));display:flex;justify-content:center}.content .icon q2-icon{width:var(--tct-modal-icon-size, var(--app-scale-9x, 45px))}.content .image{display:flex;justify-content:center}.content .image img{width:100%;border-radius:var(--tct-modal-image-border-radius, var(--app-border-radius-2, 8px))}.content .message{font-size:1rem}.content.more-gradient{-webkit-mask-image:linear-gradient(to bottom, red 85%, transparent 100%);mask-image:linear-gradient(to bottom, red 85%, transparent 100%)}.interior{display:grid;min-height:var(--comp-dialog-min-height);grid-template-rows:auto 1fr auto;gap:var(--comp-dialog-gap);max-height:calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));padding:var(--comp-dialog-padding)}.interior.is-list header,.interior.is-list footer{position:relative}.interior.is-list header:before,.interior.is-list footer:before{content:"";display:block;position:absolute;left:0;height:var(--comp-content-gradient-height);width:100%;z-index:1}header{display:flex;justify-content:space-between}header .title{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-align:left;font-weight:var(--tct-modal-title-font-weight, 400);margin:0;padding-top:0.5rem}header .btn-close{grid-area:close;width:var(--comp-close-button-size);height:var(--comp-close-button-size)}';
 
-const c = class {
+const n = class {
   constructor(o) {
     t(this, o);
     this.tctClick = i(this, "tctClick", 7);
@@ -151,62 +151,62 @@ const c = class {
     const t = `interior`;
     const i = `${this.renderStatus || ""}`;
     return o("dialog", {
-      key: "2b12b5a9c4a09f0e80b9517d81e17c561ceca200",
+      key: "09e909ca6de730e2d34ec1796fcdb2bdaf077166",
       ref: t => this.dialogElement = t,
       class: i,
       onClick: this.onClick
     }, o("div", {
-      key: "efbce287e1c7e7a07fc0779f21d10c4f440aaa49",
+      key: "1410c1e9c86101eb164a6eaca3332fe2fc915bd2",
       class: t
     }, this.title && o("header", {
-      key: "71e372aed7673b8d8911bd862db4ede5757a2184"
+      key: "be170cc01cfaa65937479d0f062fab907eefd585"
     }, this.title && o("h2", {
-      key: "2688b54e110b49a9b8f64e146fea9bd9a1c7c706",
+      key: "c3a4ebdf0568fac516703ef48d3e09a3aba48a52",
       class: "title"
     }, this.title), !!this.closable && o("q2-btn", {
-      key: "9d78801c76f4cad72b8f0ab962aeea127d130492",
+      key: "0e08fcfe0404d581e023ee51052bd0bc95c65a46",
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.modal.close",
       "hide-label": true
     }, o("q2-icon", {
-      key: "de8d48d2676e71c1280a41f3c34d49027c09773c",
+      key: "6506b58253688e24bd53cd7d9f96022652ace643",
       type: "close"
     }))), o("div", {
-      key: "a5c23f6b561652bf9a519bd91af2e1eb65713b31",
+      key: "e6509c517e7587bf4d5ce17900d6c3d1bf236544",
       class: "content",
       ref: t => this.contentElement = t
     }, this.icon && o("div", {
-      key: "3d924a05cfcba562105d1eed69af5383ff48e799",
+      key: "1bd63c250c3198063ce71c7ccc39b527bae734d6",
       class: "icon"
     }, o("q2-icon", {
-      key: "972f69406d187769cd67097d18f85adcaf7769c1",
+      key: "1c51ba9f9e7ec43080345e27e5a14d2ce0e259d9",
       type: this.icon,
       style: this.iconStyle()
     })), this.imageSrc && o("div", {
-      key: "43104feec69bb2f11b47b2d7c77fe1e60af467fb",
+      key: "f2f424901875185ae40a1775a63179357f31882c",
       class: "image"
     }, o("img", {
-      key: "e583fd2be24c3d3ab42caaf46ca4dc7bc0df6030",
+      key: "9231e2ea874adc43095662f6c6664905737f3c9d",
       src: this.imageSrc
     })), s(this.hostElement, "content") && o("slot", {
-      key: "f011e7d6c4bc4135dbe192e526c2cb4628aadbff",
+      key: "4b3163332aca9aa4c9804405174e16c3854ddd61",
       name: "content"
     }), this.description && o("p", {
-      key: "b8794d9b1d8eb0d811a7aa4f7ed3dcafbd245cef",
+      key: "997cf420e09ffd589dde31e5c47c499cbc3b110c",
       class: "description"
     }, this.description), this.customMarkup && o("p", {
-      key: "e5834ef811c4cc951ef7eba1d37758301f2bdb6b",
+      key: "bf9fac18c98e3a4f2ad27e7d04feb4b54e2fa958",
       class: "customMarkup",
-      innerHTML: d(this.customMarkup)
+      innerHTML: c(this.customMarkup)
     })), o("footer", {
-      key: "9172365d3d00c61ab01378a07a1efe843487f6d8"
+      key: "48a2885c34727d6eda0636e27ee746ba90d1087d"
     }, o("q2-action-group", {
-      key: "9f3ad85ccefa9f8dd3d5637043f17a941b370612",
+      key: "a48b5075f4372219f1179fae43272df8ed0aa96a",
       "full-width": true
     }, o("slot", {
-      key: "8a4618e71eb175a19ff34c8d870a72271b6e1caf",
+      key: "ccfa5cbef0a4078dd3c0beb13bf78e8b1fcd74e3",
       name: "action"
     })))));
   }
@@ -215,8 +215,8 @@ const c = class {
   }
 };
 
-c.style = n;
+n.style = d;
 
-export { c as q2_modal };
+export { n as q2_modal };
 //# sourceMappingURL=q2-modal.entry.esm.js.map
 //# sourceMappingURL=q2-modal.entry.js.map

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

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as n, g as o } from "./index-CGkHOjh1.js";
 
-import { l as a, o as i } from "./index-xCuy-dFb.js";
+import { l as a, o as i } from "./index-LNnzUeDP.js";
 
 const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 

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

@@ -1,6 +1,6 @@
 import { r as t, h as e, g as r } from "./index-CGkHOjh1.js";
 
-import { c as o, l as a } from "./index-xCuy-dFb.js";
+import { c as o, l as a } from "./index-LNnzUeDP.js";
 
 const i = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 
@@ -57,20 +57,20 @@ const s = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "f054127b0e534647d3cac4efb62c03477db3975f",
+      key: "fa5f79f649208bcc9402ea9c1f38b8d1f560bb8c",
       class: "q2-optgroup-container",
       hidden: this.hidden,
       "aria-labelledby": this.headerId,
       role: "group"
     }, e("div", {
-      key: "251f2586708e5d867a623ea6dcf29c0c57169402",
+      key: "b8bd998f0ef642933dfa306f1b5d7fa4720aa3e9",
       class: "q2-optgroup-header",
       id: this.headerId
     }, this.label && a(this.label) || ""), e("div", {
-      key: "0127f0445cc0c894875b44529a7d87b31561c859",
+      key: "576288198e4ab810fbb155771250d549e897113d",
       class: "q2-optgroup-options"
     }, e("slot", {
-      key: "3f3f9af79017d95cce0f60136ed651654b6bf7b3"
+      key: "aff51cc1110ea0349a6640233751a8bbe75c6c2f"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-option-list_2.entry.js

@@ -1,14 +1,14 @@
 import { r as t, c as e, h as i, H as o, g as s } from "./index-CGkHOjh1.js";
 
-import { l as n, n as r, o as a, a as c, w as h, t as l, u as p, v as d, j as u } from "./index-xCuy-dFb.js";
+import { l as n, n as r, o as a, a as c, w as h, x as l, t as p, y as d, j as u } from "./index-LNnzUeDP.js";
 
 function sanitizeRegexString(t) {
   return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-const b = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
+const f = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
 
-const f = class {
+const b = class {
   constructor(i) {
     t(this, i);
     this.change = e(this, "change", 7);
@@ -586,7 +586,7 @@ const f = class {
   }
 };
 
-f.style = b;
+b.style = f;
 
 const v = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}:popover-open,.show{position:absolute;margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
 
@@ -648,9 +648,9 @@ const w = class {
         right: 0
       };
       const u = p;
-      const b = ((i = window === null || window === void 0 ? void 0 : window.visualViewport) === null || i === void 0 ? void 0 : i.width) - d;
+      const f = ((i = window === null || window === void 0 ? void 0 : window.visualViewport) === null || i === void 0 ? void 0 : i.width) - d;
       if (a === "right") {
-        s.style.setProperty("--comp-pop-right", `${b - window.scrollX}px`);
+        s.style.setProperty("--comp-pop-right", `${f - window.scrollX}px`);
         s.style.setProperty("--comp-pop-left", "unset");
       } else {
         s.style.setProperty("--comp-pop-left", `${u + window.scrollX}px`);
@@ -813,25 +813,25 @@ const w = class {
       const h = t + l - o;
       // visual space around the controlElement
             const p = a;
-      const b = e - s - h;
+      const f = e - s - h;
       // calculate space above and below controlElement
-            const f = n < b;
+            const b = n < f;
       d = p - r;
-      u = f ? n - r : b - r;
+      u = b ? n - r : f - r;
     } else {
       p = window.innerHeight;
       d = c - r;
       u = p - l - r;
     }
-    const b = d > u ? "up" : "down";
+    const f = d > u ? "up" : "down";
     // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
-        const f = !o.style.getPropertyValue("--comp-pop-max-height") || this.orientationChanged;
+        const b = !o.style.getPropertyValue("--comp-pop-max-height") || this.orientationChanged;
     // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
         this.orientationChanged = false;
-    const v = this.currentDirection || n || b;
+    const v = this.currentDirection || n || f;
     switch (v) {
      case "up":
-      if (f) {
+      if (b) {
         const t = this.validatedMaxHeight || d;
         const e = Math.min(d, t);
         o.style.setProperty("--comp-pop-max-height", `${e}px`);
@@ -840,7 +840,7 @@ const w = class {
       break;
 
      case "down":
-      if (f) {
+      if (b) {
         const t = this.validatedMaxHeight || u;
         const e = Math.min(u, t);
         o.style.setProperty("--comp-pop-max-height", `${e}px`);
@@ -908,6 +908,6 @@ const w = class {
 
 w.style = v;
 
-export { f as q2_option_list, w as q2_popover };
+export { b as q2_option_list, w as q2_popover };
 //# sourceMappingURL=q2-option-list.q2-popover.entry.esm.js.map
 //# sourceMappingURL=q2-option-list_2.entry.js.map

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

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, H as o, g as a } from "./index-CGkHOjh1.js";
 
-import { q as s, l as r } from "./index-xCuy-dFb.js";
+import { q as s, l as r } from "./index-LNnzUeDP.js";
 
 const n = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host(:not([separator]):not([separator=false])){--comp-padding:0 var(--app-scale-2x, 10px);--comp-selected-icon-size:var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));padding:var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));min-height:44px;align-items:center;cursor:pointer;grid-template-columns:var(--comp-selected-icon-size) 1fr;align-items:center;grid-template-areas:"icon content";gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host(:focus),:host(:not([separator]):not([separator=false]):hover),:host([active]){position:relative;z-index:1}:host([multiline]){--comp-padding:var(--app-scale-2, 10px) var(--app-scale-2, 10px);--comp-selected-icon-size:var(--tct-option-selected-multiline-icon-size, var(--t-option-selected-multiline-icon-size, var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px))))}:host([_no-select]){grid-template-columns:1fr;grid-template-areas:"content"}:host([aria-disabled]){cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));pointer-events:none}:host([aria-hidden]){display:none}:host(:not([hidden]):not([aria-hidden])){display:grid}:host(:not([aria-disabled]):not([separator]):not([separator=false]):hover),:host([active]),:host(:focus){background:var(--tct-option-active-background, var(--tct-option-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-option-active-color, inherit)}:host(:focus-visible){box-shadow:var(--tct-option-focus-box-shadow, var(--const-inset-double-focus-ring, inset var(--const-global-focus, 0 0 0 2px var(--const-focus-color, #0066CC)))) !important}q2-icon{grid-area:icon;--tct-icon-size:var(--comp-selected-icon-size)}.content{display:block;grid-area:content}:host(:not([multiline])) .content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-gray-11, #cccccc))}';