q2-tecton-elements 1.67.2 → 1.68.0

package/dist/components/q2-meter.js

@@ -116,7 +116,7 @@ const Q2Meter$1 = /*@__PURE__*/ proxyCustomElement(class Q2Meter extends HTMLEle
     }
     render() {
         const [completed, suggested] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
-        return (h("div", { key: '656e8a53bbaf26529db53e535efcad7a22b9ee01', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: '25d53f9a1d387d4b839507239454484d9678061f', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: 'd5786b4e65ab5b262b82f107bb310ca27b34c4ed', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: '015cc474c3113ff248982d64656218a79744e09e', class: "legends" }, h("div", { key: '1af88cd2386058a8c20f3a82d0e40ffafffc4c38', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: '22eb4ec7a86114f3f109e4adfb0acbcea9509de8', class: "right" }, h("div", { key: 'b9384865d0ef8c81569243b40ccf320efcd208ec', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
+        return (h("div", { key: '108bd1850c02f17867f51e2a29657e579df01c33', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'baae6e4a58b2fac21ef6099d99402e4cffb03d32', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: 'dcf9cdf337a50fa4cf145985fbab513114b38019', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: 'f6214a063456893f3c6f2f014a9ba687ad5b0a81', class: "legends" }, h("div", { key: '1c624e80a27edb22cf39c4ca6345e07c945e48e5', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: '63345961e4992b545d617ea5e1b423729fab94f5', class: "right" }, h("div", { key: '897ff512bf5037b17c51c70a5bf901cf516dbccc', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
     }
     get hostElement() { return this; }
     static get style() { return q2MeterCss; }

package/dist/components/q2-meter.js.map

@@ -1 +1 @@
-{"file":"q2-meter.js","mappings":"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","names":["Q2Meter","__stencil_proxyCustomElement"],"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                .dot {\n                    visibility: hidden;\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/**\n * @name Meter\n * @category Data Visualization\n * @summary Use for showing progress or a value within a known range.\n */\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     * Hide tooltips.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    hideTooltip: boolean;\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    // Adjust tooltip direction if the value less than 5% or greater than 95% to avoid exceeding to the parent\n    adjustTooltipDirection(percentage, tooltipText = '') {\n        let eastCutoff = 5;\n        let westCutoff = 95;\n        // longer text should have more margin for cutoff\n        if (tooltipText.length > 8) {\n            eastCutoff = 15;\n            westCutoff = 85;\n        }\n        if (percentage < eastCutoff) return 'ne';\n        else if (percentage > westCutoff) return 'nw';\n        else return 'n';\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        const tooltipCompleted = this.tooltipCompleted ? loc(this.tooltipCompleted) : this.completedValue;\n        const tooltipSuggested = this.tooltipSuggested ? loc(this.tooltipSuggested) : this.suggestedValue;\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                    {this.hideTooltip ? (\n                        <div class=\"dot\"></div>\n                    ) : (\n                        <q2-tooltip\n                            label={tooltipCompleted}\n                            position={this.adjustTooltipDirection(completed, tooltipCompleted)}\n                            immediate\n                        >\n                            <div class=\"dot\"></div>\n                        </q2-tooltip>\n                    )}\n                </div>\n                {suggested > completed ? (\n                    <div\n                        class=\"dot-container suggested\"\n                        style={suggestedDotStyles}\n                    >\n                        {this.hideTooltip ? (\n                            <div class=\"dot\"></div>\n                        ) : (\n                            <q2-tooltip\n                                label={tooltipSuggested}\n                                position={this.adjustTooltipDirection(suggested, tooltipSuggested)}\n                                immediate\n                            >\n                                <div class=\"dot\"></div>\n                            </q2-tooltip>\n                        )}\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"],"version":3}
+{"file":"q2-meter.js","mappings":"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","names":["Q2Meter","__stencil_proxyCustomElement"],"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@import './variables';\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                .dot {\n                    visibility: hidden;\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/**\n * @name Meter\n * @category Data Visualization\n * @summary Use for showing progress or a value within a known range.\n */\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     * Hide tooltips.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    hideTooltip: boolean;\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    // Adjust tooltip direction if the value less than 5% or greater than 95% to avoid exceeding to the parent\n    adjustTooltipDirection(percentage, tooltipText = '') {\n        let eastCutoff = 5;\n        let westCutoff = 95;\n        // longer text should have more margin for cutoff\n        if (tooltipText.length > 8) {\n            eastCutoff = 15;\n            westCutoff = 85;\n        }\n        if (percentage < eastCutoff) return 'ne';\n        else if (percentage > westCutoff) return 'nw';\n        else return 'n';\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        const tooltipCompleted = this.tooltipCompleted ? loc(this.tooltipCompleted) : this.completedValue;\n        const tooltipSuggested = this.tooltipSuggested ? loc(this.tooltipSuggested) : this.suggestedValue;\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                    {this.hideTooltip ? (\n                        <div class=\"dot\"></div>\n                    ) : (\n                        <q2-tooltip\n                            label={tooltipCompleted}\n                            position={this.adjustTooltipDirection(completed, tooltipCompleted)}\n                            immediate\n                        >\n                            <div class=\"dot\"></div>\n                        </q2-tooltip>\n                    )}\n                </div>\n                {suggested > completed ? (\n                    <div\n                        class=\"dot-container suggested\"\n                        style={suggestedDotStyles}\n                    >\n                        {this.hideTooltip ? (\n                            <div class=\"dot\"></div>\n                        ) : (\n                            <q2-tooltip\n                                label={tooltipSuggested}\n                                position={this.adjustTooltipDirection(suggested, tooltipSuggested)}\n                                immediate\n                            >\n                                <div class=\"dot\"></div>\n                            </q2-tooltip>\n                        )}\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"],"version":3}

package/dist/components/q2-modal.js

@@ -144,7 +144,7 @@ const Q2Modal$1 = /*@__PURE__*/ proxyCustomElement(class Q2Modal extends HTMLEle
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: 'e7c16406478e632f39057feb8ab86029c2b6ddd7', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'b59510c6a97ac4f8e4820465919e364a924b82e1', class: interiorClasses }, this.title && (h("header", { key: '714904259d422f663d13aa27b715a2de9ab3b12b' }, this.title && h("h2", { key: '69e2f5f487b73fc84ff6e0ca1e9710d7c5f80938', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: 'e9258c375fd6f077f296a496a6a67903a39f3d8c', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '4c07c70736c25e12d08d6f066507326bc333ad61', type: "close" }))))), h("div", { key: 'a40c63b069c6f8c03682d8626f9a359cb5f7f7fa', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '95bf4a48929080493ed1f375648aa8630931e3be', class: "icon" }, h("q2-icon", { key: '8e7d34940323c625e61eea7509d829d298af82a0', type: this.icon }))), this.imageSrc && (h("div", { key: '9f6fbbd59c14cc5ee93601db161dd7c748e3b5a6', class: "image" }, h("img", { key: 'd97eb1d2dae996c2bcacddf840b984f1ffe05847', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'b7b66ddb181aa333fb88496984a6f35a34077baf', name: "content" }), this.description && h("p", { key: '54dc54b11c8c351b760afc35c714d35277b3e463', class: "description" }, this.description), this.customMarkup && (h("p", { key: '11e8922a3e277f6bb21c8cbcaf1be19de07d3a54', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'f90f8a5569be4c1660c25388a9082e2e40a3e11d' }, h("q2-action-group", { key: '34254d2e03a6093e53324c3d98b0eb2ede3b14f2', "full-width": true }, h("slot", { key: 'a34ad5fa37fc258bd2863f2fd191acdac05de9cb', name: "action" }))))));
+        return (h("dialog", { key: 'f07045cb3a3e85c9ebb018aba4693f1b547da800', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '215739e96bf781f3c9d7b1e67250820ccf858b75', class: interiorClasses }, this.title && (h("header", { key: '77ce6f5b51a36f296fd110e3506c44ff94d72c48' }, this.title && h("h2", { key: 'fe6c7e59889383c6af5615093e66c3837dd24bc4', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '8da0a4c5499caffd385bbf78f2010f77f8c35785', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '3526408cfbc99d56d74e3167624049a86dded3a4', type: "close" }))))), h("div", { key: 'ce3c96886c1d28d78040401b3782892c5bda7399', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'e4bae20593b8877f9c713f5bf63e59574042735b', class: "icon" }, h("q2-icon", { key: '466a83589286d503c6a5a36ba1999a73df951c19', type: this.icon }))), this.imageSrc && (h("div", { key: '56a0e413b40319b7a40e79136575ee8849c339c6', class: "image" }, h("img", { key: '0d32cee3447aa42273a816c4cd8941d5df62b3b2', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '3687527d29977c662dd480e6fb9727f47eb3522a', name: "content" }), this.description && h("p", { key: '34b49f5bb615192deec83726391b66680541eb12', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'a44e20822b497cc95e2ad16430f3e3e27f1c164a', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'ae01296dc46f5502b1cdfa7b1949639df942c124' }, h("q2-action-group", { key: 'b89615558a7129659ce1574cc026c2bc4d728e8b', "full-width": true }, h("slot", { key: 'f12ed356d57b290222a5dab301c83a85fbdc9c34', name: "action" }))))));
     }
     get hostElement() { return this; }
     static get style() { return q2ModalCss; }

package/dist/components/q2-modal.js.map

@@ -1 +1 @@
-{"file":"q2-modal.js","mappings":"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","names":["Q2Modal","__stencil_proxyCustomElement"],"sources":["src/components/q2-modal/q2-modal.scss?tag=q2-modal&encapsulation=shadow","src/components/q2-modal/q2-modal.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-modal-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px);\n    --comp-border-radius: #{var-list(--tct-modal-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-modal-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-modal-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-modal-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-modal-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-modal-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-modal-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-modal-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-modal-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-modal-max-width, 600px)};\n    --comp-dialog-max-height: #{var-list(--tct-modal-max-height, 100vh)}; // should not use vh in the extension\n    --comp-dialog-min-height: #{var-list(--tct-modal-min-height, 40vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-modal-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-modal-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 1;\n\n        &.is-opening,\n        &.is-open {\n            opacity: 1;\n            transform: translateY(0);\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n\n    .icon {\n        height: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        margin: var-list(--tct-modal-icon-margin, --app-scale-2x, 10px);\n        display: flex;\n        justify-content: center;\n        q2-icon {\n            width: var-list(--tct-modal-icon-size --app-scale-9x, 45px);\n        }\n    }\n    .image {\n        display: flex;\n        justify-content: center;\n        img {\n            width: 100%;\n            border-radius: var-list(--tct-modal-image-border-radius, --app-border-radius-2, 8px);\n        }\n    }\n    .description {\n        font-size: var-list(--tct-modal-description-font-size, 14px);\n    }\n    &.more-gradient {\n        -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n        mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n    }\n}\n\n.interior {\n    display: grid;\n    min-height: var(--comp-dialog-min-height);\n    grid-template-rows: auto 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    .title {\n        @include line-clamp(3);\n        text-align: left;\n        font-weight: var-list(--tct-modal-title-font-weight, 400);\n        margin: 0;\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n","import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\nimport type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';\n\n/**\n * @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\n * @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n */\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of the close button in the top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it will be sanitized for security purposes.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * A plain text description of the modal. Use this to provide context or information to the user.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * An image URL to be displayed beneath the title. It renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * A plain text title of the modal displayed at the top.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action buttons is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when the modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon type={this.icon}></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-modal.js","mappings":"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","names":["Q2Modal","__stencil_proxyCustomElement"],"sources":["src/components/q2-modal/q2-modal.scss?tag=q2-modal&encapsulation=shadow","src/components/q2-modal/q2-modal.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-modal-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px);\n    --comp-border-radius: #{var-list(--tct-modal-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-modal-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-modal-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-modal-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-modal-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-modal-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-modal-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-modal-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-modal-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-modal-max-width, 600px)};\n    --comp-dialog-max-height: #{var-list(--tct-modal-max-height, 100vh)}; // should not use vh in the extension\n    --comp-dialog-min-height: #{var-list(--tct-modal-min-height, 40vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-modal-box-shadow,\n            --app-shadow-2,\n            unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-modal-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 1;\n\n        &.is-opening,\n        &.is-open {\n            opacity: 1;\n            transform: translateY(0);\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n\n    .icon {\n        height: var-list(--tct-modal-icon-size, --app-scale-9x, 45px);\n        margin: var-list(--tct-modal-icon-margin, --app-scale-2x, 10px);\n        display: flex;\n        justify-content: center;\n        q2-icon {\n            width: var-list(--tct-modal-icon-size, --app-scale-9x, 45px);\n        }\n    }\n    .image {\n        display: flex;\n        justify-content: center;\n        img {\n            width: 100%;\n            border-radius: var-list(--tct-modal-image-border-radius, --app-border-radius-2, 8px);\n        }\n    }\n    .description {\n        font-size: var-list(--tct-modal-description-font-size, 14px);\n    }\n    &.more-gradient {\n        -webkit-mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n        mask-image: linear-gradient(to bottom, red 85%, transparent 100%);\n    }\n}\n\n.interior {\n    display: grid;\n    min-height: var(--comp-dialog-min-height);\n    grid-template-rows: auto 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    .title {\n        @include line-clamp(3);\n        text-align: left;\n        font-weight: var-list(--tct-modal-title-font-weight, 400);\n        margin: 0;\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n","import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\nimport type { ModalOption, ModalResponse } from 'q2-tecton-common/lib/types/modal';\n\n/**\n * @name Modal\n * @category Display\n * @summary Use for focused interactions that require user attention before continuing.\n * @slot content - A slot to display custom content in the modal body above the description.\n * @slot action - A slot to display up to four elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group) in the modal's footer.\n */\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of the close button in the top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it will be sanitized for security purposes.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * A plain text description of the modal. Use this to provide context or information to the user.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * An image URL to be displayed beneath the title. It renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * A plain text title of the modal displayed at the top.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action buttons is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when the modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon type={this.icon}></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-mutation-observer.js

@@ -92,7 +92,7 @@ const Q2MutationObserver$1 = /*@__PURE__*/ proxyCustomElement(class Q2MutationOb
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: '63a71ae4a0e7d69ea2aaec1244ff89c6d47d6a81', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: 'e60ef36a762c6af123a91fe6c4def64179663098', onSlotchange: this.handleSlotChange });
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-optgroup2.js

@@ -56,7 +56,7 @@ const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class Q2Optgroup extends HTM
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6f4564d3db59c64b76abc47ceee3663e277b6f55', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'bd28cae7d3893142c8154286d28fb79448e5ca39', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '63eba11bbca923ca6c22281ba31476fb89a709ca', class: "q2-optgroup-options" }, h("slot", { key: '1c27562418e4075f2843e0ec080a138a14d5f191' }))));
+        return (h("div", { key: '4271765f1422cd33d73e1ed66b967994395bb4e1', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'f5efb564a7049f7e8d78c0b6fa5749e239ea5133', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '9f932967082554e86e8048bba66a1493258f6d06', class: "q2-optgroup-options" }, h("slot", { key: 'd58e647529d66c50b6e0c9a79705128f0ffdf806' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-optgroup2.js.map

@@ -1 +1 @@
-{"file":"q2-optgroup2.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,4hDAA4hD;;MCUriD,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AADvB,IAAA,WAAA,GAAA;;;;;AAII,QAAA,IAAI,CAAA,IAAA,GAAW,UAAU,EAAE;;;AAa3B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;;;AAOvB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA8CzB,QAAA,IAAS,CAAA,SAAA,GAAG,MAAK;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC;AACjF,SAAC;AA2BJ;;;IAlEG,oBAAoB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACnC,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;IAGhC,iBAAiB,GAAA;AACb,QAAA,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,iDAAiD,CAAC;QACrF,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;QACrD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACxF,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;;QAGhC,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;AAOvC,IAAA,eAAe,CAAC,QAAiB,EAAA;AAC7B,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,IAAG;AACvB,YAAA,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ;AAClC,SAAC,CAAC;;;;AAMN,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,CAAsB,mBAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;AAG5C,IAAA,IAAI,OAAO,GAAA;AACP,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;;;;IAUrE,MAAM,GAAA;QACF,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,EAAA,EAEZ,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC5B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.q2-optgroup-header {\n    --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n    background: var-list(\n        --tct-optgroup-header-background,\n        var-prefixer(optgroup-header-bg),\n        --t-base,\n        #FFFFFF\n    );\n    color: var-list(--tct-optgroup-header-color, inherit);\n    font-size: var(--tct-optgroup-header-font-size, 14px);\n    font-weight: var(--tct-optgroup-header-font-weight, 600);\n    letter-spacing: var(--tct-optgroup-header-letter-spacing, inherit);\n    position: var-list(--tct-optgroup-header-position, sticky);\n    padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n    text-transform: var-list(var-prefixer(optgroup-header-text-transform), none);\n    top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n    z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","import { hasValidAncestor } from '@/utils/component';\nimport { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n/**\n * @name Option Group\n * @category Forms\n * @summary Use for grouping related options under a label in Select or Dropdown.\n */\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-option-list, q2-select, q2-dropdown, q2-pill');\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-optgroup2.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,4hDAA4hD;;MCUriD,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AADvB,IAAA,WAAA,GAAA;;;;;AAII,QAAA,IAAI,CAAA,IAAA,GAAW,UAAU,EAAE;;;AAa3B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;;;AAOvB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA8CzB,QAAA,IAAS,CAAA,SAAA,GAAG,MAAK;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC;AACjF,SAAC;AA2BJ;;;IAlEG,oBAAoB,GAAA;;QAChB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACnC,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;IAGhC,iBAAiB,GAAA;AACb,QAAA,gBAAgB,CAAC,IAAI,CAAC,WAAW,EAAE,iDAAiD,CAAC;QACrF,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;QACrD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACxF,QAAA,IAAI,CAAC,gBAAgB,GAAG,QAAQ;;QAGhC,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;AAOvC,IAAA,eAAe,CAAC,QAAiB,EAAA;AAC7B,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,IAAG;AACvB,YAAA,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ;AAClC,SAAC,CAAC;;;;AAMN,IAAA,IAAI,QAAQ,GAAA;AACR,QAAA,OAAO,CAAsB,mBAAA,EAAA,IAAI,CAAC,IAAI,EAAE;;AAG5C,IAAA,IAAI,OAAO,GAAA;AACP,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;;;;IAUrE,MAAM,GAAA;QACF,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO,EAAA,EAEZ,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CACpC,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC5B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-optgroup/q2-optgroup.scss?tag=q2-optgroup&encapsulation=shadow","src/components/q2-optgroup/q2-optgroup.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: block;\n}\n\n.q2-optgroup-header {\n    --comp-header-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px) var-list(--tct-scale-2, --app-scale-2x, 10px)};\n    background: var-list(\n        --tct-optgroup-header-background,\n        var-prefixer(optgroup-header-bg),\n        --t-base,\n        #FFFFFF\n    );\n    color: var-list(--tct-optgroup-header-color, inherit);\n    font-size: var(--tct-optgroup-header-font-size, 14px);\n    font-weight: var(--tct-optgroup-header-font-weight, 600);\n    letter-spacing: var(--tct-optgroup-header-letter-spacing, inherit);\n    position: var-list(--tct-optgroup-header-position, sticky);\n    padding: var-list(var-prefixer(optgroup-header-padding), --comp-header-padding);\n    text-transform: var-list(var-prefixer(optgroup-header-text-transform), none);\n    top: calc(var(--comp-popover-top-container-height, 0px) + var-list(var-prefixer(optgroup-top), 0px));\n    z-index: 5; // Keeps the optgroup over any hover or focus states\n}\n","import { hasValidAncestor } from '@/utils/component';\nimport { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n/**\n * @name Option Group\n * @category Forms\n * @summary Use for grouping related options under a label in Select or Dropdown.\n */\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        hasValidAncestor(this.hostElement, 'q2-option-list, q2-select, q2-dropdown, q2-pill');\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-option-list2.js

@@ -166,38 +166,47 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class Q2OptionList extends
                     }, { once: true });
                     break;
                 case 'ArrowUp':
-                    event.preventDefault();
-                    const firstVisibleOption = allVisibleOptions[0];
-                    const isFirstVisibleOptionActive = firstVisibleOption.active;
-                    if (isFirstVisibleOptionActive)
-                        break;
-                    if (activeIndex === undefined) {
-                        this.setDefaultActiveElement();
-                        break;
-                    }
-                    else {
-                        const nextIndex = this.getNextVisibleIndex(-1);
-                        if (nextIndex === -1)
-                            break;
-                        this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
-                        break;
-                    }
                 case 'ArrowDown':
+                    // Guard: only process if an option is currently focused
+                    const focusedOption = document.activeElement;
+                    const isOptionFocused = this.allOptions.some(opt => opt === focusedOption);
+                    if (!isOptionFocused)
+                        return;
                     event.preventDefault();
-                    const lastVisibleOption = allVisibleOptions[allVisibleOptions.length - 1];
-                    const isLastVisibleOptionActive = lastVisibleOption.active;
-                    if (isLastVisibleOptionActive)
-                        break;
-                    if (activeIndex === undefined) {
-                        this.setDefaultActiveElement();
-                        break;
+                    if (key === 'ArrowUp') {
+                        const firstVisibleOption = allVisibleOptions[0];
+                        const isFirstVisibleOptionActive = firstVisibleOption.active;
+                        if (isFirstVisibleOptionActive)
+                            break;
+                        if (activeIndex === undefined) {
+                            this.setDefaultActiveElement();
+                            break;
+                        }
+                        else {
+                            const nextIndex = this.getNextVisibleIndex(-1);
+                            if (nextIndex === -1)
+                                break;
+                            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+                            break;
+                        }
                     }
                     else {
-                        const nextIndex = this.getNextVisibleIndex(1);
-                        if (nextIndex === -1)
+                        // ArrowDown
+                        const lastVisibleOption = allVisibleOptions[allVisibleOptions.length - 1];
+                        const isLastVisibleOptionActive = lastVisibleOption.active;
+                        if (isLastVisibleOptionActive)
                             break;
-                        this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
-                        break;
+                        if (activeIndex === undefined) {
+                            this.setDefaultActiveElement();
+                            break;
+                        }
+                        else {
+                            const nextIndex = this.getNextVisibleIndex(1);
+                            if (nextIndex === -1)
+                                break;
+                            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+                            break;
+                        }
                     }
                 case 'Home':
                     event.preventDefault();
@@ -582,7 +591,7 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class Q2OptionList extends
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: '99c8a52ef8c6adbd138bdd4ff40340fabe670903' }, h("div", { key: '632777fab876b3ef838e8658de35df410fc1d3b7', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '97079fcb63d10e57ae3e3f1fcbc0a4c307dcda3c', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '07f07e638defb8427f320db9bf3cfb87f6711f9e' })))));
+        return (h(Host, { key: 'ea6ef8ea9e667c6d1485212ea636b23725ce9043' }, h("div", { key: '6bc6ffec50a40b8b8ee4cf2b66388200eb3f0d32', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '28b5d0460ceca2f0b9a8fd4fa018f949d04154df', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '666147b2cd06490c883c8a01b11e9cfa209a19dd' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {