q2-tecton-elements 1.67.2 → 1.68.0

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

@@ -1 +1 @@
-{"version":3,"names":["q2LinkCss","Q2Link","constructor","hostRef","this","disabled","ellipsis","href","variant","clickLink","anchor","hostElement","shadowRoot","querySelector","click","classes","list","push","join","composedAriaLabel","baseText","label","textContent","trim","undefined","_tooltip","handleClick","event","stopPropagation","customEvent","tctClick","emit","target","referrerpolicy","defaultPrevented","preventDefault","render","labelClasses","h","class","onClick","e","rel","referrerPolicy","title","tctTitle","iconType","type","q2ListCss","Q2List","scheduledAfterRender","renderTrigger","onMutationObserved","Array","from","children","forEach","child","tagName","role","disconnectedCallback","_a","mutationObserver","disconnect","componentDidLoad","MutationObserver","observer","observe","childList","subtree","componentDidRender","fn","hasFilterSlot","hasSlotContent","hasLabelContent","headerClasses","listClasses","key","ref","el","listElement","name"],"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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2LinkCss","Q2Link","constructor","hostRef","this","disabled","ellipsis","href","variant","clickLink","anchor","hostElement","shadowRoot","querySelector","click","classes","list","push","join","composedAriaLabel","baseText","label","textContent","trim","undefined","_tooltip","handleClick","event","stopPropagation","customEvent","tctClick","emit","target","referrerpolicy","defaultPrevented","preventDefault","render","labelClasses","h","class","onClick","e","rel","referrerPolicy","title","tctTitle","iconType","type","q2ListCss","Q2List","scheduledAfterRender","renderTrigger","onMutationObserved","Array","from","children","forEach","child","tagName","role","disconnectedCallback","_a","mutationObserver","disconnect","componentDidLoad","MutationObserver","observer","observe","childList","subtree","componentDidRender","fn","hasFilterSlot","hasSlotContent","hasLabelContent","headerClasses","listClasses","key","ref","el","listElement","name"],"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"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import { r as t, g as s } from "./index-CGkHOjh1.js";
 
