q2-tecton-elements 1.63.2 → 1.64.0

package/dist/q2-tecton-elements/q2-btn_2.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2BtnCss","Q2Btn","constructor","hostRef","this","type","handleButtonSize","Number","size","handleDeprecationWarning","handleIcons","icon","Array","from","hostElement","querySelectorAll","reduce","acc","element","remove","hasIcon","hasLoc","querySelector","hasText","textContent","trim","hasIconLeft","firstElementChild","hasIconRight","lastElementChild","hasIconOnly","iconPosition","handleSlotChange","disconnectedCallback","primaryBtn","primaryBtnWrapper","componentWillLoad","handleAriaLabel","handleColor","componentDidLoad","overrideFocus","handleClick","event","loading","disabled","stopImmediatePropagation","focus","delegateFocus","isEventFromElement","ariaLabelObserver","sizeObserver","buttonAttributes","ariaExpanded","getAriaValueFromProp","ariaHasPopup","ariaLabel","label","hideLabel","loc","undefined","ariaSelected","ariaPressed","description","tabindex","tabIndex","buttonClasses","classes","push","intent","block","color","active","join","coinLabelClasses","renderButton","badge","renderLoadingSpinner","isLoadingSpinnerInline","h","Fragment","ref","el","class","role","_role","hidden","modifiers","renderDefaultLabel","renderDefaultCoinSlot","renderCoinLabel","id","name","onSlotchange","render","q2LoadingCss","Q2Loading","customLoaderClass","dontUpdateScreenReaderLabel","liveRegionChangeIndicatorToggle","hasCustomLoader","hideFromScreenReaders","renderCustomLoaderContainer","screenReaderElement","renderHalfCircleSpinner","renderSkeletonLoader","shape","skeletonShape","renderSpinner","cleanupLiveRegionDelay","handleType","setupLiveRegionDelay","componentDidUpdate","updateScreenReaderLabel","componentDidRender","loaderClone","customLoaderContainer","shadowRoot","_a","appendChild","onUpdateLoaders","customLoaderURL","fetchLoader","countsArray","counts","split","map","customLoaderElement","document","hostComputedStyles","window","getComputedStyle","loadingVariableURL","getPropertyValue","replace","isSkeletonType","loaderEventName","localizedLabel","modifiersSet","Set","_b","skeletonShapes","call","checkForLoader","spriteContainer","getOrCreateSpriteContainer","hasAttribute","cloneLoaderNode","addEventListener","once","createElement","classList","add","dataset","url","clearTimeout","ariaLiveTimer","observer","disconnect","cloneNode","loaderExists","response","fetch","ok","Error","status","svgText","text","parser","DOMParser","svgDoc","parseFromString","svg","loaded","replaceWith","parentNode","replaceChild","dispatchEvent","CustomEvent","bubbles","error","TypeError","message","console","options","root","rootMargin","threshold","IntersectionObserver","entries","forEach","entry","isIntersecting","setTimeout","observe","renderLoader","loaderMap","default","spinner","skeleton","custom","loaderMapKey"],"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"],"mappings":";;;;;;;;AAAA,MAAMA,IAAW;;MCaJC,IAAK;EADlB,WAAAC,CAAAC;;kDA+HIC,KAAIC,OAAW;IAkGfD,KAAgBE,mBAAG;MACf,IAAIC,OAAOH,KAAKI,SAAS,GAAG;QACxBC,EAAyBL,MAAM,QAAQ;;;IAI/CA,KAAWM,cAAG;;MAEV,MAAMC,IAAOC,MAAMC,KAAKT,KAAKU,YAAYC,iBAAiB,qBAAqBC,QAAO,CAACC,GAAKC;QACxF,IAAID,GAAKC,EAAQC,eACZF,IAAMC;QACX,OAAOD;AAAG,UACX;MAEH,MAAMG,MAAYT;MAClB,MAAMU,MAAWjB,KAAKU,YAAYQ,cAAc;MAChD,MAAMC,MAAYnB,KAAKU,YAAYU,YAAYC;MAC/C,MAAMC,KAAeL,KAAUE,MAAYH,KAAWhB,KAAKU,YAAYa,sBAAsBhB;MAC7F,MAAMiB,KAAgBP,KAAUE,MAAYH,KAAWhB,KAAKU,YAAYe,qBAAqBlB;MAC7F,MAAMmB,KAAeJ,MAAgBE,KAAgBR;MAErD,IAAIW;MACJ,IAAID,GAAaC,IAAe,aAC3B,IAAIL,GAAaK,IAAe,aAChC,IAAIH,GAAcG,IAAe;MACtC3B,KAAK2B,eAAeA;AAAY;IAGpC3B,KAAgB4B,mBAAG;MACf5B,KAAKM;AAAa;AAqGzB;;;EA/NG,oBAAAuB;IACI7B,KAAK8B,aAAa;IAClB9B,KAAK+B,oBAAoB;;EAG7B,iBAAAC;IACIhC,KAAKM;IACL2B,EAAgBjC;IAChBkC,EAAYlC;;EAGhB,gBAAAmC;IACInC,KAAKE;IACLkC,EAAcpC,KAAKU;;;;EAOvB,WAAA2B,CAAYC;IACR,IAAItC,KAAKuC,WAAWvC,KAAKwC,UAAU;MAC/BF,EAAMG;;IAEVzC,KAAK8B,WAAWY;;EAIpB,aAAAC,CAAcL;IACV,KAAKM,EAAmBN,GAAOtC,KAAKU,cAAc;IAClDV,KAAK8B,WAAWY;;;;EAOpB,iBAAAG;IACIZ,EAAgBjC;;EAIpB,YAAA8C;IACI9C,KAAKE;;;;EAMT,oBAAI6C;IACA,OAAO;MACHC,cAAcC,EAAqBjD,KAAKgD,cAAc,EAAC,QAAQ;MAC/DE,cAAcD,EAAqBjD,KAAKkD,cAAc,EAClD,QACA,SACA,QACA,WACA,QACA,QACA;MAEJC,WAAWnD,KAAKoD,SAASpD,KAAKqD,YAAYC,EAAItD,KAAKoD,SAASG;MAC5DC,cAAcP,EAAqBjD,KAAKwD,cAAc,EAAC,QAAQ;MAC/DC,aAAaR,EAAqBjD,KAAKyD,aAAa,EAAC,QAAQ;MAC7DC,aAAa1D,KAAK0D,gBAAgBH,YAAYvD,KAAK0D,cAAcH;MACjEf,UAAUxC,KAAKwC,YAAY;MAC3BvC,MAAMD,KAAKC;MACX0D,UAAU3D,KAAK4D,YAAYL;;;EAInC,iBAAIM;IACA,MAAMC,IAAU;IAChB,IAAI9D,KAAK2B,cAAcmC,EAAQC,KAAK,QAAQ/D,KAAK2B;IACjD,IAAI3B,KAAKgE,WAAW,QAAQF,EAAQC,KAAK;IACzC,MAAM/D,KAAKiE,OAAOH,EAAQC,KAAK;IAC/B,MAAM/D,KAAKkE,OAAOJ,EAAQC,KAAK;IAC/B,MAAM/D,KAAKgE,QAAQF,EAAQC,KAAK;IAChC,MAAM/D,KAAKI,MAAM0D,EAAQC,KAAK;IAC9B,MAAM/D,KAAKmE,QAAQL,EAAQC,KAAK;IAEhC,OAAOD,EAAQM,KAAK;;EAGxB,oBAAIC;IACA,MAAMP,IAAU,EAAC;IACjB,IAAI9D,KAAKwC,UAAU;MACfsB,EAAQC,KAAK;;IAGjB,OAAOD,EAAQM,KAAK;;;;EAsCxB,YAAAE;IACI,OAAMtB,cAAEA,GAAYE,cAAEA,GAAYM,cAAEA,GAAYC,aAAEA,GAAWC,aAAEA,GAAWlB,UAAEA,GAAQvC,MAAEA,GAAI0D,UAAEA,KACxF3D,KAAK+C;IACT,OAAMpB,cAAEA,GAAYY,SAAEA,GAAOgC,OAAEA,GAAKnB,OAAEA,GAAKC,WAAEA,KAAcrD;IAC3D,MAAMwE,IAAuB7C,KAAgBY;IAC7C,MAAMkC,KAA0B9C,KAAgB4C;IAChD,OACIG,EAACC,GAAQ,MACLD,EACI;MAAAE,KAAKC,KAAO7E,KAAK8B,aAAa+C,MAAE,QAAFA,WAAA,IAAAA,IAAM7E,KAAK8B;MAAW,iBACrCkB;MACA,iBAAAE;MAAY,cACfG,KAAaC,EAAIF;MACd,iBAAAI;MAAY,gBACbC;MACdjB,UAAUA;MACVvC,MAAMA;MACN0D,UAAUA;MAAQ,WACV;MACRmB,OAAO9E,KAAK6D;MACM,sBAAEH,IAAc,uBAAuBH;MACxC,mBAAAvD,KAAKgE,WAAW,WAAWX,IAAY,eAAeE;MACvEwB,MAAM/E,KAAKgF,SAASzB;OAEpBmB,EAAK;MAAAI,OAAM;OACNN,KACGE,EACI;MAAAO,SAAS1C;MACT2C,WAAWT,IAAyB,WAAWlB;QAGtDvD,KAAKmF,sBACLnF,KAAKoF,2BAGbpF,KAAKqF,qBACH3B,KACCgB,EAAA;MACIY,IAAG;MACS;MACZR,OAAM;OAELpB;;EAOrB,eAAA2B;IACI,IAAIrF,KAAKgE,WAAW,UAAUhE,KAAKqD,WAAW;IAC9C,OACIqB,EAAA;MACIY,IAAG;MACHR,OAAO9E,KAAKqE;OAEXrE,KAAKoD,QACFE,EAAItD,KAAKoD,SAETsB,EAAA;MACIa,MAAK;MACLC,cAAcxF,KAAK4B;;;EAOvC,qBAAAwD;IACI,IAAIpF,KAAKgE,WAAW,QAAQ;IAC5B,OAAOU,EAAA;MAAMc,cAAcxF,KAAK4B;;;EAGpC,kBAAAuD;IACI,IAAInF,KAAKgE,WAAW,QAAQ;IAC5B,KAAKhE,KAAKqD,aAAarD,KAAKoD,OAAO,OAAOE,EAAItD,KAAKoD;IACnD,OAAOsB,EAAA;MAAMc,cAAcxF,KAAK4B;;;EAGpC,MAAA6D;IACI,OAAQzF,KAAKI,SAAS,WAAWJ,KAAK2B,iBAAiB,UAAW3B,KAAKgE,WAAW;;IAE9EU,EAAA;MACII,OAAO9E,KAAKI,SAAS,UAAU,uBAAuB;MACtDwE,KAAKC,KAAO7E,KAAK+B,oBAAoB8C,MAAA,QAAAA,WAAA,IAAAA,IAAM7E,KAAK+B;MAChD6B,UAAU5D,KAAKI,SAAS,WAAU,IAAKmD;OAEtCvD,KAAKsE,kBAGVtE,KAAKsE;;;;;;;;;;;;;;;AC1WjB,MAAMoB,IAAe;;MCMRC,IAAS;EADtB,WAAA7F,CAAAC;;IAKIC,KAAiB4F,oBAAG;IACpB5F,KAA2B6F,8BAAG;IAC9B7F,KAA+B8F,kCAAG;;;QAclC9F,KAAe+F,kBAAY;6DAiC3B/F,KAAqBgG,wBAAY;;;QA8RjChG,KAA2BiG,8BAAG,MAEtBvB,EAAA;MACIY,IAAG;MACU,eAAAtF,KAAKgG,wBAAwB,SAASzC;MACxC,cAACvD,KAAKgG,wBAAwB,WAAWzC;MACpDwB,OAAO/E,KAAKgG,wBAAwB,WAAWzC;QAE7CvD,KAAKgG,yBACHtB,EAAA;MACII,OAAM;MACNF,KAAKC,KAAO7E,KAAKkG,sBAAsBrB;;IAO3D7E,KAAuBmG,0BAAG,MAElBzB,EAAA;MACII,OAAM;MACO,eAAA9E,KAAKgG,wBAAwB,SAASzC;MACxC,cAACvD,KAAKgG,wBAAwB,WAAWzC;MACpDwB,OAAO/E,KAAKgG,wBAAwB,WAAWzC;OAE/CmB,EAAK;MAAAI,OAAM;QACXJ,EAAK;MAAAI,OAAM;SACT9E,KAAKgG,yBACHtB,EACI;MAAAI,OAAM;MACNF,KAAKC,KAAO7E,KAAKkG,sBAAsBrB;;IAoB3D7E,KAAoBoG,uBAAG,MAEf1B,EAAA;MACII,OAAM;MACO,eAAA9E,KAAKgG,wBAAwB,SAASzC;MACxC,cAACvD,KAAKgG,wBAAwB,WAAWzC;MACpDwB,OAAO/E,KAAKgG,wBAAwB,WAAWzC;OAE9CvD,KAAKqG,UAAU,WAAW3B,EAAA,gBAAW1E,KAAKsG,eAC3C5B,EAAK;MAAAI,OAAM;SACT9E,KAAKgG,yBACHtB,EACI;MAAAI,OAAM;MACNF,KAAKC,KAAO7E,KAAKkG,sBAAsBrB;;IAO3D7E,KAAauG,gBAAG,MACLvG,KAAKmG;AAQnB;;;EAvUG,oBAAAtE;IACI7B,KAAKwG;;EAGT,iBAAAxE;IACIC,EAAgBjC;IAChBA,KAAKyG;;EAGT,gBAAAtE;IACInC,KAAK0G;;EAGT,kBAAAC;IACI3G,KAAK4G;;EAGT,kBAAAC;;IACI,KAAK7G,KAAK8G,aAAa;IACvB,KAAK9G,KAAK+F,iBAAiB;IAC3B,MAAMgB,IAAwB/G,KAAKU,YAAYsG,WAAW9F,cAAc;KACxE+F,IAAAF,EAAsB7F,cAAc,OAAOlB,KAAK4F,0BAAsB,QAAAqB,WAAA,aAAAA,EAAAlG;IACtEgG,EAAsBG,YAAYlH,KAAK8G;;;;EAO3C,eAAAK;IACI,OAAMC,iBAAEA,KAAoBpH;IAC5BA,KAAK+F,oBAAoBqB;IACzBpH,KAAKqH;;;;EAOT,UAAAZ;IACIzG,KAAKqH;;;;EAMT,eAAIC;IACA,IAAItH,KAAKC,SAAS,eAAeD,KAAKuH,QAAQ;MAC1C,OAAOhE;;IAGX,OAAOvD,KAAKuH,OAAOC,MAAM,KAAKC,IAAItH;;EAGtC,uBAAIuH;IACA,OAAMN,iBAAEA,GAAexB,mBAAEA,KAAsB5F;IAC/C,KAAKoH,GAAiB;IACtB,OAAOO,SAASzG,cAA2B,IAAI0E,eAA+BwB;;EAGlF,mBAAIA;IACA,MAAMQ,IAAqBC,OAAOC,iBAAiB9H,KAAKU;IACxD,MAAMqH,IAAqBH,EAAmBI,iBAC1C,wBAAwBhI,KAAKC,QAAQ;IAEzC,KAAK8H,GAAoB;IAEzB,OAAOA,EAAmB1G,OAAO4G,QAAQ,yBAAyB;;EAGtE,kBAAIC;IACA,OAAOlI,KAAKC,SAAS;;EAGzB,mBAAIkI;IACA,OAAMlI,MAAEA,IAAO,WAASiI,gBAAEA,KAAmBlI;IAC7C,IAAIkI,GAAgB;IACpB,OAAO,cAAcjI;;EAGzB,kBAAImI;IACA,OAAO9E,EAAItD,KAAKoD,SAASpD,KAAKmD,aAAa;;EAG/C,gBAAIkF;IACA,IAAIrI,KAAKC,SAAS,eAAeD,KAAKkF,WAAW;MAC7C,OAAO3B;;IAGX,OAAO,IAAI+E,IAAItI,KAAKkF,UAAUsC,MAAM;;EAGxC,iBAAIlB;;IACA,QAAOiC,KAAAtB,IAAAuB,EAAexI,KAAKqG,YAAM,QAAAY,WAAA,aAAAA,EAAAwB,KAAAD,GAAGxI,KAAKsH,aAAatH,KAAKqI,mBAAa,QAAAE,WAAA,IAAAA,IAAI;;EAGhF,cAAAG;IACI,OAAMP,iBAAEA,GAAevC,mBAAEA,KAAsB5F;IAC/C,MAAM2I,IAAkBC;IACxB,KAAIlB,qBAAEA,KAAwB1H;;QAG9B,IAAI0H,MAAA,QAAAA,WAAA,aAAAA,EAAqBmB,aAAa,gBAAgB;MAClD7I,KAAK8I;MACL,OAAO;;;;QAKXH,EAAgBI,iBACZZ,IACA;MACInI,KAAK8I;AAAiB,QAE1B;MAAEE,MAAM;;;QAIZ,IAAItB,GAAqB,OAAO;;;QAIhCA,IAAsBC,SAASsB,cAAc;IAC7CvB,EAAoBwB,UAAUC,IAAIvD;IAClC8B,EAAoB0B,QAAQC,MAAMrJ,KAAKoH;IACvCuB,EAAgBzB,YAAYQ;IAC5B,OAAO;;EAGX,sBAAAlB;;IACI,IAAIxG,KAAKgG,uBAAuB;IAEhCsD,aAAatJ,KAAKuJ;KAClBtC,IAAAjH,KAAKwJ,cAAU,QAAAvC,WAAA,aAAAA,EAAAwC;IACfzJ,KAAKwJ,WAAW;;EAGpB,eAAAV;IACI,OAAMpB,qBAAEA,KAAwB1H;IAChCA,KAAK8G,cAAcY,IAAuBA,EAAoBgC,UAAU,QAAuBnG;;EAGnG,iBAAM8D;IACF,OAAMa,gBAAEA,GAAcd,iBAAEA,KAAoBpH;IAC5CA,KAAK+F,kBAAkB;IACvB,IAAImC,GAAgB;MAChB;;IAGJ,KAAKd,GAAiB;IACtBpH,KAAK+F,kBAAkB;IAEvB,KAAI2B,qBAAEA,KAAwB1H;IAC9B,MAAM2J,IAAe3J,KAAK0I;IAE1B,IAAIiB,GAAc;IAElB;MACI,MAAMC,UAAiBC,MAAMzC;;YAG7B,KAAKwC,EAASE,IAAI;QACd,MAAM,IAAIC,MACN,QAAQH,EAASI,kCACb;;MAIZ,MAAMC,UAAgBL,EAASM;MAC/B,MAAMC,IAAS,IAAIC;MACnB,MAAMC,IAASF,EAAOG,gBAAgBL,GAAS;MAC/C,MAAMM,IAAMF,EAAOnJ,cAAc;MAEjC,KAAKqJ,GAAK,MAAM,IAAIR,MAAM;MAE1BQ,EAAInB,QAAQoB,SAAS;MACrBD,EAAInB,QAAQC,MAAMjC;MAClBmD,EAAIrB,UAAUC,IAAInJ,KAAK4F;MAEvB8B,IAAsB1H,KAAK0H;MAC3B,KAAKA,GAAqB;MAC1B,WAAWA,EAAoB+C,gBAAgB,YAAY;QACvD/C,EAAoB+C,YAAYF;aAC7B;QACH7C,EAAoBgD,WAAWC,aAAaJ,GAAK7C;;MAGrD6C,EAAIK,cAAc,IAAIC,YAAY7K,KAAKmI,iBAAiB;QAAE2C,SAAS;;MACrE,OAAOC;;MAEL,IAAIA,aAAiBC,aAAaD,EAAME,YAAY,mBAAmB;QACnEC,QAAQH,MACJ,qCAAqC3D,QACjC,yEACA,oEACA,qEACJ2D;aAED;QACHG,QAAQH,MAAM,yCAAyC3D,MAAoB2D;;;;EAKvF,oBAAArE;IACI,IAAI1G,KAAKgG,uBAAuB;;;;QAKhC,MAAMmF,IAAU;MACZC,MAAM;MACNC,YAAY;MACZC,WAAW,EAAC;;IAEhBtL,KAAKwJ,WAAW,IAAI+B,sBAAqBC;MACrCA,EAAQC,SAAQC;QACZ,IAAIA,EAAMC,gBAAgB;UACtBrC,aAAatJ,KAAKuJ;UAClBvJ,KAAKuJ,gBAAgBqC,YAAW;YAC5B,IAAI5L,KAAKkG,qBAAqB;cAC1BlG,KAAKkG,oBAAoB9E,cAAc,GAAGpB,KAAKoI,iBAAiBpI,KAAK8F,kCAAkC,MAAM;;YAEjH9F,KAAK8F,mCAAmC9F,KAAK8F;YAC7C9F,KAAK6F,8BAA8B;AAAK,cACzC;eACA;UACHyD,aAAatJ,KAAKuJ;UAClB,IAAIvJ,KAAKkG,qBAAqB;YAC1BlG,KAAKkG,oBAAoB9E,cAAc;;UAE3CpB,KAAK6F,8BAA8B;;;AAEzC,QACHsF;IACHnL,KAAKwJ,SAASqC,QAAQ7L,KAAKU;;EAG/B,uBAAAkG;IACI,IAAI5G,KAAK6F,6BAA6B;IACtC,KAAK7F,KAAKkG,qBAAqB;IAC/BlG,KAAKkG,oBAAoB9E,cAAcpB,KAAKoI;;EA4ChD,gBAAI0D;IACA,MAAMC,IAAY;MACdC,SAAShM,KAAKuG;MACd0F,SAASjM,KAAKuG;MACd2F,UAAUlM,KAAKoG;MACf+F,QAAQnM,KAAKiG;;IAEjB,OAAMhG,MAAEA,GAAI8F,iBAAEA,KAAoB/F;IAClC,MAAMoM,IAAerG,IAAkB,WAAW9F;IAElD,OAAO8L,EAAUK,MAAiBL,EAAUC;;EA2BhD,MAAAvG;IACI,OAAOzF,KAAK8L","ignoreList":[]}
+{"version":3,"names":["q2BtnCss","Q2Btn","constructor","hostRef","this","type","handleButtonSize","Number","size","handleDeprecationWarning","handleIcons","icon","Array","from","hostElement","querySelectorAll","reduce","acc","element","remove","hasIcon","hasLoc","querySelector","hasText","textContent","trim","hasIconLeft","firstElementChild","hasIconRight","lastElementChild","hasIconOnly","iconPosition","handleSlotChange","disconnectedCallback","primaryBtn","primaryBtnWrapper","componentWillLoad","handleAriaLabel","handleColor","componentDidLoad","overrideFocus","handleClick","event","loading","disabled","stopImmediatePropagation","focus","delegateFocus","isEventFromElement","ariaLabelObserver","sizeObserver","buttonAttributes","ariaExpanded","getAriaValueFromProp","ariaHasPopup","ariaLabel","label","hideLabel","loc","undefined","ariaSelected","ariaPressed","description","tabindex","tabIndex","buttonClasses","classes","push","intent","block","color","active","join","coinLabelClasses","renderButton","badge","renderLoadingSpinner","isLoadingSpinnerInline","h","Fragment","ref","el","class","role","_role","hidden","modifiers","renderDefaultLabel","renderDefaultCoinSlot","renderCoinLabel","id","name","onSlotchange","render","q2LoadingCss","Q2Loading","customLoaderClass","dontUpdateScreenReaderLabel","liveRegionChangeIndicatorToggle","hasCustomLoader","hideFromScreenReaders","renderCustomLoaderContainer","screenReaderElement","renderHalfCircleSpinner","viewBox","cx","cy","r","renderSkeletonLoader","shape","skeletonShape","renderSpinner","cleanupLiveRegionDelay","handleType","setupLiveRegionDelay","componentDidUpdate","updateScreenReaderLabel","componentDidRender","loaderClone","customLoaderContainer","shadowRoot","_a","appendChild","onUpdateLoaders","customLoaderURL","fetchLoader","countsArray","counts","split","map","customLoaderElement","document","hostComputedStyles","window","getComputedStyle","loadingVariableURL","getPropertyValue","replace","isSkeletonType","loaderEventName","localizedLabel","modifiersSet","Set","_b","skeletonShapes","call","checkForLoader","spriteContainer","getOrCreateSpriteContainer","hasAttribute","cloneLoaderNode","addEventListener","once","createElement","classList","add","dataset","url","clearTimeout","ariaLiveTimer","observer","disconnect","cloneNode","loaderExists","response","fetch","ok","Error","status","svgText","text","parser","DOMParser","svgDoc","parseFromString","svg","loaded","replaceWith","parentNode","replaceChild","dispatchEvent","CustomEvent","bubbles","error","TypeError","message","console","options","root","rootMargin","threshold","IntersectionObserver","entries","forEach","entry","isIntersecting","setTimeout","observe","renderLoader","loaderMap","default","spinner","skeleton","custom","loaderMapKey"],"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"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-card.entry.esm.js.map

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

package/dist/q2-tecton-elements/q2-card.entry.js

@@ -26,11 +26,6 @@ const d = class {
   }
   // #endregion
   // #region Component Lifecycle Events
-  componentDidLoad() {
-    const {hostElement: a, clickableElement: r} = this;
-    a.click = () => r.click();
-    e(this.hostElement);
-  }
   disconnectedCallback() {
     // Clean up manual click override
     if (this.hostElement) {
@@ -41,6 +36,11 @@ const d = class {
     this.clickableElement = null;
     this.containerElement = null;
   }
+  componentDidLoad() {
+    const {hostElement: a, clickableElement: r} = this;
+    a.click = () => r.click();
+    e(this.hostElement);
+  }
   // #endregion
   // #region Listeners
   onHostElementFocus(a) {

package/dist/q2-tecton-elements/q2-card.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2CardCss","PREDEFINED_COLORS","Q2Card","constructor","hostRef","this","elevation","type","handleClick","event","url","preventDefault","stopPropagation","click","emit","componentDidLoad","hostElement","clickableElement","overrideFocus","disconnectedCallback","avatarElement","containerElement","onHostElementFocus","isEventFromElement","focus","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","ref","e","name","initials","src","generateContainerClasses","isSmall","isStatic","result","hasAvatar","push","join","generateContent","Fragment","bar","class","getBarClasses","style","getBarStyles","title","description","isBarColorPredefined","includes","render","href","target","rel","onClick"],"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"],"mappings":";;;;AAAA,MAAMA,IAAY;;ACElB,MAAMC,IAAoB,EACtB,WACA,aACA,YACA,QACA,WACA,WACA,SACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,aACA,aACA;;MAISC,IAAM;EADnB,WAAAC,CAAAC;;;;;;;;eAsGIC,KAASC,YAA0B;+FA2CnCD,KAAIE,OAAkC;IA8HtCF,KAAAG,cAAeC;MACX,IAAIJ,KAAKK,KAAK,OAAO;MACrBD,EAAME;MACNF,EAAMG;MACNP,KAAKQ,MAAMC;AAAM;AAmDxB;;;EAhKG,gBAAAC;IACI,OAAMC,aAAEA,GAAWC,kBAAEA,KAAqBZ;IAC1CW,EAAYH,QAAQ,MAAMI,EAAiBJ;IAC3CK,EAAcb,KAAKW;;EAGvB,oBAAAG;;IAEI,IAAId,KAAKW,aAAa;MAClBX,KAAKW,YAAYH,QAAQ;;;QAI7BR,KAAKe,gBAAgB;IACrBf,KAAKY,mBAAmB;IACxBZ,KAAKgB,mBAAmB;;;;EAO5B,kBAAAC,CAAmBb;IACf,KAAKc,EAAmBd,GAAOJ,KAAKW,cAAc;IAClDX,KAAKY,iBAAiBO;;;;EAM1B,cAAAC;IACI,OAAMC,YAAEA,GAAUC,gBAAEA,GAAcC,WAAEA,GAASC,YAAEA,KAAexB;IAE9D,IAAIwB,GAAY;MACZ,OACIC,EAAA;QACIvB,MAAMsB;QACNE,KAAKC,KAAM3B,KAAKe,gBAAgBY;QACxB;;WAGb,IAAIN,KAAcC,KAAkBC,GAAW;MAClD,OACIE,EAAA;QACIG,MAAMP;QACNQ,UAAUP;QACVQ,KAAKP;QACLG,KAAKC,KAAM3B,KAAKe,gBAAgBY;QAAE,WAC1B;;;;EAMxB,wBAAAI;IACI,OAAMC,SAAEA,GAAOX,YAAEA,GAAUC,gBAAEA,GAAcC,WAAEA,GAASC,YAAEA,GAAUS,UAAEA,GAAQ/B,MAAEA,GAAID,WAAEA,KAAcD;IAClG,MAAMkC,IAAS,EAAC,aAAahC;IAC7B,MAAMiC,IAAYd,KAAcC,KAAkBC,KAAaC;IAC/D,IAAIQ,GAASE,EAAOE,KAAK;IACzB,IAAID,GAAWD,EAAOE,KAAK;IAC3B,IAAIH,GAAUC,EAAOE,KAAK;IAC1B,KAAKH,KAAYhC,KAAaA,IAAY,GAAGiC,EAAOE,KAAK,aAAanC;IAEtE,OAAOiC,EAAOG,KAAK;;EAGvB,eAAAC;IACI,OACIb,EAACc,GAAQ,MACJvC,KAAKwC,OACFf,EAAA;MACIgB,OAAOzC,KAAK0C;MACJ;MACRC,OAAO3C,KAAK4C;QAGnB5C,KAAKoB,kBACNK,EAAA;MACIgB,OAAM;MAAS,WACP;MACRf,KAAKC,KAAM3B,KAAKgB,mBAAmBW;OAElC3B,KAAK6C,SAASpB,EAAA;MAAA,WAAY;OAASzB,KAAK6C,QACxC7C,KAAK8C,eAAerB,EAAA;MAAA,WAAW;OAAezB,KAAK8C,cACpDrB,EAAQ;;EAMxB,aAAAiB;IACI,OAAMF,KAAEA,KAAQxC;IAEhB,OAAO;MACHwC,KAAK;MACL,CAAC,SAASA,MAAQxC,KAAK+C;;;EAI/B,YAAAH;IACI,OAAMJ,KAAEA,KAAQxC;IAEhB,OAAOA,KAAK+C,yBAAyB,KAAK;MAAE,oBAAoBP;;;EAUpE,oBAAAO;IACI,OAAOnD,EAAkBoD,SAAShD,KAAKwC;;;;EAM3C,MAAAS;IACI,OAAM5C,KAAEA,GAAG4B,UAAEA,GAAQ/B,MAAEA,KAASF;IAChC,IAAIiC,KAAY/B,MAAS,iBACrB,OACIuB,EAAA;MACIC,KAAKC,KAAM3B,KAAKY,mBAAmBe;MACnCc,OAAOzC,KAAK+B;MACJ;OAEP/B,KAAKsC,yBAGb,MAAMjC,GACP,OACIoB,EACI;MAAAC,KAAKC,KAAM3B,KAAKY,mBAAmBe;MACnCuB,MAAMlD,KAAKK;MACXoC,OAAOzC,KAAK+B;MACZoB,QAAQnD,KAAKmD;MACbC,KAAI;MACI;MACRC,SAASrD,KAAKG;OAEbH,KAAKsC,yBAId,OACIb,EACI;MAAAC,KAAKC,KAAM3B,KAAKY,mBAAmBe;MACnCc,OAAOzC,KAAK+B;MAA0B,WAC9B;MACR7B,MAAK;MACLmD,SAASrD,KAAKG;OAEbH,KAAKsC","ignoreList":[]}
+{"version":3,"names":["q2CardCss","PREDEFINED_COLORS","Q2Card","constructor","hostRef","this","elevation","type","handleClick","event","url","preventDefault","stopPropagation","click","emit","disconnectedCallback","hostElement","avatarElement","clickableElement","containerElement","componentDidLoad","overrideFocus","onHostElementFocus","isEventFromElement","focus","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","ref","e","name","initials","src","generateContainerClasses","isSmall","isStatic","result","hasAvatar","push","join","generateContent","Fragment","bar","class","getBarClasses","style","getBarStyles","title","description","isBarColorPredefined","includes","render","href","target","rel","onClick"],"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"],"mappings":"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","ignoreList":[]}