npm - q2-tecton-elements - Versions diffs - 1.67.0 → 1.67.1 - Mend

q2-tecton-elements 1.67.0 → 1.67.1

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 (256) hide show

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

	@@ -1 +1 @@
1	- {"file":"q2-btn.q2-loading.entry.cjs.js","mappings":"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","names":["handleDeprecationWarning","handleAriaLabel","handleColor","overrideFocus","isEventFromElement","getAriaValueFromProp","loc","h","Fragment","skeletonShapes","getOrCreateSpriteContainer"],"sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx","src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './q2-btn-mixins';\n\nq2-loading {\n --tct-loading-primary-color: currentcolor;\n --tct-loading-secondary-color: currentcolor;\n --tct-loading-spinner-size: 24px;\n}\n\n.slot-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n pointer-events: none;\n\n :host([loading]) .icon-right & {\n flex-direction: row-reverse;\n }\n}\n\n:host([loading]) ::slotted(q2-icon) {\n display: none;\n}\n:host([loading]:not([loading='false'])) 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\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 margin-block: -100px;\n}\n\n:host {\n --comp-font-weight: 600;\n --comp-border-radius: #{var-list(--tct-btn-border-radius, --app-border-radius-1, 4px)};\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\n .btn-height-wrapper {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--app-scale-1x, 5px);\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 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 min-height: var(--tct-btn-min-height, none);\n\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 &.has-color,\n &.has-intent {\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n border-radius: var-list(--tct-btn-border-radius, --comp-border-radius);\n text-transform: var(--tct-btn-text-transform);\n letter-spacing: var(--tct-btn-letter-spacing, inherit);\n }\n\n &.has-color:not(.has-size),\n &.has-intent:not(.has-size) {\n padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n }\n\n &:not(.has-size) {\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size, 18px);\n }\n }\n }\n\n // #region Size\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\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 min-height: var(--tct-btn-min-height-small, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-small, 16px);\n }\n }\n }\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 min-height: var(--tct-btn-min-height-medium, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-medium, unset);\n }\n }\n }\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 min-height: var(--tct-btn-min-height-large, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-large, unset);\n }\n }\n }\n\n // #endregion\n // #region Intent\n\n :host(:not([intent])) &:focus-visible {\n --comp-double-focus-ring-fallback: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc;\n box-shadow: var-list(--tct-btn-default-double-focus-visible-ring, --const-double-focus-ring, --comp-double-focus-ring-fallback);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n backdrop-filter: var(--tct-btn-primary-backdrop-filter);\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 backdrop-filter: var(--tct-btn-secondary-backdrop-filter);\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 backdrop-filter: var(--tct-btn-destroy-backdrop-filter);\n --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #d20a0a)};\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 backdrop-filter: var(--tct-btn-escape-backdrop-filter);\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 backdrop-filter: var(--tct-btn-neutral-backdrop-filter);\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 backdrop-filter: var(--tct-btn-neutral-text-backdrop-filter);\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 // #endregion\n // #region Icon Only\n\n &.icon-only {\n width: var-list(var-prefixer(btn-icon-width), 44px);\n height: var-list(var-prefixer(btn-icon-height), 44px);\n min-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 padding: var(--tct-btn-icon-padding, 0px);\n\n ::slotted(q2-icon) {\n --tct-icon-size: unset;\n }\n\n &.has-size {\n padding: var(--tct-btn-icon-padding, 0px);\n }\n\n &.has-intent {\n padding: var(--tct-btn-icon-padding, 10px);\n border-radius: var-list(--tct-btn-icon-border-radius, --comp-border-radius);\n }\n }\n\n &:not(.has-color):not(.has-intent),\n &.icon-only {\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 &:not(.has-intent).is-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 &:not(.has-intent).icon-only:hover ,\n &:not(.has-intent).icon-only:focus ,\n &:not(.has-intent).is-active.icon-only * {\n color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n }\n\n // #endregion\n // #region Plain\n\n &:not(.has-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 // #endregion\n // #region Badges (Deprecated)\n\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 4px\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 // #endregion\n // #region Intent Coin\n\n &.intent-coin {\n --tct-avatar-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n --tct-avatar-height: #{var-list(--tct-btn-coin-height, 44px)};\n --tct-avatar-width: #{var-list(--tct-btn-coin-width, 44px)};\n --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-text, #4d4d4d)};\n --tct-icon-stroke-secondary: #{var-list(--tct-btn-coin-icon-stroke-secondary, --t-text, #4d4d4d)};\n --tct-avatar-icon-stroke-primary: #{var-list(--tct-btn-coin-avatar-icon-stroke-primary, --t-text, #4d4d4d)};\n --tct-avatar-icon-stroke-secondary: #{var-list(--tct-btn-coin-avatar-icon-stroke-secondary, --t-text, #4d4d4d)};\n --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-text, #4d4d4d)};\n --tct-icon-stroke-width: #{var-list(--tct-btn-coin-icon-stroke-width, 1px)};\n --tct-btn-padding: 0;\n --tct-avatar-border: #{var-list(--tct-btn-coin-border, 0)};\n --tct-avatar-fallback-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n --tct-btn-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n width: auto;\n backdrop-filter: var(--tct-btn-coin-backdrop-filter);\n box-shadow: var(--tct-btn-coin-box-shadow);\n }\n\n &.intent-coin:hover:not([disabled]),\n &.intent-coin:hover:focus:not(:active):not([disabled])\n {\n --const-double-focus-ring: 0 0 0 2px #ffffff,\n 0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n --tct-avatar-background: #{var-list(--tct-btn-coin-hover-background, --tct-btn-coin-background, --t-primary-l3, #957ac1)};\n --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-hover-background, --tct-btn-coin-background, --t-primary-l3, #957ac1)};\n --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-base, #ffffff)};\n --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-base, #ffffff)};\n box-shadow: var-list(--tct-btn-coin-hover-box-shadow, --tct-btn-coin-box-shadow, --const-double-focus-ring);\n }\n\n &.intent-coin:focus:not([disabled]) {\n --const-double-focus-ring: 0;\n box-shadow: var-list(--tct-btn-coin-focus-box-shadow, --tct-btn-coin-box-shadow, 0);\n }\n\n &.intent-coin:focus-visible:not([disabled]) {\n --const-double-focus-ring: 0 0 0 2px #ffffff,\n 0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n box-shadow: var-list(\n --tct-btn-coin-focus-visible-box-shadow,\n --tct-btn-coin-focus-box-shadow,\n --tct-btn-coin-box-shadow,\n --const-double-focus-ring\n );\n }\n\n &.intent-coin:focus:active:not([disabled]) {\n --tct-avatar-background: var(--tct-btn-coin-active-background);\n --tct-avatar-fallback-background: var(--tct-btn-coin-active-background);\n box-shadow: none;\n }\n}\n\n.coin-label {\n color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n max-width: 100px;\n text-align: center;\n @include line-clamp(2);\n}\n\n.coin-label.disabled {\n color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n max-width: 100px;\n}\n\n.coin-wrapper {\n --tct-avatar-display: block;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n flex-direction: column;\n width: var(--tct-btn-coin-container-width, 95px);\n\n // only q2-avatar and coin-label slots are allowed for coin buttons\n ::slotted(:not(q2-avatar, [slot='coin-label'])) {\n display: none;\n }\n\n .coin-label {\n color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n margin-top: var-list(--tct-btn-coin-gap, --app-scale-2x, 10px);\n max-width: 100px;\n text-align: center;\n\n display: -webkit-box;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .coin-label.disabled {\n color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n max-width: 100px;\n }\n}\n// #endregion\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Listen,\n Element,\n Fragment,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport {\n getAriaValueFromProp,\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n/*\n @name Button\n * @category Forms\n * @summary Use for triggering actions including submit, save, cancel, or delete.\n * @slot coin-label - An optional slot to display a custom coin button label.\n /\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n // #region Own Properties\n\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconPosition: 'left' \| 'right' \| 'only';\n\n // #endregion\n // #region Public Property API\n\n /\n @private\n * Role attribute for better semantic accessibility support\n /\n @Prop({ reflect: true })\n _role: string;\n\n /\n @private\n * Tooltip text set by a parent q2-tooltip component for accessibility.\n /\n @Prop()\n _tooltip: string;\n\n /\n Displays the component in an active state.\n \n @info\n * Only intended for use with the `badge` property.\n * @deprecated\n /\n @Prop({ reflect: true })\n active: boolean;\n\n @Prop()\n ariaControls: string;\n\n @Prop()\n ariaExpanded: string;\n\n @Prop()\n ariaHasPopup: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n @Prop()\n ariaPressed: string;\n\n @Prop()\n ariaSelected: string;\n\n /\n Displays the component in a smaller, badge style.\n * @deprecated\n /\n @Prop({ reflect: true })\n badge: boolean;\n\n /* The component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n color: string; // deprecated but need it to use utils/handleColor\n\n @Prop()\n description: string;\n\n /* Marks the component as disabled and displays a `not-allowed` cursor on hover. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true })\n fab: boolean;\n\n /\n Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n /\n @Prop({ reflect: true, mutable: true })\n intent:\n \| 'coin'\n \| 'neutral-text'\n \| 'neutral'\n \| 'workflow-destroy'\n \| 'workflow-escape'\n \| 'workflow-primary'\n \| 'workflow-secondary';\n\n /\n Defines the text content of the button if it is not provided in the `<slot>` of the element.\n * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n \n @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. /\n @Prop({ reflect: true })\n loading: boolean;\n\n /\n Defines the size of q2-btn, it renders as default size if not provided.\n /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large';\n\n @Prop()\n tabIndex: number;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true })\n type: string = 'button';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the button is clicked.\n /\n @Event()\n tctClick: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.primaryBtn = null;\n this.primaryBtnWrapper = null;\n }\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 // #endregion\n // #region Listeners\n\n @Listen('click', { capture: true })\n handleClick(event: Event) {\n if (this.loading \|\| this.disabled) {\n event.stopImmediatePropagation();\n return;\n }\n this.tctClick.emit();\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 // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('size')\n sizeObserver() {\n this.handleButtonSize();\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonAttributes() {\n return {\n ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n 'true',\n 'false',\n 'menu',\n 'listbox',\n 'tree',\n 'grid',\n 'dialog',\n ]),\n ariaLabel: this.composedAriaLabel,\n ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled \|\| false,\n type: this.type,\n tabindex: this.tabIndex \|\| this.tabIndex === 0 ? this.tabIndex : undefined,\n };\n }\n\n get buttonClasses() {\n const classes = [];\n if (this.iconPosition) classes.push(`icon-${this.iconPosition}`);\n if (this.intent === 'coin') classes.push('intent-coin');\n if (!!this.block) classes.push('is-block');\n if (!!this.color) classes.push('has-color');\n if (!!this.intent) classes.push(`has-intent`);\n if (!!this.size) classes.push('has-size');\n if (!!this.active) classes.push('is-active');\n\n return classes.join(' ');\n }\n\n get coinLabelClasses() {\n const classes = ['coin-label'];\n if (this.disabled) {\n classes.push('disabled');\n }\n\n return classes.join(' ');\n }\n\n get composedAriaLabel(): string \| undefined {\n const baseText =\n this.label && this.hideLabel\n ? loc(this.label)\n : this.label \|\| this.hostElement.textContent.trim() \|\| undefined;\n\n if (!this._tooltip && !baseText) return undefined;\n if (!this._tooltip) return this.hideLabel ? baseText : undefined;\n if (!baseText) return this._tooltip;\n return `${baseText} - ${this._tooltip}`;\n }\n\n handleButtonSize = () => {\n if (Number(this.size) <= 4) {\n handleDeprecationWarning(this, 'size', 'prop');\n }\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 handleSlotChange = () => {\n this.handleIcons();\n };\n\n // #endregion\n // #region Render Methods\n\n renderButton() {\n const {\n ariaExpanded,\n ariaHasPopup,\n ariaLabel,\n ariaSelected,\n ariaPressed,\n description,\n disabled,\n type,\n tabindex,\n } = this.buttonAttributes;\n const { iconPosition, loading, badge, 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={ariaLabel}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={this.buttonClasses}\n aria-describedby={!!description ? 'hidden-description' : undefined}\n aria-labelledby={this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined}\n role={this._role \|\| undefined}\n >\n <div class=\"slot-container\">\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {this.renderDefaultLabel()}\n {this.renderDefaultCoinSlot()}\n </div>\n </button>\n {this.renderCoinLabel()}\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 renderCoinLabel() {\n if (this.intent !== 'coin' \|\| this.hideLabel) return;\n return (\n <div\n id=\"coin-label\"\n class={this.coinLabelClasses}\n >\n {this.label ? (\n loc(this.label)\n ) : (\n <slot\n name=\"coin-label\"\n onSlotchange={this.handleSlotChange}\n />\n )}\n </div>\n );\n }\n\n renderDefaultCoinSlot() {\n if (this.intent !== 'coin') return;\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n renderDefaultLabel() {\n if (this.intent === 'coin') return;\n if (!this.hideLabel && this.label) return loc(this.label);\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n render() {\n return (this.size === 'small' && this.iconPosition !== 'only') \|\| this.intent === 'coin' ? (\n // wrap only for small sized and coin intent\n <div\n class={this.size === 'small' ? 'btn-height-wrapper' : 'coin-wrapper'}\n ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n tabIndex={this.size === 'small' ? -1 : undefined}\n >\n {this.renderButton()}\n </div>\n ) : (\n this.renderButton()\n );\n }\n\n // #endregion\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#custom-loader-container {\n min-height: 1em;\n min-width: 1em;\n\n svg {\n display: block;\n }\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Listen, Element, Watch, State } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\n\n/\n @name Loading\n * @category Feedback\n * @summary Use to indicate async operations or content loading in progress.\n /\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n // #region Own Properties\n\n ariaLiveTimer;\n customLoaderClass = 'tct-loading-custom-loader';\n dontUpdateScreenReaderLabel = false;\n liveRegionChangeIndicatorToggle = false;\n observer: IntersectionObserver;\n screenReaderElement: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hasCustomLoader: boolean = false;\n\n @State()\n loaderClone: SVGElement;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /\n Numeric adjustments are available for specific `type` and `shape` combinations.\n * These may impact the number of items, columns, and/or rows that display.\n \n When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n \n When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n \n When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n * 2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n /\n @Prop({ reflect: true })\n counts: string;\n\n /* Hides the loading element from screen readers. /\n @Prop({ reflect: true })\n hideFromScreenReaders: boolean = false;\n\n /* Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /\n The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n \n Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n /\n @Prop({ reflect: true })\n modifiers: string;\n\n /\n The specific visual presentation of a loading element `type`.\n * @snippet\n * // when type=\"spinner\"\n * type ShapeValues = \"half-circle\";\n * // when type=\"skeleton\"\n * type ShapeValues = \"circle \| \"rectangle\" \| \"text\" \| \"table\" \| \"field\" \| \"form\" \| \"detailed-item\" \| \"label-value\";\n /\n @Prop({ reflect: true })\n shape: string;\n\n /* The type of loading element to display. */\n @Prop({ reflect: true })\n type: 'brand' \| 'spinner' \| 'skeleton';\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.cleanupLiveRegionDelay();\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.handleType();\n }\n\n componentDidLoad(): void {\n this.setupLiveRegionDelay();\n }\n\n componentDidUpdate(): void {\n this.updateScreenReaderLabel();\n }\n\n componentDidRender(): void {\n if (!this.loaderClone) return;\n if (!this.hasCustomLoader) return;\n const customLoaderContainer = this.hostElement.shadowRoot.querySelector('#custom-loader-container');\n customLoaderContainer.querySelector(`svg.${this.customLoaderClass}`)?.remove();\n customLoaderContainer.appendChild(this.loaderClone);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('tctUpdateLoaders', { target: 'document' })\n onUpdateLoaders() {\n const { customLoaderURL } = this;\n this.hasCustomLoader = !!customLoaderURL;\n this.fetchLoader();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleType() {\n this.fetchLoader();\n }\n\n // #endregion\n // #region Local Methods\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 customLoaderElement() {\n const { customLoaderURL, customLoaderClass } = this;\n if (!customLoaderURL) return;\n return document.querySelector<HTMLElement>(`.${customLoaderClass}[data-url=\"${customLoaderURL}\"]`);\n }\n\n get customLoaderURL() {\n const hostComputedStyles = window.getComputedStyle(this.hostElement);\n const loadingVariableURL = hostComputedStyles.getPropertyValue(\n `--tct-loading-custom-${this.type \|\| 'spinner'}-url`\n );\n if (!loadingVariableURL) return;\n\n const cssKeywords = new Set(['none', 'unset', 'initial', 'inherit', 'revert']);\n if (cssKeywords.has(loadingVariableURL.trim().toLowerCase())) return;\n\n const url = loadingVariableURL.trim().replace(/^url\$['\"]?\|['\"]?\$$/g, '');\n if (!/^https?:\\/\\//i.test(url)) {\n console.warn(\n `[q2-loading] Invalid customLoaderURL: \"${url}\".` +\n ` Only absolute URLs (http:// or https://) are supported.`\n );\n return;\n }\n return url;\n }\n\n get isSkeletonType() {\n return this.type === 'skeleton';\n }\n\n get loaderEventName() {\n const { type = 'spinner', isSkeletonType } = this;\n if (isSkeletonType) return;\n return `tct-loaded-${type}`;\n }\n\n get localizedLabel() {\n return loc(this.label \|\| this.ariaLabel \|\| 'tecton.element.loading.ariaLabel');\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 skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n checkForLoader() {\n const { loaderEventName, customLoaderClass } = this;\n const spriteContainer = getOrCreateSpriteContainer();\n let { customLoaderElement } = this;\n\n // If the loading element exists and has the `data-loaded` attribute, we know we have everything we need\n if (customLoaderElement?.hasAttribute('data-loaded')) {\n this.cloneLoaderNode();\n return true;\n }\n\n // If the loading element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the element is loaded\n spriteContainer.addEventListener(\n loaderEventName,\n () => {\n this.cloneLoaderNode();\n },\n { once: true }\n );\n\n // If the loading element exists, we know it's being loaded and will be handled by the event listener\n if (customLoaderElement) return true;\n\n // If loading element does not exist, create a placeholder\n // This will let other icons know the element is being loaded and prevent multiple fetches\n customLoaderElement = document.createElement('div');\n customLoaderElement.classList.add(customLoaderClass);\n customLoaderElement.dataset.url = this.customLoaderURL;\n spriteContainer.appendChild(customLoaderElement);\n return false;\n }\n\n cleanupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n clearTimeout(this.ariaLiveTimer);\n this.observer?.disconnect();\n this.observer = null;\n }\n\n cloneLoaderNode() {\n const { customLoaderElement } = this;\n this.loaderClone = customLoaderElement ? (customLoaderElement.cloneNode(true) as SVGElement) : undefined;\n }\n\n async fetchLoader() {\n const { isSkeletonType, customLoaderURL } = this;\n this.hasCustomLoader = false;\n if (isSkeletonType) {\n return;\n }\n\n if (!customLoaderURL) return;\n this.hasCustomLoader = true;\n\n let { customLoaderElement } = this;\n const loaderExists = this.checkForLoader();\n\n if (loaderExists) return;\n\n try {\n const response = await fetch(customLoaderURL);\n\n // Check for HTTP errors (including CORS issues that return error status)\n if (!response.ok) {\n throw new Error(\n `HTTP ${response.status}: Failed to fetch SVG. ` +\n `This may be due to incorrect URL, server error, or CORS restrictions.`\n );\n }\n\n const svgText = await response.text();\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');\n const svg = svgDoc.querySelector('svg');\n\n if (!svg) throw new Error('No SVG found in the loaded content');\n\n svg.dataset.loaded = '';\n svg.dataset.url = customLoaderURL;\n svg.classList.add(this.customLoaderClass);\n\n customLoaderElement = this.customLoaderElement;\n if (!customLoaderElement) return;\n if (typeof customLoaderElement.replaceWith === 'function') {\n customLoaderElement.replaceWith(svg);\n } else {\n customLoaderElement.parentNode.replaceChild(svg, customLoaderElement);\n }\n\n svg.dispatchEvent(new CustomEvent(this.loaderEventName, { bubbles: true }));\n } catch (error) {\n // Provide more specific error messaging for common issues\n if (error instanceof TypeError && error.message === 'Failed to fetch') {\n console.error(\n `Failed to load custom loader from ${customLoaderURL}. ` +\n `This is likely due to a CORS (Cross-Origin Resource Sharing) error. ` +\n `Ensure the server hosting the SVG includes proper CORS headers ` +\n `(Access-Control-Allow-Origin) or host the SVG on the same domain.`,\n error\n );\n } else {\n console.error(`Failed to load custom loader SVG from ${customLoaderURL}:`, error);\n }\n }\n }\n\n setupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n // The screen reader element starts out empty and is then populated by the\n // label text after a delay to ensure that it is announced by screen\n // readers.\n const options = {\n root: null,\n rootMargin: '0px',\n threshold: [1],\n };\n this.observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n clearTimeout(this.ariaLiveTimer);\n this.ariaLiveTimer = setTimeout(() => {\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;\n }\n this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;\n this.dontUpdateScreenReaderLabel = false;\n }, 2000);\n } else {\n clearTimeout(this.ariaLiveTimer);\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = '';\n }\n this.dontUpdateScreenReaderLabel = true;\n }\n });\n }, options);\n this.observer.observe(this.hostElement);\n }\n\n updateScreenReaderLabel() {\n if (this.dontUpdateScreenReaderLabel) return;\n if (!this.screenReaderElement) return;\n this.screenReaderElement.textContent = this.localizedLabel;\n }\n\n // #endregion\n // #region Render Methods\n\n renderCustomLoaderContainer = () => {\n return (\n <div\n id=\"custom-loader-container\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderHalfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n <svg\n class=\"loader\"\n viewBox=\"0 0 50 50\"\n role=\"presentation\"\n >\n <circle\n class=\"head\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n />\n </svg>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n get renderLoader() {\n const loaderMap = {\n default: this.renderSpinner,\n spinner: this.renderSpinner,\n skeleton: this.renderSkeletonLoader,\n custom: this.renderCustomLoaderContainer,\n };\n const { type, hasCustomLoader } = this;\n const loaderMapKey = hasCustomLoader ? 'custom' : type;\n\n return loaderMap[loaderMapKey] \|\| loaderMap.default;\n }\n\n renderSkeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderSpinner = () => {\n return this.renderHalfCircleSpinner();\n };\n\n render() {\n return this.renderLoader();\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-btn.q2-loading.entry.cjs.js","mappings":"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","names":["handleDeprecationWarning","handleAriaLabel","handleColor","overrideFocus","isEventFromElement","getAriaValueFromProp","loc","h","Fragment","skeletonShapes","getOrCreateSpriteContainer"],"sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx","src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './q2-btn-mixins';\n\nq2-loading {\n --tct-loading-primary-color: currentcolor;\n --tct-loading-secondary-color: currentcolor;\n --tct-loading-spinner-size: 24px;\n}\n\n.slot-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n pointer-events: none;\n\n :host([loading]) .icon-right & {\n flex-direction: row-reverse;\n }\n}\n\n:host([loading]) ::slotted(q2-icon) {\n display: none;\n}\n:host([loading]:not([loading='false'])) 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\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 margin-block: -100px;\n}\n\n:host {\n --comp-font-weight: 600;\n --comp-border-radius: #{var-list(--tct-btn-border-radius, --app-border-radius-1, 4px)};\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\n .btn-height-wrapper {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--app-scale-1x, 5px);\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 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 min-height: var(--tct-btn-min-height, none);\n\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 &.has-color,\n &.has-intent {\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n border-radius: var-list(--tct-btn-border-radius, --comp-border-radius);\n text-transform: var(--tct-btn-text-transform);\n letter-spacing: var(--tct-btn-letter-spacing, inherit);\n }\n\n &.has-color:not(.has-size),\n &.has-intent:not(.has-size) {\n padding: var-list(var-prefixer(btn-padding), --tct-scale-2, --app-scale-2x, 10px);\n }\n\n &:not(.has-size) {\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size, 18px);\n }\n }\n }\n\n // #region Size\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\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 min-height: var(--tct-btn-min-height-small, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-small, 16px);\n }\n }\n }\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 min-height: var(--tct-btn-min-height-medium, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-medium, unset);\n }\n }\n }\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 min-height: var(--tct-btn-min-height-large, none);\n &:not(.icon-only) {\n ::slotted(q2-icon) {\n --tct-icon-size: var(--tct-btn-icon-size-large, unset);\n }\n }\n }\n\n // #endregion\n // #region Intent\n\n :host(:not([intent])) &:focus-visible {\n --comp-double-focus-ring-fallback: 0 0 0 2px #ffffff, 0 0 0 4px #0066cc;\n box-shadow: var-list(--tct-btn-default-double-focus-visible-ring, --const-double-focus-ring, --comp-double-focus-ring-fallback);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n backdrop-filter: var(--tct-btn-primary-backdrop-filter);\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 backdrop-filter: var(--tct-btn-secondary-backdrop-filter);\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 backdrop-filter: var(--tct-btn-destroy-backdrop-filter);\n --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #d20a0a)};\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 backdrop-filter: var(--tct-btn-escape-backdrop-filter);\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 backdrop-filter: var(--tct-btn-neutral-backdrop-filter);\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 backdrop-filter: var(--tct-btn-neutral-text-backdrop-filter);\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 // #endregion\n // #region Icon Only\n\n &.icon-only {\n width: var-list(var-prefixer(btn-icon-width), 44px);\n height: var-list(var-prefixer(btn-icon-height), 44px);\n min-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 padding: var(--tct-btn-icon-padding, 0px);\n\n ::slotted(q2-icon) {\n --tct-icon-size: unset;\n }\n\n &.has-size {\n padding: var(--tct-btn-icon-padding, 0px);\n }\n\n &.has-intent {\n padding: var(--tct-btn-icon-padding, 10px);\n border-radius: var-list(--tct-btn-icon-border-radius, --comp-border-radius);\n }\n }\n\n &:not(.has-color):not(.has-intent),\n &.icon-only {\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 &:not(.has-intent).is-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 &:not(.has-intent).icon-only:hover ,\n &:not(.has-intent).icon-only:focus ,\n &:not(.has-intent).is-active.icon-only * {\n color: var-list(var-prefixer(btn-icon-hover-color), var-prefixer(link-hover-color), #080808);\n }\n\n // #endregion\n // #region Plain\n\n &:not(.has-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 // #endregion\n // #region Badges (Deprecated)\n\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 4px\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 // #endregion\n // #region Intent Coin\n\n &.intent-coin {\n --tct-avatar-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n --tct-avatar-height: #{var-list(--tct-btn-coin-height, 44px)};\n --tct-avatar-width: #{var-list(--tct-btn-coin-width, 44px)};\n --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-background, --t-primary-l5, #b4a0d3)};\n --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-text, #4d4d4d)};\n --tct-icon-stroke-secondary: #{var-list(--tct-btn-coin-icon-stroke-secondary, --t-text, #4d4d4d)};\n --tct-avatar-icon-stroke-primary: #{var-list(--tct-btn-coin-avatar-icon-stroke-primary, --t-text, #4d4d4d)};\n --tct-avatar-icon-stroke-secondary: #{var-list(--tct-btn-coin-avatar-icon-stroke-secondary, --t-text, #4d4d4d)};\n --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-text, #4d4d4d)};\n --tct-icon-stroke-width: #{var-list(--tct-btn-coin-icon-stroke-width, 1px)};\n --tct-btn-padding: 0;\n --tct-avatar-border: #{var-list(--tct-btn-coin-border, 0)};\n --tct-avatar-fallback-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n --tct-btn-border-radius: #{var-list(--tct-btn-coin-border-radius, 50%)};\n width: auto;\n backdrop-filter: var(--tct-btn-coin-backdrop-filter);\n box-shadow: var(--tct-btn-coin-box-shadow);\n }\n\n &.intent-coin:hover:not([disabled]),\n &.intent-coin:hover:focus:not(:active):not([disabled])\n {\n --const-double-focus-ring: 0 0 0 2px #ffffff,\n 0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n --tct-avatar-background: #{var-list(--tct-btn-coin-hover-background, --tct-btn-coin-background, --t-primary-l3, #957ac1)};\n --tct-avatar-fallback-background: #{var-list(--tct-btn-coin-hover-background, --tct-btn-coin-background, --t-primary-l3, #957ac1)};\n --tct-icon-stroke-primary: #{var-list(--tct-btn-coin-icon-stroke-primary, --t-base, #ffffff)};\n --tct-avatar-text-color: #{var-list(--tct-btn-coin-avatar-text-color, --t-base, #ffffff)};\n box-shadow: var-list(--tct-btn-coin-hover-box-shadow, --tct-btn-coin-box-shadow, --const-double-focus-ring);\n }\n\n &.intent-coin:focus:not([disabled]) {\n --const-double-focus-ring: 0;\n box-shadow: var-list(--tct-btn-coin-focus-box-shadow, --tct-btn-coin-box-shadow, 0);\n }\n\n &.intent-coin:focus-visible:not([disabled]) {\n --const-double-focus-ring: 0 0 0 2px #ffffff,\n 0 0 0 4px #{var-list(--tct-btn-coin-focus-ring, --t-primary, #6a4a9e)};\n box-shadow: var-list(\n --tct-btn-coin-focus-visible-box-shadow,\n --tct-btn-coin-focus-box-shadow,\n --tct-btn-coin-box-shadow,\n --const-double-focus-ring\n );\n }\n\n &.intent-coin:focus:active:not([disabled]) {\n --tct-avatar-background: var(--tct-btn-coin-active-background);\n --tct-avatar-fallback-background: var(--tct-btn-coin-active-background);\n box-shadow: none;\n }\n}\n\n.coin-label {\n color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n max-width: 100px;\n text-align: center;\n @include line-clamp(2);\n}\n\n.coin-label.disabled {\n color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n max-width: 100px;\n}\n\n.coin-wrapper {\n --tct-avatar-display: block;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var-list(--app-scale-1x, 5px);\n flex-direction: column;\n width: var(--tct-btn-coin-container-width, 95px);\n\n // only q2-avatar and coin-label slots are allowed for coin buttons\n ::slotted(:not(q2-avatar, [slot='coin-label'])) {\n display: none;\n }\n\n .coin-label {\n color: var-list(--tct-btn-coin-label-color, --t-text, #4d4d4d);\n font-size: var-list(--tct-btn-coin-label-font-size, --app-font-size, 14px);\n margin-top: var-list(--tct-btn-coin-gap, --app-scale-2x, 10px);\n max-width: 100px;\n text-align: center;\n\n display: -webkit-box;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .coin-label.disabled {\n color: var-list(--tct-btn-coin-label-disabled-color, --t-textA, #767676);\n max-width: 100px;\n }\n}\n// #endregion\n","import {\n Component,\n State,\n Prop,\n h,\n ComponentInterface,\n Watch,\n Listen,\n Element,\n Fragment,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport {\n getAriaValueFromProp,\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n/*\n @name Button\n * @category Forms\n * @summary Use for triggering actions including submit, save, cancel, or delete.\n * @slot coin-label - An optional slot to display a custom coin button label.\n /\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n // #region Own Properties\n\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconPosition: 'left' \| 'right' \| 'only';\n\n // #endregion\n // #region Public Property API\n\n /\n @private\n * Role attribute for better semantic accessibility support\n /\n @Prop({ reflect: true })\n _role: string;\n\n /\n @private\n * Tooltip text set by a parent q2-tooltip component for accessibility.\n /\n @Prop()\n _tooltip: string;\n\n /\n Displays the component in an active state.\n \n @info\n * Only intended for use with the `badge` property.\n * @deprecated\n /\n @Prop({ reflect: true })\n active: boolean;\n\n @Prop()\n ariaControls: string;\n\n @Prop()\n ariaExpanded: string;\n\n @Prop()\n ariaHasPopup: string;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n @Prop()\n ariaPressed: string;\n\n @Prop()\n ariaSelected: string;\n\n /\n Displays the component in a smaller, badge style.\n * @deprecated\n /\n @Prop({ reflect: true })\n badge: boolean;\n\n /* The component expands to fill the width of its parent element. /\n @Prop({ reflect: true })\n block: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n color: string; // deprecated but need it to use utils/handleColor\n\n @Prop()\n description: string;\n\n /* Marks the component as disabled and displays a `not-allowed` cursor on hover. /\n @Prop({ reflect: true })\n disabled: boolean;\n\n /* @deprecated /\n @Prop({ reflect: true })\n fab: boolean;\n\n /\n Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n /\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /\n Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n /\n @Prop({ reflect: true, mutable: true })\n intent:\n \| 'coin'\n \| 'neutral-text'\n \| 'neutral'\n \| 'workflow-destroy'\n \| 'workflow-escape'\n \| 'workflow-primary'\n \| 'workflow-secondary';\n\n /\n Defines the text content of the button if it is not provided in the `<slot>` of the element.\n * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n \n @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /* Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. /\n @Prop({ reflect: true })\n loading: boolean;\n\n /\n Defines the size of q2-btn, it renders as default size if not provided.\n /\n @Prop({ reflect: true })\n size: 'small' \| 'medium' \| 'large';\n\n @Prop()\n tabIndex: number;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true })\n type: string = 'button';\n\n // #endregion\n // #region Events\n\n /\n Emitted when the button is clicked.\n /\n @Event()\n tctClick: EventEmitter;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.primaryBtn = null;\n this.primaryBtnWrapper = null;\n }\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 // #endregion\n // #region Listeners\n\n @Listen('click', { capture: true })\n handleClick(event: Event) {\n if (this.loading \|\| this.disabled) {\n event.stopImmediatePropagation();\n return;\n }\n this.tctClick.emit();\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 // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('size')\n sizeObserver() {\n this.handleButtonSize();\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonAttributes() {\n return {\n ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n 'true',\n 'false',\n 'menu',\n 'listbox',\n 'tree',\n 'grid',\n 'dialog',\n ]),\n ariaLabel: this.composedAriaLabel,\n ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled \|\| false,\n type: this.type,\n tabindex: this.tabIndex \|\| this.tabIndex === 0 ? this.tabIndex : undefined,\n };\n }\n\n get buttonClasses() {\n const classes = [];\n if (this.iconPosition) classes.push(`icon-${this.iconPosition}`);\n if (this.intent === 'coin') classes.push('intent-coin');\n if (!!this.block) classes.push('is-block');\n if (!!this.color) classes.push('has-color');\n if (!!this.intent) classes.push(`has-intent`);\n if (!!this.size) classes.push('has-size');\n if (!!this.active) classes.push('is-active');\n\n return classes.join(' ');\n }\n\n get coinLabelClasses() {\n const classes = ['coin-label'];\n if (this.disabled) {\n classes.push('disabled');\n }\n\n return classes.join(' ');\n }\n\n get composedAriaLabel(): string \| undefined {\n const baseText =\n this.label && this.hideLabel\n ? loc(this.label)\n : this.label \|\| this.hostElement.textContent.trim() \|\| undefined;\n\n if (!this._tooltip && !baseText) return undefined;\n if (!this._tooltip) return this.hideLabel ? baseText : undefined;\n if (!baseText) return this._tooltip;\n return `${baseText} - ${this._tooltip}`;\n }\n\n handleButtonSize = () => {\n if (Number(this.size) <= 4) {\n handleDeprecationWarning(this, 'size', 'prop');\n }\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 handleSlotChange = () => {\n this.handleIcons();\n };\n\n // #endregion\n // #region Render Methods\n\n renderButton() {\n const {\n ariaExpanded,\n ariaHasPopup,\n ariaLabel,\n ariaSelected,\n ariaPressed,\n description,\n disabled,\n type,\n tabindex,\n } = this.buttonAttributes;\n const { iconPosition, loading, badge, 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={ariaLabel}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={this.buttonClasses}\n aria-describedby={!!description ? 'hidden-description' : undefined}\n aria-labelledby={this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined}\n role={this._role \|\| undefined}\n >\n <div class=\"slot-container\">\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {this.renderDefaultLabel()}\n {this.renderDefaultCoinSlot()}\n </div>\n </button>\n {this.renderCoinLabel()}\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 renderCoinLabel() {\n if (this.intent !== 'coin' \|\| this.hideLabel) return;\n return (\n <div\n id=\"coin-label\"\n class={this.coinLabelClasses}\n >\n {this.label ? (\n loc(this.label)\n ) : (\n <slot\n name=\"coin-label\"\n onSlotchange={this.handleSlotChange}\n />\n )}\n </div>\n );\n }\n\n renderDefaultCoinSlot() {\n if (this.intent !== 'coin') return;\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n renderDefaultLabel() {\n if (this.intent === 'coin') return;\n if (!this.hideLabel && this.label) return loc(this.label);\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n render() {\n return (this.size === 'small' && this.iconPosition !== 'only') \|\| this.intent === 'coin' ? (\n // wrap only for small sized and coin intent\n <div\n class={this.size === 'small' ? 'btn-height-wrapper' : 'coin-wrapper'}\n ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n tabIndex={this.size === 'small' ? -1 : undefined}\n >\n {this.renderButton()}\n </div>\n ) : (\n this.renderButton()\n );\n }\n\n // #endregion\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#custom-loader-container {\n min-height: 1em;\n min-width: 1em;\n\n svg {\n display: block;\n }\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Listen, Element, Watch, State } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\nimport { getOrCreateSpriteContainer } from '@/utils/sprites';\n\n/\n @name Loading\n * @category Feedback\n * @summary Use to indicate async operations or content loading in progress.\n /\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n // #region Own Properties\n\n ariaLiveTimer;\n customLoaderClass = 'tct-loading-custom-loader';\n dontUpdateScreenReaderLabel = false;\n liveRegionChangeIndicatorToggle = false;\n observer: IntersectionObserver;\n screenReaderElement: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n hasCustomLoader: boolean = false;\n\n @State()\n loaderClone: SVGElement;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /\n Numeric adjustments are available for specific `type` and `shape` combinations.\n * These may impact the number of items, columns, and/or rows that display.\n \n When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n \n When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n \n When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n \n 1. `counts=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n * 2. `counts=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n /\n @Prop({ reflect: true })\n counts: string;\n\n /* Hides the loading element from screen readers. /\n @Prop({ reflect: true })\n hideFromScreenReaders: boolean = false;\n\n /* Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. /\n @Prop({ reflect: true })\n inline: boolean;\n\n /\n The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n * @localizable\n /\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /\n Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n \n Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n /\n @Prop({ reflect: true })\n modifiers: string;\n\n /\n The specific visual presentation of a loading element `type`.\n * @snippet\n * // when type=\"spinner\"\n * type ShapeValues = \"half-circle\";\n * // when type=\"skeleton\"\n * type ShapeValues = \"circle \| \"rectangle\" \| \"text\" \| \"table\" \| \"field\" \| \"form\" \| \"detailed-item\" \| \"label-value\";\n /\n @Prop({ reflect: true })\n shape: string;\n\n /* The type of loading element to display. */\n @Prop({ reflect: true })\n type: 'brand' \| 'spinner' \| 'skeleton';\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.cleanupLiveRegionDelay();\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n this.handleType();\n }\n\n componentDidLoad(): void {\n this.setupLiveRegionDelay();\n }\n\n componentDidUpdate(): void {\n this.updateScreenReaderLabel();\n }\n\n componentDidRender(): void {\n if (!this.loaderClone) return;\n if (!this.hasCustomLoader) return;\n const customLoaderContainer = this.hostElement.shadowRoot.querySelector('#custom-loader-container');\n customLoaderContainer.querySelector(`svg.${this.customLoaderClass}`)?.remove();\n customLoaderContainer.appendChild(this.loaderClone);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('tctUpdateLoaders', { target: 'document' })\n onUpdateLoaders() {\n const { customLoaderURL } = this;\n this.hasCustomLoader = !!customLoaderURL;\n this.fetchLoader();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('type')\n handleType() {\n this.fetchLoader();\n }\n\n // #endregion\n // #region Local Methods\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 customLoaderElement() {\n const { customLoaderURL, customLoaderClass } = this;\n if (!customLoaderURL) return;\n return document.querySelector<HTMLElement>(`.${customLoaderClass}[data-url=\"${customLoaderURL}\"]`);\n }\n\n get customLoaderURL() {\n const hostComputedStyles = window.getComputedStyle(this.hostElement);\n const loadingVariableURL = hostComputedStyles.getPropertyValue(\n `--tct-loading-custom-${this.type \|\| 'spinner'}-url`\n );\n if (!loadingVariableURL) return;\n\n const cssKeywords = new Set(['none', 'unset', 'initial', 'inherit', 'revert']);\n if (cssKeywords.has(loadingVariableURL.trim().toLowerCase())) return;\n\n const url = loadingVariableURL.trim().replace(/^url\$['\"]?\|['\"]?\$$/g, '');\n if (!/^https?:\\/\\//i.test(url)) {\n console.warn(\n `[q2-loading] Invalid customLoaderURL: \"${url}\".` +\n ` Only absolute URLs (http:// or https://) are supported.`\n );\n return;\n }\n return url;\n }\n\n get isSkeletonType() {\n return this.type === 'skeleton';\n }\n\n get loaderEventName() {\n const { type = 'spinner', isSkeletonType } = this;\n if (isSkeletonType) return;\n return `tct-loaded-${type}`;\n }\n\n get localizedLabel() {\n return loc(this.label \|\| this.ariaLabel \|\| 'tecton.element.loading.ariaLabel');\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 skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n checkForLoader() {\n const { loaderEventName, customLoaderClass } = this;\n const spriteContainer = getOrCreateSpriteContainer();\n let { customLoaderElement } = this;\n\n // If the loading element exists and has the `data-loaded` attribute, we know we have everything we need\n if (customLoaderElement?.hasAttribute('data-loaded')) {\n this.cloneLoaderNode();\n return true;\n }\n\n // If the loading element exists but does not have the `data-loaded` attribute, we know it's being loaded\n // We'll listen for the event that will be dispatched when the element is loaded\n spriteContainer.addEventListener(\n loaderEventName,\n () => {\n this.cloneLoaderNode();\n },\n { once: true }\n );\n\n // If the loading element exists, we know it's being loaded and will be handled by the event listener\n if (customLoaderElement) return true;\n\n // If loading element does not exist, create a placeholder\n // This will let other icons know the element is being loaded and prevent multiple fetches\n customLoaderElement = document.createElement('div');\n customLoaderElement.classList.add(customLoaderClass);\n customLoaderElement.dataset.url = this.customLoaderURL;\n spriteContainer.appendChild(customLoaderElement);\n return false;\n }\n\n cleanupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n clearTimeout(this.ariaLiveTimer);\n this.observer?.disconnect();\n this.observer = null;\n }\n\n cloneLoaderNode() {\n const { customLoaderElement } = this;\n this.loaderClone = customLoaderElement ? (customLoaderElement.cloneNode(true) as SVGElement) : undefined;\n }\n\n async fetchLoader() {\n const { isSkeletonType, customLoaderURL } = this;\n this.hasCustomLoader = false;\n if (isSkeletonType) {\n return;\n }\n\n if (!customLoaderURL) return;\n this.hasCustomLoader = true;\n\n let { customLoaderElement } = this;\n const loaderExists = this.checkForLoader();\n\n if (loaderExists) return;\n\n try {\n const response = await fetch(customLoaderURL);\n\n // Check for HTTP errors (including CORS issues that return error status)\n if (!response.ok) {\n throw new Error(\n `HTTP ${response.status}: Failed to fetch SVG. ` +\n `This may be due to incorrect URL, server error, or CORS restrictions.`\n );\n }\n\n const svgText = await response.text();\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');\n const svg = svgDoc.querySelector('svg');\n\n if (!svg) throw new Error('No SVG found in the loaded content');\n\n svg.dataset.loaded = '';\n svg.dataset.url = customLoaderURL;\n svg.classList.add(this.customLoaderClass);\n\n customLoaderElement = this.customLoaderElement;\n if (!customLoaderElement) return;\n if (typeof customLoaderElement.replaceWith === 'function') {\n customLoaderElement.replaceWith(svg);\n } else {\n customLoaderElement.parentNode.replaceChild(svg, customLoaderElement);\n }\n\n svg.dispatchEvent(new CustomEvent(this.loaderEventName, { bubbles: true }));\n } catch (error) {\n // Provide more specific error messaging for common issues\n if (error instanceof TypeError && error.message === 'Failed to fetch') {\n console.error(\n `Failed to load custom loader from ${customLoaderURL}. ` +\n `This is likely due to a CORS (Cross-Origin Resource Sharing) error. ` +\n `Ensure the server hosting the SVG includes proper CORS headers ` +\n `(Access-Control-Allow-Origin) or host the SVG on the same domain.`,\n error\n );\n } else {\n console.error(`Failed to load custom loader SVG from ${customLoaderURL}:`, error);\n }\n }\n }\n\n setupLiveRegionDelay() {\n if (this.hideFromScreenReaders) return;\n\n // The screen reader element starts out empty and is then populated by the\n // label text after a delay to ensure that it is announced by screen\n // readers.\n const options = {\n root: null,\n rootMargin: '0px',\n threshold: [1],\n };\n this.observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n clearTimeout(this.ariaLiveTimer);\n this.ariaLiveTimer = setTimeout(() => {\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = `${this.localizedLabel}${this.liveRegionChangeIndicatorToggle ? '.' : ''}`;\n }\n this.liveRegionChangeIndicatorToggle = !this.liveRegionChangeIndicatorToggle;\n this.dontUpdateScreenReaderLabel = false;\n }, 2000);\n } else {\n clearTimeout(this.ariaLiveTimer);\n if (this.screenReaderElement) {\n this.screenReaderElement.textContent = '';\n }\n this.dontUpdateScreenReaderLabel = true;\n }\n });\n }, options);\n this.observer.observe(this.hostElement);\n }\n\n updateScreenReaderLabel() {\n if (this.dontUpdateScreenReaderLabel) return;\n if (!this.screenReaderElement) return;\n this.screenReaderElement.textContent = this.localizedLabel;\n }\n\n // #endregion\n // #region Render Methods\n\n renderCustomLoaderContainer = () => {\n return (\n <div\n id=\"custom-loader-container\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderHalfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n <svg\n class=\"loader\"\n viewBox=\"0 0 50 50\"\n role=\"presentation\"\n >\n <circle\n class=\"head\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n />\n </svg>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n get renderLoader() {\n const loaderMap = {\n default: this.renderSpinner,\n spinner: this.renderSpinner,\n skeleton: this.renderSkeletonLoader,\n custom: this.renderCustomLoaderContainer,\n };\n const { type, hasCustomLoader } = this;\n const loaderMapKey = hasCustomLoader ? 'custom' : type;\n\n return loaderMap[loaderMapKey] \|\| loaderMap.default;\n }\n\n renderSkeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-hidden={this.hideFromScreenReaders ? 'true' : undefined}\n aria-live={!this.hideFromScreenReaders ? 'polite' : undefined}\n role={!this.hideFromScreenReaders ? 'status' : undefined}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n {!this.hideFromScreenReaders && (\n <div\n class=\"sr\"\n ref={el => (this.screenReaderElement = el)}\n ></div>\n )}\n </div>\n );\n };\n\n renderSpinner = () => {\n return this.renderHalfCircleSpinner();\n };\n\n render() {\n return this.renderLoader();\n }\n\n // #endregion\n}\n"],"version":3}

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