-import { l as i } from "./index-C4PILj1_.js";
+import { l as i } from "./index-C5gj0T_3.js";
 
 const e = class {
   constructor(s) {

package/dist/q2-tecton-elements/q2-message.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-message.entry.esm.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":["checkIfFirefox"],"mappings":";;;AAAA,MAAM,YAAY,GAAG,6kKAA6kK;;MCSrlK,SAAS,GAAA,MAAA;AADtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAkBI,QAAA,IAAU,CAAA,UAAA,GAA2B,UAAU;;AAI/C,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;;AAI5B,QAAA,IAAI,CAAA,IAAA,GAAwD,MAAM;AAkGrE;;;IA7FG,gBAAgB,GAAA;AACZ,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;AAClD,QAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAc,UAAU,CAAC,CAAC,KAAK,EAAE;;;;AAM9E;;AAEG;AAEH,IAAA,MAAM,OAAO,GAAA;AACT,QAAA,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI;AAC1B,QAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa;AACxC,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,SAAS,CAAC,MAAK;AACX,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;AAC9B,SAAC,CAAC;;;;AAMN,IAAA,IAAI,SAAS,GAAA;QACT,OAAOA,SAAc,EAAE;;AAG3B,IAAA,WAAW,CAAC,IAAY,EAAA;AACpB,QAAA,MAAM,OAAO,GAAG;AACZ,YAAA,OAAO,EAAE,gBAAgB;AACzB,YAAA,OAAO,EAAE,gBAAgB;AACzB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,IAAI,EAAE,aAAa;SACtB;QAED,MAAM,QAAQ,GAAW,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,IAAI;AAEtD,QAAA,QACI,CACI,CAAA,SAAA,EAAA,EAAA,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,cAAc,EACtB,CAAA;;;;IAOV,MAAM,GAAA;AACF,QAAA,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI;AAC1B,QAAA,MAAM,wBAAwB,GAAG,SAAS,IAAI,IAAI,CAAC,aAAa;QAChE,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa;AAC1D,QAAA,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI;QAC5B,MAAM,YAAY,GAAW,GAAG,CAAC,+BAA+B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAA,CAAE,CAAC;AAEjG,QAAA,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,EAC5B,WAAA,EAAA,WAAW,GAAG,SAAS,GAAG,WAAW,EAAA,aAAA,EACnC,WAAW,GAAG,SAAS,GAAG,MAAM,mBAC9B,WAAW,IAAI,wBAAwB,GAAG,SAAS,GAAG,KAAK,EAAA,SAAA,EAClE,kBAAkB,EAAA,EAE1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,KAAK,EAAA,SAAA,EACH,KAAK,EACV,CAAA,EACN,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EACjE,iBAAiB,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,IAAI,EAAO,CAAA,EAC5C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAAE,YAAY,CAAO,EAClD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,iBAAiB,EAAA,aAAA,EACV,wBAAwB,GAAG,MAAM,GAAG,SAAS,EAAA,EAE1D,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACJ;;;;;;;;"}
+{"version":3,"file":"q2-message.entry.esm.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":["checkIfFirefox"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
-import { r as a, h as e, g as t } from "./index-CGkHOjh1.js";
+import { r as a, h as e, g as s } from "./index-CGkHOjh1.js";
 
-import { o as s, i as o, n as r, m as i, l as c } from "./index-C4PILj1_.js";
+import { o as t, i as r, n as o, p as c, l as i } from "./index-C5gj0T_3.js";
 
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{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 n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{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 p = class {
   constructor(e) {
@@ -16,12 +16,12 @@ const p = class {
   // #endregion
   // #region Component Lifecycle Events
   componentDidLoad() {
-    s(this.hostElement);
+    t(this.hostElement);
   }
   // #endregion
   // #region Listeners
   delegateFocus(a) {
-    if (!o(a, this.hostElement)) return;
+    if (!r(a, this.hostElement)) return;
     this.hostElement.shadowRoot.querySelector(".message").focus();
   }
   // #endregion
@@ -33,26 +33,26 @@ const p = class {
     const {isFirefox: a} = this;
     this.presentToggle = !this.presentToggle;
     if (!a) return;
-    r((() => {
+    o((() => {
       this.presentToggle = false;
     }));
   }
   // #endregion
   // #region Local Methods
   get isFirefox() {
-    return i();
+    return c();
   }
   messageIcon(a) {
-    const t = {
+    const s = {
       success: "success-filled",
       warning: "warning-filled",
       danger: "error-filled",
       error: "error-filled",
       info: "info-filled"
     };
-    const s = t[a] || t.info;
+    const t = s[a] || s.info;
     return e("q2-icon", {
-      type: s,
+      type: t,
       class: "message-icon"
     });
   }
@@ -60,39 +60,39 @@ const p = class {
   // #region Render Methods
   render() {
     const {isFirefox: a} = this;
-    const t = a && this.presentToggle;
-    const s = !a && this.presentToggle;
-    const {description: o} = this;
-    const r = c(`tecton.element.message.type.${this.type ? this.type : "info"}`);
+    const s = a && this.presentToggle;
+    const t = !a && this.presentToggle;
+    const {description: r} = this;
+    const o = i(`tecton.element.message.type.${this.type ? this.type : "info"}`);
     return e("div", {
-      key: "b65f9feaee320f96a3f745eb4231510eab67aba6",
+      key: "e6d294a3ad21e83f33d2e0202e74b66b5d61984f",
       tabindex: "-1",
       class: "message",
-      role: o ? undefined : "alert",
-      "aria-live": o ? undefined : "assertive",
-      "aria-atomic": o ? undefined : "true",
-      "aria-relevant": o && t ? undefined : "all",
+      role: r ? undefined : "alert",
+      "aria-live": r ? undefined : "assertive",
+      "aria-atomic": r ? undefined : "true",
+      "aria-relevant": r && s ? undefined : "all",
       "test-id": "messageContainer"
     }, e("div", {
-      key: "66b9440bf994341ff365766a1241f56556fffe57",
+      key: "c8cad3b93d2d501513d951b0850bf920cfdd2dc8",
       class: "bar",
       "test-id": "bar"
-    }), this.appearance === "standard" ? this.messageIcon(this.type) : "", s && e("div", {
-      key: "47269ca27bc9c952249f574ab98e45d026125228",
+    }), this.appearance === "standard" ? this.messageIcon(this.type) : "", t && e("div", {
+      key: "48222cb290731c76a3f68b48c01fcaff5b0fea2a",
       class: "sr"
     }), e("div", {
-      key: "63a91696622f38741d5d403fe81262e2d5458328",
+      key: "2f67a189f90d66ec9478926984cb4e3f97808658",
       class: "sr message-label"
-    }, r), e("div", {
-      key: "544cecc85e943f0156b63489cc78a42bec02f7c9",
+    }, o), e("div", {
+      key: "f41dd21efa6c822a436328bf4bbf756eec8714fd",
       class: "message-content",
-      "aria-hidden": t ? "true" : undefined
+      "aria-hidden": s ? "true" : undefined
     }, e("slot", {
-      key: "36ff0e64df72018818fd8452e847c522ea4c4039"
+      key: "5668fbb085bfc8403062710a60238ba71c05e7ab"
     })));
   }
   get hostElement() {
-    return t(this);
+    return s(this);
   }
 };
 

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

@@ -1 +1 @@
-{"version":3,"names":["q2MessageCss","Q2Message","constructor","hostRef","this","appearance","description","type","componentDidLoad","overrideFocus","hostElement","delegateFocus","event","isEventFromElement","shadowRoot","querySelector","focus","present","isFirefox","presentToggle","nextPaint","checkIfFirefox","messageIcon","iconMap","success","warning","danger","error","info","iconType","h","class","render","addAriaHiddenForAriaLive","addDivForAriaLive","messageLabel","loc","key","tabindex","role","undefined"],"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"],"mappings":";;;;AAAA,MAAMA,IAAe;;MCSRC,IAAS;EADtB,WAAAC,CAAAC;;;;oIAkBIC,KAAUC,aAA2B;0IAIrCD,KAAWE,cAAY;4DAIvBF,KAAIG,OAAwD;AAkG/D;;;EA7FG,gBAAAC;IACIC,EAAcL,KAAKM;;;;EAOvB,aAAAC,CAAcC;IACV,KAAKC,EAAmBD,GAAOR,KAAKM,cAAc;IAClDN,KAAKM,YAAYI,WAAWC,cAA2B,YAAYC;;;;;;;EAUvE,aAAMC;IACF,OAAMC,WAAEA,KAAcd;IACtBA,KAAKe,iBAAiBf,KAAKe;IAC3B,KAAKD,GAAW;IAChBE,GAAU;MACNhB,KAAKe,gBAAgB;AAAK;;;;EAOlC,aAAID;IACA,OAAOG;;EAGX,WAAAC,CAAYf;IACR,MAAMgB,IAAU;MACZC,SAAS;MACTC,SAAS;MACTC,QAAQ;MACRC,OAAO;MACPC,MAAM;;IAGV,MAAMC,IAAmBN,EAAQhB,MAASgB,EAAQK;IAElD,OACIE,EACI;MAAAvB,MAAMsB;MACNE,OAAM;;;;;EAQlB,MAAAC;IACI,OAAMd,WAAEA,KAAcd;IACtB,MAAM6B,IAA2Bf,KAAad,KAAKe;IACnD,MAAMe,KAAqBhB,KAAad,KAAKe;IAC7C,OAAMb,aAAEA,KAAgBF;IACxB,MAAM+B,IAAuBC,EAAI,+BAA+BhC,KAAKG,OAAOH,KAAKG,OAAO;IAExF,OACIuB,EACI;MAAAO,KAAA;MAAAC,UAAS;MACTP,OAAM;MACNQ,MAAMjC,IAAckC,YAAY;MACrB,aAAAlC,IAAckC,YAAY;MAAW,eACnClC,IAAckC,YAAY;MAAM,iBAC9BlC,KAAe2B,IAA2BO,YAAY;MAAK,WAClE;OAERV,EAAA;MAAAO,KAAA;MACIN,OAAM;MAAK,WACH;QAEX3B,KAAKC,eAAe,aAAaD,KAAKkB,YAAYlB,KAAKG,QAAQ,IAC/D2B,KAAqBJ,EAAA;MAAAO,KAAA;MAAKN,OAAM;QACjCD,EAAA;MAAAO,KAAA;MAAKN,OAAM;OAAoBI,IAC/BL,EAAA;MAAAO,KAAA;MACIN,OAAM;MAAiB,eACVE,IAA2B,SAASO;OAEjDV,EAAQ;MAAAO,KAAA","ignoreList":[]}
+{"version":3,"names":["q2MessageCss","Q2Message","constructor","hostRef","this","appearance","description","type","componentDidLoad","overrideFocus","hostElement","delegateFocus","event","isEventFromElement","shadowRoot","querySelector","focus","present","isFirefox","presentToggle","nextPaint","checkIfFirefox","messageIcon","iconMap","success","warning","danger","error","info","iconType","h","class","render","addAriaHiddenForAriaLive","addDivForAriaLive","messageLabel","loc","key","tabindex","role","undefined"],"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"],"mappings":";;;;AAAA,MAAMA,IAAe;;MCSRC,IAAS;EADtB,WAAAC,CAAAC;;;;oIAkBIC,KAAUC,aAA2B;0IAIrCD,KAAWE,cAAY;4DAIvBF,KAAIG,OAAwD;AAkG/D;;;EA7FG,gBAAAC;IACIC,EAAcL,KAAKM;;;;EAOvB,aAAAC,CAAcC;IACV,KAAKC,EAAmBD,GAAOR,KAAKM,cAAc;IAClDN,KAAKM,YAAYI,WAAWC,cAA2B,YAAYC;;;;;;;EAUvE,aAAMC;IACF,OAAMC,WAAEA,KAAcd;IACtBA,KAAKe,iBAAiBf,KAAKe;IAC3B,KAAKD,GAAW;IAChBE,GAAU;MACNhB,KAAKe,gBAAgB;AAAK;;;;EAOlC,aAAID;IACA,OAAOG;;EAGX,WAAAC,CAAYf;IACR,MAAMgB,IAAU;MACZC,SAAS;MACTC,SAAS;MACTC,QAAQ;MACRC,OAAO;MACPC,MAAM;;IAGV,MAAMC,IAAmBN,EAAQhB,MAASgB,EAAQK;IAElD,OACIE,EACI;MAAAvB,MAAMsB;MACNE,OAAM;;;;;EAQlB,MAAAC;IACI,OAAMd,WAAEA,KAAcd;IACtB,MAAM6B,IAA2Bf,KAAad,KAAKe;IACnD,MAAMe,KAAqBhB,KAAad,KAAKe;IAC7C,OAAMb,aAAEA,KAAgBF;IACxB,MAAM+B,IAAuBC,EAAI,+BAA+BhC,KAAKG,OAAOH,KAAKG,OAAO;IAExF,OACIuB,EACI;MAAAO,KAAA;MAAAC,UAAS;MACTP,OAAM;MACNQ,MAAMjC,IAAckC,YAAY;MACrB,aAAAlC,IAAckC,YAAY;MAAW,eACnClC,IAAckC,YAAY;MAAM,iBAC9BlC,KAAe2B,IAA2BO,YAAY;MAAK,WAClE;OAERV,EAAA;MAAAO,KAAA;MACIN,OAAM;MAAK,WACH;QAEX3B,KAAKC,eAAe,aAAaD,KAAKkB,YAAYlB,KAAKG,QAAQ,IAC/D2B,KAAqBJ,EAAA;MAAAO,KAAA;MAAKN,OAAM;QACjCD,EAAA;MAAAO,KAAA;MAAKN,OAAM;OAAoBI,IAC/BL,EAAA;MAAAO,KAAA;MACIN,OAAM;MAAiB,eACVE,IAA2B,SAASO;OAEjDV,EAAQ;MAAAO,KAAA","ignoreList":[]}

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

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

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

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