q2-tecton-elements 1.63.1 → 1.64.0

package/dist/q2-tecton-elements/q2-action-sheet.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2ActionSheetCss","Q2ActionSheet","constructor","hostRef","this","initialSelectedOptions","maxHeight","minHeight","selectedOptions","values","value","isScrollable","renderStatus","generateOptgroup","option","optgroupElement","document","createElement","label","setAttribute","disabled","options","length","forEach","opt","appendChild","generateOption","optionElement","innerHTML","attributes","__rest","sanitizeHTMLString","Object","entries","key","undefined","onCancel","event","preventDefault","hide","_b","_a","type","onClick","eventTarget","target","HTMLElement","isInContent","closest","onListChange","detail","onListDone","assign","onListPopoverStateChange","open","action","renderList","data","listProps","h","Fragment","class","ref","el","contentElement","optionListElement","multiple","noSelect","onChange","onPopoverState","intent","loc","renderMessage","title","description","renderSlot","disconnectedCallback","dialogElement","removeEventListener","componentDidLoad","addEventListener","ready","emit","close","hidePostHook","once","show","showPreHook","waitForNextPaint","updateDialogMinMaxHeight","storeInitialValues","showModal","focusContent","appearance","KeyboardEvent","handleExternalKeydown","focus","hostElement","windowHeight","window","innerHeight","style","setProperty","Math","floor","render","showHeader","hideClose","RenderContent","interiorClasses"],"sources":["src/components/q2-action-sheet/q2-action-sheet.scss?tag=q2-action-sheet&encapsulation=shadow","src/components/q2-action-sheet/q2-action-sheet.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(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    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';\nimport sanitizeHTMLString from 'src/utils/sanitize-html-string';\n\n@Component({ tag: 'q2-action-sheet', shadow: true, styleUrl: 'q2-action-sheet.scss' })\nexport class Q2ActionSheet implements ComponentInterface {\n    // #region Own Properties\n\n    contentElement: HTMLDivElement;\n    dialogElement: HTMLDialogElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    maxHeight: number = 0.75;\n    minHeight: number = 0.2;\n    optionListElement: HTMLQ2OptionListElement;\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\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    isScrollable: boolean = false;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ mutable: true })\n    data: ActionSheetData;\n\n    @Prop()\n    hideClose: boolean;\n\n    @Prop()\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the action sheet is closed.\n     */\n    @Event()\n    close: EventEmitter<ActionSheetListCloseData>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    ready: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\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    // #endregion\n    // #region Local Methods\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    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    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (innerHTML) optionElement.innerHTML = sanitizeHTMLString(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    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\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    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    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\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    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    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\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    // #endregion\n    // #region Render Methods\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    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    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\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    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2ActionSheetCss","Q2ActionSheet","constructor","hostRef","this","initialSelectedOptions","maxHeight","minHeight","selectedOptions","values","value","isScrollable","renderStatus","generateOptgroup","option","optgroupElement","document","createElement","label","setAttribute","disabled","options","length","forEach","opt","appendChild","generateOption","optionElement","innerHTML","attributes","__rest","sanitizeHTMLString","Object","entries","key","undefined","onCancel","event","preventDefault","hide","_b","_a","type","onClick","eventTarget","target","HTMLElement","isInContent","closest","onListChange","detail","onListDone","assign","onListPopoverStateChange","open","action","renderList","data","listProps","h","Fragment","class","ref","el","contentElement","optionListElement","multiple","noSelect","onChange","onPopoverState","intent","loc","renderMessage","title","description","renderSlot","disconnectedCallback","dialogElement","removeEventListener","componentDidLoad","addEventListener","ready","emit","close","hidePostHook","once","show","showPreHook","waitForNextPaint","updateDialogMinMaxHeight","storeInitialValues","showModal","focusContent","appearance","KeyboardEvent","handleExternalKeydown","focus","hostElement","windowHeight","window","innerHeight","style","setProperty","Math","floor","render","showHeader","hideClose","RenderContent","interiorClasses"],"sources":["src/components/q2-action-sheet/q2-action-sheet.scss?tag=q2-action-sheet&encapsulation=shadow","src/components/q2-action-sheet/q2-action-sheet.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(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\")\n        )};\n\n    position: fixed;\n    top: 100%;\n    bottom: unset;\n    color: var(--comp-dialog-color);\n    background: var(--comp-dialog-background);\n    transition: transform $animation-tween, opacity $animation-tween;\n    width: 100%;\n    max-width: var(--comp-dialog-max-width);\n    border: 0;\n    border-radius: var(--comp-border-radius);\n    box-shadow: var(--comp-dialog-box-shadow);\n    padding: 0;\n    height: auto;\n    overflow: hidden;\n    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 { loc, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from 'src/utils/sanitize-html-string';\n\nimport type {\n    ActionSheetListCloseData,\n    ActionSheetData,\n    ActionSheetListData,\n    ActionSheetMessageData,\n    ActionSheetSelectedOption,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n} from 'q2-tecton-common/lib/types/action-sheet';\n\n@Component({ tag: 'q2-action-sheet', shadow: true, styleUrl: 'q2-action-sheet.scss' })\nexport class Q2ActionSheet implements ComponentInterface {\n    // #region Own Properties\n\n    contentElement: HTMLDivElement;\n    dialogElement: HTMLDialogElement;\n    initialSelectedOptions: ActionSheetSelectedOption[] = [];\n    maxHeight: number = 0.75;\n    minHeight: number = 0.2;\n    optionListElement: HTMLQ2OptionListElement;\n    selectedOptions: { values: ActionSheetSelectedOption[]; value: string } = { values: [], value: '' };\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    isScrollable: boolean = false;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ mutable: true })\n    data: ActionSheetData;\n\n    @Prop()\n    hideClose: boolean;\n\n    @Prop()\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the action sheet is closed.\n     */\n    @Event()\n    close: EventEmitter<ActionSheetListCloseData>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    ready: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.ready.emit();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\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    // #endregion\n    // #region Local Methods\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    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    generateOption = (option: ActionSheetListOption) => {\n        const optionElement = document.createElement('q2-option');\n        const { innerHTML, ...attributes } = option;\n        if (innerHTML) optionElement.innerHTML = sanitizeHTMLString(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    hidePostHook() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.hostElement.innerHTML = null;\n        }\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    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    onListChange = (event: Q2OptionListCustomEvent<{ value: string; values: ActionSheetSelectedOption[] }>) => {\n        this.selectedOptions = event.detail;\n    };\n\n    onListDone = () => {\n        this.hide({\n            ...this.selectedOptions,\n            type: 'confirm',\n        });\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    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    storeInitialValues() {\n        const { data } = this;\n        if (!data) return;\n        if (data.appearance === 'list') {\n            this.initialSelectedOptions = data.listProps.selectedOptions;\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    // #endregion\n    // #region Render Methods\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    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    renderSlot = () => {\n        return (\n            <div\n                class=\"content\"\n                ref={el => (this.contentElement = el)}\n            >\n                <slot />\n            </div>\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    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"q2-avatar.entry.esm.js","sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\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    border: var(--tct-avatar-border, none);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, block);\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    backdrop-filter: var(--tct-avatar-backdrop-filter);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\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    border: var(--tct-avatar-border, none);\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: flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --tct-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --tct-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, --tct-icon-size);\n    height: var-list(--tct-avatar-icon-size, --tct-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\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    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    // #endregion\n    // #region Render Methods\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    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-avatar.entry.esm.js","sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n    border: var(--tct-avatar-border, none);\n    &.size-small {\n        height: var(--tct-avatar-img-small-size, 24px);\n        width: var(--tct-avatar-img-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-img-medium-size, --tct-avatar-img-height, 44px);\n        width: var-list(--tct-avatar-img-medium-size, --tct-avatar-img-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-img-large-size, 64px);\n        width: var(--tct-avatar-img-large-size, 64px);\n    }\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, block);\n    backdrop-filter: var(--tct-avatar-backdrop-filter);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\n\n    &.size-small {\n        height: var(--tct-avatar-small-size, 24px);\n        width: var(--tct-avatar-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-medium-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-medium-size, --tct-avatar-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-large-size, 64px);\n        width: var(--tct-avatar-large-size, 64px);\n    }\n}\n\n.size-small {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 30px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 24px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 20px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 15px);\n    }\n}\n.size-medium {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n    }\n}\n.size-large {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 90px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 72px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 60px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 45px);\n    }\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    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    border: var(--tct-avatar-border, none);\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: flex;\n    align-items: center;\n    justify-content: center;\n    &.size-small {\n        height: var(--tct-avatar-fallback-small-size, 24px);\n        width: var(--tct-avatar-fallback-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-fallback-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-fallback-size, --tct-avatar-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-fallback-large-size, 64px);\n        width: var(--tct-avatar-fallback-large-size, 64px);\n    }\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --tct-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --tct-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, --tct-icon-size);\n    height: var-list(--tct-avatar-icon-size, --tct-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Determines how large to make the avatar */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\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    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    // #endregion\n    // #region Render Methods\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'} size-${this.size}`}\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-${this.size} 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 size-${this.size}`}\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { r as a, h as t, g as r } from "./index-CGkHOjh1.js";
+import { r as a, h as t, g as i } from "./index-CGkHOjh1.js";
 