@@ -1225,7 +1225,7 @@ const Q2Calendar = class {
         return (index$2.h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: index.loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, "aria-expanded": `${!!this.open}`, "aria-controls": "calendar-popover", hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: e => e.stopImmediatePropagation(), onTctChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", _role: "combobox", _preventEntry: !isTypeable }, isTypeable && (index$2.h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, index$2.h("q2-icon", { type: "calendar" })))));
     }
     render() {
-        return (index$2.h("click-elsewhere", { key: 'b56461b08364576460861bfacee8da16e482d85b', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), index$2.h("q2-popover", { key: '9bba51d05ce0752dd874361c7f3b9b82db86bc70', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
+        return (index$2.h("click-elsewhere", { key: '0982135e2be03261bf81a48de77ef8d564cedb78', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), index$2.h("q2-popover", { key: 'd18140e57015148d2e2bb86e00af20a5d8d8d69f', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
     }
     get hostElement() { return index$2.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-card-image.cjs.entry.js CHANGED Viewed

@@ -363,11 +363,11 @@ const Q2CardImage = class {
     render() {
         const cardContent = this.clickable ? (index.h("q2-btn", { disabled: this.disabled, label: this.accessibilityLabel, hideLabel: true, onClick: this.handleCardClick }, this.renderCardContent())) : (this.renderCardContent());
         const showBanner = !!this.cardStatus && this.size === 'large';
-        return (index.h(index.Host, { key: 'd1592e6d7239707ec8608f9458bc0066bca5d407', class: {
+        return (index.h(index.Host, { key: '3c71f0e8e6fd22ebf3a3e3b98f890767ced6060b', class: {
                 [`${this.orientation}`]: true,
                 'has-action': this.hasActionSlotContent,
                 'has-banner': showBanner,
-            } }, this.renderStatusBanner(), index.h("div", { key: 'e45f8f705256b70e527d5e95d3a13b7c9e1938e2', class: "card-wrapper" }, cardContent, this.renderAction())));
+            } }, this.renderStatusBanner(), index.h("div", { key: '761c7a611ec3f8e0ffd7a5b51e2944f83876f5ae', class: "card-wrapper" }, cardContent, this.renderAction())));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return index.getElement(this); }

package/dist/cjs/q2-carousel-pane.cjs.entry.js CHANGED Viewed

@@ -100,12 +100,12 @@ const Q2CarouselPane = class {
     // #region Render Methods
     render() {
         const { label } = this;
-        return (index.h(index.Host, { key: '156420cbdaf48d8d1e6e14c05e745ff0df308a2a', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (index.h(index.Host, { key: '6d221b15545378efa40b54864b2ebca1bcb1e983', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? index$1.loc(label)
                 : index$1.loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, index.h("article", { key: '2f61bdfa9d9e4413941d0ca2f1edc9fc2cd48e8e', class: "q2-carousel-pane-main-content" }, index.h("slot", { key: 'd498b8a73ba1a668bb768891d37b2303db976012' }))));
+                ]), onClick: this.paneClicked }, index.h("article", { key: '394965fb0a46501fcd33aa3acadb2eaae6a1accd', class: "q2-carousel-pane-main-content" }, index.h("slot", { key: 'a059daeb1c5192cec8594b6c9843828d6b833f12' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -5031,7 +5031,7 @@ const Q2Carousel = class {
             paginationWrapperClasses.push('evenly-space');
         if (showNavigationArrows && arrowPosition === 'hug')
             paginationWrapperClasses.push('center-space');
-        return (index.h(index.Host, { key: '56ecddd3c2bbad43dba7fdb949d539a937b3e5f0', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (index.h(index.Fragment, null, paneCount > 1 && (index.h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
+        return (index.h(index.Host, { key: '7c8a2c87c41d8621971bff9a22ab8de2439276c5', id: `q2-carousel-${this.guid}`, class: "q2-carousel-instance" }, insufficientPanes ? (this.renderInsufficientPanesDisplay()) : (index.h(index.Fragment, null, paneCount > 1 && (index.h("div", { class: paginationWrapperClasses.join(' ') }, showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&
             this.renderPrevNavBtn(), index.h("div", { class: "q2-carousel-control-center-tray" }, !hidePagination && this.renderPaginationArea(), autoPlay && this.renderAutoPlayBtn()), showNavigationArrows &&
             ['bottom', 'hug'].includes(arrowPosition) &&

package/dist/cjs/q2-chart-area.cjs.entry.js CHANGED Viewed

@@ -274,7 +274,7 @@ const Q2ChartArea = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '81f8432837d66f500da8403dbc25727c44635a03', class: "container" }, index.h("div", { key: 'fcd3f4aa43d89467591140cbe211c7d5e35316fa', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (index.h("div", { key: '247b79eca7719feab470918648f223675483daf8', class: "container" }, index.h("div", { key: '349272c0ece24581f05dcadb81d7a19dd71eaa2d', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-chart-bar.cjs.entry.js CHANGED Viewed

@@ -220,7 +220,7 @@ const Q2ChartBar = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'bea029d1b2ab1650f3a8dd60f64bd5640752632b', class: "container" }, index.h("div", { key: '1a240fcde7691730648aa698a3cb57b98cb1f95f', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (index.h("div", { key: '36a77a29d5e06363f2cd2267c298429cd2ef9864', class: "container" }, index.h("div", { key: 'e7382ecf3ed8323ffbf1c57a78c870d7d7c4b718', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-chart-donut.cjs.entry.js CHANGED Viewed

@@ -866,7 +866,7 @@ const Q2ChartDonut = class {
             } })), !!name && index.h("div", { class: "name" }, name), !isNaN(value) && index.h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (index.h("click-elsewhere", { key: '473d5d1b512e2d4d9ad9e215ebf597aaad0854d2', onChange: this.onClickElsewhere }, index.h("figure", { key: 'aa22d00635231662d6b446066b9fdc33c2f8748d' }, index.h("div", { key: '71f74bf9dbc69de99a88204ccc51d4d5864dfbf3', class: "container" }, index.h("div", { key: '9d2ff90b01d25ecd018a5e1a10dbac4726557ebb', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (index.h("figcaption", { key: '0795c3b57206c94c65ab1e81162dc9409426dbe9' }, index.h("q2-legend", { key: '58009cbd37d9ffaea2dd429b074f00b736eea866', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (index.h("click-elsewhere", { key: 'e11f9f591cc6329f91d2017d556cabe0f3f797c9', onChange: this.onClickElsewhere }, index.h("figure", { key: 'af092b44df48422b76507f557ca6aa6508753de9' }, index.h("div", { key: '4384fdcb1864496619ab0b097e71faa22eb3aeb5', class: "container" }, index.h("div", { key: '99f261a2ba8952b598d28599c2b1848fcfdecf6c', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (index.h("figcaption", { key: '4ead6e4332aeda66219d3a2c7ac15b0446442734' }, index.h("q2-legend", { key: '53d5408e4beb519dd9af1a06603ca7f3cc597577', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-checkbox-group.cjs.entry.js CHANGED Viewed

@@ -122,7 +122,7 @@ const Q2CheckboxGroup = class {
     render() {
         const showLabel = this.label || this.optional || this.readonly;
         const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;
-        return (index.h(index.Fragment, { key: 'eaff44b5a38dc022c372e375ec153d42b4a52c7f' }, showLabelRow && (index.h("div", { key: '8252c6b3958656e3891709de3c54eb6a74247bf0', class: "label-row" }, showLabel && !this.hideLabel && index.h("div", { key: '7a9e381063cfc689f0828dfb926434a9c042121a', class: "group-legend" }, index$1.renderLabel(this)), this.hasError && (index.h("q2-icon", { key: 'c6e3ffeab88703d7a39216400e9c56021e918dc6', type: "error", "test-id": "iconError" })))), index.h("fieldset", { key: '671bef4db48e6181a3d1ac542b3c50495b6d1d70', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && index.h("legend", { key: '043796604c9300ba8c04d6d53c7a554ba87dc159', class: "sr-only" }, index$1.renderLabel(this)), this.inputDom())));
+        return (index.h(index.Fragment, { key: '045db0eb9522964c61680474aaf53cf75c373804' }, showLabelRow && (index.h("div", { key: 'e372b876b16c4122c86c4f5573e403965a75b7d2', class: "label-row" }, showLabel && !this.hideLabel && index.h("div", { key: 'b188c3e6715a50a6cb8ba83f4140b2eef3ca688d', class: "group-legend" }, index$1.renderLabel(this)), this.hasError && (index.h("q2-icon", { key: '192f18d69d85d38dc0be8116c207961c9e4dcd28', type: "error", "test-id": "iconError" })))), index.h("fieldset", { key: '9e66e81e0f6aa9bd54a857ebfccc851f9efa4f68', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && index.h("legend", { key: '9bb04149f29a9727e3350f06feeda8a171e41ee0', class: "sr-only" }, index$1.renderLabel(this)), this.inputDom())));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -106,7 +106,7 @@ const Q2Checkbox = class {
         const textLabelClasses = ['label-text'];
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (index.h("div", { key: 'ef32fc123a8e6205ae9821781d4a74391d68761e', class: "container" }, index.h("input", { key: '4d2e8c0e0a938a27a7252479ed462f14c286363e', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), index.h("label", { key: '79b3f172df48a414ee1d612d73f1c3cbb89c6cc6', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-label": this.composedAriaLabel }, this.renderCheckboxSVG()), index.h("div", { key: '16ed427817793e7660fc6912cef776c1e3428468', class: textLabelClasses.join(' ') }, index.h("label", { key: 'cc58ac3186fc7052f11dafd92dc50837ebdf729d', "test-id": "checkboxLabel", htmlFor: this._id, "aria-hidden": "true" }, index.h("div", { key: '62bf345f92850ea1e4e9f8dae1e88c739ef71a91', class: "label-content" }, index$1.loc(this.label), index.h("slot", { key: 'c334401be83f977cd1b53ddf5b64182d528c1106' })))), this.description && (index.h("div", { key: '2b71f3fb0ce8d4990319bc89a4b924ff4dd75018', class: "description-text", "test-id": "checkboxDescription", id: "description" }, index$1.loc(this.description)))));
+        return (index.h("div", { key: '7997e4f646425502ef9c924581fcdeb8360be82e', class: "container" }, index.h("input", { key: '75006c1a654bd5ba93dc1971b06e081a4f123af0', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), index.h("label", { key: 'e187b2771f6d8bb20ea77f31fa8dded912b6f295', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-label": this.composedAriaLabel }, this.renderCheckboxSVG()), index.h("div", { key: 'd0a189c6d027457baf0b29947d199087fb354467', class: textLabelClasses.join(' ') }, index.h("label", { key: '15df8e10cae026b83d4ab973140cd7b6c71cc483', "test-id": "checkboxLabel", htmlFor: this._id, "aria-hidden": "true" }, index.h("div", { key: 'e868eb6071d299662b7e7ff9581be1dfc192e607', class: "label-content" }, index$1.loc(this.label), index.h("slot", { key: '5bbd14bb697961435495efda9f0fc81801e67992' })))), this.description && (index.h("div", { key: '2b4783d58e21419b5209a77a7717fcaaa1ff39c3', class: "description-text", "test-id": "checkboxDescription", id: "description" }, index$1.loc(this.description)))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -118,7 +118,7 @@ const Q2Context = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'a27dbbacf5ed1c7dc15b518dc3fee0335d97926b', class: "context-wrapper" }, index.h("q2-item", { key: 'bc9e829de88f274ec0532377b4bdd84032cef8b3', class: "context-item" }, this.hasDecoratorSlotContent && (index.h("slot", { key: '084d99e60dd4dec06cc1beb81efbbfc7fb2663a9', name: "decorator", slot: "decorator" })), index.h("div", { key: '53c7bd5e403b7442d10fc3bcad8cd7e491eb8fec', class: "context-body", slot: "body" }, index.h("slot", { key: '60767e189adb1c4140b56611f9bd933fcce0826a', name: "header" }), index.h("slot", { key: '2013b5f196bcc17fefda3b043055ad665c6d583f', name: "description" })), this.hasAffordanceSlotContent && (index.h("slot", { key: 'c3bd6b034484513b78a6c624fa475becf93db41c', name: "affordance", slot: "action" }))), this.separator && (index.h("div", { key: '6b701240841e7410c8073b4f4ec80f1de2d00233', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (index.h("q2-action-group", { key: '5a7bdc0302a884d05099b3085ef62f8bf261ea48', class: "action-group", orientation: "horizontal" }, index.h("slot", { key: '2c9a6533e01e2d54d4fb423098e03d38eb330787', name: "action-group" }))), this.hasFooterSlotContent && index.h("slot", { key: 'b1742a26d9b0ff89e9049af8d82872044d219352', name: "footer" })));
+        return (index.h("div", { key: 'e5721a07d072dc6fa3db22edfd50c5787946ff9a', class: "context-wrapper" }, index.h("q2-item", { key: 'f7591f8009e1f28d3e0fffb57dc280bd53a5cafe', class: "context-item" }, this.hasDecoratorSlotContent && (index.h("slot", { key: '74215ffc70d4a19a00c921869391843539f28a6a', name: "decorator", slot: "decorator" })), index.h("div", { key: 'c1f51789a6cdbe7a12a055da39e2a3747639aff3', class: "context-body", slot: "body" }, index.h("slot", { key: 'a3d4fc206925aa9f23bba1d785b2df9b74cef2a5', name: "header" }), index.h("slot", { key: '5e4bd0a3f595c52b1a8d60ff2a06b4333919719f', name: "description" })), this.hasAffordanceSlotContent && (index.h("slot", { key: '26891e4fd22716ff431df7c98814d3086fa7a48e', name: "affordance", slot: "action" }))), this.separator && (index.h("div", { key: '6f5102f66edfa4bdc043e4907d09e22d70218b7d', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (index.h("q2-action-group", { key: 'a01f3f19278f94ec67fa21a34a5f8d26823a1000', class: "action-group", orientation: "horizontal" }, index.h("slot", { key: '86051221e06ac1c4b68bf31228f68724e67474e0', name: "action-group" }))), this.hasFooterSlotContent && index.h("slot", { key: 'f12d517e123e1cc7ef3c85fb53e5d227a82f3132', name: "footer" })));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -142,7 +142,7 @@ const Q2Currency = class {
     // #region Render Methods
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, signDisplay, isNegativeAmount, } = this;
-        return (index.h("div", { key: 'e88c26d1d9cc2bbb390ca8d6957fdaa693df2b4f', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && index.h("span", { key: '208cf499f136d6b865467e0de0583cc3fa171974' }, '('), hasPlusMinusSign && index.h("span", { key: 'be464d5fa79b176e2745170b99e551fcaafeea47' }, plusMinusSign), currencyIsFront && index.h("span", { key: '26c9df2005a3e007bdc89ae539e4afcd1f204e00', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), index.h("span", { key: 'b2a2fe99142fdea724ea5e868d164df4fdf93f14' }, amountCore), index.h("span", { key: '62bd1da9c76dd2eedd3bd596d2d60224f9e5ee27', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && index.h("span", { key: '5c6962251aa47a06b19978b9328484fcf34ab944', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && index.h("span", { key: '2b4742aede9c30f2657f7f447258b2574bc20668' }, ')')));
+        return (index.h("div", { key: '53d88008437b187887c49fcfd41d7f9d8c6bb587', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && index.h("span", { key: 'efce7009afdc9aa7d368f545a118806502801b28' }, '('), hasPlusMinusSign && index.h("span", { key: '452052007a26cfd879e4ded8540c9f825ebafb14' }, plusMinusSign), currencyIsFront && index.h("span", { key: '236e79e2e5612ee67d22f44947996d634056abcf', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), index.h("span", { key: 'c69146375af1d37aac010be7fcd41da050c8802e' }, amountCore), index.h("span", { key: 'd9fe34e10fe29a0ccaee6a6d1fcea0f52aebd0b3', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && index.h("span", { key: '741effd6b2ef88b22e38638c100f6d29195ffcb3', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && index.h("span", { key: 'ee2fd9317e37ac484e6bbc9d458e988d360abe2e' }, ')')));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-data-table.cjs.entry.js CHANGED Viewed

@@ -404,7 +404,7 @@ const Q2DataTable = class {
     // #region Render Methods
     render() {
         const { caption } = this;
-        return (index.h("div", { key: '533488f640cdf4168a700577a4bcf9acd28e1bda', class: "container" }, index.h("table", { key: 'f4abd2490f9ddba75d625da6c204f28a29401887' }, caption && index.h("caption", { key: '8abccbdc4a2267866b7c9da434b74376c307134b', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (index.h("div", { key: 'c60810b5cc26058b94829ee4f7942df9804403e9', class: "container" }, index.h("table", { key: '5fab9778577ef7b24955e3219a1bc054db6703f9' }, caption && index.h("caption", { key: 'daa8d4647859d4eeace2b9f4103bd73e5494b633', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderCellContent(cell) {
         if (!cell)

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

@@ -105,7 +105,7 @@ const Q2Detail = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: 'ce06094f78401084450ccd7e20d93c795ead16e6', class: this.detailClasses }, this.hasLabel && (index.h("div", { key: '094f194cf4ef5d5d298ccf3e1ae53bcd17b4431c', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? index$1.loc(this.label) : this.hasLabelSlotContent ? index.h("slot", { name: "label" }) : '')), this.hasDescripiton && (index.h("div", { key: 'a1512acca65fd932e9d7541b5a30077e5045b786', id: "label-description", class: this.descriptionClasses }, !!this.description ? index$1.loc(this.description) : this.hasDefaultSlotContent ? index.h("slot", null) : ''))));
+        return (index.h("div", { key: 'd92d66fcec6add5b649aa45fd11c5c778d5be0b3', class: this.detailClasses }, this.hasLabel && (index.h("div", { key: 'c4538e909b1c4ac9e298a9ec25240e56eba42cfd', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? index$1.loc(this.label) : this.hasLabelSlotContent ? index.h("slot", { name: "label" }) : '')), this.hasDescripiton && (index.h("div", { key: 'f6ce65ea2ad6b1d6c64d0ff69a66bd1fa5aa868d', id: "label-description", class: this.descriptionClasses }, !!this.description ? index$1.loc(this.description) : this.hasDefaultSlotContent ? index.h("slot", null) : ''))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -364,7 +364,7 @@ const Q2Dropdown = class {
     // #region Render Methods
     render() {
         const btnProps = this.toggleButtonProps;
-        return (index.h("click-elsewhere", { key: 'fddcaea136198e746262b9e39145c2cd54ad8818', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, index.h("q2-btn", { key: '3c10e2db2387b2d2eb3e252e900936ad90c8c4c7', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? index$1.loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: index$1.loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (index.h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, index.h("slot", { name: "control" }))) : (index.h(index.Fragment, null, this.label && !this.hideLabel && (index.h("span", { class: "dropdown-button-text" }, index$1.loc(this.label))), this.icon ? index.h("q2-icon", { type: this.icon }) : ' '))), index.h("q2-popover", { key: 'ea2a11332207e2ee9d35a9f3acc296e32969efb2', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, index.h("slot", { key: 'd4604df87b1f646f7703feb16622a136a695b41a', name: "popover-top" }), index.h("q2-option-list", { key: '31bc9e561470804a7065389c1017b2f9d1bee62f', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, index.h("slot", { key: '23045585b7fe0b271e988f530bf597dbab284abd' })), index.h("slot", { key: '83c9d50b07e8f30f52e2531e541b4a256a41517c', name: "popover-bottom" }))));
+        return (index.h("click-elsewhere", { key: '23504511d2b87c3159647349f905de98de329db5', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, index.h("q2-btn", { key: 'dc0b8de4939d8ac3414c470b329e775342a4879d', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? index$1.loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: index$1.loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (index.h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, index.h("slot", { name: "control" }))) : (index.h(index.Fragment, null, this.label && !this.hideLabel && (index.h("span", { class: "dropdown-button-text" }, index$1.loc(this.label))), this.icon ? index.h("q2-icon", { type: this.icon }) : ' '))), index.h("q2-popover", { key: '25345315dc70726e152793271c446ed34a4fcc0c', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, index.h("slot", { key: '4c885f96ce096b0a1a2a743892531910c82cfa5c', name: "popover-top" }), index.h("q2-option-list", { key: 'c4a045130b22ce5e5c462811cb8980310b16d50e', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, index.h("slot", { key: '9b5955c327df96213e10971fef01aadcc253a1d5' })), index.h("slot", { key: 'ac3d4f37bfdbef9239e389401cdfc4dfadf497dc', name: "popover-bottom" }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-editable-field.cjs.entry.js CHANGED Viewed

@@ -211,7 +211,7 @@ const Q2EditableField = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '6e46732a7663155081c4144e476f30d4b965d92a' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (index.h("div", { key: '2a71fc720f0f0ea686e34509d3a78a86a9100bd9' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -127,7 +127,7 @@ const Q2Example = class {
             }, onClick: () => this.tctClick.emit(), role: "menu" }, index.h("slot", null))));
     }
     render() {
-        return index.h(index.Host, { key: '2477b905f10ebabc95afa6362d5fef0ffa1cf266', attribute: "navigation" }, this.renderMenuInner());
+        return index.h(index.Host, { key: 'dbe4a678c04f60cc08aabd47cc9fa3871265e0f0', attribute: "navigation" }, this.renderMenuInner());
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -14,7 +14,7 @@ const Q2Form = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '41d956df983865cc2a6c0fe1bd4ffffefa93486f', class: "container" }, index.h("slot", { key: '293087685e8a10b88a50eaa032dd2ab91bffd44b' })));
+        return (index.h("div", { key: '773e56276df2f42dd330167ffba2a9d08a90f2f7', class: "container" }, index.h("slot", { key: '4d92e4844684a5418edb39c18674042cba90ba58' })));
     }
 };
 Q2Form.style = q2FormCss;

package/dist/cjs/q2-formatted-text.cjs.entry.js CHANGED Viewed

@@ -72,7 +72,7 @@ const Q2FormattedText = class {
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (index.h("div", { key: '21e3c3fd0c2087a24f1420c216cba11c27494057', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: 'e1d25b8e88a28f2ec468de8afd6f56e85955f266' }, this.formattedValue)));
+        return (index.h("div", { key: 'b9fc58891cbcec6ea19bc8c0b2514df003697f02', class: formattedTextClasses, "aria-label": this.formattedValue }, index.h("span", { key: '1b4e77284dc329065a281e7b2f2fce22e6cfc01a' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],

package/dist/cjs/q2-grid-area.cjs.entry.js CHANGED Viewed

@@ -109,7 +109,7 @@ const Q2GridArea = class {
             '--xl-align-self': this.xlAlign || this.lgAlign || this.mdAlign || this.smAlign || this.xsAlign || this.align,
             '--xl-z-index': `${this.computedXlZIndex}`,
         };
-        return (index.h(index.Host, { key: '7e2f7933ba52dd99f90350dfb3a2778d1c1a37d0', style: q2GridAreaStyles }, index.h("slot", { key: '39371e8a0fb1c1bd9c248ba5b8095f9bdd6022e7' })));
+        return (index.h(index.Host, { key: 'd26c984d2ad2022162a1e4bfcb17f3770c0a95d3', style: q2GridAreaStyles }, index.h("slot", { key: '7951a611fc9bdf5b0f4535f995317765323eca21' })));
     }
     get hostElement() { return index.getElement(this); }
 };