npm - q2-tecton-elements - Versions diffs - 1.36.0 → 1.37.0 - Mend

q2-tecton-elements 1.36.0 → 1.37.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 (312) hide show

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

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

package/dist/esm/q2-btn_2.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, F as Fragment, g as getElement } from './index-ebc7f269.js';
-import { p as handleDeprecationWarning, l as loc, h as handleAriaLabel, q as handleColor, o as overrideFocus, i as isEventFromElement } from './index-35ff2881.js';
+import { p as handleDeprecationWarning, l as loc, h as handleAriaLabel, q as handleColor, o as overrideFocus, i as isEventFromElement } from './index-74a659a5.js';
 import { s as shapes } from './shapes-9629efb2.js';
 const stylesCss$1 = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 3px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff}:host .btn-height-wrapper{height:var(--comp-btn-min-height, 44px);cursor:pointer}:host .btn-height-wrapper:active{box-shadow:none}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border);border-radius:var(--tct-btn-border-radius);background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 12px))}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 16px))}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 32px))}:host([color]) button,:host([intent]) button{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-primary-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-primary-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));outline-style:var(--tct-btn-primary-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-primary-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-primary-outline-color, var(--comp-outline-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-font-color, var(--comp-font-color));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-style:var(--tct-btn-primary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-style:var(--tct-btn-primary-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-style:var(--tct-btn-primary-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-style:var(--tct-btn-primary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-style:var(--tct-btn-primary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-style:var(--tct-btn-primary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-style:var(--tct-btn-primary-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-primary-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-primary-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-primary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-primary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-primary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentColor)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-font-color:var(--app-white, #ffffff);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-secondary-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-secondary-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));outline-style:var(--tct-btn-secondary-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-secondary-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-secondary-outline-color, var(--comp-outline-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-font-color, var(--comp-font-color));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-style:var(--tct-btn-secondary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-style:var(--tct-btn-secondary-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-style:var(--tct-btn-secondary-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-style:var(--tct-btn-secondary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-style:var(--tct-btn-secondary-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-style:var(--tct-btn-secondary-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-style:var(--tct-btn-secondary-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-secondary-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-secondary-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-secondary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-secondary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-secondary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentColor)))}:host([intent=workflow-destroy]) button{--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #c30000));--comp-font-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-destroy-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-destroy-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-destroy-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));outline-style:var(--tct-btn-destroy-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-destroy-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-destroy-outline-color, var(--comp-outline-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-font-color, var(--comp-font-color));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-style:var(--tct-btn-destroy-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-style:var(--tct-btn-destroy-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-style:var(--tct-btn-destroy-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-style:var(--tct-btn-destroy-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-style:var(--tct-btn-destroy-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-style:var(--tct-btn-destroy-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-style:var(--tct-btn-destroy-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-destroy-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-destroy-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-destroy-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-destroy-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-destroy-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){--t-text:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentColor)))}:host([intent=workflow-escape]) button{--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-escape-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-escape-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-escape-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));outline-style:var(--tct-btn-escape-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-escape-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-escape-outline-color, var(--comp-outline-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-font-color, var(--comp-font-color));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-style:var(--tct-btn-escape-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-style:var(--tct-btn-escape-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-style:var(--tct-btn-escape-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-style:var(--tct-btn-escape-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-style:var(--tct-btn-escape-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-style:var(--tct-btn-escape-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-style:var(--tct-btn-escape-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-escape-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-escape-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-escape-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-escape-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-escape-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){--t-text:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentColor)))}:host([intent=neutral]) button{--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-font-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-neutral-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-neutral-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));outline-style:var(--tct-btn-neutral-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-neutral-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-neutral-outline-color, var(--comp-outline-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-font-color, var(--comp-font-color));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-style:var(--tct-btn-neutral-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-style:var(--tct-btn-neutral-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-style:var(--tct-btn-neutral-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-style:var(--tct-btn-neutral-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-style:var(--tct-btn-neutral-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-style:var(--tct-btn-neutral-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-style:var(--tct-btn-neutral-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentColor)))}:host([intent=neutral-text]) button{--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-font-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-radius:var(--tct-btn-neutral-text-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-neutral-text-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-neutral-text-letter-spacing, var(--comp-letter-spacing));border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));outline-style:var(--tct-btn-neutral-text-outline-style, var(--comp-outline-style));outline-width:var(--tct-btn-neutral-text-outline-width, var(--comp-outline-width));outline-color:var(--tct-btn-neutral-text-outline-color, var(--comp-outline-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-style:var(--tct-btn-neutral-text-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-style:var(--tct-btn-neutral-text-focus-border-style, var(--comp-focus-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-focus-border-width, var(--comp-focus-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-focus-outline-style, var(--comp-focus-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-style:var(--tct-btn-neutral-text-focus-visible-border-style, var(--comp-focus-visible-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-focus-visible-border-width, var(--comp-focus-visible-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-focus-visible-outline-style, var(--comp-focus-visible-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-style:var(--tct-btn-neutral-text-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-style:var(--tct-btn-neutral-text-hover-border-style, var(--comp-hover-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-hover-border-width, var(--comp-hover-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-hover-outline-style, var(--comp-hover-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-style:var(--tct-btn-neutral-text-active-border-style, var(--comp-active-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-active-border-width, var(--comp-active-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-active-outline-style, var(--comp-active-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-style:var(--tct-btn-neutral-text-disabled-border-style, var(--comp-disabled-border-style, var(--comp-border-style)));border-width:var(--tct-btn-neutral-text-disabled-border-width, var(--comp-disabled-border-width, var(--comp-border-width)));border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));outline-style:var(--tct-btn-neutral-text-disabled-outline-style, var(--comp-disabled-outline-style, var(--comp-outline-style)));outline-width:var(--tct-btn-neutral-text-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));outline-color:var(--tct-btn-neutral-text-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));font-weight:var(--tct-btn-neutral-text-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentColor)))}:host([color=primary][loading]) button,:host([intent=workflow-primary][loading]) button{--comp-background:var(--tct-btn-primary-loading-background, #0063a0)}:host([intent=workflow-escape][loading]) button{--comp-background:var(--tct-btn-escape-loading-background, var(--comp-background-alternative))}:host button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)))}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));background-color:var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host([loading]) .icon-right div{flex-direction:row-reverse}q2-loading{--tct-loading-primary-color:currentColor;--tct-loading-secondary-color:currentColor;--tct-loading-spinner-size:24px}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}";

package/dist/esm/q2-calendar.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ebc7f269.js';
-import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, a as handleRenamedProp, w as waitForNextPaint } from './index-35ff2881.js';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, a as handleRenamedProp } from './index-74a659a5.js';
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -3349,6 +3349,49 @@ const Q2Calendar = class {
     if (this.open !== open)
       this.open = open;
   }
+  /// Methods ///
+  _togglePopover() {
+    const toggleElement = this.typeable ? this.btnCalendarToggle : this.innerInputField;
+    toggleElement === null || toggleElement === void 0 ? void 0 : toggleElement.click();
+    toggleElement === null || toggleElement === void 0 ? void 0 : toggleElement.focus();
+    toggleElement.dispatchEvent(new FocusEvent('focus'));
+  }
+  openPopover() {
+    if (this.open)
+      return;
+    this._togglePopover();
+  }
+  closePopover() {
+    if (!this.open)
+      return;
+    this._togglePopover();
+  }
+  async setValue(value) {
+    var _a;
+    const date = typeof value === 'string' ? stringToDate(value) : value;
+    if (!isValid(date))
+      return;
+    await this.openPopover();
+    await waitForNextPaint();
+    this.goToMonthYear(date.getMonth(), date.getFullYear());
+    await waitForNextPaint();
+    const tableCell = (_a = this.calendarTable) === null || _a === void 0 ? void 0 : _a.querySelector(`td[data-date="${formatDateISO(date)}"]`);
+    tableCell === null || tableCell === void 0 ? void 0 : tableCell.click();
+  }
+  async typeValue(value) {
+    if (!this.typeable)
+      return;
+    const date = typeof value === 'string' ? stringToDate(value) : value;
+    const formattedDate = formatDateShort(date);
+    if (!isValid(date))
+      return;
+    const { innerInputField, controlElement } = this;
+    innerInputField.focus();
+    innerInputField.dispatchEvent(new FocusEvent('focus'));
+    innerInputField.value = formattedDate;
+    innerInputField.dispatchEvent(new InputEvent('input'));
+    controlElement.dispatchEvent(new KeyboardEvent('keyup'));
+  }
   //////// Observers //////////
   popDirectionHandler() {
     handleRenamedProp(this, 'popDirection', 'popoverDirection');
@@ -3525,14 +3568,14 @@ const Q2Calendar = class {
   }
   inputField() {
     const { isTypeable } = this;
-    return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.open}`, hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : '', pseudo: !isTypeable, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle" }, isTypeable && (h("q2-btn", { slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
+    return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.open}`, hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : '', pseudo: !isTypeable, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle" }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
   }
   calendarPopover() {
     const { monthIndex, selectedYear } = this.selectedMonthYear;
     return (h("div", { class: "calendar-field-popup", onKeyUp: this.onPopupKeyup }, this.calendarLabel && h("p", { class: "calendar-label" }, loc(this.calendarLabel)), h("div", { class: "cal-month-heading" }, h("q2-btn", { label: loc('tecton.element.calendar.previousMonth'), "hide-label": true, ref: elm => (this.btnPrevMonth = elm), class: "cal-nav-btn prev-month", "test-id": "previousMonthButton", onClick: () => this.goToMonthYear(monthIndex - 1, selectedYear) }, h("q2-icon", { type: "chevron-left" })), h("span", { class: "cal-month-text" }, this.monthStrings[monthIndex]), h("q2-btn", { label: loc('tecton.element.calendar.nextMonth'), "hide-label": true, class: "cal-nav-btn next-month", ref: elm => (this.btnNextMonth = elm), "test-id": "nextMonthButton", onClick: () => this.goToMonthYear(monthIndex + 1, selectedYear) }, h("q2-icon", { type: "chevron-right" })), h("q2-btn", { label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", ref: elm => (this.btnPrevYear = elm), "test-id": "previousYearButton", onClick: () => this.goToMonthYear(monthIndex, selectedYear - 1) }, h("q2-icon", { type: "chevron-left" })), h("span", { class: "cal-year-text" }, this.selectedMonthYear.selectedYear), h("q2-btn", { label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", ref: elm => (this.btnNextYear = elm), "test-id": "nextYearButton", onClick: () => this.goToMonthYear(monthIndex, selectedYear + 1) }, h("q2-icon", { type: "chevron-right" }))), h("div", { class: "sr", "aria-live": "polite", id: "table-label" }, `${this.monthStrings[monthIndex]} ${selectedYear}`), this.calendarDays(), this.disclaimer && h("div", { class: "calendar-disclaimer" }, loc(this.disclaimer)), h("q2-btn", { class: "sr refocus-popup", onFocus: this.onRefocus })));
   }
   calendarDays() {
-    return (h("table", { role: "grid", "aria-labelledby": "table-label" }, h("thead", null, h("tr", null, [...Array(7).keys()].map(index => (h("th", { scope: "col", "aria-label": this.dayStrings[index] }, this.dayAbbrStrings[index]))))), h("tbody", { onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, ref: elm => (this.calendarBody = elm), "test-id": "calendarTableBody" }, this.currentWeeks.map(week => (h("tr", null, week.map(day => {
+    return (h("table", { role: "grid", "aria-labelledby": "table-label", ref: ref => (this.calendarTable = ref) }, h("thead", null, h("tr", null, [...Array(7).keys()].map(index => (h("th", { scope: "col", "aria-label": this.dayStrings[index] }, this.dayAbbrStrings[index]))))), h("tbody", { onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, ref: elm => (this.calendarBody = elm), "test-id": "calendarTableBody" }, this.currentWeeks.map(week => (h("tr", null, week.map(day => {
       var _a;
       let ariaLabel = '';
       if (day.isToday)