-const i = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.avatar-img,.avatar-img-default{display:var(--tct-avatar-display, block);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%)));border:var(--tct-avatar-border, none)}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{display:var(--tct-avatar-display, block);height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);backdrop-filter:var(--tct-avatar-backdrop-filter);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%);border:var(--tct-avatar-border, none)}.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%))));border:var(--tct-avatar-border, none);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:flex;align-items:center;justify-content:center}q2-icon{--tct-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--tct-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--tct-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(--tct-icon-size));height:var(--tct-avatar-icon-size, var(--tct-icon-size))}";
+const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.avatar-img,.avatar-img-default{display:var(--tct-avatar-display, block);object-fit:cover;border-radius:var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)));border:var(--tct-avatar-border, none)}.avatar-img.size-small,.avatar-img-default.size-small{height:var(--tct-avatar-img-small-size, 24px);width:var(--tct-avatar-img-small-size, 24px)}.avatar-img.size-medium,.avatar-img-default.size-medium{height:var(--tct-avatar-img-medium-size, var(--tct-avatar-img-height, 44px));width:var(--tct-avatar-img-medium-size, var(--tct-avatar-img-width, 44px))}.avatar-img.size-large,.avatar-img-default.size-large{height:var(--tct-avatar-img-large-size, 64px);width:var(--tct-avatar-img-large-size, 64px)}.avatar-img-default{background:var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e))}.avatar-initials{display:var(--tct-avatar-display, block);backdrop-filter:var(--tct-avatar-backdrop-filter);background:var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));border-radius:var(--tct-avatar-br, 50%);border:var(--tct-avatar-border, none)}.avatar-initials.size-small{height:var(--tct-avatar-small-size, 24px);width:var(--tct-avatar-small-size, 24px)}.avatar-initials.size-medium{height:var(--tct-avatar-medium-size, var(--tct-avatar-height, 44px));width:var(--tct-avatar-medium-size, var(--tct-avatar-width, 44px))}.avatar-initials.size-large{height:var(--tct-avatar-large-size, 64px);width:var(--tct-avatar-large-size, 64px)}.size-small.initials-size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 30px)}.size-small.initials-size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 24px)}.size-small.initials-size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 20px)}.size-small.initials-size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 15px)}.size-medium.initials-size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-medium.initials-size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 48px)}.size-medium.initials-size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-medium.initials-size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}.size-large.initials-size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 90px)}.size-large.initials-size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 72px)}.size-large.initials-size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 60px)}.size-large.initials-size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 45px)}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{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%))));border:var(--tct-avatar-border, none);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:flex;align-items:center;justify-content:center}.fallback.size-small{height:var(--tct-avatar-fallback-small-size, 24px);width:var(--tct-avatar-fallback-small-size, 24px)}.fallback.size-medium{height:var(--tct-avatar-fallback-size, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-size, var(--tct-avatar-width, 44px))}.fallback.size-large{height:var(--tct-avatar-fallback-large-size, 64px);width:var(--tct-avatar-fallback-large-size, 64px)}q2-icon{--tct-icon-size:var(--tct-avatar-icon-size, var(--tct-avatar-fallback-icon-size, 65%));--tct-icon-stroke-primary:var(--tct-avatar-icon-stroke-primary, var(--tct-avatar-fallback-stroke-primary, currentcolor));--tct-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(--tct-icon-size));height:var(--tct-avatar-icon-size, var(--tct-icon-size))}";
 
 const e = class {
   constructor(t) {
@@ -12,6 +12,7 @@ const e = class {
     // #endregion
     // #region Public Property API
     /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */    this.icon = "person";
+    /**  Determines how large to make the avatar */    this.size = "medium";
     this.onError = () => {
       this.badSrc = true;
     };
@@ -29,63 +30,63 @@ const e = class {
   get computedInitials() {
     const {initials: a, name: t} = this;
     if (!a && !t) return;
-    let r = "";
+    let i = "";
     if (a) {
-      r = a.substr(0, 4);
+      i = a.substr(0, 4);
     } else if (t) {
       const a = t.split(" ");
-      const i = a[0][0];
+      const r = a[0][0];
       const e = a.length > 1 ? a[a.length - 1][0] : undefined;
-      r += i;
-      if (e) r += e;
+      i += r;
+      if (e) i += e;
     }
-    r = r === null || r === void 0 ? void 0 : r.toUpperCase();
-    return r;
+    i = i === null || i === void 0 ? void 0 : i.toUpperCase();
+    return i;
   }
   // #endregion
   // #region Render Methods
   render() {
     const {computedInitials: a} = this;
-    const r = this.src && !this.badSrc;
-    const i = this.isLoaded;
+    const i = this.src && !this.badSrc;
+    const r = this.isLoaded;
     const e = (this.name || this.initials) && (!this.src || this.badSrc);
-    const c = !this.name && !this.initials && (!this.src || this.badSrc);
+    const s = !this.name && !this.initials && (!this.src || this.badSrc);
     return t("div", {
-      key: "ac6b4cc52f8ab6d73bddd7a85abec6c2d707ffb3"
-    }, r && t("img", {
-      key: "bddaa710f833759cd540e8e2ef5e70d5071fa577",
-      class: i ? "avatar-img" : "avatar-img-default",
+      key: "513e3f0c9660f6e9a3ffb15952556d6e892e18fd"
+    }, i && t("img", {
+      key: "4e40871bb5ef32baf3e2992e72055f6d46edfd52",
+      class: `${r ? "avatar-img" : "avatar-img-default"} size-${this.size}`,
       "test-id": "userImage",
       src: this.src,
       onError: this.onError,
       onLoad: this.onLoad,
       alt: this.name || ""
     }), e && t("svg", {
-      key: "59809fcf7033849ce48accabf7417f3801dcd93c",
+      key: "d576432a916c998130575ca575c98bc8fd1251d2",
       viewBox: "0 0 100 100",
       preserveAspectRatio: "xMidYMid meet",
       "test-id": "userInitials",
-      class: `avatar-initials size-${a.length}`,
+      class: `avatar-initials size-${this.size} initials-size-${a.length}`,
       "aria-label": this.name,
       "aria-hidden": !this.name && "true"
     }, t("text", {
-      key: "07d2208b61a92aa52ec48298abce49aac828de7b",
+      key: "b57ff30a89b4dfd721863d69be7567882fa780c2",
       x: "50",
       y: "50",
       "dominant-baseline": "central",
       "text-anchor": "middle",
       "aria-hidden": "true"
-    }, a)), c && t("div", {
-      key: "82287d1b62e116f8f4ed12f62685a596be3ac6eb",
+    }, a)), s && t("div", {
+      key: "6c079512612ccc9f83d9e454f6002fe292e88252",
       "test-id": "fallbackIcon",
-      class: "fallback"
+      class: `fallback size-${this.size}`
     }, t("q2-icon", {
-      key: "27ff4ba4c6b85244461bd3d989234de9a3946df1",
+      key: "04a349d09b1ceed596f31c05dd13711d593ab14c",
       type: this.icon
     })));
   }
   get el() {
-    return r(this);
+    return i(this);
   }
   static get watchers() {
     return {
@@ -94,7 +95,7 @@ const e = class {
   }
 };
 
-e.style = i;
+e.style = r;
 
 export { e as q2_avatar };
 //# sourceMappingURL=q2-avatar.entry.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["q2AvatarCss","Q2Avatar","constructor","hostRef","this","badSrc","isLoaded","icon","onError","onLoad","srcDidUpdate","computedInitials","initials","name","result","substr","parts","split","firstCharacter","lastCharacter","length","undefined","toUpperCase","render","showImg","src","showInitials","showFallback","h","key","class","alt","viewBox","preserveAspectRatio","x","y","type"],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\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    border: var(--tct-avatar-border, none);\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, block);\n    height: var(--tct-avatar-height, 44px);\n    width: var(--tct-avatar-width, 44px);\n    backdrop-filter: var(--tct-avatar-backdrop-filter);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\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    border: var(--tct-avatar-border, none);\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: flex;\n    align-items: center;\n    justify-content: center;\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --tct-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --tct-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, --tct-icon-size);\n    height: var-list(--tct-avatar-icon-size, --tct-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\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    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    // #endregion\n    // #region Render Methods\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    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAc;;MCGPC,IAAQ;EADrB,WAAAC,CAAAC;;;;QAWIC,KAAMC,SAAY;IAGlBD,KAAQE,WAAY;;;6GAOpBF,KAAIG,OAAW;IAmDfH,KAAOI,UAAG;MACNJ,KAAKC,SAAS;AAAI;IAGtBD,KAAMK,SAAG;MACLL,KAAKE,WAAW;AAAI;AA0D3B;;;EA1FG,YAAAI;IACIN,KAAKC,SAAS;;;;EAMlB,oBAAIM;IACA,OAAMC,UAAEA,GAAQC,MAAEA,KAAST;IAC3B,KAAKQ,MAAaC,GAAM;IAExB,IAAIC,IAAS;IACb,IAAIF,GAAU;MACVE,IAASF,EAASG,OAAO,GAAG;WACzB,IAAIF,GAAM;MACb,MAAMG,IAAQH,EAAKI,MAAM;MACzB,MAAMC,IAAiBF,EAAM,GAAG;MAChC,MAAMG,IAAgBH,EAAMI,SAAS,IAAIJ,EAAMA,EAAMI,SAAS,GAAG,KAAKC;MACtEP,KAAUI;MACV,IAAIC,GAAeL,KAAUK;;IAGjCL,IAASA,MAAA,QAAAA,WAAM,aAANA,EAAQQ;IAEjB,OAAOR;;;;EAcX,MAAAS;IACI,OAAMZ,kBAAEA,KAAqBP;IAC7B,MAAMoB,IAAUpB,KAAKqB,QAAQrB,KAAKC;IAClC,MAAMC,IAAWF,KAAKE;IACtB,MAAMoB,KAAgBtB,KAAKS,QAAQT,KAAKQ,eAAeR,KAAKqB,OAAOrB,KAAKC;IACxE,MAAMsB,KAAgBvB,KAAKS,SAAST,KAAKQ,cAAcR,KAAKqB,OAAOrB,KAAKC;IAExE,OACIuB,EAAA;MAAAC,KAAA;OACKL,KACGI,EAAA;MAAAC,KAAA;MACIC,OAAOxB,IAAW,eAAe;MAAoB,WAC7C;MACRmB,KAAKrB,KAAKqB;MACVjB,SAASJ,KAAKI;MACdC,QAAQL,KAAKK;MACbsB,KAAK3B,KAAKS,QAAQ;QAGzBa,KACGE,EACI;MAAAC,KAAA;MAAAG,SAAQ;MACRC,qBAAoB;MACZ;MACRH,OAAO,wBAAwBnB,EAAiBS;MAAQ,cAC5ChB,KAAKS;MAAI,gBACPT,KAAKS,QAAQ;OAE3Be,EAAA;MAAAC,KAAA;MACIK,GAAE;MACFC,GAAE;MAAI,qBACY;MAAS,eACf;MACA;OAEXxB,KAIZgB,KACGC,EAAA;MAAAC,KAAA;MAAA,WACY;MACRC,OAAM;OAENF,EAAS;MAAAC,KAAA;MAAAO,MAAMhC,KAAKG","ignoreList":[]}
+{"version":3,"names":["q2AvatarCss","Q2Avatar","constructor","hostRef","this","badSrc","isLoaded","icon","size","onError","onLoad","srcDidUpdate","computedInitials","initials","name","result","substr","parts","split","firstCharacter","lastCharacter","length","undefined","toUpperCase","render","showImg","src","showInitials","showFallback","h","key","class","alt","viewBox","preserveAspectRatio","x","y","type"],"sources":["src/components/q2-avatar/q2-avatar.scss?tag=q2-avatar&encapsulation=shadow","src/components/q2-avatar/q2-avatar.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.avatar-img,\n.avatar-img-default {\n    display: var(--tct-avatar-display, block);\n    object-fit: cover;\n    border-radius: var-list(--tct-avatar-img-border-radius, --tct-avatar-img-br, --tct-avatar-border-radius, 50%);\n    border: var(--tct-avatar-border, none);\n    &.size-small {\n        height: var(--tct-avatar-img-small-size, 24px);\n        width: var(--tct-avatar-img-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-img-medium-size, --tct-avatar-img-height, 44px);\n        width: var-list(--tct-avatar-img-medium-size, --tct-avatar-img-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-img-large-size, 64px);\n        width: var(--tct-avatar-img-large-size, 64px);\n    }\n}\n\n.avatar-img-default {\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, #9e9e9e);\n}\n\n.avatar-initials {\n    display: var(--tct-avatar-display, block);\n    backdrop-filter: var(--tct-avatar-backdrop-filter);\n    background: var-list(--tct-avatar-background, --tct-avatar-bg, --t-gray-8, #9e9e9e);\n    border-radius: var(--tct-avatar-br, 50%);\n    border: var(--tct-avatar-border, none);\n\n    &.size-small {\n        height: var(--tct-avatar-small-size, 24px);\n        width: var(--tct-avatar-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-medium-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-medium-size, --tct-avatar-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-large-size, 64px);\n        width: var(--tct-avatar-large-size, 64px);\n    }\n}\n\n.size-small {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 30px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 24px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 20px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 15px);\n    }\n}\n.size-medium {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 60px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 48px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 40px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 30px);\n    }\n}\n.size-large {\n    &.initials-size-1 {\n        --tct-avatar-font-size: var(--tct-avatar-size-1, 90px);\n    }\n    &.initials-size-2 {\n        --tct-avatar-font-size: var(--tct-avatar-size-2, 72px);\n    }\n    &.initials-size-3 {\n        --tct-avatar-font-size: var(--tct-avatar-size-3, 60px);\n    }\n    &.initials-size-4 {\n        --tct-avatar-font-size: var(--tct-avatar-size-4, 45px);\n    }\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    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    border: var(--tct-avatar-border, none);\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: flex;\n    align-items: center;\n    justify-content: center;\n    &.size-small {\n        height: var(--tct-avatar-fallback-small-size, 24px);\n        width: var(--tct-avatar-fallback-small-size, 24px);\n    }\n    &.size-medium {\n        height: var-list(--tct-avatar-fallback-size, --tct-avatar-height, 44px);\n        width: var-list(--tct-avatar-fallback-size, --tct-avatar-width, 44px);\n    }\n    &.size-large {\n        height: var(--tct-avatar-fallback-large-size, 64px);\n        width: var(--tct-avatar-fallback-large-size, 64px);\n    }\n}\n\nq2-icon {\n    --tct-icon-size: #{var-list(--tct-avatar-icon-size, --tct-avatar-fallback-icon-size, 65%)};\n    --tct-icon-stroke-primary: #{var-list(\n            --tct-avatar-icon-stroke-primary,\n            --tct-avatar-fallback-stroke-primary,\n            currentcolor\n        )};\n    --tct-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, --tct-icon-size);\n    height: var-list(--tct-avatar-icon-size, --tct-icon-size);\n}\n","import { Component, ComponentInterface, Prop, Element, h, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'q2-avatar', shadow: true, styleUrl: 'q2-avatar.scss' })\nexport class Q2Avatar implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    el: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    badSrc: boolean = false;\n\n    @State()\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** A [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display as the fallback. */\n    @Prop()\n    icon: string = 'person';\n\n    /** A set of up to four initials to display as capitalized text. Takes priority over `name`. */\n    @Prop({ reflect: true })\n    initials: string;\n\n    /**\n     * The name associated with the avatar.\n     * The initials of the first and last words provided will display as capital letters.\n     *\n     * @info\n     * We recommend always providing a name when you want the avatar to be presented to screen readers.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**  Determines how large to make the avatar */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**  Displays the image provided by the user. */\n    @Prop({ reflect: true })\n    src: string;\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('src')\n    srcDidUpdate() {\n        this.badSrc = false;\n    }\n\n    // #endregion\n    // #region Local Methods\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    onError = () => {\n        this.badSrc = true;\n    };\n\n    onLoad = () => {\n        this.isLoaded = true;\n    };\n\n    // #endregion\n    // #region Render Methods\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'} size-${this.size}`}\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-${this.size} 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 size-${this.size}`}\n                    >\n                        <q2-icon type={this.icon}></q2-icon>\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;AAAA,MAAMA,IAAc;;MCGPC,IAAQ;EADrB,WAAAC,CAAAC;;;;QAWIC,KAAMC,SAAY;IAGlBD,KAAQE,WAAY;;;6GAOpBF,KAAIG,OAAW;uDAkBfH,KAAII,OAAiC;IAqCrCJ,KAAOK,UAAG;MACNL,KAAKC,SAAS;AAAI;IAGtBD,KAAMM,SAAG;MACLN,KAAKE,WAAW;AAAI;AA0D3B;;;EA1FG,YAAAK;IACIP,KAAKC,SAAS;;;;EAMlB,oBAAIO;IACA,OAAMC,UAAEA,GAAQC,MAAEA,KAASV;IAC3B,KAAKS,MAAaC,GAAM;IAExB,IAAIC,IAAS;IACb,IAAIF,GAAU;MACVE,IAASF,EAASG,OAAO,GAAG;WACzB,IAAIF,GAAM;MACb,MAAMG,IAAQH,EAAKI,MAAM;MACzB,MAAMC,IAAiBF,EAAM,GAAG;MAChC,MAAMG,IAAgBH,EAAMI,SAAS,IAAIJ,EAAMA,EAAMI,SAAS,GAAG,KAAKC;MACtEP,KAAUI;MACV,IAAIC,GAAeL,KAAUK;;IAGjCL,IAASA,MAAA,QAAAA,WAAM,aAANA,EAAQQ;IAEjB,OAAOR;;;;EAcX,MAAAS;IACI,OAAMZ,kBAAEA,KAAqBR;IAC7B,MAAMqB,IAAUrB,KAAKsB,QAAQtB,KAAKC;IAClC,MAAMC,IAAWF,KAAKE;IACtB,MAAMqB,KAAgBvB,KAAKU,QAAQV,KAAKS,eAAeT,KAAKsB,OAAOtB,KAAKC;IACxE,MAAMuB,KAAgBxB,KAAKU,SAASV,KAAKS,cAAcT,KAAKsB,OAAOtB,KAAKC;IAExE,OACIwB,EAAA;MAAAC,KAAA;OACKL,KACGI,EACI;MAAAC,KAAA;MAAAC,OAAO,GAAGzB,IAAW,eAAe,6BAA6BF,KAAKI;MAC9D;MACRkB,KAAKtB,KAAKsB;MACVjB,SAASL,KAAKK;MACdC,QAAQN,KAAKM;MACbsB,KAAK5B,KAAKU,QAAQ;QAGzBa,KACGE,EACI;MAAAC,KAAA;MAAAG,SAAQ;MACRC,qBAAoB;MACZ;MACRH,OAAO,wBAAwB3B,KAAKI,sBAAsBI,EAAiBS;MAC/D,cAAAjB,KAAKU;MAAI,gBACPV,KAAKU,QAAQ;OAE3Be,EAAA;MAAAC,KAAA;MACIK,GAAE;MACFC,GAAE;MAAI,qBACY;MAAS,eACf;MACA;OAEXxB,KAIZgB,KACGC,EAAA;MAAAC,KAAA;MAAA,WACY;MACRC,OAAO,iBAAiB3B,KAAKI;OAE7BqB,EAAS;MAAAC,KAAA;MAAAO,MAAMjC,KAAKG","ignoreList":[]}