npm - q2-tecton-elements - Versions diffs - 1.38.2 → 1.39.0 - Mend

q2-tecton-elements 1.38.2 → 1.39.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 (399) hide show

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

	@@ -1 +1 @@
1	- {"file":"q2-textarea.entry.js","mappings":"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","names":[],"sources":["./src/components/q2-textarea/styles.scss?tag=q2-textarea&encapsulation=shadow","./src/components/q2-textarea/index.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n display: block;\n margin: var-list(var-prefixer(textarea-margin-top), --app-scale-6x, 30px) 0\n var-list(var-prefixer(textarea-margin-bottom), --app-scale-6x, 30px);\n font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n --comp-label-padding: #{var-list(\n --tct-textarea-label-padding,\n unquote(\n '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n )\n )};\n --comp-label-margin: #{var-list(\n --tct-textarea-label-margin,\n unquote(\n '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n display: block;\n padding: var(--comp-label-padding);\n margin: var(--comp-label-margin);\n color: var-list(var-prefixer(textarea-label-font-color), inherit);\n font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), normal);\n transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n\n .has-error & {\n color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n font-size: var-list(--tct-textarea-error-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(--tct-textarea-error-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(\n --tct-textarea-error-label-text-transform,\n var-prefixer(textarea-label-text-transform),\n none\n );\n letter-spacing: var-list(\n --tct-textarea-error-label-letter-spacing,\n var-prefixer(textarea-label-letter-spacing),\n normal\n );\n }\n\n :hover & {\n color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n font-size: var-list(--tct-textarea-hover-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(--tct-textarea-hover-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(\n --tct-textarea-hover-label-text-transform,\n var-prefixer(textarea-label-text-transform),\n none\n );\n letter-spacing: var-list(\n --tct-textarea-hover-label-letter-spacing,\n var-prefixer(textarea-label-letter-spacing),\n normal\n );\n\n .has-error & {\n color: var-list(\n --tct-textarea-error-hover-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-hover-label-font-color,\n --tct-textarea-label-font-color,\n inherit\n );\n font-size: var-list(\n --tct-textarea-error-hover-label-font-size,\n --tct-textarea-error-label-font-size,\n --tct-textarea-hover-label-font-size,\n var-prefixer(textarea-label-font-size),\n inherit\n );\n font-weight: var-list(\n --tct-textarea-error-hover-label-font-weight,\n --tct-textarea-error-label-font-weight,\n --tct-textarea-hover-label-font-weight,\n var-prefixer(textarea-label-font-weight),\n 600\n );\n text-transform: var-list(\n --tct-textarea-error-hover-label-text-transform,\n --tct-textarea-error-label-text-transform,\n --tct-textarea-hover-label-text-transform,\n var-prefixer(textarea-label-text-transform),\n none\n );\n letter-spacing: var-list(\n --tct-textarea-error-hover-label-letter-spacing,\n --tct-textarea-error-label-letter-spacing,\n --tct-textarea-hover-label-letter-spacing,\n var-prefixer(textarea-label-letter-spacing),\n normal\n );\n }\n }\n\n :focus-within & {\n color: var-list(--tct-textarea-focused-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n font-size: var-list(--tct-textarea-focused-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(--tct-textarea-focused-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(\n --tct-textarea-focused-label-text-transform,\n var-prefixer(textarea-label-text-transform),\n none\n );\n letter-spacing: var-list(\n --tct-textarea-focused-label-letter-spacing,\n var-prefixer(textarea-label-letter-spacing),\n normal\n );\n\n .has-error & {\n color: var-list(\n --tct-textarea-error-focused-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-focused-label-font-color,\n var-prefixer(textarea-label-font-color),\n inherit\n );\n font-size: var-list(\n --tct-textarea-error-focused-label-font-size,\n --tct-textarea-error-label-font-size,\n --tct-textarea-focused-label-font-size,\n var-prefixer(textarea-label-font-size),\n inherit\n );\n font-weight: var-list(\n --tct-textarea-error-focused-label-font-weight,\n --tct-textarea-error-label-font-weight,\n --tct-textarea-focused-label-font-weight,\n var-prefixer(textarea-label-font-weight),\n 600\n );\n text-transform: var-list(\n --tct-textarea-error-focused-label-text-transform,\n --tct-textarea-error-label-text-transform,\n --tct-textarea-focused-label-text-transform,\n var-prefixer(textarea-label-text-transform),\n none\n );\n letter-spacing: var-list(\n --tct-textarea-error-focused-label-letter-spacing,\n --tct-textarea-error-label-letter-spacing,\n --tct-textarea-focused-label-letter-spacing,\n var-prefixer(textarea-label-letter-spacing),\n normal\n );\n }\n }\n}\n\n.optional-tag {\n --comp-label-optional-margin: #{var-list(\n --tct-textarea-label-optional-margin,\n unquote(\n '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n margin: var(--comp-label-optional-margin);\n color: var-list(\n var-prefixer(textarea-label-optional-font-color),\n --t-textA,\n --t-a11y-gray-color,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n height: 100%;\n --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 3px)};\n --comp-textarea-border-top-left-radius: #{var-list(\n var-prefixer(textarea-border-top-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-top-right-radius: #{var-list(\n var-prefixer(textarea-border-top-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-right-radius: #{var-list(\n var-prefixer(textarea-border-bottom-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-left-radius: #{var-list(\n var-prefixer(textarea-border-bottom-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)\n var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n var(--comp-textarea-border-bottom-left-radius);\n --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n var-list(var-prefixer(textarea-border-right-width), 1px)\n var-list(var-prefixer(textarea-border-bottom-width), 1px)\n var-list(var-prefixer(textarea-border-left-width), 1px)};\n --comp-textarea-focus-border-width: #{var-list(var-prefixer(textarea-focus-border-top-width), 1px)\n var-list(var-prefixer(textarea-focus-border-right-width), 1px)\n var-list(var-prefixer(textarea-focus-border-bottom-width), 1px)\n var-list(var-prefixer(textarea-focus-border-left-width), 1px)};\n --comp-textarea-icon-clearance: 34px;\n\n :host([disabled]) & {\n cursor: not-allowed;\n opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n }\n}\n\n.content-container {\n --comp-textarea-min-height: 44px;\n --comp-textarea-min-width: 150px;\n position: relative;\n display: inline-block;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n :host(:not([cols])) & {\n width: 100%;\n }\n}\n\ntextarea {\n --comp-textarea-padding: #{var-list(\n --tct-textarea-padding,\n unquote(\n '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n )\n )};\n --comp-textarea-border-color: #{var-list(\n var-prefixer(textarea-border-color),\n var-prefixer(input-border-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-textarea-background: #{var-list(\n --tct-textarea-background,\n var-prefixer(textarea-bg),\n --tct-input-background,\n var-prefixer(input-bg),\n --t-gray-14,\n #fcfcfd\n )};\n --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n resize: none;\n height: 100%;\n -webkit-appearance: none;\n appearance: none;\n display: block;\n box-sizing: border-box;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n padding: var(--comp-textarea-padding);\n background: var(--comp-textarea-background);\n color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n border-width: var(--comp-textarea-border-width);\n border-style: solid;\n border-color: var(--comp-textarea-border-color);\n border-radius: var(--comp-textarea-border-radius);\n box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n scrollbar-width: thin;\n scrollbar-color: var(--t-a11y-gray-color) transparent;\n --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n transition: border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween),\n box-shadow var(--comp-textarea-tween);\n\n &::-webkit-scrollbar {\n width: var(--app-scale-1x);\n height: var(--app-scale-1x);\n margin: var(--app-scale-1x);\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--t-a11y-gray-color);\n border-radius: 2px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &:not([cols]) {\n width: 100%;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #c30000);\n background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n }\n\n &:hover {\n border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-hover-border-color,\n var-prefixer(textarea-error-border-color),\n --const-stoplight-alert,\n #c30000\n );\n background: var-list(\n --tct-textarea-error-hover-background,\n --tct-textarea-error-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-hover-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-hover-box-shadow,\n --comp-textarea-hover-ring\n );\n }\n }\n\n &:focus {\n border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-focus-border-color,\n --tct-textarea-error-border-color,\n --const-stoplight-alert,\n #c30000\n );\n background: var-list(\n --tct-textarea-error-focus-background,\n --tct-textarea-error-background,\n --tct-textarea-focus-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-focus-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-focus-box-shadow,\n --const-double-focus-ring\n );\n }\n }\n\n &::placeholder {\n color: var-list(\n var-prefixer(textarea-placeholder-font-color),\n --t-input-placeholder-font-color,\n --tct-gray-7,\n --app-gray-7,\n --tct-gray-d1,\n --app-gray-d1,\n #666666\n );\n }\n\n &[disabled] {\n cursor: not-allowed;\n }\n\n &.resize-vertical-auto {\n overflow: hidden;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n\n &:not(:focus) {\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #c30000);\n }\n }\n}\n\nq2-icon {\n margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n pointer-events: none;\n position: absolute;\n top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n right: 0;\n margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n --tct-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n --t-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n}\n\n.icon-error {\n color: var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000);\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n}\n\n.messages-container {\n height: 0px;\n overflow: hidden;\n background: var-list(\n --tct-message-background,\n --tct-message-bg,\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n box-shadow: var-list(\n var-prefixer(textarea-message-box-shadow),\n --tct-box-shadow-1,\n --app-shadow-1,\n unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n );\n transition: height\n var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n margin-top: 2px;\n z-index: 1;\n position: absolute;\n width: 100%;\n color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.max-length {\n color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n font-size: var-list(\n var-prefixer(textarea-max-length-font-size),\n --tct-font-size-small,\n --app-font-size-small,\n 12px\n );\n position: absolute;\n right: 0;\n}\n\n.btn-resize {\n --tct-textarea-resize-icon-padding: calc(\n calc(\n #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n var-prefixer(textarea-resize-icon-size),\n 12px\n )}\n ) / 2\n );\n width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n border: 0;\n position: absolute;\n right: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n bottom: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n display: block;\n padding: var-list(var-prefixer(textarea-resize-icon-padding));\n font-size: 0;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n :host([resize='both']) & {\n cursor: se-resize;\n }\n\n :host([resize='vertical']) &,\n :host([resize='vertical-auto']) & {\n cursor: s-resize;\n }\n\n :host([resize='horizontal']) & {\n cursor: e-resize;\n }\n}\n","import { Component, EventEmitter, Prop, Event, Element, State, h, Watch, Listen, Method } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { createGuid, isEventFromElement, labelDOM, loc, messagesDOM, overrideFocus, setMessageHeight } from 'src/utils';\n\n@Component({\n tag: 'q2-textarea',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Textarea {\n private textareaField?: HTMLTextAreaElement;\n private contentContainer?: HTMLDivElement;\n private valueOnFocus: string;\n private scheduledAfterRender: (() => void)[] = [];\n private guid = createGuid();\n\n @Prop({ mutable: true }) value: string;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) hideLabel: boolean;\n @Prop({ reflect: true }) hideMessages: boolean;\n @Prop({ reflect: true }) optional: boolean;\n @Prop({ reflect: true }) placeholder: string;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) readonly: boolean;\n @Prop({ reflect: true }) spellcheck: boolean;\n @Prop({ reflect: true, mutable: true }) maxlength: number;\n @Prop({ reflect: true }) rows: number;\n @Prop({ reflect: true }) cols: number;\n @Prop({ reflect: true }) resize: 'none' \| 'vertical' \| 'horizontal' \| 'both' \| 'vertical-auto' = 'vertical';\n @Prop() errors: string[];\n @Prop() hints: string[];\n\n @State() hasFocus: boolean;\n @State() downParams: IDict<number>;\n\n /////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n if (isNaN(this.maxlength)) {\n this.maxlength = undefined;\n }\n }\n\n componentDidRender() {\n this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n checkRows = () => {\n const { contentContainer, rows, textareaField, resize } = this;\n\n if (!rows \|\| ['none', 'horizontal'].includes(resize)) return;\n contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n textareaField.removeAttribute('rows');\n };\n\n checkCols = () => {\n const { contentContainer, cols, textareaField, resize } = this;\n\n if (!cols \|\| ['none', 'vertical'].includes(resize)) return;\n contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n textareaField.removeAttribute('cols');\n };\n\n @Element() hostElement: HTMLElement;\n\n get hasError() {\n return Array.isArray(this.errors) && this.errors.length > 0;\n }\n\n get messages(): string[] {\n return (\n (this.errors && this.errors.length > 0 && this.errors) \|\|\n (this.hints && this.hints.length > 0 && this.hints) \|\|\n []\n );\n }\n\n get showMessages() {\n return this.messages.length > 0 && !this.hideMessages;\n }\n\n get inputId() {\n return `input-guid-${this.guid}`;\n }\n\n get inputDescribedBy() {\n return this.showMessages ? `${this.inputId}-description` : undefined;\n }\n\n get wrapperClasses() {\n const errorClass = this.hasError ? ' has-error' : '';\n const valueClass = !!this.value ? ' has-value' : '';\n const focusClass = this.hasFocus ? ' has-focus' : '';\n\n return `field-container${errorClass}${valueClass}${focusClass}`;\n }\n\n get showResize() {\n const { resize } = this;\n return resize && resize !== 'none';\n }\n\n //////// OBSERVERS //////////\n\n @Watch('value')\n valueObserver() {\n const { maxlength, value = '' } = this;\n if (!maxlength) return;\n\n const truncatedValue = value.substr(0, maxlength);\n if (truncatedValue === value) return;\n\n this.change.emit({ value: truncatedValue });\n }\n\n @Watch('rows')\n rowsObserver() {\n this.contentContainer.style.height = null;\n }\n\n @Watch('cols')\n colsObserver() {\n this.contentContainer.style.width = null;\n }\n\n @Watch('hints')\n hintsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n @Watch('errors')\n errorsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n ///////// HOST ELEMENT EVENTS //////\n @Listen('focus')\n onHostElementFocus(event: Event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.textareaField.focus();\n }\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n\n @Listen('input')\n onHostElementInput(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.oninput) {\n this.value = event.detail.value;\n }\n }\n\n ///////// Events /////////\n\n @Event() input: EventEmitter<any>;\n @Event() change: EventEmitter<any>;\n\n /// Methods ///\n /*\n Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n \n This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n * to trigger the `change` event, move the focus to another element after calling this method.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n const { textareaField } = this;\n textareaField.focus();\n textareaField.value = value;\n textareaField.dispatchEvent(new InputEvent('input'));\n }\n\n ///// ACTIONS ////////\n\n onTextareaFocus = () => {\n this.hasFocus = true;\n this.valueOnFocus = this.value;\n setMessageHeight(this);\n };\n\n onTextareaBlur = () => {\n const {\n valueOnFocus,\n textareaField: { value },\n } = this;\n this.hasFocus = false;\n setMessageHeight(this);\n if (valueOnFocus !== value) this.change.emit({ value });\n };\n\n onTextareaInput = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n this.increaseHeightIfOverflowing();\n\n this.input.emit({ value });\n };\n\n onTextareaChange = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n\n this.change.emit({ value });\n };\n\n onMouseDown = (event: MouseEvent) => {\n const { contentContainer } = this;\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: event.clientX,\n y: event.clientY,\n };\n document.addEventListener('mousemove', this.onMouseMove);\n document.addEventListener('mouseup', this.onMouseUp);\n };\n\n onMouseMove = (event: MouseEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n onTouchStart = (event: TouchEvent) => {\n if (event.touches.length !== 1) return;\n\n event.preventDefault();\n\n const { contentContainer } = this;\n const firstTouch = event.touches[0];\n\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: firstTouch.pageX,\n y: firstTouch.pageY,\n };\n\n document.addEventListener('touchmove', this.onTouchMove);\n document.addEventListener('touchend', this.onTouchMove);\n };\n\n onTouchMove = (event: TouchEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n setWidth(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { width, x },\n } = this;\n\n const resizeX = ['both', 'horizontal'].includes(resize);\n\n if (!resizeX) return;\n const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n const newWidth = width - (x - eventX);\n contentContainer.style.width = `${newWidth}px`;\n }\n\n setHeight(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { height, y },\n } = this;\n const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n if (!resizeY) return;\n\n const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n const newHeight = height - (y - eventY);\n // If 'vertical-auto', change height if the new height is greater\n // than the current height or the textarea is not overflowing.\n // Otherwise, change height regardless of the new height.\n if (\n resize !== 'vertical-auto' \|\|\n newHeight > height \|\|\n (resize === 'vertical-auto' && !this.isOverflowingVertically())\n ) {\n contentContainer.style.height = `${newHeight}px`;\n }\n }\n\n increaseHeightIfOverflowing = () => {\n const { scrollHeight } = this.textareaField;\n if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n // need to account for border width because scrollHeight does not include it\n const newHeight = scrollHeight + this.getBorderOffset();\n this.contentContainer.style.height = `${newHeight}px`;\n }\n };\n\n isOverflowingVertically = () => {\n const { clientHeight, scrollHeight } = this.textareaField;\n\n return scrollHeight > clientHeight;\n };\n\n getBorderOffset = () => {\n const computedStyle = window.getComputedStyle(this.textareaField);\n\n return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n };\n\n onMouseUp = () => {\n document.removeEventListener('mousemove', this.onMouseMove);\n this.downParams = null;\n };\n\n /////// VIEW METHODS ///////\n\n render() {\n return (\n <div class={this.wrapperClasses}>\n {labelDOM(this)}\n <div\n class=\"content-container\"\n ref={el => (this.contentContainer = el)}\n >\n {this.inputDOM()}\n {this.maxlength ? this.maxLengthDOM() : ''}\n {messagesDOM(this)}\n </div>\n </div>\n );\n }\n\n maxLengthDOM() {\n return (\n <div\n class=\"max-length\"\n aria-hidden=\"true\"\n >\n {this.value?.length \|\| 0}/{this.maxlength}\n </div>\n );\n }\n\n inputDOM() {\n const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n return (\n <div class=\"input-container\">\n <textarea\n id={this.inputId}\n class={textareaClasses}\n placeholder={(this.placeholder && loc(this.placeholder)) \|\| undefined}\n test-id=\"inputField\"\n maxLength={this.maxlength}\n aria-describedby={this.inputDescribedBy}\n aria-invalid={`${this.hasError}`}\n aria-required={`${!this.optional}`}\n aria-label={this.hideLabel && this.label}\n spellcheck={this.spellcheck}\n rows={this.rows \|\| 3}\n cols={this.cols}\n value={this.value}\n ref={el => (this.textareaField = el)}\n readonly={!!this.readonly}\n disabled={!!this.disabled}\n maxlength={this.maxlength}\n onInput={this.onTextareaInput}\n onChange={this.onTextareaChange}\n onFocus={this.onTextareaFocus}\n onBlur={this.onTextareaBlur}\n ></textarea>\n {this.hasError ? (\n <q2-icon\n type=\"error\"\n class=\"icon-error\"\n />\n ) : (\n ''\n )}\n {this.showResize && (\n <button\n onMouseDown={this.onMouseDown}\n onTouchStart={this.onTouchStart}\n class=\"btn-resize\"\n aria-label={loc('tecton.element.input.resize')}\n tabIndex={-1}\n >\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n fill=\"none\"\n stroke-stroke-linecap=\"square\"\n />\n </svg>\n </button>\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"q2-textarea.entry.js","mappings":"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","names":[],"sources":["./src/components/q2-textarea/styles.scss?tag=q2-textarea&encapsulation=shadow","./src/components/q2-textarea/index.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n display: block;\n margin: var-list(var-prefixer(textarea-margin-top), --app-scale-6x, 30px) 0\n var-list(var-prefixer(textarea-margin-bottom), --app-scale-6x, 30px);\n font-size: var-list(var-prefixer(textarea-font-size), --app-font-size, inherit);\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n --comp-label-padding: #{var-list(\n --tct-textarea-label-padding,\n unquote(\n '0 #{var-list(var-prefixer(textarea-label-padding-right), 0)} 0 #{var-list(var-prefixer(textarea-label-padding-left), 0)}'\n )\n )};\n --comp-label-margin: #{var-list(\n --tct-textarea-label-margin,\n unquote(\n '#{var-list(var-prefixer(textarea-label-margin-top), 0)} 0 #{var-list(var-prefixer(textarea-label-margin-bottom), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n display: block;\n padding: var(--comp-label-padding);\n margin: var(--comp-label-margin);\n color: var-list(var-prefixer(textarea-label-font-color), inherit);\n font-size: var-list(var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(var-prefixer(textarea-label-text-transform), none);\n letter-spacing: var-list(var-prefixer(textarea-label-letter-spacing), normal);\n transition: color var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'));\n\n .has-error & {\n color: var-list(var-prefixer(textarea-error-label-font-color), --tct-textarea-label-font-color, inherit);\n font-size: var-list(--tct-textarea-error-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(--tct-textarea-error-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(\n --tct-textarea-error-label-text-transform,\n var-prefixer(textarea-label-text-transform),\n none\n );\n letter-spacing: var-list(\n --tct-textarea-error-label-letter-spacing,\n var-prefixer(textarea-label-letter-spacing),\n normal\n );\n }\n\n :hover & {\n color: var-list(--tct-textarea-hover-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n font-size: var-list(--tct-textarea-hover-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(--tct-textarea-hover-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(\n --tct-textarea-hover-label-text-transform,\n var-prefixer(textarea-label-text-transform),\n none\n );\n letter-spacing: var-list(\n --tct-textarea-hover-label-letter-spacing,\n var-prefixer(textarea-label-letter-spacing),\n normal\n );\n\n .has-error & {\n color: var-list(\n --tct-textarea-error-hover-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-hover-label-font-color,\n --tct-textarea-label-font-color,\n inherit\n );\n font-size: var-list(\n --tct-textarea-error-hover-label-font-size,\n --tct-textarea-error-label-font-size,\n --tct-textarea-hover-label-font-size,\n var-prefixer(textarea-label-font-size),\n inherit\n );\n font-weight: var-list(\n --tct-textarea-error-hover-label-font-weight,\n --tct-textarea-error-label-font-weight,\n --tct-textarea-hover-label-font-weight,\n var-prefixer(textarea-label-font-weight),\n 600\n );\n text-transform: var-list(\n --tct-textarea-error-hover-label-text-transform,\n --tct-textarea-error-label-text-transform,\n --tct-textarea-hover-label-text-transform,\n var-prefixer(textarea-label-text-transform),\n none\n );\n letter-spacing: var-list(\n --tct-textarea-error-hover-label-letter-spacing,\n --tct-textarea-error-label-letter-spacing,\n --tct-textarea-hover-label-letter-spacing,\n var-prefixer(textarea-label-letter-spacing),\n normal\n );\n }\n }\n\n :focus-within & {\n color: var-list(--tct-textarea-focused-label-font-color, var-prefixer(textarea-label-font-color), inherit);\n font-size: var-list(--tct-textarea-focused-label-font-size, var-prefixer(textarea-label-font-size), inherit);\n font-weight: var-list(--tct-textarea-focused-label-font-weight, var-prefixer(textarea-label-font-weight), 600);\n text-transform: var-list(\n --tct-textarea-focused-label-text-transform,\n var-prefixer(textarea-label-text-transform),\n none\n );\n letter-spacing: var-list(\n --tct-textarea-focused-label-letter-spacing,\n var-prefixer(textarea-label-letter-spacing),\n normal\n );\n\n .has-error & {\n color: var-list(\n --tct-textarea-error-focused-label-font-color,\n var-prefixer(textarea-error-label-font-color),\n --tct-textarea-focused-label-font-color,\n var-prefixer(textarea-label-font-color),\n inherit\n );\n font-size: var-list(\n --tct-textarea-error-focused-label-font-size,\n --tct-textarea-error-label-font-size,\n --tct-textarea-focused-label-font-size,\n var-prefixer(textarea-label-font-size),\n inherit\n );\n font-weight: var-list(\n --tct-textarea-error-focused-label-font-weight,\n --tct-textarea-error-label-font-weight,\n --tct-textarea-focused-label-font-weight,\n var-prefixer(textarea-label-font-weight),\n 600\n );\n text-transform: var-list(\n --tct-textarea-error-focused-label-text-transform,\n --tct-textarea-error-label-text-transform,\n --tct-textarea-focused-label-text-transform,\n var-prefixer(textarea-label-text-transform),\n none\n );\n letter-spacing: var-list(\n --tct-textarea-error-focused-label-letter-spacing,\n --tct-textarea-error-label-letter-spacing,\n --tct-textarea-focused-label-letter-spacing,\n var-prefixer(textarea-label-letter-spacing),\n normal\n );\n }\n }\n}\n\n.optional-tag {\n --comp-label-optional-margin: #{var-list(\n --tct-textarea-label-optional-margin,\n unquote(\n '0 0 0 #{var-list(var-prefixer(textarea-label-optional-margin-left), --tct-scale-1x, --app-scale-1x, 5px)}'\n )\n )};\n margin: var(--comp-label-optional-margin);\n color: var-list(\n var-prefixer(textarea-label-optional-font-color),\n --t-textA,\n --t-a11y-gray-color,\n rgba(77, 77, 77, 0.77)\n );\n font-size: var-list(var-prefixer(textarea-label-optional-font-size), 12px);\n font-weight: var-list(var-prefixer(textarea-label-optional-font-weight), 400);\n}\n\n.input-container {\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n height: 100%;\n --comp-default-border-radius: #{var-list(--tct-border-radius-1, --app-border-radius-1, 3px)};\n --comp-textarea-border-top-left-radius: #{var-list(\n var-prefixer(textarea-border-top-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-top-right-radius: #{var-list(\n var-prefixer(textarea-border-top-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-right-radius: #{var-list(\n var-prefixer(textarea-border-bottom-right-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-bottom-left-radius: #{var-list(\n var-prefixer(textarea-border-bottom-left-radius),\n --comp-default-border-radius\n )};\n --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)\n var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n var(--comp-textarea-border-bottom-left-radius);\n --comp-textarea-border-width: #{var-list(var-prefixer(textarea-border-top-width), 1px)\n var-list(var-prefixer(textarea-border-right-width), 1px)\n var-list(var-prefixer(textarea-border-bottom-width), 1px)\n var-list(var-prefixer(textarea-border-left-width), 1px)};\n --comp-textarea-focus-border-width: #{var-list(var-prefixer(textarea-focus-border-top-width), 1px)\n var-list(var-prefixer(textarea-focus-border-right-width), 1px)\n var-list(var-prefixer(textarea-focus-border-bottom-width), 1px)\n var-list(var-prefixer(textarea-focus-border-left-width), 1px)};\n --comp-textarea-icon-clearance: 34px;\n\n :host([disabled]) & {\n cursor: not-allowed;\n opacity: var-list(var-prefixer(textarea-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n }\n}\n\n.content-container {\n --comp-textarea-min-height: 44px;\n --comp-textarea-min-width: 150px;\n position: relative;\n display: inline-block;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n min-width: var-list(var-prefixer(textarea-min-width) --comp-textarea-min-width);\n\n :host(:not([cols])) & {\n width: 100%;\n }\n}\n\ntextarea {\n --comp-textarea-padding: #{var-list(\n --tct-textarea-padding,\n unquote(\n '#{var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px)} #{var-list(var-prefixer(textarea-horizontal-padding), --tct-scale-2x, --app-scale-2x, 10px)}'\n )\n )};\n --comp-textarea-border-color: #{var-list(\n var-prefixer(textarea-border-color),\n var-prefixer(input-border-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-textarea-background: #{var-list(\n --tct-textarea-background,\n var-prefixer(textarea-bg),\n --tct-input-background,\n var-prefixer(input-bg),\n --t-gray-14,\n #fcfcfd\n )};\n --comp-textarea-hover-ring-color: var(--tct-textarea-hover-ring-color);\n --comp-textarea-hover-ring: #{0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color),\n var-list(--tct-textarea-hover-box-shadow, unquote('0 0 transparent'))};\n\n resize: none;\n height: 100%;\n -webkit-appearance: none;\n appearance: none;\n display: block;\n box-sizing: border-box;\n min-height: var-list(var-prefixer(textarea-min-height), --comp-textarea-min-height);\n padding: var(--comp-textarea-padding);\n background: var(--comp-textarea-background);\n color: var-list(var-prefixer(textarea-font-color), --t-input-font-color, inherit);\n border-width: var(--comp-textarea-border-width);\n border-style: solid;\n border-color: var(--comp-textarea-border-color);\n border-radius: var(--comp-textarea-border-radius);\n box-shadow: var-list(var-prefixer(textarea-box-shadow), none);\n scrollbar-width: thin;\n scrollbar-color: var(--t-a11y-gray-color) transparent;\n --comp-textarea-tween: #{var-list(var-prefixer(textarea-tween), --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n transition: border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween),\n box-shadow var(--comp-textarea-tween);\n\n &::-webkit-scrollbar {\n width: var(--app-scale-1x);\n height: var(--app-scale-1x);\n margin: var(--app-scale-1x);\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--t-a11y-gray-color);\n border-radius: 2px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &:not([cols]) {\n width: 100%;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #c30000);\n background: var-list(--tct-textarea-error-background, --comp-textarea-background);\n }\n\n &:hover {\n border-color: var-list(--tct-textarea-hover-border-color, --comp-textarea-border-color);\n background: var-list(--tct-textarea-hover-background, --comp-textarea-background);\n box-shadow: var-list(--tct-textarea-hover-box-shadow, --comp-textarea-hover-ring);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-hover-border-color,\n var-prefixer(textarea-error-border-color),\n --const-stoplight-alert,\n #c30000\n );\n background: var-list(\n --tct-textarea-error-hover-background,\n --tct-textarea-error-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-hover-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-hover-box-shadow,\n --comp-textarea-hover-ring\n );\n }\n }\n\n &:focus {\n border-color: var-list(--tct-textarea-focus-border-color, --comp-textarea-border-color);\n background: var-list(--tct-textarea-focus-background, --comp-textarea-background);\n box-shadow: var-list(--tct-textarea-focus-box-shadow, --const-double-focus-ring);\n\n .has-error & {\n border-color: var-list(\n --tct-textarea-error-focus-border-color,\n --tct-textarea-error-border-color,\n --const-stoplight-alert,\n #c30000\n );\n background: var-list(\n --tct-textarea-error-focus-background,\n --tct-textarea-error-background,\n --tct-textarea-focus-background,\n --comp-textarea-background\n );\n box-shadow: var-list(\n --tct-textarea-error-focus-box-shadow,\n --tct-textarea-error-box-shadow,\n --tct-textarea-focus-box-shadow,\n --const-double-focus-ring\n );\n }\n }\n\n &::placeholder {\n color: var-list(\n var-prefixer(textarea-placeholder-font-color),\n --t-input-placeholder-font-color,\n --tct-gray-7,\n --app-gray-7,\n --tct-gray-d1,\n --app-gray-d1,\n #666666\n );\n }\n\n &[disabled] {\n cursor: not-allowed;\n }\n\n &.resize-vertical-auto {\n overflow: hidden;\n }\n\n .has-error & {\n padding-right: var(--comp-textarea-icon-clearance);\n\n &:not(:focus) {\n border-color: var-list(var-prefixer(textarea-error-border-color), --const-stoplight-alert, #c30000);\n }\n }\n}\n\nq2-icon {\n margin-top: calc(#{var-list(var-prefixer(textarea-border-top-width), 1px)} / 2);\n margin-bottom: calc(#{var-list(var-prefixer(textarea-border-bottom-width), 1px)} / 2);\n pointer-events: none;\n position: absolute;\n top: var-list(var-prefixer(textarea-vertical-padding), --tct-scale-2x, --app-scale-2x, 10px);\n color: var-list(var-prefixer(textarea-icon-stroke-primary), --app-gray-9, --tct-gray, --app-gray, #999999);\n right: 0;\n margin-right: var-list(--tct-scale-2x, --app-scale-2x, 10px);\n --tct-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n --t-icon-stroke-primary: #{var-list(\n var-prefixer(textarea-icon-stroke-primary),\n var-prefixer(gray-9),\n --tct-gray,\n --app-gray,\n #999999\n )};\n}\n\n.icon-error {\n color: var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000);\n --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n --t-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000)};\n}\n\n.messages-container {\n height: 0px;\n overflow: hidden;\n background: var-list(\n --tct-message-background,\n --tct-message-bg,\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n box-shadow: var-list(\n var-prefixer(textarea-message-box-shadow),\n --tct-box-shadow-1,\n --app-shadow-1,\n unquote('0 2px 4px rgba(0, 0, 0, 0.3)')\n );\n transition: height\n var-list(var-prefixer(textarea-messages-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n margin-top: 2px;\n z-index: 1;\n position: absolute;\n width: 100%;\n color: var-list(var-prefixer(textarea-messages-font-color), inherit);\n}\n\n.max-length {\n color: var-list(var-prefixer(textarea-max-length-color), --t-textA, rgba(77, 77, 77, 0.77));\n font-size: var-list(\n var-prefixer(textarea-max-length-font-size),\n --tct-font-size-small,\n --app-font-size-small,\n 12px\n );\n position: absolute;\n right: 0;\n}\n\n.btn-resize {\n --tct-textarea-resize-icon-padding: calc(\n calc(\n #{var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px)} - #{var-list(\n var-prefixer(textarea-resize-icon-size),\n 12px\n )}\n ) / 2\n );\n width: var-list(var-prefixer(textarea-resize-btn-width), --tct-btn-icon-width, 44px);\n height: var-list(var-prefixer(textarea-resize-btn-height), --tct-btn-icon-height, 44px);\n background: var-list(var-prefixer(textarea-resize-btn-background), transparent);\n stroke: var-list(var-prefixer(textarea-resize-color), --t-textA, rgba(77, 77, 77, 0.77));\n border: 0;\n position: absolute;\n right: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n bottom: calc(#{var-list(var-prefixer(textarea-resize-icon-padding))} * -1 + 2px);\n display: block;\n padding: var-list(var-prefixer(textarea-resize-icon-padding));\n font-size: 0;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n :host([resize='both']) & {\n cursor: se-resize;\n }\n\n :host([resize='vertical']) &,\n :host([resize='vertical-auto']) & {\n cursor: s-resize;\n }\n\n :host([resize='horizontal']) & {\n cursor: e-resize;\n }\n}\n","import { Component, EventEmitter, Prop, Event, Element, State, h, Watch, Listen, Method } from '@stencil/core';\nimport { IDict } from 'src/util';\nimport { createGuid, isEventFromElement, labelDOM, loc, messagesDOM, overrideFocus, setMessageHeight } from 'src/utils';\n\n@Component({\n tag: 'q2-textarea',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Textarea {\n private textareaField?: HTMLTextAreaElement;\n private contentContainer?: HTMLDivElement;\n private valueOnFocus: string;\n private scheduledAfterRender: (() => void)[] = [];\n private guid = createGuid();\n\n @Prop({ mutable: true }) value: string;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) hideLabel: boolean;\n @Prop({ reflect: true }) hideMessages: boolean;\n @Prop({ reflect: true }) optional: boolean;\n @Prop({ reflect: true }) placeholder: string;\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) readonly: boolean;\n @Prop({ reflect: true }) spellcheck: boolean;\n @Prop({ reflect: true, mutable: true }) maxlength: number;\n @Prop({ reflect: true }) rows: number;\n @Prop({ reflect: true }) cols: number;\n @Prop({ reflect: true }) resize: 'none' \| 'vertical' \| 'horizontal' \| 'both' \| 'vertical-auto' = 'vertical';\n @Prop() errors: string[];\n @Prop() hints: string[];\n\n @State() hasFocus: boolean;\n @State() downParams: IDict<number>;\n\n /////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n if (isNaN(this.maxlength)) {\n this.maxlength = undefined;\n }\n }\n\n componentDidRender() {\n this.scheduledAfterRender.push(this.checkRows, this.checkCols, this.increaseHeightIfOverflowing);\n this.scheduledAfterRender.forEach(fn => fn());\n this.scheduledAfterRender = [];\n }\n\n componentDidLoad() {\n overrideFocus(this.hostElement);\n }\n\n checkRows = () => {\n const { contentContainer, rows, textareaField, resize } = this;\n\n if (!rows \|\| ['none', 'horizontal'].includes(resize)) return;\n contentContainer.style.height = `${contentContainer.offsetHeight}px`;\n textareaField.removeAttribute('rows');\n };\n\n checkCols = () => {\n const { contentContainer, cols, textareaField, resize } = this;\n\n if (!cols \|\| ['none', 'vertical'].includes(resize)) return;\n contentContainer.style.width = `${contentContainer.offsetWidth}px`;\n textareaField.removeAttribute('cols');\n };\n\n @Element() hostElement: HTMLElement;\n\n get hasError() {\n return Array.isArray(this.errors) && this.errors.length > 0;\n }\n\n get messages(): string[] {\n return (\n (this.errors && this.errors.length > 0 && this.errors) \|\|\n (this.hints && this.hints.length > 0 && this.hints) \|\|\n []\n );\n }\n\n get showMessages() {\n return this.messages.length > 0 && !this.hideMessages;\n }\n\n get inputId() {\n return `input-guid-${this.guid}`;\n }\n\n get inputDescribedBy() {\n return this.showMessages ? `${this.inputId}-description` : undefined;\n }\n\n get wrapperClasses() {\n const errorClass = this.hasError ? ' has-error' : '';\n const valueClass = !!this.value ? ' has-value' : '';\n const focusClass = this.hasFocus ? ' has-focus' : '';\n\n return `field-container${errorClass}${valueClass}${focusClass}`;\n }\n\n get showResize() {\n const { resize } = this;\n return resize && resize !== 'none';\n }\n\n //////// OBSERVERS //////////\n\n @Watch('value')\n valueObserver() {\n const { maxlength, value = '' } = this;\n if (!maxlength) return;\n\n const truncatedValue = value.substr(0, maxlength);\n if (truncatedValue === value) return;\n\n this.change.emit({ value: truncatedValue });\n }\n\n @Watch('rows')\n rowsObserver() {\n this.contentContainer.style.height = null;\n }\n\n @Watch('cols')\n colsObserver() {\n this.contentContainer.style.width = null;\n }\n\n @Watch('hints')\n hintsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n @Watch('errors')\n errorsObserver() {\n this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));\n }\n\n ///////// HOST ELEMENT EVENTS //////\n @Listen('focus')\n onHostElementFocus(event: Event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.textareaField.focus();\n }\n\n @Listen('change')\n onHostElementChange(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.onchange) {\n this.value = event.detail.value;\n }\n }\n\n @Listen('input')\n onHostElementInput(event: CustomEvent) {\n if (event.target === this.hostElement && !this.hostElement.oninput) {\n this.value = event.detail.value;\n }\n }\n\n ///////// Events /////////\n\n /*\n Emitted when the field value is updated.\n * @legacyEvent\n /\n @Event() input: EventEmitter<{ value: string }>;\n\n /\n Emitted when the field loses focus after the value has been changed.\n * @legacyEvent\n /\n @Event() change: EventEmitter<{ value: string }>;\n\n /// Methods ///\n /\n Emulates focusing the `<textarea>`, centering the provided value, and emitting an `input` event.\n \n This method leaves the focus on the `<textarea>` and as a result does not trigger the `change` event. If you want\n * to trigger the `change` event, move the focus to another element after calling this method.\n \n @testOnly\n */\n @Method()\n setValue(value: string) {\n const { textareaField } = this;\n textareaField.focus();\n textareaField.value = value;\n textareaField.dispatchEvent(new InputEvent('input'));\n }\n\n ///// ACTIONS ////////\n\n onTextareaFocus = () => {\n this.hasFocus = true;\n this.valueOnFocus = this.value;\n setMessageHeight(this);\n };\n\n onTextareaBlur = () => {\n const {\n valueOnFocus,\n textareaField: { value },\n } = this;\n this.hasFocus = false;\n setMessageHeight(this);\n if (valueOnFocus !== value) this.change.emit({ value });\n };\n\n onTextareaInput = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n this.increaseHeightIfOverflowing();\n\n this.input.emit({ value });\n };\n\n onTextareaChange = (event: InputEvent) => {\n event.stopPropagation();\n const value = (event.target as HTMLTextAreaElement).value;\n\n this.change.emit({ value });\n };\n\n onMouseDown = (event: MouseEvent) => {\n const { contentContainer } = this;\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: event.clientX,\n y: event.clientY,\n };\n document.addEventListener('mousemove', this.onMouseMove);\n document.addEventListener('mouseup', this.onMouseUp);\n };\n\n onMouseMove = (event: MouseEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n onTouchStart = (event: TouchEvent) => {\n if (event.touches.length !== 1) return;\n\n event.preventDefault();\n\n const { contentContainer } = this;\n const firstTouch = event.touches[0];\n\n this.downParams = {\n width: contentContainer.offsetWidth,\n height: contentContainer.offsetHeight,\n x: firstTouch.pageX,\n y: firstTouch.pageY,\n };\n\n document.addEventListener('touchmove', this.onTouchMove);\n document.addEventListener('touchend', this.onTouchMove);\n };\n\n onTouchMove = (event: TouchEvent) => {\n this.setHeight(event);\n this.setWidth(event);\n };\n\n setWidth(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { width, x },\n } = this;\n\n const resizeX = ['both', 'horizontal'].includes(resize);\n\n if (!resizeX) return;\n const eventX = event instanceof MouseEvent ? event.clientX : event.touches[0]?.pageX ?? 0;\n const newWidth = width - (x - eventX);\n contentContainer.style.width = `${newWidth}px`;\n }\n\n setHeight(event: MouseEvent \| TouchEvent) {\n const {\n contentContainer,\n resize,\n downParams: { height, y },\n } = this;\n const resizeY = ['both', 'vertical', 'vertical-auto'].includes(resize);\n\n if (!resizeY) return;\n\n const eventY = event instanceof MouseEvent ? event.clientY : event.touches[0]?.pageY ?? 0;\n const newHeight = height - (y - eventY);\n // If 'vertical-auto', change height if the new height is greater\n // than the current height or the textarea is not overflowing.\n // Otherwise, change height regardless of the new height.\n if (\n resize !== 'vertical-auto' \|\|\n newHeight > height \|\|\n (resize === 'vertical-auto' && !this.isOverflowingVertically())\n ) {\n contentContainer.style.height = `${newHeight}px`;\n }\n }\n\n increaseHeightIfOverflowing = () => {\n const { scrollHeight } = this.textareaField;\n if (this.resize === 'vertical-auto' && this.isOverflowingVertically()) {\n // need to account for border width because scrollHeight does not include it\n const newHeight = scrollHeight + this.getBorderOffset();\n this.contentContainer.style.height = `${newHeight}px`;\n }\n };\n\n isOverflowingVertically = () => {\n const { clientHeight, scrollHeight } = this.textareaField;\n\n return scrollHeight > clientHeight;\n };\n\n getBorderOffset = () => {\n const computedStyle = window.getComputedStyle(this.textareaField);\n\n return parseInt(computedStyle.borderTopWidth, 10) + parseInt(computedStyle.borderBottomWidth, 10);\n };\n\n onMouseUp = () => {\n document.removeEventListener('mousemove', this.onMouseMove);\n this.downParams = null;\n };\n\n /////// VIEW METHODS ///////\n\n render() {\n return (\n <div class={this.wrapperClasses}>\n {labelDOM(this)}\n <div\n class=\"content-container\"\n ref={el => (this.contentContainer = el)}\n >\n {this.inputDOM()}\n {this.maxlength ? this.maxLengthDOM() : ''}\n {messagesDOM(this)}\n </div>\n </div>\n );\n }\n\n maxLengthDOM() {\n return (\n <div\n class=\"max-length\"\n aria-hidden=\"true\"\n >\n {this.value?.length \|\| 0}/{this.maxlength}\n </div>\n );\n }\n\n inputDOM() {\n const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';\n\n return (\n <div class=\"input-container\">\n <textarea\n id={this.inputId}\n class={textareaClasses}\n placeholder={(this.placeholder && loc(this.placeholder)) \|\| undefined}\n test-id=\"inputField\"\n maxLength={this.maxlength}\n aria-describedby={this.inputDescribedBy}\n aria-invalid={`${this.hasError}`}\n aria-required={`${!this.optional}`}\n aria-label={this.hideLabel && this.label}\n spellcheck={this.spellcheck}\n rows={this.rows \|\| 3}\n cols={this.cols}\n value={this.value}\n ref={el => (this.textareaField = el)}\n readonly={!!this.readonly}\n disabled={!!this.disabled}\n maxlength={this.maxlength}\n onInput={this.onTextareaInput}\n onChange={this.onTextareaChange}\n onFocus={this.onTextareaFocus}\n onBlur={this.onTextareaBlur}\n ></textarea>\n {this.hasError ? (\n <q2-icon\n type=\"error\"\n class=\"icon-error\"\n />\n ) : (\n ''\n )}\n {this.showResize && (\n <button\n onMouseDown={this.onMouseDown}\n onTouchStart={this.onTouchStart}\n class=\"btn-resize\"\n aria-label={loc('tecton.element.input.resize')}\n tabIndex={-1}\n >\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 12 12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11\"\n fill=\"none\"\n stroke-stroke-linecap=\"square\"\n />\n </svg>\n </button>\n )}\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-ebc7f269.js';
-import { o as overrideFocus, i as isEventFromElement } from './index-84f1034e.js';
+import { o as overrideFocus, i as isEventFromElement } from './index-fbe28822.js';
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:\"\";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}";

package/dist/esm/tecton-tab-pane.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"tecton-tab-pane.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,yhCAAyhC;;MCQ9hC,aAAa;;;;;~~IAoEtB~~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","names":[],"sources":["./src/components/tecton-tab-pane/styles.scss?tag=tecton-tab-pane&encapsulation=shadow","./src/components/tecton-tab-pane/index.tsx"],"sourcesContent":["@import '../q2-tab-pane/styles.scss';\n\n.loading-wrapper { \n height: 44px;\n width: 100%;\n align-items: center;\n justify-content: center;\n}\n.loading-wrapper:not([hidden]) {\n display: flex;\n}\niframe {\n width: 100%;\n height: auto;\n overflow-y: hidden;\n border: none;\n}\niframe:not([hidden]) {\n display: inline-block;\n}\n\n.slot-wrapper:focus {\n outline: none;\n box-shadow: var(--const-global-focus);\n}\n","import { Component, ComponentInterface, Element, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge';\n\n@Component({\n tag: 'tecton-tab-pane',\n styleUrl: 'styles.scss',\n shadow: true,\n})\nexport class TectonTabPane implements ComponentInterface {\n @Prop({ reflect: true }) value: string;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) selected: boolean;\n @Prop() index: number;\n @Prop() guid: number;\n // above props duplicated from q2-tab-pane.\n // Unable to extend due to Stencil decorator limitation\n @Prop({ reflect: true }) provided: boolean;\n @Prop({ reflect: true }) url: string;\n @Prop({ reflect: true }) moduleId: string;\n @Prop({ reflect: true }) minHeight: string;\n @Prop({ reflect: true }) badgeCount: number;\n @Prop({ reflect: true }) badgeDescription: string;\n @Prop({ reflect: true }) badgeTheme: Q2Badge['theme'];\n @Prop({ reflect: true }) badgeStatus: Q2Badge['status'];\n @Prop() authPayload: { key: string; value: string }[];\n @Prop() showForm: boolean;\n @State() _showForm: boolean;\n @Element() hostElement: HTMLElement;\n\n @Event({ bubbles: true }) badge: EventEmitter<boolean>;\n\n @Watch('badgeCount')\n @Watch('badgeDescription')\n @Watch('badgeTheme')\n @Watch('badgeStatus')\n badgeObserver() {\n this.badge.emit();\n }\n\n get iframeTitle() {\n return this.moduleId.split('.').slice(-2).join('-');\n }\n componentWillRender(): void \| Promise<void> {\n const loadingWrapper: HTMLDivElement = this.hostElement.shadowRoot.querySelector('.loading-wrapper');\n if (loadingWrapper) {\n loadingWrapper.style.minHeight = this.minHeight;\n loadingWrapper.hidden = !this.selected;\n }\n }\n\n componentWillLoad() {\n this._showForm = this.showForm;\n }\n\n componentDidRender() {\n const formElement = this.hostElement.shadowRoot.querySelector('form');\n\n if (!!formElement && !!formElement.parentElement) {\n formElement.submit();\n this._showForm = false;\n }\n }\n\n ///////// Observers /////////\n @Watch('selected')\n selectedObserver() {\n const loader: HTMLDivElement = this.hostElement.shadowRoot.querySelector('div[slot=\"loading-wrapper\"]');\n this._showForm = this.showForm; // reset state\n\n if (loader) {\n loader.hidden = !this.selected;\n }\n }\n\n ///////// Actions /////////\n onIFrameLoad = (event: Event) => {\n const iframe = event.target as HTMLIFrameElement;\n\n iframe.contentWindow &&\n iframe.contentWindow.postMessage(\n `[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`,\n '*'\n );\n };\n\n ///////// View Methods /////////\n render() {\n return (\n <div\n id={`tab-pane-${this.guid}-${this.index}`}\n class={`tab-pane${this.selected ? '' : ' hidden'}`}\n role=\"tabpanel\"\n tabindex=\"-1\"\n aria-hidden={`${!this.selected}`}\n aria-labelledby={`tab-${this.guid}-${this.index}`}\n >\n {this.selected && this.provided !== undefined && !this.provided && (\n <div>\n <slot name=\"loading-wrapper\" />\n <iframe\n hidden\n name={this.moduleId}\n scrolling=\"no\"\n src={this.showForm && this.authPayload.length ? '' : this.url \|\| ''}\n data-module-id={this.moduleId}\n style={this.minHeight ? { minHeight: this.minHeight } : null}\n onLoad={this.onIFrameLoad}\n title={this.iframeTitle}\n allow=\"geolocation; camera\"\n />\n {this._showForm && this.authPayload ? (\n <form\n hidden\n method=\"post\"\n action={this.url}\n target={this.moduleId}\n encType=\"multipart/form-data\"\n >\n {this.authPayload.map(element => {\n return (\n <input\n type=\"hidden\"\n value={element.value}\n name={element.key}\n />\n );\n })}\n </form>\n ) : (\n ''\n )}\n </div>\n )}\n <div\n class=\"slot-wrapper\"\n hidden={this.selected && this.provided !== undefined && !this.provided}\n >\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"tecton-tab-pane.entry.js","mappings":"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","names":[],"sources":["./src/components/tecton-tab-pane/styles.scss?tag=tecton-tab-pane&encapsulation=shadow","./src/components/tecton-tab-pane/index.tsx"],"sourcesContent":["@import '../q2-tab-pane/styles.scss';\n\n.loading-wrapper { \n height: 44px;\n width: 100%;\n align-items: center;\n justify-content: center;\n}\n.loading-wrapper:not([hidden]) {\n display: flex;\n}\niframe {\n width: 100%;\n height: auto;\n overflow-y: hidden;\n border: none;\n}\niframe:not([hidden]) {\n display: inline-block;\n}\n\n.slot-wrapper:focus {\n outline: none;\n box-shadow: var(--const-global-focus);\n}\n","import { Component, ComponentInterface, Element, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\nimport { Q2Badge } from '../q2-badge';\n\n@Component({\n tag: 'tecton-tab-pane',\n styleUrl: 'styles.scss',\n shadow: true,\n})\nexport class TectonTabPane implements ComponentInterface {\n @Prop({ reflect: true }) value: string;\n @Prop({ reflect: true }) label: string;\n @Prop({ reflect: true }) name: string;\n @Prop({ reflect: true }) selected: boolean;\n @Prop() index: number;\n @Prop() guid: number;\n // above props duplicated from q2-tab-pane.\n // Unable to extend due to Stencil decorator limitation\n @Prop({ reflect: true }) provided: boolean;\n @Prop({ reflect: true }) url: string;\n @Prop({ reflect: true }) moduleId: string;\n @Prop({ reflect: true }) minHeight: string;\n @Prop({ reflect: true }) badgeCount: number;\n @Prop({ reflect: true }) badgeDescription: string;\n @Prop({ reflect: true }) badgeTheme: Q2Badge['theme'];\n @Prop({ reflect: true }) badgeStatus: Q2Badge['status'];\n @Prop() authPayload: { key: string; value: string }[];\n @Prop() showForm: boolean;\n @State() _showForm: boolean;\n @Element() hostElement: HTMLElement;\n\n /*\n Emitted when the badge count, description, theme, or status changes.\n * @private\n /\n @Event({ bubbles: true }) badge: EventEmitter<boolean>;\n\n @Watch('badgeCount')\n @Watch('badgeDescription')\n @Watch('badgeTheme')\n @Watch('badgeStatus')\n badgeObserver() {\n this.badge.emit();\n }\n\n get iframeTitle() {\n return this.moduleId.split('.').slice(-2).join('-');\n }\n componentWillRender(): void \| Promise<void> {\n const loadingWrapper: HTMLDivElement = this.hostElement.shadowRoot.querySelector('.loading-wrapper');\n if (loadingWrapper) {\n loadingWrapper.style.minHeight = this.minHeight;\n loadingWrapper.hidden = !this.selected;\n }\n }\n\n componentWillLoad() {\n this._showForm = this.showForm;\n }\n\n componentDidRender() {\n const formElement = this.hostElement.shadowRoot.querySelector('form');\n\n if (!!formElement && !!formElement.parentElement) {\n formElement.submit();\n this._showForm = false;\n }\n }\n\n ///////// Observers /////////\n @Watch('selected')\n selectedObserver() {\n const loader: HTMLDivElement = this.hostElement.shadowRoot.querySelector('div[slot=\"loading-wrapper\"]');\n this._showForm = this.showForm; // reset state\n\n if (loader) {\n loader.hidden = !this.selected;\n }\n }\n\n ///////// Actions /////////\n onIFrameLoad = (event: Event) => {\n const iframe = event.target as HTMLIFrameElement;\n\n iframe.contentWindow &&\n iframe.contentWindow.postMessage(\n `[iFrameSizer]${this.moduleId}:0:false:false:32:true:true:null:documentElementOffset`,\n ''\n );\n };\n\n ///////// View Methods /////////\n render() {\n return (\n <div\n id={`tab-pane-${this.guid}-${this.index}`}\n class={`tab-pane${this.selected ? '' : ' hidden'}`}\n role=\"tabpanel\"\n tabindex=\"-1\"\n aria-hidden={`${!this.selected}`}\n aria-labelledby={`tab-${this.guid}-${this.index}`}\n >\n {this.selected && this.provided !== undefined && !this.provided && (\n <div>\n <slot name=\"loading-wrapper\" />\n <iframe\n hidden\n name={this.moduleId}\n scrolling=\"no\"\n src={this.showForm && this.authPayload.length ? '' : this.url \|\| ''}\n data-module-id={this.moduleId}\n style={this.minHeight ? { minHeight: this.minHeight } : null}\n onLoad={this.onIFrameLoad}\n title={this.iframeTitle}\n allow=\"geolocation; camera\"\n />\n {this._showForm && this.authPayload ? (\n <form\n hidden\n method=\"post\"\n action={this.url}\n target={this.moduleId}\n encType=\"multipart/form-data\"\n >\n {this.authPayload.map(element => {\n return (\n <input\n type=\"hidden\"\n value={element.value}\n name={element.key}\n />\n );\n })}\n </form>\n ) : (\n ''\n )}\n </div>\n )}\n <div\n class=\"slot-wrapper\"\n hidden={this.selected && this.provided !== undefined && !this.provided}\n >\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/q2-tecton-elements/p-0253a00b.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,h as t,F as r,g as e}from"./p-277dc8cd.js";import{q as c,l as a,h as n,t as i,o as l,i as v}from"./p-fb903495.js";import{s as d}from"./p-f7ebeeb0.js";const b='{box-sizing:border-box}:active{outline:none}:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}{box-sizing:border-box}:active{outline:none}:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}: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([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="1"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}: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([color]) button,:host([intent]) button{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}: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, 14px))}: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-medium, var(--t-btn-font-size-medium, 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-large, var(--t-btn-font-size-large, 20px))}: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-disabled-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-disabled-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-disabled-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-disabled-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-disabled-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-disabled-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(:not([size])) 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(:not([size])) button.icon-only:hover,:host(:not([size])) button.icon-only:focus{background: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(:not([intent])) button:not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}:host(:not([intent])) button:not(.icon-only):hover,:host(:not([intent])) button:not(.icon-only):focus{background:var(--tct-btn-hover-background)}: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%}';const s=class{constructor(e){o(this,e);this.handleButtonSize=()=>{if(Number(this.size)<=4){c(this,"size","prop")}};this.handleSlotChange=()=>{this.handleIcons()};this.handleIcons=()=>{const o=Array.from(this.hostElement.querySelectorAll(":scope > q2-icon")).reduce(((o,t)=>{if(o)t.remove();else o=t;return o}),null);const t=!!o;const r=!!this.hostElement.querySelector("q2-loc");const e=!!this.hostElement.textContent.trim();const c=(r\|\|e)&&t&&this.hostElement.firstElementChild===o;const a=(r\|\|e)&&t&&this.hostElement.lastElementChild===o;const n=!c&&!a&&t;let i;if(n)i="only";else if(c)i="left";else if(a)i="right";this.iconPosition=i};this.renderButton=()=>{const{ariaExpanded:o,ariaHasPopup:e,ariaSelected:c,ariaPressed:n,description:i,disabled:l,type:v,tabindex:d}=this.buttonAttributes;const{iconPosition:b,loading:s,badge:u,label:p,hideLabel:h}=this;const m=b\|\|s;const f=!b\|\|u;return t(r,null,t("button",{ref:o=>this.primaryBtn=o!==null&&o!==void 0?o:this.primaryBtn,"aria-expanded":o,"aria-haspopup":e,"aria-label":h&&a(p),"aria-selected":c,"aria-pressed":n,disabled:l,type:v,tabindex:d,"test-id":"q2BtnInnerButton",class:b?`icon-${b}`:"","aria-describedby":!!i?"hidden-description":undefined},t("div",null,m&&t("q2-loading",{hidden:!s,modifiers:f?"inline":undefined}),!h&&p?a(p):t("slot",{onSlotchange:this.handleSlotChange}))),!!i&&t("div",{id:"hidden-description","aria-hidden":"true",class:"sr"},i))};this.render=()=>this.size==="small"?t("div",{class:"btn-height-wrapper",ref:o=>this.primaryBtnWrapper=o!==null&&o!==void 0?o:this.primaryBtnWrapper,tabIndex:-1},this.renderButton()):this.renderButton();this.ariaExpanded=undefined;this.ariaHasPopup=undefined;this.ariaControls=undefined;this.ariaSelected=undefined;this.ariaPressed=undefined;this.description=undefined;this.label=undefined;this.hideLabel=undefined;this.tabIndex=undefined;this.intent=undefined;this.disabled=undefined;this.type=undefined;this.size=undefined;this.loading=undefined;this.badge=undefined;this.active=undefined;this.block=undefined;this.color=undefined;this.fab=undefined;this.ariaLabel=undefined;this.iconPosition=undefined}componentWillLoad(){this.handleIcons();n(this);i(this)}componentDidLoad(){this.handleButtonSize();l(this.hostElement)}disable(o){if(this.disabled){o.stopImmediatePropagation()}this.primaryBtn.focus()}delegateFocus(o){if(!v(o,this.hostElement))return;this.primaryBtn.focus()}ariaLabelObserver(){n(this)}sizeObserver(){this.handleButtonSize()}get buttonAttributes(){var o,t,r;return{ariaExpanded:this.ariaExpanded!==undefined?`${((o=this.ariaExpanded)===null\|\|o===void 0?void 0:o.toString())==="true"}`:undefined,ariaHasPopup:this.ariaHasPopup!==undefined?`${this.ariaHasPopup==="true"\|\|this.ariaHasPopup==="menu"}`:undefined,ariaLabel:this.label&&this.hideLabel?a(this.label):undefined,ariaSelected:this.ariaSelected!==undefined?`${((t=this.ariaSelected)===null\|\|t===void 0?void 0:t.toString())==="true"}`:undefined,ariaPressed:this.ariaPressed!==undefined?`${((r=this.ariaPressed)===null\|\|r===void 0?void 0:r.toString())==="true"}`:undefined,description:this.description!==undefined?this.description:undefined,disabled:this.disabled\|\|false,type:this.type\|\|"button",tabindex:this.tabIndex\|\|undefined}}get hostElement(){return e(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"],size:["sizeObserver"]}}};s.style=b;const u="{box-sizing:border-box}:active{outline:none}:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner {box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--t-a11y-gray-color-AA, #949494)))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";const p=class{constructor(r){o(this,r);this.halfCircleSpinner=()=>t("div",{class:"q2-loading-animation half-circle-spinner","aria-label":this.localizedLabel},t("div",{class:"circle circle-1"}),t("div",{class:"circle circle-2"}));this.spinner=()=>this.halfCircleSpinner();this.skeletonLoader=()=>t("div",{class:"q2-loading-skeleton","aria-label":this.localizedLabel},this.shape==="custom"?t("slot",null):this.skeletonShape,t("div",{class:"q2-loading-skeleton-shimmer"}));this.type=undefined;this.shape=undefined;this.modifiers=undefined;this.counts=undefined;this.label=undefined;this.inline=undefined;this.ariaLabel=undefined}get loader(){const o={default:this.spinner,spinner:this.spinner,skeleton:this.skeletonLoader};return o[this.type]\|\|o.default}get modifiersSet(){if(this.type!=="skeleton"\|\|!this.modifiers){return undefined}return new Set(this.modifiers.split("-"))}get countsArray(){if(this.type!=="skeleton"\|\|!this.counts){return undefined}return this.counts.split("x").map(Number)}get skeletonShape(){var o,t;return(t=(o=d[this.shape])===null\|\|o===void 0?void 0:o.call(d,this.countsArray,this.modifiersSet))!==null&&t!==void 0?t:""}get spinnerShape(){const o={default:this.halfCircleSpinner,"half-circle":this.halfCircleSpinner};return o[this.type]\|\|o.default}get localizedLabel(){return a(this.label\|\|"tecton.element.loading.ariaLabel")}componentWillLoad(){n(this)}ariaLabelObserver(){n(this)}render(){return this.loader()}get hostElement(){return e(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};p.style=u;export{s as q2_btn,p as q2_loading};
2	+ //# sourceMappingURL=p-0253a00b.entry.js.map

package/dist/q2-tecton-elements/p-0253a00b.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stylesCss","Q2Btn","this","handleButtonSize","Number","size","handleDeprecationWarning","handleSlotChange","handleIcons","icon","Array","from","hostElement","querySelectorAll","reduce","acc","element","remove","hasIcon","hasLoc","querySelector","hasText","textContent","trim","hasIconLeft","firstElementChild","hasIconRight","lastElementChild","hasIconOnly","iconPosition","renderButton","ariaExpanded","ariaHasPopup","ariaSelected","ariaPressed","description","disabled","type","tabindex","buttonAttributes","loading","badge","label","hideLabel","renderLoadingSpinner","isLoadingSpinnerInline","h","Fragment","ref","el","primaryBtn","loc","class","undefined","hidden","modifiers","onSlotchange","id","render","primaryBtnWrapper","tabIndex","componentWillLoad","handleAriaLabel","handleColor","componentDidLoad","overrideFocus","disable","ev","stopImmediatePropagation","focus","delegateFocus","event","isEventFromElement","ariaLabelObserver","sizeObserver","_a","toString","ariaLabel","_b","_c","Q2Loading","halfCircleSpinner","localizedLabel","spinner","skeletonLoader","shape","skeletonShape","loader","loaderMap","default","skeleton","modifiersSet","Set","split","countsArray","counts","map","skeletonShapes","call","shapes","spinnerShape","spinnerMap"],"sources":["./src/components/q2-btn/styles.scss?tag=q2-btn&encapsulation=shadow","./src/components/q2-btn/index.tsx","./src/components/q2-loading/styles.scss?tag=q2-loading&encapsulation=shadow","./src/components/q2-loading/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './mixins';\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([block]) {\n display: block;\n width: 100%;\n}\n\n::slotted(q2-icon) {\n pointer-events: none;\n}\n\n:host {\n --comp-font-weight: 600;\n --comp-border-radius: #{var-list(--tct-btn-border-radius, --app-border-radius-1, 3px)};\n --comp-btn-tween: #{var-list(var-prefixer(btn-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n --comp-background-alternative: #ebf8ff;\n .btn-height-wrapper {\n height: var(--comp-btn-min-height, 44px);\n cursor: pointer;\n &:active {\n box-shadow: none;\n }\n }\n}\n\nbutton {\n margin: var-list(--tct-scale-0, --app-scale-0x, 0);\n padding: var-list(--tct-scale-0, --app-scale-0x, 0);\n display: inline-block;\n width: 100%;\n hyphens: auto;\n border: var(--tct-btn-border);\n border-radius: var(--tct-btn-border-radius);\n background: transparent;\n box-shadow: none;\n border-radius: 0;\n font-weight: 400;\n color: inherit;\n cursor: pointer;\n transition: var(--comp-btn-tween);\n transition-property: background, color, box-shadow, fill, border-color, border-width;\n outline: 0;\n &:disabled {\n opacity: var-list(var-prefixer(btn-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n cursor: not-allowed;\n }\n\n // Sizes\n :host([color]:not([size])) &,\n :host([intent]:not([size])) & {\n padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n }\n :host([size='1']) & {\n padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\n }\n :host([size='2']) & {\n padding: var-list(--tct-scale-2, --app-scale-2x, 10px);\n }\n :host([size='3']) & {\n padding: var-list(--tct-scale-3, --app-scale-3x, 15px);\n }\n :host([size='4x']) & {\n padding: var-list(--tct-scale-4x, --app-scale-4x, 20px);\n }\n :host([size='4']) & {\n padding: var-list(--tct-scale-6x, --app-scale-6x, 30px);\n }\n // Colors\n :host([color]) &,\n :host([intent]) & {\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n }\n\n :host([size='small']) & {\n padding: var-list(var-prefixer(btn-padding-size-small), '4px 16px');\n font-size: var-list(var-prefixer(btn-font-size-small), 14px);\n }\n :host([size='medium']) & {\n padding: var-list(var-prefixer(btn-padding-size-medium), '12px 24px');\n font-size: var-list(var-prefixer(btn-font-size-medium), 16px);\n }\n :host([size='large']) & {\n padding: var-list(var-prefixer(btn-padding-size-large), '16px 32px');\n font-size: var-list(var-prefixer(btn-font-size-large), 20px);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-background: #{var-list(--tct-btn-primary-hover-background, --tct-btn-primary-hover-bg)};\n --comp-font-color: #{var-list(--tct-btn-primary-font-color, --app-white, #ffffff)};\n --comp-box-shadow: #{var-list(--tct-btn-primary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-primary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // different background for active\n --comp-active-background: var(--tct-btn-primary-active-background, #0063a0);\n @include btn-ring(primary, hover, --comp-background, --comp-font-color, null);\n @include btn-ring(primary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(primary);\n @include btn-icon-color(primary, --comp-font-color);\n }\n\n :host([color='secondary']) &,\n :host([intent='workflow-secondary']) & {\n --comp-background: #{var-list(\n --tct-btn-secondary-background,\n --tct-btn-secondary-bg,\n --t-button-default-bg,\n #cccccc\n )};\n --comp-hover-background: #{var-list(\n --tct-btn-secondary-hover-background,\n --tct-btn-secondary-hover-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-font-color: var(--app-white, #ffffff);\n --comp-box-shadow: #{var-list(--tct-btn-secondary-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-secondary-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n @include btn-ring(secondary, hover, --comp-hover-background, --app-white, null);\n @include btn-ring(secondary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(secondary, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(secondary, focus-visible, --const-focus-color, --app-white, null);\n @include btn-intent(secondary);\n @include btn-icon-color(secondary, --comp-font-color);\n }\n\n :host([intent='workflow-destroy']) & {\n --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #c30000)};\n --comp-font-color: #{var-list(--tct-btn-destroy-font-color, --app-white)};\n --comp-box-shadow: #{var-list(--tct-btn-destroy-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-destroy-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n @include btn-ring(destroy, hover, --comp-background, --comp-font-color, null);\n @include btn-ring(destroy, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(destroy);\n @include btn-icon-color(destroy, --comp-font-color);\n }\n\n :host([intent='workflow-escape']) & {\n --comp-background: #{var-list(--tct-btn-escape-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-escape-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: #{var-list(--tct-btn-escape-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-hover-box-shadow: #{var-list(--tct-btn-escape-hover-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-escape-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // different background for hover/active/focus\n --comp-hover-background: #{var-list(--tct-btn-escape-hover-background, --comp-background-alternative)};\n --comp-active-background: #{var-list(--tct-btn-escape-active-background, --comp-background-alternative)};\n --comp-focus-background: #{var-list(--tct-btn-escape-focus-background, --comp-background-alternative)};\n @include btn-ring(escape, hover, --comp-font-color, --comp-background, null);\n @include btn-ring(escape, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(escape, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(escape, focus-visible, --const-focus-color, --comp-background, null);\n @include btn-intent(escape);\n @include btn-icon-color(escape, --comp-font-color);\n }\n\n :host([intent='neutral']) & {\n --comp-background: #{var-list(--tct-btn-neutral-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-neutral-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: #{var-list(--tct-btn-neutral-box-shadow, --comp-btn-fallback-box-shadow)};\n --comp-focus-box-shadow: #{var-list(--tct-btn-neutral-focus-box-shadow, --comp-btn-fallback-box-shadow)};\n // use outline instead border: because on/off border makes the button shaking on hover/focus/active\n --comp-border-width: 1px;\n --comp-border-style: solid;\n --comp-border-color: var(--comp-font-color);\n @include btn-ring(neutral, hover, --comp-font-color, --app-white, null);\n @include btn-ring(neutral, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral, focus-visible, --const-focus-color, --comp-background, null);\n @include btn-intent(neutral);\n @include btn-icon-color(neutral, --comp-font-color);\n }\n\n :host([intent='neutral-text']) & {\n --comp-background: #{var-list(\n --tct-btn-neutral-text-background,\n --tct-btn-neutral-text-bg,\n --app-white,\n #ffffff\n )};\n --comp-font-color: #{var-list(\n --tct-btn-neutral-text-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-box-shadow: var(--tct-btn-neutral-text-box-shadow);\n --comp-hover-text-decoration: underline;\n // different background for focus\n --comp-focus-background: #{var-list(--tct-btn-neutral-text-focus-background, --comp-background-alternative)};\n @include btn-ring(neutral-text, hover, --comp-font-color, --comp-background, null);\n @include btn-ring(neutral-text, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral-text, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral-text, focus-visible, --const-focus-color, --app-white, null);\n @include btn-intent(neutral-text);\n @include btn-icon-color(neutral-text, --comp-font-color);\n }\n\n // different background for loading\n :host([color='primary'][loading]) &,\n :host([intent='workflow-primary'][loading]) & {\n --comp-background: var(--tct-btn-primary-loading-background, #0063a0);\n }\n\n :host([intent='workflow-escape'][loading]) & {\n --comp-background: #{var-list(--tct-btn-escape-loading-background, --comp-background-alternative)};\n }\n\n // Icons\n :host(:not([size])) &.icon-only {\n width: var-list(var-prefixer(btn-icon-width), 44px);\n height: var-list(var-prefixer(btn-icon-height), 44px);\n border-radius: var-list(var-prefixer(btn-icon-border-radius), --tct-btn-border-radius, 0);\n\n &:hover,\n &:focus {\n background: var-list(\n --tct-btn-icon-hover-background,\n var-prefixer(btn-icon-hover-bg),\n var-prefixer(gray-13),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n }\n\n :host(:not([intent])[active]) &.icon-only {\n background-color: var-list(\n --tct-btn-icon-active-background,\n var-prefixer(btn-icon-active-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n }\n\n :host(:not([intent])) &.icon-only:hover *,\n :host(:not([intent])) &.icon-only:focus *,\n :host(:not([intent])[active]) &.icon-only * {\n color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n }\n\n // Plain\n :host(:not([intent])) &:not(.icon-only) {\n height: var-list(--tct-btn-height, auto);\n padding-inline: var-list(--tct-btn-padding-inline, 0);\n font-weight: var-list(--tct-btn-font-weight);\n border-radius: var-list(--tct-btn-border-radius, 0);\n\n &:hover,\n &:focus {\n background: var(--tct-btn-hover-background);\n }\n }\n\n // Badges\n :host([badge]) & {\n padding: var-list(var-prefixer(btn-badge-padding), unquote('2px 5px'));\n font-size: var-list(var-prefixer(btn-badge-font-size), var-prefixer(btn-font-size), inherit);\n border-radius: var-list(\n var-prefixer(btn-badge-border-radius),\n --tct-border-radius-1,\n --app-border-radius-1,\n 3px\n );\n background-color: var-list(--tct-btn-badge-background, var-prefixer(btn-badge-bg), transparent);\n color: var-list(var-prefixer(btn-badge-font-color), inherit);\n\n ::slotted(q2-icon) {\n --tct-icon-size: 1em;\n }\n }\n\n :host([badge]:hover) &:enabled {\n background-color: var-list(\n --tct-btn-badge-hover-background,\n var-prefixer(btn-badge-hover-bg),\n var-prefixer(gray-14),\n --tct-gray-l3,\n --app-gray-l3,\n #f2f2f2\n );\n color: var-list(\n var-prefixer(btn-badge-hover-font-color),\n var-prefixer(gray-5),\n --tct-gray-d2,\n --app-gray-d2,\n #404040\n );\n }\n\n :host(.selected[badge]) &,\n :host([active][badge]) & {\n background-color: var-list(\n --tct-btn-badge-active-background,\n var-prefixer(btn-badge-active-bg),\n --comp-btn-primary-background\n );\n color: var-list(var-prefixer(btn-badge-active-font-color), --comp-btn-primary-font-color);\n }\n}\n\ndiv {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n\n :host([loading]) .icon-right & {\n flex-direction: row-reverse;\n }\n}\n\nq2-loading {\n --tct-loading-primary-color: currentColor;\n --tct-loading-secondary-color: currentColor;\n --tct-loading-spinner-size: 24px;\n}\n\n:host([loading]) ::slotted(q2-icon) {\n display: none;\n}\n:host([loading]) button {\n pointer-events: none;\n}\n\n:host([block]) button,\n:host([block]) button.icon-only {\n display: block;\n width: 100%;\n}\n","import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport {\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n@Component({\n tag: 'q2-btn',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Btn implements ComponentInterface {\n @Prop() ariaExpanded: string;\n @Prop() ariaHasPopup: string;\n @Prop() ariaControls: string;\n @Prop() ariaSelected: string;\n @Prop() ariaPressed: string;\n @Prop() description: string;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n @Prop() tabIndex: number;\n @Prop({ reflect: true, mutable: true }) intent:\n | 'workflow-primary'\n | 'workflow-secondary'\n | 'workflow-destroy'\n | 'workflow-escape'\n | 'neutral'\n | 'neutral-text';\n @Prop({ reflect: true }) disabled: boolean;\n @Prop({ reflect: true }) type: string;\n @Prop({ reflect: true }) size: string;\n @Prop({ reflect: true }) loading: boolean;\n @Prop({ reflect: true }) badge: boolean;\n @Prop({ reflect: true }) active: boolean;\n @Prop({ reflect: true }) block: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n\n /** @deprecated */\n @Prop({ reflect: true }) fab: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @State() iconPosition: 'left' | 'right' | 'only';\n\n @Element() hostElement: HTMLElement;\n\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n ////////// LIFECYCLE HOOKS ////////\n\n componentWillLoad() {\n this.handleIcons();\n handleAriaLabel(this);\n handleColor(this);\n }\n\n componentDidLoad(): void {\n this.handleButtonSize();\n overrideFocus(this.hostElement);\n }\n\n @Listen('click', { capture: true })\n disable(ev: Event) {\n if (this.disabled) {\n ev.stopImmediatePropagation();\n }\n this.primaryBtn.focus();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n //////// Method //////////\n\n ////////// OBSERVERS //////////\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('size')\n sizeObserver() {\n this.handleButtonSize();\n }\n\n handleButtonSize = () => {\n if (Number(this.size) <= 4) {\n handleDeprecationWarning(this, 'size', 'prop');\n }\n };\n\n handleSlotChange = () => {\n this.handleIcons();\n };\n\n handleIcons = () => {\n // Only allow one icon in the button\n const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n if (acc) element.remove();\n else acc = element;\n return acc;\n }, null);\n\n const hasIcon = !!icon;\n const hasLoc = !!this.hostElement.querySelector('q2-loc');\n const hasText = !!this.hostElement.textContent.trim();\n const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n let iconPosition;\n if (hasIconOnly) iconPosition = 'only';\n else if (hasIconLeft) iconPosition = 'left';\n else if (hasIconRight) iconPosition = 'right';\n this.iconPosition = iconPosition;\n };\n\n renderButton = () => {\n const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n this.buttonAttributes;\n const { iconPosition, loading, badge, label, hideLabel } = this;\n const renderLoadingSpinner = iconPosition || loading;\n const isLoadingSpinnerInline = !iconPosition || badge;\n return (\n <Fragment>\n <button\n ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-label={hideLabel && loc(label)}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={iconPosition ? `icon-${iconPosition}` : ''}\n aria-describedby={!!description ? 'hidden-description' : undefined}\n >\n <div>\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {!hideLabel && label ? loc(label) : <slot onSlotchange={this.handleSlotChange} />}\n </div>\n </button>\n {!!description && (\n <div\n id=\"hidden-description\"\n aria-hidden=\"true\"\n class=\"sr\"\n >\n {description}\n </div>\n )}\n </Fragment>\n );\n };\n\n render = () => {\n return this.size === 'small' ? (\n // wrap only for small sized\n <div\n class=\"btn-height-wrapper\"\n ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n tabIndex={-1}\n >\n {this.renderButton()}\n </div>\n ) : (\n this.renderButton()\n );\n };\n\n get buttonAttributes() {\n return {\n ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded?.toString() === 'true'}` : undefined,\n ariaHasPopup:\n this.ariaHasPopup !== undefined\n ? `${this.ariaHasPopup === 'true' || this.ariaHasPopup === 'menu'}`\n : undefined,\n ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected?.toString() === 'true'}` : undefined,\n ariaPressed: this.ariaPressed !== undefined ? `${this.ariaPressed?.toString() === 'true'}` : undefined,\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled || false,\n type: this.type || 'button',\n tabindex: this.tabIndex || undefined,\n };\n }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([inline]),\n:host([modifiers*='inline']) {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(:not([inline]):not([modifiers*='inline'])) {\n font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n height: 1em;\n width: 1em;\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\n\n@Component({\n tag: 'q2-loading',\n shadow: true,\n styleUrl: 'styles.scss',\n})\nexport class Q2Loading implements ComponentInterface {\n @Element() hostElement: HTMLElement;\n\n @Prop({ reflect: true }) type: 'spinner' | 'skeleton';\n @Prop({ reflect: true }) shape: string;\n @Prop({ reflect: true }) modifiers: string;\n @Prop({ reflect: true }) counts: string;\n @Prop({ reflect: true, mutable: true }) label: string;\n @Prop({ reflect: true }) inline: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n get loader() {\n const loaderMap = {\n default: this.spinner,\n spinner: this.spinner,\n skeleton: this.skeletonLoader,\n };\n\n return loaderMap[this.type] || loaderMap.default;\n }\n\n get modifiersSet(): Set<string> {\n if (this.type !== 'skeleton' || !this.modifiers) {\n return undefined;\n }\n\n return new Set(this.modifiers.split('-'));\n }\n\n get countsArray(): number[] {\n if (this.type !== 'skeleton' || !this.counts) {\n return undefined;\n }\n\n return this.counts.split('x').map(Number);\n }\n\n get skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n get spinnerShape() {\n const spinnerMap = {\n default: this.halfCircleSpinner,\n 'half-circle': this.halfCircleSpinner,\n };\n\n return spinnerMap[this.type] || spinnerMap.default;\n }\n\n get localizedLabel() {\n return loc(this.label || 'tecton.element.loading.ariaLabel');\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n render() {\n return this.loader();\n }\n\n halfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-label={this.localizedLabel}\n >\n <div class=\"circle circle-1\"></div>\n <div class=\"circle circle-2\"></div>\n </div>\n );\n };\n\n spinner = () => {\n return this.halfCircleSpinner();\n };\n\n skeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-label={this.localizedLabel}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n </div>\n );\n };\n}\n"],"mappings":"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"}