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

q2-tecton-elements 1.63.1 → 1.64.0

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

Files changed (390) hide show

package/dist/cjs/q2-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\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 &: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 &: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 &: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([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 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-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 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 --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-background, --t-primary-l3, #957ac1)};\n --tct-avatar-fallback-background: #{var-list(--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:active:not([disabled]) {\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 { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport {\n getAriaValueFromProp,\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n/** @slot coin-label - An optional slot to display a custom coin button label. /\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 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 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 }\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.label && this.hideLabel ? loc(this.label) : undefined,\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 \|\| 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 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 { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n this.buttonAttributes;\n const { iconPosition, loading, badge, label, hideLabel } = this;\n const renderLoadingSpinner = iconPosition \|\| loading;\n const isLoadingSpinnerInline = !iconPosition \|\| badge;\n return (\n <Fragment>\n <button\n ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-label={hideLabel && loc(label)}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={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@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 return loadingVariableURL.trim().replace(/^url\$['\"]?\|['\"]?\$$/g, '');\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 <div class=\"circle circle-1\"></div>\n <div class=\"circle circle-2\"></div>\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\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 &: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 &: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 &: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([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 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-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 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 --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-background, --t-primary-l3, #957ac1)};\n --tct-avatar-fallback-background: #{var-list(--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:active:not([disabled]) {\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 { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport {\n getAriaValueFromProp,\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n/** @slot coin-label - An optional slot to display a custom coin button label. /\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 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 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 }\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.label && this.hideLabel ? loc(this.label) : undefined,\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 \|\| 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 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 { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n this.buttonAttributes;\n const { iconPosition, loading, badge, label, hideLabel } = this;\n const renderLoadingSpinner = iconPosition \|\| loading;\n const isLoadingSpinnerInline = !iconPosition \|\| badge;\n return (\n <Fragment>\n <button\n ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-label={hideLabel && loc(label)}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={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@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 return loadingVariableURL.trim().replace(/^url\$['\"]?\|['\"]?\$$/g, '');\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-card.cjs.entry.js CHANGED Viewed

@@ -49,11 +49,6 @@ const Q2Card = class {
     }
     // #endregion
     // #region Component Lifecycle Events
-    componentDidLoad() {
-        const { hostElement, clickableElement } = this;
-        hostElement.click = () => clickableElement.click();
-        index$1.overrideFocus(this.hostElement);
-    }
     disconnectedCallback() {
         // Clean up manual click override
         if (this.hostElement) {
@@ -64,6 +59,11 @@ const Q2Card = class {
         this.clickableElement = null;
         this.containerElement = null;
     }
+    componentDidLoad() {
+        const { hostElement, clickableElement } = this;
+        hostElement.click = () => clickableElement.click();
+        index$1.overrideFocus(this.hostElement);
+    }
     // #endregion
     // #region Listeners
     onHostElementFocus(event) {

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

	@@ -1 +1 @@
1	- {"file":"q2-card.entry.cjs.js","mappings":"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","names":["overrideFocus","isEventFromElement","h","Fragment"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n position: relative;\n width: 100%;\n text-align: start;\n height: var-list(--tct-card-height, 100%);\n min-height: var-list(--tct-card-min-height, auto);\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(--tct-card-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n backdrop-filter: var(--tct-card-backdrop-filter);\n\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n border-width: var-list(var-prefixer(card-border-width), 0px);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px);\n backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n padding: var(--comp-card-padding);\n text-decoration: none;\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n overflow: var(--tct-card-overflow, auto);\n max-height: var-list(--tct-card-max-height, none);\n box-shadow:\n var(--comp-card-shadow),\n 0 0 0 rgba(0, 0, 0, 0);\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover {\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-hover-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-hover-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-hover-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-hover-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-hover-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n }\n\n &:active {\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-active-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-active-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-active-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-active-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-active-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n }\n &:focus-visible {\n --comp-focus-visible-shadow: var(--comp-card-shadow), var(--const-double-focus-ring);\n box-shadow: var-list(--tct-card-focus-visible-box-shadow, --comp-focus-visible-shadow);\n }\n }\n\n &.is-static {\n cursor: auto;\n background: var-list(--tct-card-static-background, --tct-card-background, none);\n color: var-list(--tct-card-static-font-color, --tct-card-color, --t-text, #4d4d4d);\n backdrop-filter: none;\n border-radius: 0;\n border: 0;\n text-decoration: initial;\n padding: 0;\n\n :host([bar]) & {\n padding-left: var(--comp-card-padding);\n }\n\n &,\n &:hover,\n &:active {\n box-shadow: none;\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n\n &.color-primary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n }\n\n &.color-secondary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n }\n\n &.color-tertiary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n }\n\n &.color-info {\n --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n }\n\n &.color-success {\n --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n }\n\n &.color-warning {\n --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n }\n\n &.color-alert {\n --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n }\n\n &.color-accent-1 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n }\n\n &.color-accent-2 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n }\n\n &.color-accent-3 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n }\n\n &.color-accent-4 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n }\n\n &.color-accent-5 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n }\n\n &.color-accent-6 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n }\n\n &.color-accent-7 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n }\n\n &.color-accent-8 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n }\n\n &.color-accent-9 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n }\n\n &.color-accent-10 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n }\n\n &.color-accent-11 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n }\n\n &.color-accent-12 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n }\n}\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, Listen, Element, EventEmitter } from '@stencil/core';\nimport { overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'info',\n 'success',\n 'warning',\n 'alert',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n // #region Own Properties\n\n avatarElement: HTMLElement;\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /*\n The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarIcon: string;\n\n /\n The initials to be placed in the avatar of the card.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarInitials: string;\n\n /\n The name to be used for the avatar of the card which will be converted to initials.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarName: string;\n\n /\n The source of the image to be displayed in the avatar location.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarSrc: string;\n\n /\n Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n \n - primary\n * - secondary\n * - tertiary\n * - info\n * - success\n * - warning\n * - alert\n * - accent-1\n * - accent-2\n * - accent-3\n * - accent-4\n * - accent-5\n * - accent-6\n * - accent-7\n * - accent-8\n * - accent-9\n * - accent-10\n * - accent-11\n * - accent-12\n \n Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n /\n @Prop({ reflect: true })\n bar: string;\n\n /\n The description of the card (truncated after two lines).\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n The size of the box-shadow applied to the component, giving it a sense of depth.\n \n @info\n * Set to `0` to disable.\n /\n @Prop({ reflect: true })\n elevation: 0 \| 1 \| 2 \| 3 \| 4 \| 5 = 2;\n\n /\n Display the card with a view optimized for smaller displays.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n isSmall: boolean;\n\n /\n Display the card with no borders, padding, drop-shadows, or clickable behavior.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n isStatic: boolean;\n\n /\n Target to be applied to the link when a URL is provided.\n \n @warning\n * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n /\n @Prop({ reflect: true })\n target: '_self' \| '_blank' \| '_parent' \| '_top';\n\n /\n The title of the card.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n title: string;\n\n /* Alters the interactive behavior of the card while maintaining visual appearance. /\n @Prop({ reflect: true })\n type: 'clickable' \| 'non-clickable' = 'clickable';\n\n /\n URL to navigate the user to when the card is clicked.\n \n @warning\n * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n /\n @Prop({ reflect: true })\n url: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when the card is clicked and the `url` property is not provided. */\n @Event()\n click: EventEmitter<undefined>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n // Clean up manual click override\n if (this.hostElement) {\n this.hostElement.click = null;\n }\n\n // Nullify DOM references\n this.avatarElement = null;\n this.clickableElement = null;\n this.containerElement = null;\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContainerClasses() {\n const { isSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isStatic, type, elevation } = this;\n const result = ['container', type];\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (isSmall) result.push('is-small');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n if (!isStatic && elevation && elevation > 0) result.push(`elevation-${elevation}`);\n\n return result.join(' ');\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class={this.getBarClasses()}\n test-id=\"bar\"\n style={this.getBarStyles()}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n </Fragment>\n );\n }\n\n getBarClasses() {\n const { bar } = this;\n\n return {\n bar: true,\n [`color-${bar}`]: this.isBarColorPredefined(),\n };\n }\n\n getBarStyles() {\n const { bar } = this;\n\n return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-card.entry.cjs.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,41QAA41Q;;ACE92Q,MAAM,iBAAiB,GAAG;IACtB,SAAS;IACT,WAAW;IACX,UAAU;IACV,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;IACP,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,WAAW;IACX,WAAW;IACX,WAAW;CACd;MAGY,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA+FI;;;;;AAKG;AAEH,QAAA,IAAS,CAAA,SAAA,GAA0B,CAAC;;AA2CpC,QAAA,IAAI,CAAA,IAAA,GAAkC,WAAW;AA8HjD,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,IAAI,IAAI,CAAC,GAAG;AAAE,gBAAA,OAAO,IAAI;YACzB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;AACrB,SAAC;AAkDJ;;;IAhKG,oBAAoB,GAAA;;AAEhB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AAClB,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI;;;AAIjC,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI;AACzB,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;AAC5B,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;IAGhC,gBAAgB,GAAA;AACZ,QAAA,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,IAAI;QAC9C,WAAW,CAAC,KAAK,GAAG,MAAM,gBAAgB,CAAC,KAAK,EAAE;AAClD,QAAAA,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;;;AAOnC,IAAA,kBAAkB,CAAC,KAAK,EAAA;QACpB,IAAI,CAACC,0BAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;AAClD,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;;;;IAMjC,cAAc,GAAA;QACV,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI;QAElE,IAAI,UAAU,EAAE;AACZ,YAAA,QACIC,qBACI,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,EAC1B,SAAA,EAAA,QAAQ,EACT,CAAA;;AAEZ,aAAA,IAAI,UAAU,IAAI,cAAc,IAAI,SAAS,EAAE;AAClD,YAAA,QACIA,OAAA,CAAA,WAAA,EAAA,EACI,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,cAAc,EACxB,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,EAAA,SAAA,EAC1B,QAAQ,EAAA,CACP;;;IAKzB,wBAAwB,GAAA;AACpB,QAAA,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI;AACtG,QAAA,MAAM,MAAM,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC;QAClC,MAAM,SAAS,GAAG,UAAU,IAAI,cAAc,IAAI,SAAS,IAAI,UAAU;AACzE,QAAA,IAAI,OAAO;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;AACpC,QAAA,IAAI,SAAS;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;AACxC,QAAA,IAAI,QAAQ;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;AACtC,QAAA,IAAI,CAAC,QAAQ,IAAI,SAAS,IAAI,SAAS,GAAG,CAAC;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,aAAa,SAAS,CAAA,CAAE,CAAC;AAElF,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG3B,eAAe,GAAA;QACX,QACIA,QAACC,cAAQ,EAAA,IAAA,EACJ,IAAI,CAAC,GAAG,KACLD,iBACI,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EACnB,SAAA,EAAA,KAAK,EACb,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,CACvB,CACV,EACA,IAAI,CAAC,cAAc,EAAE,EACtBA,OAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,SAAS,aACP,kBAAkB,EAC1B,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAAA,EAEpC,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,IAAA,EAAA,EAAA,SAAA,EAAY,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAM,EACnD,IAAI,CAAC,WAAW,IAAIA,OAAA,CAAA,GAAA,EAAA,EAAA,SAAA,EAAW,aAAa,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,EACpEA,OAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACN,CACC;;IAInB,aAAa,GAAA;AACT,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI;QAEpB,OAAO;AACH,YAAA,GAAG,EAAE,IAAI;YACT,CAAC,CAAA,MAAA,EAAS,GAAG,CAAE,CAAA,GAAG,IAAI,CAAC,oBAAoB,EAAE;SAChD;;IAGL,YAAY,GAAA;AACR,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI;AAEpB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAE;;IAUzE,oBAAoB,GAAA;QAChB,OAAO,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC;;;;IAM/C,MAAM,GAAA;QACF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI;AACpC,QAAA,IAAI,QAAQ,IAAI,IAAI,KAAK,eAAe;AACpC,YAAA,QACIA,OAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,EAC9B,SAAA,EAAA,kBAAkB,EAEzB,EAAA,IAAI,CAAC,eAAe,EAAE,CACrB;aAET,IAAI,CAAC,CAAC,GAAG;AACV,YAAA,QACIA,OACI,CAAA,GAAA,EAAA,EAAA,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,EACtC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAC,qBAAqB,EACjB,SAAA,EAAA,kBAAkB,EAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAExB,IAAI,CAAC,eAAe,EAAE,CACvB;;YAGR,QACIA,OACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,aAC9B,kBAAkB,EAC1B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,eAAe,EAAE,CAClB;;;;;;;;","names":["overrideFocus","isEventFromElement","h","Fragment"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n position: relative;\n width: 100%;\n text-align: start;\n height: var-list(--tct-card-height, 100%);\n min-height: var-list(--tct-card-min-height, auto);\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(--tct-card-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n backdrop-filter: var(--tct-card-backdrop-filter);\n\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n border-width: var-list(var-prefixer(card-border-width), 0px);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px);\n backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n padding: var(--comp-card-padding);\n text-decoration: none;\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n overflow: var(--tct-card-overflow, auto);\n max-height: var-list(--tct-card-max-height, none);\n box-shadow:\n var(--comp-card-shadow),\n 0 0 0 rgba(0, 0, 0, 0);\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover {\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-hover-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-hover-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-hover-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-hover-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-hover-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n }\n\n &:active {\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-active-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-active-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-active-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-active-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-active-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n }\n &:focus-visible {\n --comp-focus-visible-shadow: var(--comp-card-shadow), var(--const-double-focus-ring);\n box-shadow: var-list(--tct-card-focus-visible-box-shadow, --comp-focus-visible-shadow);\n }\n }\n\n &.is-static {\n cursor: auto;\n background: var-list(--tct-card-static-background, --tct-card-background, none);\n color: var-list(--tct-card-static-font-color, --tct-card-color, --t-text, #4d4d4d);\n backdrop-filter: none;\n border-radius: 0;\n border: 0;\n text-decoration: initial;\n padding: 0;\n\n :host([bar]) & {\n padding-left: var(--comp-card-padding);\n }\n\n &,\n &:hover,\n &:active {\n box-shadow: none;\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n\n &.color-primary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n }\n\n &.color-secondary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n }\n\n &.color-tertiary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n }\n\n &.color-info {\n --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n }\n\n &.color-success {\n --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n }\n\n &.color-warning {\n --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n }\n\n &.color-alert {\n --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n }\n\n &.color-accent-1 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n }\n\n &.color-accent-2 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n }\n\n &.color-accent-3 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n }\n\n &.color-accent-4 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n }\n\n &.color-accent-5 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n }\n\n &.color-accent-6 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n }\n\n &.color-accent-7 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n }\n\n &.color-accent-8 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n }\n\n &.color-accent-9 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n }\n\n &.color-accent-10 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n }\n\n &.color-accent-11 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n }\n\n &.color-accent-12 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n }\n}\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, Listen, Element, EventEmitter } from '@stencil/core';\nimport { overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'info',\n 'success',\n 'warning',\n 'alert',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n // #region Own Properties\n\n avatarElement: HTMLElement;\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /*\n The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarIcon: string;\n\n /\n The initials to be placed in the avatar of the card.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarInitials: string;\n\n /\n The name to be used for the avatar of the card which will be converted to initials.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarName: string;\n\n /\n The source of the image to be displayed in the avatar location.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarSrc: string;\n\n /\n Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n \n - primary\n * - secondary\n * - tertiary\n * - info\n * - success\n * - warning\n * - alert\n * - accent-1\n * - accent-2\n * - accent-3\n * - accent-4\n * - accent-5\n * - accent-6\n * - accent-7\n * - accent-8\n * - accent-9\n * - accent-10\n * - accent-11\n * - accent-12\n \n Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n /\n @Prop({ reflect: true })\n bar: string;\n\n /\n The description of the card (truncated after two lines).\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n The size of the box-shadow applied to the component, giving it a sense of depth.\n \n @info\n * Set to `0` to disable.\n /\n @Prop({ reflect: true })\n elevation: 0 \| 1 \| 2 \| 3 \| 4 \| 5 = 2;\n\n /\n Display the card with a view optimized for smaller displays.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n isSmall: boolean;\n\n /\n Display the card with no borders, padding, drop-shadows, or clickable behavior.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n isStatic: boolean;\n\n /\n Target to be applied to the link when a URL is provided.\n \n @warning\n * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n /\n @Prop({ reflect: true })\n target: '_self' \| '_blank' \| '_parent' \| '_top';\n\n /\n The title of the card.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n title: string;\n\n /* Alters the interactive behavior of the card while maintaining visual appearance. /\n @Prop({ reflect: true })\n type: 'clickable' \| 'non-clickable' = 'clickable';\n\n /\n URL to navigate the user to when the card is clicked.\n \n @warning\n * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n /\n @Prop({ reflect: true })\n url: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when the card is clicked and the `url` property is not provided. */\n @Event()\n click: EventEmitter<undefined>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // Clean up manual click override\n if (this.hostElement) {\n this.hostElement.click = null;\n }\n\n // Nullify DOM references\n this.avatarElement = null;\n this.clickableElement = null;\n this.containerElement = null;\n }\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContainerClasses() {\n const { isSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isStatic, type, elevation } = this;\n const result = ['container', type];\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (isSmall) result.push('is-small');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n if (!isStatic && elevation && elevation > 0) result.push(`elevation-${elevation}`);\n\n return result.join(' ');\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class={this.getBarClasses()}\n test-id=\"bar\"\n style={this.getBarStyles()}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n </Fragment>\n );\n }\n\n getBarClasses() {\n const { bar } = this;\n\n return {\n bar: true,\n [`color-${bar}`]: this.isBarColorPredefined(),\n };\n }\n\n getBarStyles() {\n const { bar } = this;\n\n return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-card.entry.cjs.js","sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n position: relative;\n width: 100%;\n text-align: start;\n height: var-list(--tct-card-height, 100%);\n min-height: var-list(--tct-card-min-height, auto);\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(--tct-card-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n backdrop-filter: var(--tct-card-backdrop-filter);\n\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n border-width: var-list(var-prefixer(card-border-width), 0px);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px);\n backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n padding: var(--comp-card-padding);\n text-decoration: none;\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n overflow: var(--tct-card-overflow, auto);\n max-height: var-list(--tct-card-max-height, none);\n box-shadow:\n var(--comp-card-shadow),\n 0 0 0 rgba(0, 0, 0, 0);\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover {\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-hover-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-hover-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-hover-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-hover-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-hover-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n }\n\n &:active {\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-active-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-active-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-active-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-active-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-active-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n }\n &:focus-visible {\n --comp-focus-visible-shadow: var(--comp-card-shadow), var(--const-double-focus-ring);\n box-shadow: var-list(--tct-card-focus-visible-box-shadow, --comp-focus-visible-shadow);\n }\n }\n\n &.is-static {\n cursor: auto;\n background: var-list(--tct-card-static-background, --tct-card-background, none);\n color: var-list(--tct-card-static-font-color, --tct-card-color, --t-text, #4d4d4d);\n backdrop-filter: none;\n border-radius: 0;\n border: 0;\n text-decoration: initial;\n padding: 0;\n\n :host([bar]) & {\n padding-left: var(--comp-card-padding);\n }\n\n &,\n &:hover,\n &:active {\n box-shadow: none;\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n\n &.color-primary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n }\n\n &.color-secondary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n }\n\n &.color-tertiary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n }\n\n &.color-info {\n --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n }\n\n &.color-success {\n --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n }\n\n &.color-warning {\n --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n }\n\n &.color-alert {\n --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n }\n\n &.color-accent-1 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n }\n\n &.color-accent-2 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n }\n\n &.color-accent-3 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n }\n\n &.color-accent-4 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n }\n\n &.color-accent-5 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n }\n\n &.color-accent-6 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n }\n\n &.color-accent-7 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n }\n\n &.color-accent-8 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n }\n\n &.color-accent-9 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n }\n\n &.color-accent-10 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n }\n\n &.color-accent-11 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n }\n\n &.color-accent-12 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n }\n}\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, Listen, Element, EventEmitter } from '@stencil/core';\nimport { overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'info',\n 'success',\n 'warning',\n 'alert',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n // #region Own Properties\n\n avatarElement: HTMLElement;\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /*\n The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarIcon: string;\n\n /\n The initials to be placed in the avatar of the card.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarInitials: string;\n\n /\n The name to be used for the avatar of the card which will be converted to initials.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarName: string;\n\n /\n The source of the image to be displayed in the avatar location.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarSrc: string;\n\n /\n Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n \n - primary\n * - secondary\n * - tertiary\n * - info\n * - success\n * - warning\n * - alert\n * - accent-1\n * - accent-2\n * - accent-3\n * - accent-4\n * - accent-5\n * - accent-6\n * - accent-7\n * - accent-8\n * - accent-9\n * - accent-10\n * - accent-11\n * - accent-12\n \n Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n /\n @Prop({ reflect: true })\n bar: string;\n\n /\n The description of the card (truncated after two lines).\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n The size of the box-shadow applied to the component, giving it a sense of depth.\n \n @info\n * Set to `0` to disable.\n /\n @Prop({ reflect: true })\n elevation: 0 \| 1 \| 2 \| 3 \| 4 \| 5 = 2;\n\n /\n Display the card with a view optimized for smaller displays.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n isSmall: boolean;\n\n /\n Display the card with no borders, padding, drop-shadows, or clickable behavior.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n isStatic: boolean;\n\n /\n Target to be applied to the link when a URL is provided.\n \n @warning\n * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n /\n @Prop({ reflect: true })\n target: '_self' \| '_blank' \| '_parent' \| '_top';\n\n /\n The title of the card.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n title: string;\n\n /* Alters the interactive behavior of the card while maintaining visual appearance. /\n @Prop({ reflect: true })\n type: 'clickable' \| 'non-clickable' = 'clickable';\n\n /\n URL to navigate the user to when the card is clicked.\n \n @warning\n * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n /\n @Prop({ reflect: true })\n url: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when the card is clicked and the `url` property is not provided. */\n @Event()\n click: EventEmitter<undefined>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n }\n\n disconnectedCallback() {\n // Clean up manual click override\n if (this.hostElement) {\n this.hostElement.click = null;\n }\n\n // Nullify DOM references\n this.avatarElement = null;\n this.clickableElement = null;\n this.containerElement = null;\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContainerClasses() {\n const { isSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isStatic, type, elevation } = this;\n const result = ['container', type];\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (isSmall) result.push('is-small');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n if (!isStatic && elevation && elevation > 0) result.push(`elevation-${elevation}`);\n\n return result.join(' ');\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class={this.getBarClasses()}\n test-id=\"bar\"\n style={this.getBarStyles()}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n </Fragment>\n );\n }\n\n getBarClasses() {\n const { bar } = this;\n\n return {\n bar: true,\n [`color-${bar}`]: this.isBarColorPredefined(),\n };\n }\n\n getBarStyles() {\n const { bar } = this;\n\n return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"names":["overrideFocus","isEventFromElement","h","Fragment"],"mappings":";;;;;AAAA,MAAM,SAAS,GAAG,41QAA41Q;;ACE92Q,MAAM,iBAAiB,GAAG;IACtB,SAAS;IACT,WAAW;IACX,UAAU;IACV,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;IACP,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,WAAW;IACX,WAAW;IACX,WAAW;CACd;MAGY,MAAM,GAAA,MAAA;AADnB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA+FI;;;;;AAKG;AAEH,QAAA,IAAS,CAAA,SAAA,GAA0B,CAAC;;AA2CpC,QAAA,IAAI,CAAA,IAAA,GAAkC,WAAW;AA8HjD,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;YAChC,IAAI,IAAI,CAAC,GAAG;AAAE,gBAAA,OAAO,IAAI;YACzB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;AACrB,SAAC;AAkDJ;;;IAhKG,gBAAgB,GAAA;AACZ,QAAA,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,IAAI;QAC9C,WAAW,CAAC,KAAK,GAAG,MAAM,gBAAgB,CAAC,KAAK,EAAE;AAClD,QAAAA,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGnC,oBAAoB,GAAA;;AAEhB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AAClB,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,IAAI;;;AAIjC,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI;AACzB,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;AAC5B,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;;;AAOhC,IAAA,kBAAkB,CAAC,KAAK,EAAA;QACpB,IAAI,CAACC,0BAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;AAClD,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;;;;IAMjC,cAAc,GAAA;QACV,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI;QAElE,IAAI,UAAU,EAAE;AACZ,YAAA,QACIC,qBACI,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,EAC1B,SAAA,EAAA,QAAQ,EACT,CAAA;;AAEZ,aAAA,IAAI,UAAU,IAAI,cAAc,IAAI,SAAS,EAAE;AAClD,YAAA,QACIA,OAAA,CAAA,WAAA,EAAA,EACI,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,cAAc,EACxB,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,EAAA,SAAA,EAC1B,QAAQ,EAAA,CACP;;;IAKzB,wBAAwB,GAAA;AACpB,QAAA,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI;AACtG,QAAA,MAAM,MAAM,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC;QAClC,MAAM,SAAS,GAAG,UAAU,IAAI,cAAc,IAAI,SAAS,IAAI,UAAU;AACzE,QAAA,IAAI,OAAO;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;AACpC,QAAA,IAAI,SAAS;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;AACxC,QAAA,IAAI,QAAQ;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;AACtC,QAAA,IAAI,CAAC,QAAQ,IAAI,SAAS,IAAI,SAAS,GAAG,CAAC;AAAE,YAAA,MAAM,CAAC,IAAI,CAAC,aAAa,SAAS,CAAA,CAAE,CAAC;AAElF,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG3B,eAAe,GAAA;QACX,QACIA,QAACC,cAAQ,EAAA,IAAA,EACJ,IAAI,CAAC,GAAG,KACLD,iBACI,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EACnB,SAAA,EAAA,KAAK,EACb,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,CACvB,CACV,EACA,IAAI,CAAC,cAAc,EAAE,EACtBA,OAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAC,SAAS,aACP,kBAAkB,EAC1B,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EAAA,EAEpC,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,IAAA,EAAA,EAAA,SAAA,EAAY,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAM,EACnD,IAAI,CAAC,WAAW,IAAIA,OAAA,CAAA,GAAA,EAAA,EAAA,SAAA,EAAW,aAAa,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,EACpEA,OAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACN,CACC;;IAInB,aAAa,GAAA;AACT,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI;QAEpB,OAAO;AACH,YAAA,GAAG,EAAE,IAAI;YACT,CAAC,CAAA,MAAA,EAAS,GAAG,CAAE,CAAA,GAAG,IAAI,CAAC,oBAAoB,EAAE;SAChD;;IAGL,YAAY,GAAA;AACR,QAAA,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI;AAEpB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAE;;IAUzE,oBAAoB,GAAA;QAChB,OAAO,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC;;;;IAM/C,MAAM,GAAA;QACF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI;AACpC,QAAA,IAAI,QAAQ,IAAI,IAAI,KAAK,eAAe;AACpC,YAAA,QACIA,OAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,EAC9B,SAAA,EAAA,kBAAkB,EAEzB,EAAA,IAAI,CAAC,eAAe,EAAE,CACrB;aAET,IAAI,CAAC,CAAC,GAAG;AACV,YAAA,QACIA,OACI,CAAA,GAAA,EAAA,EAAA,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,EACtC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAC,qBAAqB,EACjB,SAAA,EAAA,kBAAkB,EAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAExB,IAAI,CAAC,eAAe,EAAE,CACvB;;YAGR,QACIA,OACI,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,aAC9B,kBAAkB,EAC1B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,eAAe,EAAE,CAClB;;;;;;;;"}
1	+ {"version":3,"file":"q2-card.entry.cjs.js","sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n.container {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n position: relative;\n width: 100%;\n text-align: start;\n height: var-list(--tct-card-height, 100%);\n min-height: var-list(--tct-card-min-height, auto);\n display: grid;\n gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n margin: 0;\n color: var-list(--tct-card-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n backdrop-filter: var(--tct-card-backdrop-filter);\n\n background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n border-width: var-list(var-prefixer(card-border-width), 0px);\n border-color: var-list(var-prefixer(card-border-color), transparent);\n border-style: var-list(--tct-card-border-style, solid);\n border-radius: var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px);\n backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n padding: var(--comp-card-padding);\n text-decoration: none;\n transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n overflow: var(--tct-card-overflow, auto);\n max-height: var-list(--tct-card-max-height, none);\n box-shadow:\n var(--comp-card-shadow),\n 0 0 0 rgba(0, 0, 0, 0);\n\n &.is-small {\n --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n }\n &.has-avatar {\n grid-template-columns: var(--comp-avatar-size) 1fr;\n --tct-avatar-width: var(--comp-avatar-size);\n --tct-avatar-height: var(--comp-avatar-size);\n --tct-icon-size: var(--comp-avatar-size);\n }\n\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover {\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-hover-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-hover-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-hover-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-hover-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-hover-box-shadow,\n --app-shadow-5,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n )};\n }\n }\n\n &:active {\n &.elevation-1 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-1-active-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-2 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-2-active-box-shadow,\n --app-shadow-1,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-3 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-3-active-box-shadow,\n --app-shadow-2,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-4 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-4-active-box-shadow,\n --app-shadow-3,\n #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n )};\n }\n &.elevation-5 {\n --comp-card-shadow: #{var-list(\n --tct-card-elevation-5-active-box-shadow,\n --app-shadow-4,\n #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n )};\n }\n }\n &:focus-visible {\n --comp-focus-visible-shadow: var(--comp-card-shadow), var(--const-double-focus-ring);\n box-shadow: var-list(--tct-card-focus-visible-box-shadow, --comp-focus-visible-shadow);\n }\n }\n\n &.is-static {\n cursor: auto;\n background: var-list(--tct-card-static-background, --tct-card-background, none);\n color: var-list(--tct-card-static-font-color, --tct-card-color, --t-text, #4d4d4d);\n backdrop-filter: none;\n border-radius: 0;\n border: 0;\n text-decoration: initial;\n padding: 0;\n\n :host([bar]) & {\n padding-left: var(--comp-card-padding);\n }\n\n &,\n &:hover,\n &:active {\n box-shadow: none;\n }\n }\n}\n\n.content {\n overflow: hidden;\n display: grid;\n gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n align-content: start;\n}\n\nh3,\np {\n margin: 0;\n padding: 0;\n line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n font-weight: var-list(var-prefixer(card-font-weight), 600);\n font-size: var-list(var-prefixer(card-font-size), 17px);\n @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n position: absolute;\n inset: 0 auto auto 0;\n width: var(--comp-bar-width);\n background: var(--comp-bar-color);\n height: 100%;\n\n &.color-primary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n }\n\n &.color-secondary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n }\n\n &.color-tertiary {\n --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n }\n\n &.color-info {\n --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n }\n\n &.color-success {\n --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n }\n\n &.color-warning {\n --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n }\n\n &.color-alert {\n --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n }\n\n &.color-accent-1 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n }\n\n &.color-accent-2 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n }\n\n &.color-accent-3 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n }\n\n &.color-accent-4 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n }\n\n &.color-accent-5 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n }\n\n &.color-accent-6 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n }\n\n &.color-accent-7 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n }\n\n &.color-accent-8 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n }\n\n &.color-accent-9 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n }\n\n &.color-accent-10 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n }\n\n &.color-accent-11 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n }\n\n &.color-accent-12 {\n --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n }\n}\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, Listen, Element, EventEmitter } from '@stencil/core';\nimport { overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'info',\n 'success',\n 'warning',\n 'alert',\n 'accent-1',\n 'accent-2',\n 'accent-3',\n 'accent-4',\n 'accent-5',\n 'accent-6',\n 'accent-7',\n 'accent-8',\n 'accent-9',\n 'accent-10',\n 'accent-11',\n 'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n // #region Own Properties\n\n avatarElement: HTMLElement;\n clickableElement: HTMLElement;\n containerElement: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /*\n The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarIcon: string;\n\n /\n The initials to be placed in the avatar of the card.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarInitials: string;\n\n /\n The name to be used for the avatar of the card which will be converted to initials.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarName: string;\n\n /\n The source of the image to be displayed in the avatar location.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n avatarSrc: string;\n\n /\n Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n \n - primary\n * - secondary\n * - tertiary\n * - info\n * - success\n * - warning\n * - alert\n * - accent-1\n * - accent-2\n * - accent-3\n * - accent-4\n * - accent-5\n * - accent-6\n * - accent-7\n * - accent-8\n * - accent-9\n * - accent-10\n * - accent-11\n * - accent-12\n \n Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n /\n @Prop({ reflect: true })\n bar: string;\n\n /\n The description of the card (truncated after two lines).\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n description: string;\n\n /\n The size of the box-shadow applied to the component, giving it a sense of depth.\n \n @info\n * Set to `0` to disable.\n /\n @Prop({ reflect: true })\n elevation: 0 \| 1 \| 2 \| 3 \| 4 \| 5 = 2;\n\n /\n Display the card with a view optimized for smaller displays.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n isSmall: boolean;\n\n /\n Display the card with no borders, padding, drop-shadows, or clickable behavior.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n isStatic: boolean;\n\n /\n Target to be applied to the link when a URL is provided.\n \n @warning\n * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n /\n @Prop({ reflect: true })\n target: '_self' \| '_blank' \| '_parent' \| '_top';\n\n /\n The title of the card.\n \n Please use q2-item instead.\n \n @deprecated\n /\n @Prop({ reflect: true })\n title: string;\n\n /* Alters the interactive behavior of the card while maintaining visual appearance. /\n @Prop({ reflect: true })\n type: 'clickable' \| 'non-clickable' = 'clickable';\n\n /\n URL to navigate the user to when the card is clicked.\n \n @warning\n * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n /\n @Prop({ reflect: true })\n url: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when the card is clicked and the `url` property is not provided. */\n @Event()\n click: EventEmitter<undefined>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // Clean up manual click override\n if (this.hostElement) {\n this.hostElement.click = null;\n }\n\n // Nullify DOM references\n this.avatarElement = null;\n this.clickableElement = null;\n this.containerElement = null;\n }\n\n componentDidLoad() {\n const { hostElement, clickableElement } = this;\n hostElement.click = () => clickableElement.click();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n onHostElementFocus(event) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.clickableElement.focus();\n }\n\n // #endregion\n // #region Local Methods\n\n generateAvatar() {\n const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n if (avatarIcon) {\n return (\n <q2-icon\n type={avatarIcon}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-icon>\n );\n } else if (avatarName \|\| avatarInitials \|\| avatarSrc) {\n return (\n <q2-avatar\n name={avatarName}\n initials={avatarInitials}\n src={avatarSrc}\n ref={e => (this.avatarElement = e)}\n test-id=\"avatar\"\n ></q2-avatar>\n );\n }\n }\n\n generateContainerClasses() {\n const { isSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isStatic, type, elevation } = this;\n const result = ['container', type];\n const hasAvatar = avatarName \|\| avatarInitials \|\| avatarSrc \|\| avatarIcon;\n if (isSmall) result.push('is-small');\n if (hasAvatar) result.push('has-avatar');\n if (isStatic) result.push('is-static');\n if (!isStatic && elevation && elevation > 0) result.push(`elevation-${elevation}`);\n\n return result.join(' ');\n }\n\n generateContent() {\n return (\n <Fragment>\n {this.bar && (\n <div\n class={this.getBarClasses()}\n test-id=\"bar\"\n style={this.getBarStyles()}\n ></div>\n )}\n {this.generateAvatar()}\n <div\n class=\"content\"\n test-id=\"contentContainer\"\n ref={e => (this.containerElement = e)}\n >\n {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n {this.description && <p test-id=\"description\">{this.description}</p>}\n <slot />\n </div>\n </Fragment>\n );\n }\n\n getBarClasses() {\n const { bar } = this;\n\n return {\n bar: true,\n [`color-${bar}`]: this.isBarColorPredefined(),\n };\n }\n\n getBarStyles() {\n const { bar } = this;\n\n return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.url) return true;\n event.preventDefault();\n event.stopPropagation();\n this.click.emit();\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"names":["overrideFocus","isEventFromElement","h","Fragment"],"mappings":"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"}

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

@@ -263,7 +263,7 @@ const Q2ChartArea = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '89ba0cf8a1082938847d0c3c6db58adf585806ee', class: "container" }, index.h("div", { key: 'c58f71060bdf90bd85fd95519b93b8e97a2c8310', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (index.h("div", { key: '7e0c56495c29ca880bb40a09c0f9029d2eab50c6', class: "container" }, index.h("div", { key: '66ae46924390b1472b2e86c7ff782e89bfcaba1f', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {