q2-tecton-elements 1.67.2 → 1.68.0

package/dist/cjs/q2-link_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-link.q2-list.entry.cjs.js","mappings":"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","names":["h","hasSlotContent"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host {\n    &:active {\n        box-shadow: none;\n    }\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])) {\n    display: block;\n    flex: 0 1 auto;\n    max-width: var-list(--tct-link-ellipsis-max-width, 45%);\n    min-width: 0;\n    overflow: hidden;\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])[full-width]:not([full-width=\"false\"])) {\n    flex: 1 1 0px;\n    max-width: 100%;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n    display: inline-flex;\n    justify-content: center;\n    width: 100%;\n}\n\n.ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n}\n\n.label {\n    &.ellipsis {\n        display: block;\n        min-width: 0;\n        flex: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.link-container {\n    --comp-link-font-bold-stroke-width: 0.5px;\n    background: transparent;\n    border: none;\n    border-radius: var(--tct-link-border-radius, 0);\n    font-size: var-list(--tct-link-font-size, inherit);\n    font-weight: var-list(--tct-link-font-weight, inherit);\n    max-width: 100%;\n    overflow: hidden;\n\n    &.standalone {\n        --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n        display: block;\n        width: 100%;\n        max-width: 100%;\n        min-width: 0;\n        .link {\n            color: var-list(--tct-link-color-standalone, --t-primary);\n            min-height: var(--tct-link-min-height, 24px);\n            display: flex;\n            align-items: center;\n            border-radius: var(--tct-link-border-radius, 0);\n            --tct-icon-size: 16px;\n            text-decoration: none;\n            width: 100%;\n            max-width: 100%;\n            min-width: 0;\n            overflow: hidden;\n            q2-icon {\n                margin-left: var(--tct-link-label-icon-gap, 6px);\n                color: var(--tct-link-icon-color, inherit);\n                flex-shrink: 0;\n            }\n        }\n        &:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n        }\n        &:active:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n            .link {\n                color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n                box-shadow: none;\n            }\n        }\n        &.disabled {\n            .link {\n                cursor: not-allowed;\n                color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n                opacity: var-list(\n                    --tct-link-color-standalone-disabled-opacity,\n                    --tct-link-disabled-opacity,\n                    --app-disabled-opacity,\n                    0.4\n                );\n                text-decoration: none;\n            }\n            &:hover {\n                text-decoration: none;\n            }\n        }\n        &:has(:focus-visible) {\n            box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n        }\n    }\n\n    &.inline {\n        margin: 0 var(--tct-link-side-margin, 6px);\n        text-decoration: underline;\n        color: var-list(--tct-link-color-inline, --t-primary);\n        &.ellipsis {\n            display: block;\n            max-width: 100%;\n        }\n        &:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n        }\n        &:active:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n            box-shadow: none;\n        }\n        &.disabled {\n            cursor: not-allowed;\n            opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n        }\n        &:focus-visible {\n            box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n/**\n * @name Link\n * @category Display\n * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.\n */\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Tooltip text set by a parent q2-tooltip component for accessibility.\n     */\n    @Prop()\n    _tooltip: string;\n\n    /** Determines whether the component and `tctClick` event are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** If `true`, the label will be truncated with an ellipsis when it's too long. */\n    @Prop({ reflect: true })\n    ellipsis: boolean = false;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = 'javascript:void(0)';\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". */\n    @Prop({ reflect: true })\n    iconType: string;\n\n    /** The displayed label to represent your link. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** Applies a `title` attribute to the anchor tag in the shadowRoot of the component. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** Determines the visual display style of the link. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event({ cancelable: true })\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes(): string {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    get composedAriaLabel(): string | undefined {\n        const baseText = this.label || this.hostElement.textContent.trim() || undefined;\n        if (!this._tooltip && !baseText) return undefined;\n        if (!this._tooltip) return this.variant === 'standalone' ? baseText : undefined;\n        if (!baseText) return this._tooltip;\n        return `${baseText} - ${this._tooltip}`;\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        const customEvent = this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n        if (customEvent.defaultPrevented) {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const labelClasses = this.ellipsis ? 'label ellipsis' : 'label';\n        return this.variant === 'standalone' ? (\n            <div class={this.classes}>\n                <a\n                    class=\"link\"\n                    href={!!this.disabled ? undefined : this.href}\n                    onClick={e => this.handleClick(e)}\n                    target={this.target || '_self'}\n                    rel={this.target === '_blank' ? 'noopener' : undefined}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    aria-label={this.composedAriaLabel}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class={labelClasses}>{this.label}</span>\n                    {this.iconType && <q2-icon type={this.iconType}></q2-icon>}\n                </a>\n            </div>\n        ) : (\n            <a\n                class={`${this.classes}${this.ellipsis ? ' ellipsis' : ''}`}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                aria-label={this.composedAriaLabel}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n    ::slotted(q2-item:not(:last-child)),\n    .header {\n        border-style: var-list(--tct-list-item-border-style, solid);\n        border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n        border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n    }\n}\n\n::slotted(q2-item) {\n    --comp-item-padding: #{var-list(\n            --tct-list-item-padding,\n            unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n        )};\n    --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n    --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\nslot:not([name]) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/**\n * @name List\n * @category Display\n * @summary Use for grouping Item components into a vertical list.\n * @slot filter - An optional slot to display custom content for filtering the list items.\n */\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    listElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\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    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true })\n    bordered: boolean;\n\n    /** label text on header area */\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    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-link.q2-list.entry.cjs.js","mappings":"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","names":["h","hasSlotContent"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: inline-block;\n}\n\n:host {\n    &:active {\n        box-shadow: none;\n    }\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])) {\n    display: block;\n    flex: 0 1 auto;\n    max-width: var-list(--tct-link-ellipsis-max-width, 45%);\n    min-width: 0;\n    overflow: hidden;\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])[full-width]:not([full-width=\"false\"])) {\n    flex: 1 1 0px;\n    max-width: 100%;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n    display: inline-flex;\n    justify-content: center;\n    width: 100%;\n}\n\n.ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n}\n\n.label {\n    &.ellipsis {\n        display: block;\n        min-width: 0;\n        flex: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.link-container {\n    --comp-link-font-bold-stroke-width: 0.5px;\n    background: transparent;\n    border: none;\n    border-radius: var(--tct-link-border-radius, 0);\n    font-size: var-list(--tct-link-font-size, inherit);\n    font-weight: var-list(--tct-link-font-weight, inherit);\n    max-width: 100%;\n    overflow: hidden;\n\n    &.standalone {\n        --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n        display: block;\n        width: 100%;\n        max-width: 100%;\n        min-width: 0;\n        .link {\n            color: var-list(--tct-link-color-standalone, --t-primary);\n            min-height: var(--tct-link-min-height, 24px);\n            display: flex;\n            align-items: center;\n            border-radius: var(--tct-link-border-radius, 0);\n            --tct-icon-size: 16px;\n            text-decoration: none;\n            width: 100%;\n            max-width: 100%;\n            min-width: 0;\n            overflow: hidden;\n            q2-icon {\n                margin-left: var(--tct-link-label-icon-gap, 6px);\n                color: var(--tct-link-icon-color, inherit);\n                flex-shrink: 0;\n            }\n        }\n        &:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n        }\n        &:active:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n            .link {\n                color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n                box-shadow: none;\n            }\n        }\n        &.disabled {\n            .link {\n                cursor: not-allowed;\n                color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n                opacity: var-list(\n                    --tct-link-color-standalone-disabled-opacity,\n                    --tct-link-disabled-opacity,\n                    --app-disabled-opacity,\n                    0.4\n                );\n                text-decoration: none;\n            }\n            &:hover {\n                text-decoration: none;\n            }\n        }\n        &:has(:focus-visible) {\n            box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n        }\n    }\n\n    &.inline {\n        margin: 0 var(--tct-link-side-margin, 6px);\n        text-decoration: underline;\n        color: var-list(--tct-link-color-inline, --t-primary);\n        &.ellipsis {\n            display: block;\n            max-width: 100%;\n        }\n        &:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n        }\n        &:active:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n            box-shadow: none;\n        }\n        &.disabled {\n            cursor: not-allowed;\n            opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n        }\n        &:focus-visible {\n            box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n/**\n * @name Link\n * @category Display\n * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.\n */\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Tooltip text set by a parent q2-tooltip component for accessibility.\n     */\n    @Prop()\n    _tooltip: string;\n\n    /** Determines whether the component and `tctClick` event are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** If `true`, the label will be truncated with an ellipsis when it's too long. */\n    @Prop({ reflect: true })\n    ellipsis: boolean = false;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = 'javascript:void(0)';\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". */\n    @Prop({ reflect: true })\n    iconType: string;\n\n    /** The displayed label to represent your link. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** Applies a `title` attribute to the anchor tag in the shadowRoot of the component. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** Determines the visual display style of the link. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event({ cancelable: true })\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes(): string {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    get composedAriaLabel(): string | undefined {\n        const baseText = this.label || this.hostElement.textContent.trim() || undefined;\n        if (!this._tooltip && !baseText) return undefined;\n        if (!this._tooltip) return this.variant === 'standalone' ? baseText : undefined;\n        if (!baseText) return this._tooltip;\n        return `${baseText} - ${this._tooltip}`;\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        const customEvent = this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n        if (customEvent.defaultPrevented) {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const labelClasses = this.ellipsis ? 'label ellipsis' : 'label';\n        return this.variant === 'standalone' ? (\n            <div class={this.classes}>\n                <a\n                    class=\"link\"\n                    href={!!this.disabled ? undefined : this.href}\n                    onClick={e => this.handleClick(e)}\n                    target={this.target || '_self'}\n                    rel={this.target === '_blank' ? 'noopener' : undefined}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    aria-label={this.composedAriaLabel}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class={labelClasses}>{this.label}</span>\n                    {this.iconType && <q2-icon type={this.iconType}></q2-icon>}\n                </a>\n            </div>\n        ) : (\n            <a\n                class={`${this.classes}${this.ellipsis ? ' ellipsis' : ''}`}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                aria-label={this.composedAriaLabel}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n@import './variables';\n\n:host([bordered]:not([bordered='false'])) {\n    ::slotted(q2-item:not(:last-child)),\n    .header {\n        border-style: var-list(--tct-list-item-border-style, solid);\n        border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n        border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n    }\n}\n\n::slotted(q2-item) {\n    --comp-item-padding: #{var-list(\n            --tct-list-item-padding,\n            unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n        )};\n    --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n    --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\nslot:not([name]) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/**\n * @name List\n * @category Display\n * @summary Use for grouping Item components into a vertical list.\n * @slot filter - An optional slot to display custom content for filtering the list items.\n */\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    listElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\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    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true })\n    bordered: boolean;\n\n    /** label text on header area */\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    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-loc.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var index$1 = require('./index-DmGkqdX2.js');
 
 const Q2Loc = class {
     constructor(hostRef) {

package/dist/cjs/q2-message.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var index$1 = require('./index-DmGkqdX2.js');
 
-const q2MessageCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));border-width:var(--tct-message-border-width, 0);border-style:var(--tct-message-border-style, solid);border-color:var(--tct-message-border-color, transparent);position:relative;display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.bar{position:absolute;left:0;top:0;bottom:0;height:100%;background:var(--comp-bar-color);width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-radius:var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1))}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height);font-size:var(--tct-message-font-size, inherit)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])),:host([type=info]){--comp-info-color:#0079c1;--comp-bar-color:var(--tct-message-info-bar-color, var(--const-stoplight-info, var(--comp-info-color)))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host([type=success]){--comp-success-color:#0e8a00;--comp-bar-color:var(--tct-message-success-bar-color, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=warning]){--comp-warning-color:#c35500;--comp-bar-color:var(--tct-message-warning-bar-color, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=error]),:host([type=danger]){--comp-error-color:#d20a0a;--comp-bar-color:var(--tct-message-error-bar-color, var(--const-stoplight-alert, var(--comp-error-color)))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}";
+const q2MessageCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));border-width:var(--tct-message-border-width, 0);border-style:var(--tct-message-border-style, solid);border-color:var(--tct-message-border-color, transparent);position:relative;display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--comp-message-background, var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.bar{position:absolute;left:0;top:0;bottom:0;height:100%;background:var(--comp-bar-color);width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-radius:var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1))}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height);font-size:var(--tct-message-font-size, inherit)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])),:host([type=info]){--comp-info-color:#0079c1;--comp-bar-color:var(--tct-message-info-bar-color, var(--const-stoplight-info, var(--comp-info-color)));--comp-message-background:var(--tct-message-info-background, #e5f5ff)}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host([type=success]){--comp-success-color:#0e8a00;--comp-bar-color:var(--tct-message-success-bar-color, var(--const-stoplight-success, var(--comp-success-color)));--comp-message-background:var(--tct-message-success-background, #e8ffe5)}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=warning]){--comp-warning-color:#c35500;--comp-bar-color:var(--tct-message-warning-bar-color, var(--const-stoplight-warning, var(--comp-warning-color)));--comp-message-background:var(--tct-message-warning-background, #ffe2cc)}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=error]),:host([type=danger]){--comp-error-color:#d20a0a;--comp-bar-color:var(--tct-message-error-bar-color, var(--const-stoplight-alert, var(--comp-error-color)));--comp-message-background:var(--tct-message-error-background, #fee7e7)}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}";
 
 const Q2Message = class {
     constructor(hostRef) {
@@ -67,7 +67,7 @@ const Q2Message = class {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = index$1.loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (index.h("div", { key: 'b65f9feaee320f96a3f745eb4231510eab67aba6', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, index.h("div", { key: '66b9440bf994341ff365766a1241f56556fffe57', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && index.h("div", { key: '47269ca27bc9c952249f574ab98e45d026125228', class: "sr" }), index.h("div", { key: '63a91696622f38741d5d403fe81262e2d5458328', class: "sr message-label" }, messageLabel), index.h("div", { key: '544cecc85e943f0156b63489cc78a42bec02f7c9', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: '36ff0e64df72018818fd8452e847c522ea4c4039' }))));
+        return (index.h("div", { key: 'e6d294a3ad21e83f33d2e0202e74b66b5d61984f', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, index.h("div", { key: 'c8cad3b93d2d501513d951b0850bf920cfdd2dc8', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && index.h("div", { key: '48222cb290731c76a3f68b48c01fcaff5b0fea2a', class: "sr" }), index.h("div", { key: '2f67a189f90d66ec9478926984cb4e3f97808658', class: "sr message-label" }, messageLabel), index.h("div", { key: 'f41dd21efa6c822a436328bf4bbf756eec8714fd', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, index.h("slot", { key: '5668fbb085bfc8403062710a60238ba71c05e7ab' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-message.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-message.entry.cjs.js","mappings":"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","names":["overrideFocus","isEventFromElement","nextPaint","checkIfFirefox","h","loc"],"sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    border-width: var(--tct-message-border-width, 0);\n    border-style: var(--tct-message-border-style, solid);\n    border-color: var(--tct-message-border-color, transparent);\n    position: relative;\n    display: grid;\n    gap: var(--tct-message-gap, 8px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.bar {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    height: 100%;\n    background: var(--comp-bar-color);\n    width: var-list(var-prefixer(message-bar-width), 4px);\n    border-radius: var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1));\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n    font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n    --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n    padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n    margin: var-list(--tct-message-margin, --comp-default-margin);\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n        margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    --comp-info-color: #0079c1;\n    --comp-bar-color: #{var-list(--tct-message-info-bar-color, --const-stoplight-info, --comp-info-color)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n    }\n}\n\n:host([type='success']) {\n    --comp-success-color: #0e8a00;\n    --comp-bar-color: #{var-list(--tct-message-success-bar-color, --const-stoplight-success, --comp-success-color)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n    }\n}\n\n:host([type='warning']) {\n    --comp-warning-color: #c35500;\n    --comp-bar-color: #{var-list(--tct-message-warning-bar-color, --const-stoplight-warning, --comp-warning-color)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    --comp-error-color: #d20a0a;\n    --comp-bar-color: #{var-list(--tct-message-error-bar-color, --const-stoplight-alert, --comp-error-color)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/**\n * @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n */\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            danger: 'error-filled',\n            error: 'error-filled',\n            info: 'info-filled',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                <div\n                    class=\"bar\"\n                    test-id=\"bar\"\n                ></div>\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-message.entry.cjs.js","mappings":"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","names":["overrideFocus","isEventFromElement","nextPaint","checkIfFirefox","h","loc"],"sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    border-width: var(--tct-message-border-width, 0);\n    border-style: var(--tct-message-border-style, solid);\n    border-color: var(--tct-message-border-color, transparent);\n    position: relative;\n    display: grid;\n    gap: var(--tct-message-gap, 8px);\n    align-items: flex-start;\n    background: var-list(\n        --comp-message-background,\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.bar {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    height: 100%;\n    background: var(--comp-bar-color);\n    width: var-list(var-prefixer(message-bar-width), 4px);\n    border-radius: var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1));\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n    font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n    --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n    padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n    margin: var-list(--tct-message-margin, --comp-default-margin);\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n        margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    --comp-info-color: #0079c1;\n    --comp-bar-color: #{var-list(--tct-message-info-bar-color, --const-stoplight-info, --comp-info-color)};\n    --comp-message-background: #{var-list(--tct-message-info-background, #e5f5ff)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n    }\n}\n\n:host([type='success']) {\n    --comp-success-color: #0e8a00;\n    --comp-bar-color: #{var-list(--tct-message-success-bar-color, --const-stoplight-success, --comp-success-color)};\n    --comp-message-background: #{var-list(--tct-message-success-background, #e8ffe5)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n    }\n}\n\n:host([type='warning']) {\n    --comp-warning-color: #c35500;\n    --comp-bar-color: #{var-list(--tct-message-warning-bar-color, --const-stoplight-warning, --comp-warning-color)};\n    --comp-message-background: #{var-list(--tct-message-warning-background, #ffe2cc)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    --comp-error-color: #d20a0a;\n    --comp-bar-color: #{var-list(--tct-message-error-bar-color, --const-stoplight-alert, --comp-error-color)};\n    --comp-message-background: #{var-list(--tct-message-error-background, #fee7e7)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/**\n * @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n */\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            danger: 'error-filled',\n            error: 'error-filled',\n            info: 'info-filled',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                <div\n                    class=\"bar\"\n                    test-id=\"bar\"\n                ></div>\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-message.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-message.entry.cjs.js","sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    border-width: var(--tct-message-border-width, 0);\n    border-style: var(--tct-message-border-style, solid);\n    border-color: var(--tct-message-border-color, transparent);\n    position: relative;\n    display: grid;\n    gap: var(--tct-message-gap, 8px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.bar {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    height: 100%;\n    background: var(--comp-bar-color);\n    width: var-list(var-prefixer(message-bar-width), 4px);\n    border-radius: var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1));\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n    font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n    --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n    padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n    margin: var-list(--tct-message-margin, --comp-default-margin);\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n        margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    --comp-info-color: #0079c1;\n    --comp-bar-color: #{var-list(--tct-message-info-bar-color, --const-stoplight-info, --comp-info-color)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n    }\n}\n\n:host([type='success']) {\n    --comp-success-color: #0e8a00;\n    --comp-bar-color: #{var-list(--tct-message-success-bar-color, --const-stoplight-success, --comp-success-color)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n    }\n}\n\n:host([type='warning']) {\n    --comp-warning-color: #c35500;\n    --comp-bar-color: #{var-list(--tct-message-warning-bar-color, --const-stoplight-warning, --comp-warning-color)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    --comp-error-color: #d20a0a;\n    --comp-bar-color: #{var-list(--tct-message-error-bar-color, --const-stoplight-alert, --comp-error-color)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/**\n * @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n */\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            danger: 'error-filled',\n            error: 'error-filled',\n            info: 'info-filled',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                <div\n                    class=\"bar\"\n                    test-id=\"bar\"\n                ></div>\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":["overrideFocus","isEventFromElement","nextPaint","checkIfFirefox","h","loc"],"mappings":"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"}
+{"version":3,"file":"q2-message.entry.cjs.js","sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    border-width: var(--tct-message-border-width, 0);\n    border-style: var(--tct-message-border-style, solid);\n    border-color: var(--tct-message-border-color, transparent);\n    position: relative;\n    display: grid;\n    gap: var(--tct-message-gap, 8px);\n    align-items: flex-start;\n    background: var-list(\n        --comp-message-background,\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.bar {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    height: 100%;\n    background: var(--comp-bar-color);\n    width: var-list(var-prefixer(message-bar-width), 4px);\n    border-radius: var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1));\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n    font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n    --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n    padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n    margin: var-list(--tct-message-margin, --comp-default-margin);\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n        margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    --comp-info-color: #0079c1;\n    --comp-bar-color: #{var-list(--tct-message-info-bar-color, --const-stoplight-info, --comp-info-color)};\n    --comp-message-background: #{var-list(--tct-message-info-background, #e5f5ff)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n    }\n}\n\n:host([type='success']) {\n    --comp-success-color: #0e8a00;\n    --comp-bar-color: #{var-list(--tct-message-success-bar-color, --const-stoplight-success, --comp-success-color)};\n    --comp-message-background: #{var-list(--tct-message-success-background, #e8ffe5)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n    }\n}\n\n:host([type='warning']) {\n    --comp-warning-color: #c35500;\n    --comp-bar-color: #{var-list(--tct-message-warning-bar-color, --const-stoplight-warning, --comp-warning-color)};\n    --comp-message-background: #{var-list(--tct-message-warning-background, #ffe2cc)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    --comp-error-color: #d20a0a;\n    --comp-bar-color: #{var-list(--tct-message-error-bar-color, --const-stoplight-alert, --comp-error-color)};\n    --comp-message-background: #{var-list(--tct-message-error-background, #fee7e7)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/**\n * @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n */\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            danger: 'error-filled',\n            error: 'error-filled',\n            info: 'info-filled',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                <div\n                    class=\"bar\"\n                    test-id=\"bar\"\n                ></div>\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":["overrideFocus","isEventFromElement","nextPaint","checkIfFirefox","h","loc"],"mappings":"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"}

package/dist/cjs/q2-meter.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-YvKoRT-t.js');
+var index$1 = require('./index-DmGkqdX2.js');
 
 const q2MeterCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{width:100%}.meter-container{--comp-meter-bar-height:var(--tct-meter-bar-height, 10px);--comp-meter-bar-border-radius:var(--tct-meter-bar-border-radius, calc(var(--comp-meter-bar-height) / 2));--comp-meter-dot-height:var(--tct-meter-dot-size, var(--tct-meter-bar-height, 10px));--comp-meter-dot-border-style:var(--tct-meter-dot-border-style, solid);--comp-meter-dot-border-width:var(--tct-meter-dot-border-width, calc(0.2 * var(--comp-meter-bar-height)));--comp-meter-dot-border-color:var(--tct-meter-dot-border-color, #FFFFFF);--comp-meter-dot-border-radius:var(--tct-meter-dot-border-radius, 50%);--comp-meter-dot-background-color:var(--tct-meter-dot-background-color, var(--t-primary, #6A4A9E));--comp-meter-tick-height:var(--tct-meter-ticket-height, calc(0.4 * var(--comp-meter-bar-height)));--comp-meter-bar-shadow:var(--tct-meter-bar-shadow);--comp-meter-bar-border:var(--tct-meter-bar-border)}:host([animated]:not([animated=false])) .meter-container{--comp-meter-bar-transition:var(--tct-meter-bar-transition, width 0.2s ease-in-out);--comp-meter-dot-transition:var(--tct-meter-dot-transition, left 0.2s ease-in-out)}:host([dotted]:not([dotted=false])) .meter-container{--comp-meter-dot-visibility:visible}:host([segments]:not([segments=\"\"]):not([segments=\"0\"]):not([segments=\"1\"])) .meter-container{--comp-meter-tick-visibility:visible}.meter-container .label{font-size:var(--tct-meter-label-font-size, 14px);font-weight:var(--tct-meter-label-font-weight, 600);color:var(--tct-meter-label-color, var(--t-text, #4D4D4D));margin:var(--tct-meter-label-margin, 5px 0)}.meter-container .description{font-size:var(--tct-meter-description-font-size, 14px);font-weight:var(--tct-meter-description-font-weight, 400);color:var(--tct-meter-description-color, #000000);line-height:var(--tct-meter-description-line-height, 21px);margin:var(--tct-meter-description-margin, 5px 0)}.meter-container .bar-container{position:relative}.meter-container .bar-container .bars{position:relative;top:0;left:0;width:100%;height:var(--comp-meter-bar-height);background-color:var(--tct-meter-bar-background-color, var(--t-primary-completed2, #E0DEEF));margin:var(--tct-meter-bar-margin, 5px 0);border:var(--comp-meter-bar-border);border-radius:var(--comp-meter-bar-border-radius);box-shadow:var(--comp-meter-bar-shadow)}.meter-container .bar-container .bars .completed-bar,.meter-container .bar-container .bars .suggested-bar,.meter-container .bar-container .bars .tick-bar{height:100%;position:absolute;top:0;left:0;border-radius:var(--comp-meter-bar-border-radius);transition:var(--comp-meter-bar-transition, none)}.meter-container .bar-container .bars .completed-bar{background-color:var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E));min-width:calc(var(--comp-meter-bar-height));width:0%;z-index:2}.meter-container .bar-container .bars .suggested-bar{background-color:var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3));min-width:calc(var(--comp-meter-bar-height));width:0%;z-index:1}.meter-container .bar-container .bars .tick-bar{visibility:var(--comp-meter-tick-visibility, hidden);width:100%;z-index:3;display:flex;justify-content:space-evenly;align-items:center}.meter-container .bar-container .bars .tick-bar .tick{width:100%;border-right-width:var(--tct-meter-tick-width, 1px);border-right-color:var(--tct-meter-tick-color, var(--t-primary-l5, #B4A0D3));border-right-style:solid;height:var(--comp-meter-tick-height)}.meter-container .bar-container .bars .tick-bar .tick.tick-right{border-right-color:var(--tct-meter-tick-right-color, var(--t-a11y-gray-color-AA, #949494))}.meter-container .bar-container .bars .tick-bar .tick:last-child{border-color:transparent}.meter-container .bar-container .dot-container{position:absolute;line-height:0;left:0;top:calc(50% - var(--comp-meter-dot-height) / 2 - var(--comp-meter-dot-border-width));transform:translateX(-50%);transition:var(--comp-meter-dot-transition, none);z-index:4}.meter-container .bar-container .dot-container .dot{visibility:var(--comp-meter-dot-visibility, hidden);width:calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));height:calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));background-color:var(--comp-meter-dot-background-color);border-style:var(--comp-meter-dot-border-style);border-width:var(--comp-meter-dot-border-width);border-color:var(--comp-meter-dot-border-color);border-radius:var(--comp-meter-dot-border-radius);box-shadow:var(--tct-meter-dot-box-shadow, var(--app-shadow-1))}.meter-container .bar-container .dot-container.suggested .dot{visibility:hidden}.meter-container .legends{display:flex;flex-direction:row;justify-content:space-between;color:var(--tct-meter-legend-label-color, var(--t-textA, #767676));font-weight:var(--tct-meter-legend-font-weight, 400);margin:var(--tct-meter-legend-margin, 5px 0)}.meter-container .legends .left{display:flex;flex-direction:row}.meter-container .legends .left .completed,.meter-container .legends .left .suggested{display:flex;flex-direction:row;align-items:center}.meter-container .legends .left .completed .dot,.meter-container .legends .left .suggested .dot{margin-right:var(--tct-meter-dot-gap, 5px);border-radius:var(--tct-meter-legend-dot-radius, var(--app-border-radius-3, 5px));width:var(--tct-meter-legend-bar-width, 7px);height:var(--tct-meter-legend-bar-height, 7px)}.meter-container .legends .left .completed .legend-label,.meter-container .legends .left .suggested .legend-label{font-size:inherit}.meter-container .legends .left .completed{margin-right:var(--tct-meter-legend-gap, 20px)}.meter-container .legends .left .completed .dot{background-color:var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E))}.meter-container .legends .left .suggested .dot{background-color:var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3))}.meter-container .legends .right .max{font-size:inherit;text-align:right}";
 
@@ -115,7 +115,7 @@ const Q2Meter = class {
     }
     render() {
         const [completed, suggested] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
-        return (index.h("div", { key: '656e8a53bbaf26529db53e535efcad7a22b9ee01', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (index.h("div", { key: '25d53f9a1d387d4b839507239454484d9678061f', class: "label", "aria-label": index$1.loc(this.label) }, index$1.loc(this.label))), this.description && (index.h("div", { key: 'd5786b4e65ab5b262b82f107bb310ca27b34c4ed', class: "description", "aria-label": index$1.loc(this.description) }, index$1.loc(this.description))), this.renderBar(completed, suggested), index.h("div", { key: '015cc474c3113ff248982d64656218a79744e09e', class: "legends" }, index.h("div", { key: '1af88cd2386058a8c20f3a82d0e40ffafffc4c38', class: "left" }, this.completedValue || this.completedLabel ? (index.h("div", { class: "completed" }, index.h("div", { class: "dot" }), index.h("div", { class: "legend-label" }, this.completedValue, " ", index$1.loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (index.h("div", { class: "suggested" }, index.h("div", { class: "dot" }), index.h("div", { class: "legend-label" }, this.suggestedValue, " ", index$1.loc(this.suggestedLabel)))) : ('')), index.h("div", { key: '22eb4ec7a86114f3f109e4adfb0acbcea9509de8', class: "right" }, index.h("div", { key: 'b9384865d0ef8c81569243b40ccf320efcd208ec', class: "max" }, this.maxValue, " ", index$1.loc(this.maxLabel))))));
+        return (index.h("div", { key: '108bd1850c02f17867f51e2a29657e579df01c33', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (index.h("div", { key: 'baae6e4a58b2fac21ef6099d99402e4cffb03d32', class: "label", "aria-label": index$1.loc(this.label) }, index$1.loc(this.label))), this.description && (index.h("div", { key: 'dcf9cdf337a50fa4cf145985fbab513114b38019', class: "description", "aria-label": index$1.loc(this.description) }, index$1.loc(this.description))), this.renderBar(completed, suggested), index.h("div", { key: 'f6214a063456893f3c6f2f014a9ba687ad5b0a81', class: "legends" }, index.h("div", { key: '1c624e80a27edb22cf39c4ca6345e07c945e48e5', class: "left" }, this.completedValue || this.completedLabel ? (index.h("div", { class: "completed" }, index.h("div", { class: "dot" }), index.h("div", { class: "legend-label" }, this.completedValue, " ", index$1.loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (index.h("div", { class: "suggested" }, index.h("div", { class: "dot" }), index.h("div", { class: "legend-label" }, this.suggestedValue, " ", index$1.loc(this.suggestedLabel)))) : ('')), index.h("div", { key: '63345961e4992b545d617ea5e1b423729fab94f5', class: "right" }, index.h("div", { key: '897ff512bf5037b17c51c70a5bf901cf516dbccc', class: "max" }, this.maxValue, " ", index$1.loc(this.maxLabel))))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-meter.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-meter.entry.cjs.js","mappings":"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","names":["loc","h"],"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.entry.cjs.js","mappings":"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","names":["loc","h"],"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}