npm - q2-tecton-elements - Versions diffs - 1.63.2 → 1.64.0 - Mend

q2-tecton-elements 1.63.2 → 1.64.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (390) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-action-sheet.entry.cjs.js","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"],"names":["sanitizeHTMLString","h","Fragment","loc","waitForNextPaint"],"mappings":"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"}
1	+ {"version":3,"file":"q2-action-sheet.entry.cjs.js","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"],"names":["sanitizeHTMLString","h","Fragment","loc","waitForNextPaint"],"mappings":"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"}

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

@@ -2,7 +2,7 @@
 var index = require('./index-BYXz4owL.js');
-const q2AvatarCss = "*{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 q2AvatarCss = "*{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 Q2Avatar = class {
     constructor(hostRef) {
@@ -15,6 +15,8 @@ const Q2Avatar = class {
         // #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;
         };
@@ -56,7 +58,7 @@ const Q2Avatar = class {
         const isLoaded = this.isLoaded;
         const showInitials = (this.name || this.initials) && (!this.src || this.badSrc);
         const showFallback = !this.name && !this.initials && (!this.src || this.badSrc);
-        return (index.h("div", { key: 'ac6b4cc52f8ab6d73bddd7a85abec6c2d707ffb3' }, showImg && (index.h("img", { key: 'bddaa710f833759cd540e8e2ef5e70d5071fa577', class: isLoaded ? 'avatar-img' : 'avatar-img-default', "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (index.h("svg", { key: '59809fcf7033849ce48accabf7417f3801dcd93c', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, index.h("text", { key: '07d2208b61a92aa52ec48298abce49aac828de7b', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (index.h("div", { key: '82287d1b62e116f8f4ed12f62685a596be3ac6eb', "test-id": "fallbackIcon", class: "fallback" }, index.h("q2-icon", { key: '27ff4ba4c6b85244461bd3d989234de9a3946df1', type: this.icon })))));
+        return (index.h("div", { key: '513e3f0c9660f6e9a3ffb15952556d6e892e18fd' }, showImg && (index.h("img", { key: '4e40871bb5ef32baf3e2992e72055f6d46edfd52', class: `${isLoaded ? 'avatar-img' : 'avatar-img-default'} size-${this.size}`, "test-id": "userImage", src: this.src, onError: this.onError, onLoad: this.onLoad, alt: this.name || '' })), showInitials && (index.h("svg", { key: 'd576432a916c998130575ca575c98bc8fd1251d2', viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid meet", "test-id": "userInitials", class: `avatar-initials size-${this.size} initials-size-${computedInitials.length}`, "aria-label": this.name, "aria-hidden": !this.name && 'true' }, index.h("text", { key: 'b57ff30a89b4dfd721863d69be7567882fa780c2', x: "50", y: "50", "dominant-baseline": "central", "text-anchor": "middle", "aria-hidden": "true" }, computedInitials))), showFallback && (index.h("div", { key: '6c079512612ccc9f83d9e454f6002fe292e88252', "test-id": "fallbackIcon", class: `fallback size-${this.size}` }, index.h("q2-icon", { key: '04a349d09b1ceed596f31c05dd13711d593ab14c', type: this.icon })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-avatar.entry.cjs.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":["h"],"mappings":"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"}
1	+ {"version":3,"file":"q2-avatar.entry.cjs.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":["h"],"mappings":"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"}