q2-tecton-elements 1.37.0 → 1.38.0

package/dist/cjs/q2-action-sheet.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-action-sheet.entry.cjs.js","mappings":"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","names":["h","Fragment","loc","waitForNextPaint"],"sources":["./src/components/q2-action-sheet/styles.scss?tag=q2-action-sheet&encapsulation=shadow","./src/components/q2-action-sheet/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-action-sheet-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;\n    --comp-border-radius: #{var-list(--tct-action-sheet-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-action-sheet-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-action-sheet-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-action-sheet-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-action-sheet-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-action-sheet-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-action-sheet-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-action-sheet-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-action-sheet-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-action-sheet-max-width, 400px)};\n    --comp-dialog-max-height: #{var-list(--tct-action-sheet-max-height, --comp-action-sheet-computed-max-height, 75vh)};\n    --comp-dialog-min-height: #{var-list(--tct-action-sheet-min-height, --comp-action-sheet-computed-min-height, 20vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-action-sheet-box-shadow,\n            --app-shadow-2,\n            unquote('0 3px 6px rgba(0, 0, 0, 0.3)')\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    min-height: var(--comp-dialog-min-height);\n    max-height: var(--comp-dialog-max-height);\n\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-action-sheet-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        &.is-opening,\n        &.is-open {\n            transform: translateY(-100%);\n\n            @media screen and (min-width: 1200px) {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n\n    @media screen and (min-width: 1200px) {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 0;\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n}\n\n.interior {\n    display: grid;\n    grid-template-rows: 44px 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    // Scroll overlays\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: grid;\n    grid-template-columns: var(--comp-close-button-size) 1fr var(--comp-close-button-size);\n    grid-template-areas: '. title close';\n    gap: var(--comp-dialog-gap);\n\n    .title {\n        grid-area: title;\n        text-align: center;\n        line-height: var(--comp-header-height);\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n\nfooter {\n    display: flex;\n    justify-content: end;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Fragment,\n    Element,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/utility/action-sheet';\nimport { loc, waitForNextPaint } from 'src/utils';\n\n@Component({\n    tag: 'q2-action-sheet',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2ActionSheet implements ComponentInterface {\n    @Prop({ mutable: true }) data: ActionSheetData;\n    @Prop() title: string;\n    @Prop() hideClose: boolean;\n\n    @State() isScrollable: boolean = false;\n    @State() renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n    dialogElement: HTMLDialogElement;\n    contentElement: HTMLDivElement;\n    optionListElement: HTMLQ2OptionListElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n    minHeight: number = 0.2;\n    maxHeight: number = 0.75;\n\n    @Element() hostElement: HTMLElement;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    /// Helpers ///\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (option.innerHTML) optionElement.innerHTML = option.innerHTML;\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    /// Event Handlers ///\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    /// Events ///\n    @Event() close: EventEmitter<ActionSheetListCloseData>;\n    @Event({ bubbles: false }) ready: EventEmitter;\n\n    /// Methods ///\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        this.close.emit(data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    /// DOM ///\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps } = data;\n\n        return (\n            <Fragment>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n            </Fragment>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-action-sheet.entry.cjs.js","mappings":"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","names":["h","Fragment","loc","waitForNextPaint"],"sources":["./src/components/q2-action-sheet/styles.scss?tag=q2-action-sheet&encapsulation=shadow","./src/components/q2-action-sheet/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n@keyframes showBackdrop {\n    from {\n        opacity: 0;\n    }\n}\n\n@keyframes hideBackdrop {\n    to {\n        opacity: 0;\n    }\n}\n\n// CSS variables don't inherit into the ::backdrop pseudo-element\n$animation-tween: #{var-list(--tct-action-sheet-tween, --app-tween-2, unquote('0.4s ease'))};\n\ndialog {\n    --comp-border-radius-default: var(--app-scale-3x, 15px) var(--app-scale-3x, 15px) 0 0;\n    --comp-border-radius: #{var-list(--tct-action-sheet-border-radius, --comp-border-radius-default)};\n    --comp-desktop-border-radius: #{var-list(--tct-action-sheet-border-radius, --app-scale-3x, 15px)};\n    --comp-close-button-size: #{var-list(--tct-action-sheet-close-button-size, --t-a11y-min-size, 44px)};\n    --comp-header-height: #{var-list(--tct-action-sheet-header-height, --t-a11y-min-size, 44px)};\n    --comp-dialog-background: #{var-list(--tct-action-sheet-background, --t-base, #ffffff)};\n    --comp-dialog-color: #{var-list(--tct-action-sheet-color, --t-text, #4d4d4d)};\n    --comp-dialog-padding: #{var-list(--tct-action-sheet-padding, --app-scale-3x, 15px)};\n    --comp-content-gradient-height: #{var-list(--tct-action-sheet-content-gradient-height, --app-scale-2x, 10px)};\n    --comp-dialog-gap: #{var-list(--tct-action-sheet-gap, --app-scale-2x, 10px)};\n    --comp-dialog-max-width: #{var-list(--tct-action-sheet-max-width, 400px)};\n    --comp-dialog-max-height: #{var-list(--tct-action-sheet-max-height, --comp-action-sheet-computed-max-height, 75vh)};\n    --comp-dialog-min-height: #{var-list(--tct-action-sheet-min-height, --comp-action-sheet-computed-min-height, 20vh)};\n    --comp-dialog-box-shadow: #{var-list(\n            --tct-action-sheet-box-shadow,\n            --app-shadow-2,\n            unquote('0 3px 6px rgba(0, 0, 0, 0.3)')\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    min-height: var(--comp-dialog-min-height);\n    max-height: var(--comp-dialog-max-height);\n\n    &::backdrop {\n        opacity: 0;\n        background: var-list(--tct-action-sheet-backdrop-background, --t-top-a2, rgba(13, 13, 13, 0.6));\n    }\n\n    &[open] {\n        &.is-opening,\n        &.is-open {\n            transform: translateY(-100%);\n\n            @media screen and (min-width: 1200px) {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            &::backdrop {\n                opacity: 1;\n                animation: showBackdrop $animation-tween;\n            }\n        }\n\n        &.is-closing {\n            transform: translateY(10%);\n\n            &::backdrop {\n                animation: hideBackdrop $animation-tween;\n            }\n        }\n    }\n\n    @media screen and (min-width: 1200px) {\n        border-radius: var(--comp-desktop-border-radius);\n        top: 0px;\n        bottom: 0px;\n        height: fit-content;\n        transform: translateY(10%);\n        opacity: 0;\n    }\n}\n\n.content {\n    overflow-y: auto;\n    @include tiny-scrollbar();\n}\n\n.interior {\n    display: grid;\n    grid-template-rows: 44px 1fr auto;\n    gap: var(--comp-dialog-gap);\n    max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));\n    padding: var(--comp-dialog-padding);\n\n    // Scroll overlays\n    &.is-list {\n        header,\n        footer {\n            position: relative;\n\n            &:before {\n                content: '';\n                display: block;\n                position: absolute;\n                left: 0;\n                height: var(--comp-content-gradient-height);\n                width: 100%;\n                z-index: 1;\n            }\n        }\n    }\n}\n\nheader {\n    display: grid;\n    grid-template-columns: var(--comp-close-button-size) 1fr var(--comp-close-button-size);\n    grid-template-areas: '. title close';\n    gap: var(--comp-dialog-gap);\n\n    .title {\n        grid-area: title;\n        text-align: center;\n        line-height: var(--comp-header-height);\n    }\n\n    .btn-close {\n        grid-area: close;\n        width: var(--comp-close-button-size);\n        height: var(--comp-close-button-size);\n    }\n}\n\nfooter {\n    display: flex;\n    justify-content: end;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Method,\n    h,\n    State,\n    Event,\n    EventEmitter,\n    Fragment,\n    Element,\n} from '@stencil/core';\nimport { Q2OptionListCustomEvent } from 'src/components';\nimport {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/utility/action-sheet';\nimport { loc, waitForNextPaint } from 'src/utils';\n\n@Component({\n    tag: 'q2-action-sheet',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2ActionSheet implements ComponentInterface {\n    @Prop({ mutable: true }) data: ActionSheetData;\n    @Prop() title: string;\n    @Prop() hideClose: boolean;\n\n    @State() isScrollable: boolean = false;\n    @State() renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n    dialogElement: HTMLDialogElement;\n    contentElement: HTMLDivElement;\n    optionListElement: HTMLQ2OptionListElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\n    minHeight: number = 0.2;\n    maxHeight: number = 0.75;\n\n    @Element() hostElement: HTMLElement;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    /// Helpers ///\n    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\n        }\n    }\n\n    focusContent() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            const { event } = data;\n            if (event instanceof KeyboardEvent) {\n                this.optionListElement.handleExternalKeydown(event);\n            } else {\n                this.optionListElement.focus();\n            }\n        }\n    }\n\n    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (option.innerHTML) optionElement.innerHTML = option.innerHTML;\n        Object.entries(attributes).forEach(([key, value]) => {\n            if (value === undefined) return;\n            if (typeof value === 'boolean') {\n                if (value) optionElement.setAttribute(key, '');\n            } else {\n                optionElement.setAttribute(key, value);\n            }\n        });\n        return optionElement;\n    };\n\n    generateOptgroup = (option: ActionSheetListOptgroup) => {\n        const optgroupElement = document.createElement('q2-optgroup');\n        if (option.label) optgroupElement.setAttribute('label', option.label);\n        if (option.disabled) optgroupElement.setAttribute('disabled', '');\n        if (!!option.options.length)\n            option.options.forEach(opt => optgroupElement.appendChild(this.generateOption(opt)));\n        return optgroupElement;\n    };\n\n    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\n    }\n\n    showPreHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n            data.options.forEach(option => {\n                this.hostElement.appendChild(\n                    'options' in option ? this.generateOptgroup(option) : this.generateOption(option)\n                );\n            });\n        }\n    }\n\n    updateDialogMinMaxHeight() {\n        const windowHeight = window.innerHeight;\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-min-height',\n            `${Math.floor(windowHeight * this.minHeight)}px`\n        );\n        this.dialogElement.style.setProperty(\n            '--comp-action-sheet-computed-max-height',\n            `${Math.floor(windowHeight * this.maxHeight)}px`\n        );\n    }\n\n    /// Event Handlers ///\n    onClick = (event: MouseEvent) => {\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n\n        const isInContent = !!eventTarget.closest('.interior, q2-action-sheet');\n        if (isInContent) return;\n        this.onCancel(event);\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        const { initialSelectedOptions } = this;\n        this.hide({\n            value: initialSelectedOptions?.[0]?.value ?? '',\n            values: initialSelectedOptions,\n            type: 'cancel',\n        });\n    };\n\n    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListPopoverStateChange = (\n        event: Q2OptionListCustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>\n    ) => {\n        if (event.detail.open) return;\n\n        if (event.detail.action === 'close') {\n            this.onCancel(event);\n        } else {\n            this.onListDone();\n        }\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\n    };\n\n    /// Events ///\n    @Event() close: EventEmitter<ActionSheetListCloseData>;\n    @Event({ bubbles: false }) ready: EventEmitter;\n\n    /// Methods ///\n    @Method()\n    async hide(data: ActionSheetListCloseData = { value: '', values: [], type: 'confirm' }) {\n        this.close.emit(data);\n        this.renderStatus = 'is-closing';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n                this.data = undefined;\n                this.initialSelectedOptions = [];\n                this.selectedOptions = { values: [], value: '' };\n                this.hidePostHook();\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async show() {\n        this.showPreHook();\n        await waitForNextPaint();\n        this.updateDialogMinMaxHeight();\n        this.storeInitialValues();\n\n        if (this.dialogElement.open) return;\n\n        this.dialogElement.showModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n                this.focusContent();\n            },\n            { once: true }\n        );\n    }\n\n    /// DOM ///\n    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\n        );\n    };\n\n    renderMessage = ({ data }: { data: ActionSheetMessageData }) => {\n        return (\n            <q2-message type={data.type}>\n                {data.title && <h2>{data.title}</h2>}\n                {data.description && <p>{data.description}</p>}\n            </q2-message>\n        );\n    };\n\n    renderList = ({ data }: { data: ActionSheetListData }) => {\n        const { listProps } = data;\n\n        return (\n            <Fragment>\n                <div\n                    class=\"content\"\n                    ref={el => (this.contentElement = el)}\n                >\n                    <q2-option-list\n                        ref={el => (this.optionListElement = el)}\n                        multiple={listProps.multiple}\n                        noSelect={listProps.noSelect}\n                        onChange={this.onListChange}\n                        onPopoverState={this.onListPopoverStateChange}\n                        selectedOptions={listProps.selectedOptions}\n                    >\n                        <slot />\n                    </q2-option-list>\n                </div>\n                <footer>\n                    {listProps.multiple && (\n                        <q2-btn\n                            test-id=\"btnDone\"\n                            intent=\"workflow-primary\"\n                            onClick={this.onListDone}\n                        >\n                            {loc('tecton.element.actionSheet.done')}\n                        </q2-btn>\n                    )}\n                </footer>\n            </Fragment>\n        );\n    };\n\n    render() {\n        const { data } = this;\n        const showHeader = data?.title || this.title || !this.hideClose;\n        const renderStatus = this.renderStatus || '';\n\n        let RenderContent = null;\n        switch (data?.appearance) {\n            case 'message':\n                RenderContent = this.renderMessage;\n                break;\n\n            case 'list':\n                RenderContent = this.renderList;\n                break;\n\n            default:\n                RenderContent = this.renderSlot;\n                break;\n        }\n        const appearance = data?.appearance || 'slot';\n        const interiorClasses = `interior is-${appearance}`;\n\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {showHeader && (\n                        <header>\n                            <div class=\"title\">{data?.title || this.title}</div>\n                            {!this.hideClose && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.actionSheet.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    {this.data?.description && <p>{data.description}</p>}\n                    {RenderContent && <RenderContent data={this.data} />}\n                </div>\n            </dialog>\n        );\n    }\n}\n"],"version":3}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c2597758.js');
 const icons = require('./icons-2b89a7d5.js');
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}.avatar-img,.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)))}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 48px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));display:inline-flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--t-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--t-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));--tct-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill));color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.avatar-img,.avatar-img-default{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)))}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 48px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-border-radius, var(--tct-avatar-fallback-br, var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%))));background:var(--tct-avatar-fallback-background, var(--tct-avatar-fallback-bg, var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)))));display:inline-flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--t-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--t-icon-stroke-secondary:var(--tct-avatar-icon-stroke-secondary, var(--tct-avatar-fallback-stroke-secondary, currentcolor));--tct-icon-fill:var(--tct-avatar-icon-fill, var(--tct-avatar-fallback-fill));color:var(--tct-avatar-icon-color, var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff))));width:var(--tct-avatar-icon-size, var(--t-icon-size));height:var(--tct-avatar-icon-size, var(--t-icon-size))}";
 
 const Q2Avatar = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"q2-avatar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,wyFAAwyF;;MCQ7yF,QAAQ;;;IAejB,YAAO,GAAG;MACN,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;IAEF,WAAM,GAAG;MACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACxB,CAAC;;;;gBAjBqB,QAAQ;kBAEJ,KAAK;oBACH,KAAK;;EAIlC,YAAY;IACR,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACvB;EAUD,IAAI,YAAY;IACZ,OAAO,CAACA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAIA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAKA,WAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;GAClF;EAED,IAAI,gBAAgB;IAChB,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAChC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI;MAAE,OAAO;IAE/B,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,IAAI,QAAQ,EAAE;MACV,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KAClC;SAAM,IAAI,IAAI,EAAE;MACb,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;MAC9B,MAAM,cAAc,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MACnC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;MAChF,MAAM,IAAI,cAAc,CAAC;MACzB,IAAI,aAAa;QAAE,MAAM,IAAI,aAAa,CAAC;KAC9C;IAED,MAAM,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAAE,CAAC;IAE/B,OAAO,MAAM,CAAC;GACjB;EAED,MAAM;IACF,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IAClC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC/B,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAChF,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAEhF,QACIC,qBACK,OAAO,KACJA,iBACI,KAAK,EAAE,QAAQ,GAAG,YAAY,GAAG,oBAAoB,aAC7C,WAAW,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,GACtB,CACL,EACA,YAAY,KACTA,iBACI,OAAO,EAAC,aAAa,EACrB,mBAAmB,EAAC,eAAe,aAC3B,cAAc,EACtB,KAAK,EAAE,wBAAwB,gBAAgB,CAAC,MAAM,EAAE,gBAC5C,IAAI,CAAC,IAAI,iBACR,CAAC,IAAI,CAAC,IAAI,IAAI,MAAM,IAEjCA,kBACI,CAAC,EAAC,IAAI,EACN,CAAC,EAAC,IAAI,uBACY,SAAS,iBACf,QAAQ,iBACR,MAAM,IAEjB,gBAAgB,CACd,CACL,CACT,EACA,YAAY,KACTA,4BACY,cAAc,EACtB,KAAK,EAAC,UAAU,IAEhBA,qBAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAClC,CACT,CACC,EACR;GACL;;;;;;;;;;","names":["icons","h"],"sources":["./src/components/q2-avatar/styles.scss?tag=q2-avatar&encapsulation=shadow","./src/components/q2-avatar/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    object-fit: cover;\n    height: var-list(--tct-avatar-img-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-img-width, --tct-avatar-width, 44px);\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n}\n\n.size-1 {\n    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n}\n.size-2 {\n    --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n}\n.size-3 {\n    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n}\n.size-4 {\n    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: var-list(--tct-avatar-fallback-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-fallback-width, --tct-avatar-width, 44px);\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --t-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --t-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --t-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --t-icon-size);\n    height: var-list(--tct-avatar-icon-size, --t-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\nimport icons from '../q2-icon/icons';\n\n@Component({\n    tag: 'q2-avatar',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Avatar implements ComponentInterface {\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) initials: string;\n    @Prop({ reflect: true }) src: string;\n    @Prop() icon: string = 'person';\n\n    @State() badSrc: boolean = false;\n    @State() isLoaded: boolean = false;\n    @Element() el: HTMLElement;\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    get fallbackIcon() {\n        return (icons[this.icon] && icons[this.icon].markup()) || icons.error.markup();\n    }\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={isLoaded ? 'avatar-img' : 'avatar-img-default'}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-avatar.entry.cjs.js","mappings":"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","names":["icons","h"],"sources":["./src/components/q2-avatar/styles.scss?tag=q2-avatar&encapsulation=shadow","./src/components/q2-avatar/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    object-fit: cover;\n    height: var-list(--tct-avatar-img-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-img-width, --tct-avatar-width, 44px);\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n}\n\n.size-1 {\n    --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n}\n.size-2 {\n    --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n}\n.size-3 {\n    --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n}\n.size-4 {\n    --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n}\n\ntext {\n    fill: var-list(--tct-avatar-text-color, --tct-avatar-color, #ffffff);\n    font-weight: var(--tct-avatar-font-weight, 200);\n    font-size: var(--tct-avatar-font-size, 40px);\n}\n\n.fallback {\n    height: var-list(--tct-avatar-fallback-height, --tct-avatar-height, 44px);\n    width: var-list(--tct-avatar-fallback-width, --tct-avatar-width, 44px);\n    border-radius: var-list(\n        --tct-avatar-fallback-border-radius,\n        --tct-avatar-fallback-br,\n        --tct-avatar-img-border-radius,\n        --tct-avatar-img-br,\n        50%\n    );\n    background: var-list(\n        --tct-avatar-fallback-background,\n        --tct-avatar-fallback-bg,\n        --tct-avatar-background,\n        --tct-avatar-bg,\n        --t-gray-8,\n        #9e9e9e\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --t-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --t-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --t-icon-stroke-secondary: #{var-list(\n            --tct-avatar-icon-stroke-secondary,\n            --tct-avatar-fallback-stroke-secondary,\n            currentcolor\n        )};\n    --tct-icon-fill: #{var-list(--tct-avatar-icon-fill, --tct-avatar-fallback-fill)};\n    color: var-list(--tct-avatar-icon-color, --tct-avatar-fallback-color, --tct-avatar-color, --t-base, #ffffff);\n    width: var-list(--tct-avatar-icon-size, --t-icon-size);\n    height: var-list(--tct-avatar-icon-size, --t-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\nimport icons from '../q2-icon/icons';\n\n@Component({\n    tag: 'q2-avatar',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Avatar implements ComponentInterface {\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) initials: string;\n    @Prop({ reflect: true }) src: string;\n    @Prop() icon: string = 'person';\n\n    @State() badSrc: boolean = false;\n    @State() isLoaded: boolean = false;\n    @Element() el: HTMLElement;\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    get fallbackIcon() {\n        return (icons[this.icon] && icons[this.icon].markup()) || icons.error.markup();\n    }\n\n    get computedInitials() {\n        const { initials, name } = this;\n        if (!initials && !name) return;\n\n        let result = '';\n        if (initials) {\n            result = initials.substr(0, 4);\n        } else if (name) {\n            const parts = name.split(' ');\n            const firstCharacter = parts[0][0];\n            const lastCharacter = parts.length > 1 ? parts[parts.length - 1][0] : undefined;\n            result += firstCharacter;\n            if (lastCharacter) result += lastCharacter;\n        }\n\n        result = result?.toUpperCase();\n\n        return result;\n    }\n\n    render() {\n        const { computedInitials } = this;\n        const showImg = this.src && !this.badSrc;\n        const isLoaded = this.isLoaded;\n        const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);\n        const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);\n\n        return (\n            <div>\n                {showImg && (\n                    <img\n                        class={isLoaded ? 'avatar-img' : 'avatar-img-default'}\n                        test-id=\"userImage\"\n                        src={this.src}\n                        onError={this.onError}\n                        onLoad={this.onLoad}\n                        alt={this.name || ''}\n                    />\n                )}\n                {showInitials && (\n                    <svg\n                        viewBox=\"0 0 100 100\"\n                        preserveAspectRatio=\"xMidYMid meet\"\n                        test-id=\"userInitials\"\n                        class={`avatar-initials size-${computedInitials.length}`}\n                        aria-label={this.name}\n                        aria-hidden={!this.name && 'true'}\n                    >\n                        <text\n                            x=\"50\"\n                            y=\"50\"\n                            dominant-baseline=\"central\"\n                            text-anchor=\"middle\"\n                            aria-hidden=\"true\"\n                        >\n                            {computedInitials}\n                        </text>\n                    </svg>\n                )}\n                {showFallback && (\n                    <div\n                        test-id=\"fallbackIcon\"\n                        class=\"fallback\"\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}.badge-wrapper{--comp-badge-background:var(--tct-badge-background, var(--t-gray8, #61c4ff));--comp-badge-color:var(--tct-badge-color, var(--t-base, #ffffff));--comp-badge-border-style:var(--tct-badge-border-style, solid);--comp-badge-border-color:var(--tct-badge-border-color, var(--t-secondary-l1, #9a9898))}:host([status=info]) .badge-wrapper{--comp-badge-background:var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));--comp-badge-color:var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff));--comp-badge-border-color:var(--tct-badge-info-border-color, var(--const-stoplight-info-l1, #3a9bd6))}:host([status=alert]) .badge-wrapper{--comp-badge-background:var(--tct-badge-alert-background, var(--const-stoplight-alert, #c30000));--comp-badge-color:var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff));--comp-badge-border-color:var(--tct-badge-alert-border-color, var(--const-stoplight-alert-l1, #e42929))}:host([status=warning]) .badge-wrapper{--comp-badge-background:var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));--comp-badge-color:var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #423535));--comp-badge-border-color:var(--tct-badge-warning-border-color, var(--const-stoplight-warning-l1, #f9ce4c))}:host([status=success]) .badge-wrapper{--comp-badge-background:var(--tct-badge-success-background, var(--const-stoplight-success, #57fc45));--comp-badge-color:var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff));--comp-badge-border-color:var(--tct-badge-success-border-color, var(--const-stoplight-success-l1, #2eaa21))}:host([theme=primary]) .badge-wrapper{--comp-badge-background:var(--tct-badge-primary-background, var(--t-primary, #0079c2));--comp-badge-color:var(--tct-badge-primary-color, var(--t-primary-text, #ffffff));--comp-badge-border-color:var(--tct-badge-primary-border-color, var(--t-primary-l1, #3a9bd6))}:host([theme=secondary]) .badge-wrapper{--comp-badge-background:var(--tct-badge-secondary-background, var(--t-secondary, #b4c2cd));--comp-badge-color:var(--tct-badge-secondary-color, var(--t-secondary-text, #ffffff));--comp-badge-border-color:var(--tct-badge-secondary-border-color, var(--t-secondary-l1, #c6d1db))}:host([theme=tertiary]) .badge-wrapper{--comp-badge-background:var(--tct-badge-tertiary-background, var(--t-tertiary, #e9f5fc));--comp-badge-color:var(--tct-badge-tertiary-color, var(--t-tertiary-text, #000000));--comp-badge-border-color:var(--tct-badge-tertiary-border-color, var(--t-tertiary-l1, #f3f4f5))}.badge{font-size:var(--tct-badge-font-size, 10px);line-height:var(--tct-badge-line-height, 14px);height:var(--tct-badge-height, 16px);min-width:var(--tct-badge-min-width, 16px);text-align:center;padding:var(--tct-badge-padding, 0 4px);color:var(--comp-badge-color);background:var(--comp-badge-background);border-style:var(--comp-badge-border-style);border-color:var(--comp-badge-border-color);border-width:var(--tct-badge-border-width, var(--t-badge-border-width, 1px));border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px))}.badge.size-large{font-size:var(--tct-badge-large-font-size, 14px);line-height:var(--tct-badge-large-line-height, 20px);height:var(--tct-badge-large-height, 22px);min-width:var(--tct-badge-large-min-width, 22px);border-radius:var(--tct-badge-large-border-radius, 11px);padding:var(--tct-badge-large-padding, 0 6px)}.badge-wrapper{display:flex;align-items:center;justify-content:center}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}.badge-wrapper{--comp-badge-background:var(--tct-badge-background, var(--t-gray8, #61c4ff));--comp-badge-color:var(--tct-badge-color, var(--t-base, #ffffff));--comp-badge-border-style:var(--tct-badge-border-style, solid);--comp-badge-border-color:var(--tct-badge-border-color, var(--t-secondary-l1, #9a9898))}:host([status=info]) .badge-wrapper{--comp-badge-background:var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));--comp-badge-color:var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff));--comp-badge-border-color:var(--tct-badge-info-border-color, var(--const-stoplight-info-l1, #3a9bd6))}:host([status=alert]) .badge-wrapper{--comp-badge-background:var(--tct-badge-alert-background, var(--const-stoplight-alert, #c30000));--comp-badge-color:var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff));--comp-badge-border-color:var(--tct-badge-alert-border-color, var(--const-stoplight-alert-l1, #e42929))}:host([status=warning]) .badge-wrapper{--comp-badge-background:var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));--comp-badge-color:var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #423535));--comp-badge-border-color:var(--tct-badge-warning-border-color, var(--const-stoplight-warning-l1, #f9ce4c))}:host([status=success]) .badge-wrapper{--comp-badge-background:var(--tct-badge-success-background, var(--const-stoplight-success, #57fc45));--comp-badge-color:var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff));--comp-badge-border-color:var(--tct-badge-success-border-color, var(--const-stoplight-success-l1, #2eaa21))}:host([theme=primary]) .badge-wrapper{--comp-badge-background:var(--tct-badge-primary-background, var(--t-primary, #0079c2));--comp-badge-color:var(--tct-badge-primary-color, var(--t-primary-text, #ffffff));--comp-badge-border-color:var(--tct-badge-primary-border-color, var(--t-primary-l1, #3a9bd6))}:host([theme=secondary]) .badge-wrapper{--comp-badge-background:var(--tct-badge-secondary-background, var(--t-secondary, #b4c2cd));--comp-badge-color:var(--tct-badge-secondary-color, var(--t-secondary-text, #ffffff));--comp-badge-border-color:var(--tct-badge-secondary-border-color, var(--t-secondary-l1, #c6d1db))}:host([theme=tertiary]) .badge-wrapper{--comp-badge-background:var(--tct-badge-tertiary-background, var(--t-tertiary, #e9f5fc));--comp-badge-color:var(--tct-badge-tertiary-color, var(--t-tertiary-text, #000000));--comp-badge-border-color:var(--tct-badge-tertiary-border-color, var(--t-tertiary-l1, #f3f4f5))}.badge{font-size:var(--tct-badge-font-size, 10px);line-height:var(--tct-badge-line-height, 14px);height:var(--tct-badge-height, 16px);min-width:var(--tct-badge-min-width, 16px);text-align:center;padding:var(--tct-badge-padding, 0 4px);color:var(--comp-badge-color);background:var(--comp-badge-background);border-style:var(--comp-badge-border-style);border-color:var(--comp-badge-border-color);border-width:var(--tct-badge-border-width, var(--t-badge-border-width, 1px));border-radius:var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px))}.badge.size-large{font-size:var(--tct-badge-large-font-size, 14px);line-height:var(--tct-badge-large-line-height, 20px);height:var(--tct-badge-large-height, 22px);min-width:var(--tct-badge-large-min-width, 22px);border-radius:var(--tct-badge-large-border-radius, 11px);padding:var(--tct-badge-large-padding, 0 6px)}.badge-wrapper{display:flex;align-items:center;justify-content:center}";
 
 const Q2Badge = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"q2-badge.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,8mIAA8mI;;MCOnnI,OAAO;;;iBACyB,CAAC;;;;;;EAQ1C,IAAI,SAAS;;IAET,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE;MAAE,OAAO,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IACpF,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACvD,IAAI,KAAK,GAAoB,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;IAC7C,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;MAC5B,KAAK,GAAG,EAAE,CAAC;KACd;SAAM,IAAI,KAAK,IAAI,QAAQ,EAAE;MAC1B,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,CAAC;KAC1C;SAAM;MACH,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,EAAE,GAAG,GAAG,CAAC;KACnD;IACD,OAAO,KAAK,CAAC;GAChB;EAED,MAAM;IACF,MAAM,UAAU,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7B,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;MAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACzD,OAAO,CAAC,IAAI,CAAC,SAAS,IAClBA,QAACC,cAAQ,OAAG,KAEZD,iBAAK,KAAK,EAAC,eAAe,IACtBA,iBAAK,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,IAC5BA,kBAAM,KAAK,EAAC,YAAY,IACpBA,sBAAO,IAAI,CAAC,SAAS,CAAQ,CAC1B,CACL,CACJ,CACT,CAAC;GACL;;;;;;;","names":["h","Fragment"],"sources":["./src/components/q2-badge/styles.scss?tag=q2-badge&encapsulation=shadow","./src/components/q2-badge/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.badge-wrapper {\n    --comp-badge-background: #{var-list(--tct-badge-background, --t-gray8, #61c4ff)};\n    --comp-badge-color: #{var-list(--tct-badge-color, --t-base, #ffffff)};\n    --comp-badge-border-style: #{var-list(--tct-badge-border-style, solid)};\n    --comp-badge-border-color: #{var-list(--tct-badge-border-color, --t-secondary-l1, #9a9898)};\n\n    :host([status='info']) & {\n        --comp-badge-background: #{var-list(--tct-badge-info-background, --const-stoplight-info, #0079c1)};\n        --comp-badge-color: #{var-list(--tct-badge-info-color, --const-stoplight-info-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-info-border-color, --const-stoplight-info-l1, #3a9bd6)};\n    }\n\n    :host([status='alert']) & {\n        --comp-badge-background: #{var-list(--tct-badge-alert-background, --const-stoplight-alert, #c30000)};\n        --comp-badge-color: #{var-list(--tct-badge-alert-color, --const-stoplight-alert-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-alert-border-color, --const-stoplight-alert-l1, #e42929)};\n    }\n\n    :host([status='warning']) & {\n        --comp-badge-background: #{var-list(--tct-badge-warning-background, --const-stoplight-warning, #c35500)};\n        --comp-badge-color: #{var-list(--tct-badge-warning-color, --const-stoplight-warning-text, #423535)};\n        --comp-badge-border-color: #{var-list(--tct-badge-warning-border-color, --const-stoplight-warning-l1, #f9ce4c)};\n    }\n\n    :host([status='success']) & {\n        --comp-badge-background: #{var-list(--tct-badge-success-background, --const-stoplight-success, #57fc45)};\n        --comp-badge-color: #{var-list(--tct-badge-success-color, --const-stoplight-success-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-success-border-color, --const-stoplight-success-l1, #2eaa21)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-primary-background, --t-primary, #0079c2)};\n        --comp-badge-color: #{var-list(--tct-badge-primary-color, --t-primary-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-primary-border-color, --t-primary-l1, #3a9bd6)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-secondary-background, --t-secondary, #b4c2cd)};\n        --comp-badge-color: #{var-list(--tct-badge-secondary-color, --t-secondary-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-secondary-border-color, --t-secondary-l1, #c6d1db)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-tertiary-background, --t-tertiary, #e9f5fc)};\n        --comp-badge-color: #{var-list(--tct-badge-tertiary-color, --t-tertiary-text, #000000)};\n        --comp-badge-border-color: #{var-list(--tct-badge-tertiary-border-color, --t-tertiary-l1, #f3f4f5)};\n    }\n}\n\n.badge {\n    font-size: var-list(--tct-badge-font-size, 10px);\n    line-height: var-list(--tct-badge-line-height, 14px);\n    height: var-list(--tct-badge-height, 16px);\n    min-width: var-list(--tct-badge-min-width, 16px);\n    text-align: center;\n    padding: var-list(--tct-badge-padding, unquote('0 4px'));\n    color: var(--comp-badge-color);\n    background: var(--comp-badge-background);\n    border-style: var(--comp-badge-border-style);\n    border-color: var(--comp-badge-border-color);\n    border-width: var-list(var-prefixer(badge-border-width), 1px);\n    border-radius: var-list(var-prefixer(badge-border-radius), 8px);\n}\n\n.badge.size-large {\n    font-size: var-list(--tct-badge-large-font-size, 14px);\n    line-height: var-list(--tct-badge-large-line-height, 20px);\n    height: var-list(--tct-badge-large-height, 22px);\n    min-width: var-list(--tct-badge-large-min-width, 22px);\n    border-radius: var-list(--tct-badge-large-border-radius, 11px);\n    padding: var-list(--tct-badge-large-padding, unquote('0 6px'));\n}\n\n.badge-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Fragment } from '@stencil/core';\n\n@Component({\n    tag: 'q2-badge',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Badge implements ComponentInterface {\n    @Prop({ reflect: true }) value: number = 0;\n    @Prop({ reflect: true }) maxLength: number | undefined; // number of digits allowed to show\n    @Prop({ reflect: true }) size: 'default' | 'large' | undefined;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n    @Prop({ reflect: true }) status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    @Element() hostElement: HTMLElement;\n\n    get badgeText(): string {\n        // textContent takes prior than value\n        if (this.hostElement.textContent.trim()) return this.hostElement.textContent.trim();\n        const maxValue = Math.pow(10, this.maxLength || 2) - 1;\n        let value: string | number = this.value || 0;\n        if (isNaN(value) || value <= 0) {\n            value = '';\n        } else if (value <= maxValue) {\n            value = Number(value).toLocaleString();\n        } else {\n            value = Number(maxValue).toLocaleString() + '+';\n        }\n        return value;\n    }\n\n    render() {\n        const badgeClass = ['badge'];\n        if (this.size === 'large') badgeClass.push('size-large');\n        return !this.badgeText ? (\n            <Fragment />\n        ) : (\n            <div class=\"badge-wrapper\">\n                <div class={badgeClass.join(' ')}>\n                    <span class=\"badge-text\">\n                        <slot>{this.badgeText}</slot>\n                    </span>\n                </div>\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-badge.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,ymIAAymI;;MCO9mI,OAAO;;;iBACyB,CAAC;;;;;;EAQ1C,IAAI,SAAS;;IAET,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE;MAAE,OAAO,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IACpF,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACvD,IAAI,KAAK,GAAoB,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;IAC7C,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;MAC5B,KAAK,GAAG,EAAE,CAAC;KACd;SAAM,IAAI,KAAK,IAAI,QAAQ,EAAE;MAC1B,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,CAAC;KAC1C;SAAM;MACH,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,EAAE,GAAG,GAAG,CAAC;KACnD;IACD,OAAO,KAAK,CAAC;GAChB;EAED,MAAM;IACF,MAAM,UAAU,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7B,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;MAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACzD,OAAO,CAAC,IAAI,CAAC,SAAS,IAClBA,QAACC,cAAQ,OAAG,KAEZD,iBAAK,KAAK,EAAC,eAAe,IACtBA,iBAAK,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,IAC5BA,kBAAM,KAAK,EAAC,YAAY,IACpBA,sBAAO,IAAI,CAAC,SAAS,CAAQ,CAC1B,CACL,CACJ,CACT,CAAC;GACL;;;;;;;","names":["h","Fragment"],"sources":["./src/components/q2-badge/styles.scss?tag=q2-badge&encapsulation=shadow","./src/components/q2-badge/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.badge-wrapper {\n    --comp-badge-background: #{var-list(--tct-badge-background, --t-gray8, #61c4ff)};\n    --comp-badge-color: #{var-list(--tct-badge-color, --t-base, #ffffff)};\n    --comp-badge-border-style: #{var-list(--tct-badge-border-style, solid)};\n    --comp-badge-border-color: #{var-list(--tct-badge-border-color, --t-secondary-l1, #9a9898)};\n\n    :host([status='info']) & {\n        --comp-badge-background: #{var-list(--tct-badge-info-background, --const-stoplight-info, #0079c1)};\n        --comp-badge-color: #{var-list(--tct-badge-info-color, --const-stoplight-info-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-info-border-color, --const-stoplight-info-l1, #3a9bd6)};\n    }\n\n    :host([status='alert']) & {\n        --comp-badge-background: #{var-list(--tct-badge-alert-background, --const-stoplight-alert, #c30000)};\n        --comp-badge-color: #{var-list(--tct-badge-alert-color, --const-stoplight-alert-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-alert-border-color, --const-stoplight-alert-l1, #e42929)};\n    }\n\n    :host([status='warning']) & {\n        --comp-badge-background: #{var-list(--tct-badge-warning-background, --const-stoplight-warning, #c35500)};\n        --comp-badge-color: #{var-list(--tct-badge-warning-color, --const-stoplight-warning-text, #423535)};\n        --comp-badge-border-color: #{var-list(--tct-badge-warning-border-color, --const-stoplight-warning-l1, #f9ce4c)};\n    }\n\n    :host([status='success']) & {\n        --comp-badge-background: #{var-list(--tct-badge-success-background, --const-stoplight-success, #57fc45)};\n        --comp-badge-color: #{var-list(--tct-badge-success-color, --const-stoplight-success-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-success-border-color, --const-stoplight-success-l1, #2eaa21)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-primary-background, --t-primary, #0079c2)};\n        --comp-badge-color: #{var-list(--tct-badge-primary-color, --t-primary-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-primary-border-color, --t-primary-l1, #3a9bd6)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-secondary-background, --t-secondary, #b4c2cd)};\n        --comp-badge-color: #{var-list(--tct-badge-secondary-color, --t-secondary-text, #ffffff)};\n        --comp-badge-border-color: #{var-list(--tct-badge-secondary-border-color, --t-secondary-l1, #c6d1db)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-badge-background: #{var-list(--tct-badge-tertiary-background, --t-tertiary, #e9f5fc)};\n        --comp-badge-color: #{var-list(--tct-badge-tertiary-color, --t-tertiary-text, #000000)};\n        --comp-badge-border-color: #{var-list(--tct-badge-tertiary-border-color, --t-tertiary-l1, #f3f4f5)};\n    }\n}\n\n.badge {\n    font-size: var-list(--tct-badge-font-size, 10px);\n    line-height: var-list(--tct-badge-line-height, 14px);\n    height: var-list(--tct-badge-height, 16px);\n    min-width: var-list(--tct-badge-min-width, 16px);\n    text-align: center;\n    padding: var-list(--tct-badge-padding, unquote('0 4px'));\n    color: var(--comp-badge-color);\n    background: var(--comp-badge-background);\n    border-style: var(--comp-badge-border-style);\n    border-color: var(--comp-badge-border-color);\n    border-width: var-list(var-prefixer(badge-border-width), 1px);\n    border-radius: var-list(var-prefixer(badge-border-radius), 8px);\n}\n\n.badge.size-large {\n    font-size: var-list(--tct-badge-large-font-size, 14px);\n    line-height: var-list(--tct-badge-large-line-height, 20px);\n    height: var-list(--tct-badge-large-height, 22px);\n    min-width: var-list(--tct-badge-large-min-width, 22px);\n    border-radius: var-list(--tct-badge-large-border-radius, 11px);\n    padding: var-list(--tct-badge-large-padding, unquote('0 6px'));\n}\n\n.badge-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Fragment } from '@stencil/core';\n\n@Component({\n    tag: 'q2-badge',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Badge implements ComponentInterface {\n    @Prop({ reflect: true }) value: number = 0;\n    @Prop({ reflect: true }) maxLength: number | undefined; // number of digits allowed to show\n    @Prop({ reflect: true }) size: 'default' | 'large' | undefined;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n    @Prop({ reflect: true }) status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    @Element() hostElement: HTMLElement;\n\n    get badgeText(): string {\n        // textContent takes prior than value\n        if (this.hostElement.textContent.trim()) return this.hostElement.textContent.trim();\n        const maxValue = Math.pow(10, this.maxLength || 2) - 1;\n        let value: string | number = this.value || 0;\n        if (isNaN(value) || value <= 0) {\n            value = '';\n        } else if (value <= maxValue) {\n            value = Number(value).toLocaleString();\n        } else {\n            value = Number(maxValue).toLocaleString() + '+';\n        }\n        return value;\n    }\n\n    render() {\n        const badgeClass = ['badge'];\n        if (this.size === 'large') badgeClass.push('size-large');\n        return !this.badgeText ? (\n            <Fragment />\n        ) : (\n            <div class=\"badge-wrapper\">\n                <div class={badgeClass.join(' ')}>\n                    <span class=\"badge-text\">\n                        <slot>{this.badgeText}</slot>\n                    </span>\n                </div>\n            </div>\n        );\n    }\n}\n"],"version":3}