npm - q2-tecton-elements - Versions diffs - 1.65.0 → 1.66.1 - Mend

q2-tecton-elements 1.65.0 → 1.66.1

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

Files changed (687) hide show

package/dist/components/q2-card-image.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Host } from '@stencil/core/internal/client';
-import { b as hasSlotContent } from './index2.js';
+import { b as hasSlotContent, l as loc } from './index2.js';
 import { d as defineCustomElement$3 } from './q2-btn2.js';
 import { d as defineCustomElement$2 } from './q2-loading2.js';
@@ -333,12 +333,12 @@ const Q2CardImage$1 = /*@__PURE__*/ proxyCustomElement(class Q2CardImage extends
         const chipPath = this.getChipPath('horizontal');
         const vendorPath = this.getVendorPath();
         const cardTypeColorStyle = this.getCardTypeColorStyle();
-        return (h("div", { class: "card-details-horizontal" }, h("div", { class: "horizontal-logo-wrapper" }, h("div", { class: "horizontal-logo", style: logoStyle })), h("div", { class: "horizontal-chip" }, chipPath && (h("img", { src: chipPath, alt: "", "aria-hidden": "true" }))), h("div", { class: "horizontal-card-number card-text" }, this.getFormattedCardNumber()), h("div", { class: "horizontal-exp-date-card-type-row" }, h("div", { class: "horizontal-exp-date-wrapper" }, this.showExpirationDateLabel() && (h("div", { class: "horizontal-exp-date-label card-text" }, "EXPIRES")), this.getFormattedExpirationDate() && (h("div", { class: "horizontal-exp-date-value card-text" }, this.getFormattedExpirationDate()))), h("div", { class: {
+        return (h("div", { class: "card-details-horizontal" }, h("div", { class: "horizontal-logo-wrapper" }, h("div", { class: "horizontal-logo", style: logoStyle })), h("div", { class: "horizontal-chip" }, chipPath && (h("img", { src: chipPath, alt: "", "aria-hidden": "true" }))), h("div", { class: "horizontal-card-number card-text" }, this.getFormattedCardNumber()), h("div", { class: "horizontal-exp-date-card-type-row" }, h("div", { class: "horizontal-exp-date-wrapper" }, this.showExpirationDateLabel() && (h("div", { class: "horizontal-exp-date-label card-text" }, loc('tecton.element.cardImage.expires'))), this.getFormattedExpirationDate() && (h("div", { class: "horizontal-exp-date-value card-text" }, this.getFormattedExpirationDate()))), h("div", { class: {
                 'horizontal-card-type': true,
                 'card-text': true,
                 'vendor-mastercard': this.vendor === 'mastercard',
                 'vendor-visa': this.vendor === 'visa',
-            }, style: cardTypeColorStyle }, this.getCardTypeText())), h("div", { class: "horizontal-card-holder-vendor-row" }, h("div", { class: "horizontal-card-holder-wrapper" }, this.showCardHolderLabel() && (h("div", { class: "horizontal-card-holder-label card-text" }, "CARD HOLDER")), this.getCardHolderName() && (h("div", { class: "horizontal-card-holder-value card-text" }, this.getCardHolderName()))), h("div", { class: "horizontal-vendor" }, vendorPath && (h("img", { src: vendorPath, alt: "", "aria-hidden": "true" }))))));
+            }, style: cardTypeColorStyle }, this.getCardTypeText())), h("div", { class: "horizontal-card-holder-vendor-row" }, h("div", { class: "horizontal-card-holder-wrapper" }, this.showCardHolderLabel() && (h("div", { class: "horizontal-card-holder-label card-text" }, loc('tecton.element.cardImage.cardHolder'))), this.getCardHolderName() && (h("div", { class: "horizontal-card-holder-value card-text" }, this.getCardHolderName()))), h("div", { class: "horizontal-vendor" }, vendorPath && (h("img", { src: vendorPath, alt: "", "aria-hidden": "true" }))))));
     }
     renderStatusBanner() {
         if (!this.cardStatus || this.size !== 'large')
@@ -355,7 +355,7 @@ const Q2CardImage$1 = /*@__PURE__*/ proxyCustomElement(class Q2CardImage extends
         const chipPath = this.getChipPath('vertical');
         const vendorPath = this.getVendorPath();
         const cardTypeColorStyle = this.getCardTypeColorStyle();
-        return (h("div", { class: "card-details-vertical" }, h("div", { class: "vertical-chip" }, chipPath && (h("img", { src: chipPath, alt: "", "aria-hidden": "true" }))), h("div", { class: "vertical-logo-wrapper" }, h("div", { class: "vertical-logo", style: logoStyle })), h("div", { class: "vertical-card-number card-text" }, this.getFormattedCardNumber()), h("div", { class: "vertical-card-holder-wrapper" }, this.showCardHolderLabel() && h("div", { class: "vertical-card-holder-label card-text" }, "CARD HOLDER"), this.getCardHolderName() && (h("div", { class: "vertical-card-holder-value card-text" }, this.getCardHolderName()))), h("div", { class: "vertical-exp-date-card-type-row" }, h("div", { class: "vertical-exp-date-wrapper" }, this.showExpirationDateLabel() && h("div", { class: "vertical-exp-date-label card-text" }, "EXPIRES"), this.getFormattedExpirationDate() && (h("div", { class: "vertical-exp-date-value card-text" }, this.getFormattedExpirationDate()))), h("div", { class: {
+        return (h("div", { class: "card-details-vertical" }, h("div", { class: "vertical-chip" }, chipPath && (h("img", { src: chipPath, alt: "", "aria-hidden": "true" }))), h("div", { class: "vertical-logo-wrapper" }, h("div", { class: "vertical-logo", style: logoStyle })), h("div", { class: "vertical-card-number card-text" }, this.getFormattedCardNumber()), h("div", { class: "vertical-card-holder-wrapper" }, this.showCardHolderLabel() && (h("div", { class: "vertical-card-holder-label card-text" }, loc('tecton.element.cardImage.cardHolder'))), this.getCardHolderName() && (h("div", { class: "vertical-card-holder-value card-text" }, this.getCardHolderName()))), h("div", { class: "vertical-exp-date-card-type-row" }, h("div", { class: "vertical-exp-date-wrapper" }, this.showExpirationDateLabel() && (h("div", { class: "vertical-exp-date-label card-text" }, loc('tecton.element.cardImage.expires'))), this.getFormattedExpirationDate() && (h("div", { class: "vertical-exp-date-value card-text" }, this.getFormattedExpirationDate()))), h("div", { class: {
                 'vertical-card-type': true,
                 'card-text': true,
                 'vendor-mastercard': this.vendor === 'mastercard',
@@ -365,11 +365,11 @@ const Q2CardImage$1 = /*@__PURE__*/ proxyCustomElement(class Q2CardImage extends
     render() {
         const cardContent = this.clickable ? (h("q2-btn", { disabled: this.disabled, label: this.accessibilityLabel, hideLabel: true, onClick: this.handleCardClick }, this.renderCardContent())) : (this.renderCardContent());
         const showBanner = !!this.cardStatus && this.size === 'large';
-        return (h(Host, { key: '4a47acfd068718c727a025a0bcfd199a4eece8dc', class: {
+        return (h(Host, { key: '19424c69e664876eec4045ca5c798f5372800d26', class: {
                 [`${this.orientation}`]: true,
                 'has-action': this.hasActionSlotContent,
                 'has-banner': showBanner,
-            } }, this.renderStatusBanner(), h("div", { key: 'ddf94a152055525bdad93176d92cddaeaf549033', class: "card-wrapper" }, cardContent, this.renderAction())));
+            } }, this.renderStatusBanner(), h("div", { key: 'e59ce44f131c51a8ea0f824b89fc5ae51e2ba200', class: "card-wrapper" }, cardContent, this.renderAction())));
     }
     static get assetsDirs() { return ["assets"]; }
     get hostElement() { return this; }

package/dist/components/q2-card-image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-card-image.js","mappings":"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","names":["Q2CardImage","__stencil_proxyCustomElement"],"sources":["src/components/q2-card-image/q2-card-image.scss?tag=q2-card-image&encapsulation=shadow","src/components/q2-card-image/q2-card-image.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: flex;\n flex-direction: column;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n,\n::before,\n::after {\n box-sizing: inherit;\n}\n\n:host {\n // Base layer variables\n --tct-card-image-base-blur: 0px;\n --tct-card-image-primary-color: var(--t-primary, #5446a4);\n --tct-card-image-secondary-color: var(--t-secondary, #2a7de1);\n --tct-card-image-tertiary-color: var(--t-tertiary, #6b7280);\n\n // Gradient variables\n --tct-card-image-base-gradient-deg: 110.95deg;\n --tct-card-image-base-gradient-left-color: var(--t-gray-2, #1a1a1a);\n --tct-card-image-base-gradient-left-stop: 0.54%;\n --tct-card-image-base-gradient-middle-color: var(--t-gray-11, #cccccc);\n --tct-card-image-base-gradient-middle-stop: 60.22%;\n --tct-card-image-base-gradient-right-color: var(--t-gray-2, #1a1a1a);\n --tct-card-image-base-gradient-right-stop: 100%;\n\n // Overlay layer variables\n --tct-card-image-overlay-opacity: 1;\n --tct-card-image-overlay-mix-blend-mode: normal;\n\n // Dot pattern variables\n --tct-card-image-dot-size: 0.5px;\n --tct-card-image-dot-spacing: 2px;\n --tct-card-image-dot-color: rgba(128, 128, 128, 0.5);\n\n // Card number font\n --tct-card-image-font-color: var(--t-base, #fff);\n --tct-card-image-text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);\n\n // Status banner variables\n --tct-card-image-status-box-shadow: var(\n --app-shadow-3,\n 0px 0px 2px rgba(0, 0, 0, 0.12),\n 0px 8px 16px rgba(0, 0, 0, 0.14)\n );\n --tct-card-image-status-background-digital: var(--tct-black, #000);\n --tct-card-image-status-color-digital: var(--tct-white, #fff);\n --tct-card-image-status-background-enabled: var(--tct-stoplight-info, #0079c1);\n --tct-card-image-status-color-enabled: var(--tct-white, #fff);\n --tct-card-image-status-background-disabled: var(--tct-stoplight-alert, #d20a0a);\n --tct-card-image-status-color-disabled: var(--tct-white, #fff);\n --tct-card-image-status-background-locked: var(--tct-stoplight-alert, #d20a0a);\n --tct-card-image-status-color-locked: var(--tct-white, #fff);\n --tct-card-image-status-background-damaged: var(--tct-stoplight-warning, #c35500);\n --tct-card-image-status-color-damaged: var(--tct-white, #fff);\n --tct-card-image-status-background-lost: var(--tct-stoplight-warning, #c35500);\n --tct-card-image-status-color-lost: var(--tct-white, #fff);\n --tct-card-image-status-background-stolen: var(--tct-stoplight-warning, #c35500);\n --tct-card-image-status-color-stolen: var(--tct-white, #fff);\n --tct-card-image-status-background-lost-or-stolen: var(--tct-stoplight-warning, #c35500);\n --tct-card-image-status-color-lost-or-stolen: var(--tct-white, #fff);\n}\n\n:host([inline]) {\n display: inline-flex;\n}\n\n:host(.horizontal) {\n max-width: var(--tct-card-image-max-width, min(400px, 100%));\n min-width: var(--tct-card-image-min-width, 40px);\n width: var(--tct-card-image-width);\n}\n\n:host(.vertical) {\n max-width: var(--tct-card-image-max-width, min(250px, 100%));\n min-width: var(--tct-card-image-min-width, 25px);\n width: var(--tct-card-image-width);\n}\n\n// Margins to prevent action slot content from overlapping surrounding content\n// Action element is 44x44, straddling corner = 22px above and 22px right of card\n:host(.has-action) {\n margin-top: 22px;\n margin-right: 22px;\n}\n\n// When banner is also present, reduce top margin (banner already provides 11px overhang)\n:host(.has-action.has-banner) {\n margin-top: 11px;\n}\n\n:host(:hover) .card-image-container.clickable,\n:host(:focus-within) .card-image-container.clickable {\n transform: translateY(-8px) scale(1.03);\n box-shadow: var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14));\n}\n\n:host(:hover) .card-status-banner.clickable,\n:host(:focus-within) .card-status-banner.clickable {\n transform: translateY(-8px) scale(1.03);\n}\n\n:host([disabled]:not([disabled='false'])) {\n .card-image-container {\n opacity: var(--tct-card-image-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));\n cursor: not-allowed;\n }\n\n .card-status-banner {\n cursor: not-allowed;\n }\n}\n\n.card-wrapper > q2-btn {\n --const-double-focus-ring: none;\n width: 100%;\n max-width: 100%;\n}\n\n// Wrapper for card + dropdown positioning\n.card-wrapper {\n position: relative;\n max-width: 100%;\n}\n\n// Action slot (top-right corner, straddling card edge)\n.card-action {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n z-index: 5;\n}\n\n.card-image-container {\n overflow: hidden;\n position: relative;\n border: 1px solid transparent;\n background:\n linear-gradient(#fff, #fff) padding-box,\n linear-gradient(to right, rgba(200, 200, 200, 1) 33%, rgba(150, 150, 150, 1)) border-box;\n background-origin: border-box;\n background-clip: padding-box, border-box;\n box-shadow: var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));\n\n &.inline {\n display: inline-block;\n }\n\n &.clickable {\n cursor: pointer;\n will-change: transform;\n transition:\n transform 0.3s ease,\n box-shadow 0.3s ease;\n }\n\n &.block {\n display: block;\n }\n\n &.horizontal {\n aspect-ratio: 8 / 5;\n border-radius: 3% / 4.8%;\n width: var(--tct-card-image-width, 100%);\n max-width: var(--tct-card-image-max-width, 400px);\n min-width: var(--tct-card-image-min-width, 40px);\n flex-shrink: 0;\n }\n\n &.vertical {\n aspect-ratio: 5 / 8;\n border-radius: 4.8% / 3%;\n width: var(--tct-card-image-width, 100%);\n max-width: var(--tct-card-image-max-width, 250px);\n min-width: var(--tct-card-image-min-width, 25px);\n flex-shrink: 0;\n }\n}\n\n// Layer positioning\n.card-image,\n.card-image-overlay {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n}\n\n.card-image {\n z-index: 1;\n filter: blur(var(--tct-card-image-base-blur));\n}\n\n.card-image-overlay {\n z-index: 2;\n opacity: var(--tct-card-image-overlay-opacity);\n}\n\n// Theme color classes (base layer only)\n.card-image {\n &.bg-primary {\n background-color: var(--tct-card-image-primary-color);\n }\n\n &.bg-secondary {\n background-color: var(--tct-card-image-secondary-color);\n }\n\n &.bg-tertiary {\n background-color: var(--tct-card-image-tertiary-color);\n }\n}\n\n// Gradient class (base layer only)\n.card-image.bg-gradient {\n background: linear-gradient(\n var(--tct-card-image-base-gradient-deg),\n var(--tct-card-image-base-gradient-left-color) var(--tct-card-image-base-gradient-left-stop),\n var(--tct-card-image-base-gradient-middle-color) var(--tct-card-image-base-gradient-middle-stop),\n var(--tct-card-image-base-gradient-right-color) var(--tct-card-image-base-gradient-right-stop)\n );\n}\n\n// Dot pattern class (overlay only)\n.card-image-overlay.bg-dot {\n background-image: radial-gradient(\n circle,\n var(--tct-card-image-dot-color) var(--tct-card-image-dot-size),\n transparent var(--tct-card-image-dot-size)\n );\n background-size: var(--tct-card-image-dot-spacing) var(--tct-card-image-dot-spacing);\n mix-blend-mode: var(--tct-card-image-overlay-mix-blend-mode);\n opacity: var(--tct-card-image-overlay-opacity);\n}\n\n// Custom URL classes\n.card-image.bg-custom {\n background-image: var(--tct-card-image-base-url);\n background-size: cover;\n background-position: center;\n}\n\n.card-image-overlay.bg-custom {\n background-image: var(--tct-card-image-overlay-url);\n background-size: cover;\n background-position: center;\n}\n\n// Status banner (positioned outside card-image-container, straddles top edge)\n.card-status-banner {\n position: relative;\n z-index: 4;\n width: fit-content;\n min-width: 33.33%;\n max-width: 72%;\n height: 22px;\n margin: 0 auto -11px;\n padding: 0 12px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 5px / 5px;\n box-shadow: var(--tct-card-image-status-box-shadow);\n display: flex;\n align-items: center;\n justify-content: center;\n\n &.vertical {\n min-width: 60%;\n }\n\n &.clickable {\n cursor: pointer;\n transition: transform 0.3s ease;\n }\n}\n\n// Status banner text\n.card-status-text {\n font-size: 14px;\n font-family: var(--uux-app-fontFamily, OpenSans, Helvetica Neue, Helvetica, Arial, sans-serif);\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n// Status color classes\n.card-status-banner.status-enabled {\n background-color: var(--tct-card-image-status-background-enabled);\n color: var(--tct-card-image-status-color-enabled);\n}\n\n.card-status-banner.status-disabled {\n background-color: var(--tct-card-image-status-background-disabled);\n color: var(--tct-card-image-status-color-disabled);\n}\n\n.card-status-banner.status-locked {\n background-color: var(--tct-card-image-status-background-locked);\n color: var(--tct-card-image-status-color-locked);\n}\n\n.card-status-banner.status-damaged {\n background-color: var(--tct-card-image-status-background-damaged);\n color: var(--tct-card-image-status-color-damaged);\n}\n\n.card-status-banner.status-lost {\n background-color: var(--tct-card-image-status-background-lost);\n color: var(--tct-card-image-status-color-lost);\n}\n\n.card-status-banner.status-stolen {\n background-color: var(--tct-card-image-status-background-stolen);\n color: var(--tct-card-image-status-color-stolen);\n}\n\n.card-status-banner.status-lost-or-stolen {\n background-color: var(--tct-card-image-status-background-lost-or-stolen);\n color: var(--tct-card-image-status-color-lost-or-stolen);\n}\n\n.card-status-banner.status-digital {\n background-color: var(--tct-card-image-status-background-digital);\n color: var(--tct-card-image-status-color-digital);\n}\n\n// card details\n.card-details-wrapper {\n container-type: inline-size;\n position: relative;\n z-index: 3;\n height: calc(100% + 2px);\n width: calc(100% + 2px);\n margin-left: -1px;\n margin-top: -1px;\n}\n\n.card-text {\n color: var(--tct-card-image-font-color);\n font-family: 'Open Sans', Arial, sans-serif;\n font-weight: 600;\n line-height: 1;\n letter-spacing: 1.55px;\n text-shadow: var(--tct-card-image-text-shadow);\n text-transform: uppercase;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n// card details (horizontal)\n.card-details-horizontal {\n padding: 2.5cqw;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.horizontal-logo-wrapper {\n padding: 0 1.25cqw;\n margin: 1.25cqw 0 2.5cqw 0;\n width: 70cqw;\n height: 11.25cqw;\n}\n\n.horizontal-logo {\n background-image: var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n background-origin: content-box;\n padding: var(--tct-card-image-logo-padding, 2.5cqw 0);\n width: 100%;\n height: 100%;\n}\n\n.horizontal-chip {\n width: 15cqw;\n height: 10cqw;\n margin-left: 8.75cqw;\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n}\n\n.horizontal-card-number {\n padding-top: 2.5cqw;\n text-align: left;\n font-size: 5cqw;\n height: 7.5cqw;\n width: 85cqw;\n margin-left: 5cqw;\n}\n\n.horizontal-exp-date-card-type-row {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: flex-end;\n width: 100%;\n height: 10cqw;\n margin: 1.25cqw 0;\n}\n\n.horizontal-exp-date-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n width: 25cqw;\n height: 100%;\n margin-left: 1.25cqw;\n}\n\n.horizontal-exp-date-label {\n font-size: 2.5cqw;\n margin-bottom: 1cqw;\n}\n\n.horizontal-exp-date-value {\n font-size: 3.5cqw;\n}\n\n.horizontal-card-type {\n font-size: var(--tct-card-image-type-font-size, 4cqw);\n color: var(--tct-card-image-type-color, var(--tct-card-image-font-color));\n margin-right: var(--tct-card-image-type-margin-right, 4.15cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, -10.1cqw);\n\n &.vendor-mastercard {\n font-size: var(--tct-card-image-type-font-size, 3cqw);\n margin-right: var(--tct-card-image-type-margin-right, 1.25cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, 0cqw);\n }\n\n &.vendor-visa {\n font-size: var(--tct-card-image-type-font-size, 3cqw);\n margin-right: var(--tct-card-image-type-margin-right, 0.09cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, -6.25cqw);\n }\n}\n\n.horizontal-card-holder-vendor-row {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n width: 100%;\n}\n\n.horizontal-card-holder-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n width: 73.75cqw;\n height: 10cqw;\n padding: 0 1.25cqw;\n margin-right: 1.25cqw;\n min-width: 0;\n}\n\n.horizontal-card-holder-label {\n font-size: 2.5cqw;\n margin-bottom: 1cqw;\n}\n\n.horizontal-card-holder-value {\n font-size: 4.5cqw;\n}\n\n.horizontal-vendor {\n width: 20cqw;\n height: 12.5cqw;\n flex-shrink: 0;\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n}\n\n// card details (vertical)\n.card-details-vertical {\n position: relative;\n z-index: 3;\n padding: 4cqw;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.vertical-chip {\n width: 16cqw;\n height: 24cqw;\n margin: 12cqw 0 30cqw 46cqw;\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n}\n\n.vertical-logo-wrapper {\n padding: 0 2cqw;\n margin-bottom: 4cqw;\n width: 100%;\n height: 18cqw;\n}\n\n.vertical-logo {\n background-image: var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n background-origin: content-box;\n padding: var(--tct-card-image-logo-padding, 4cqw 0);\n width: 100%;\n height: 100%;\n}\n\n.vertical-card-number {\n text-align: left;\n font-size: 8cqw;\n height: 12cqw;\n width: 100%;\n padding: 0 2cqw;\n}\n\n.vertical-card-holder-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n width: 100%;\n height: 16cqw;\n padding: 0 2cqw;\n min-width: 0;\n}\n\n.vertical-card-holder-label {\n font-size: 4cqw;\n margin-bottom: 1.6cqw;\n}\n\n.vertical-card-holder-value {\n font-size: 7.2cqw;\n}\n\n.vertical-exp-date-card-type-row {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: flex-end;\n width: 100%;\n height: 16cqw;\n}\n\n.vertical-exp-date-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n width: 40cqw;\n height: 100%;\n margin-left: 2cqw;\n padding-bottom: 2cqw;\n}\n\n.vertical-exp-date-label {\n font-size: 4cqw;\n margin-bottom: 1.6cqw;\n}\n\n.vertical-exp-date-value {\n font-size: 5.6cqw;\n}\n\n.vertical-card-type {\n font-size: var(--tct-card-image-type-font-size, 6.4cqw);\n padding-bottom: 2cqw;\n color: var(--tct-card-image-type-color, var(--tct-card-image-font-color));\n margin-right: var(--tct-card-image-type-margin-right, 3cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, -19cqw);\n\n &.vendor-mastercard {\n font-size: var(--tct-card-image-type-font-size, 4.8cqw);\n margin-right: var(--tct-card-image-type-margin-right, 2cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, 0cqw);\n }\n\n &.vendor-visa {\n font-size: var(--tct-card-image-type-font-size, 4.8cqw);\n margin-right: var(--tct-card-image-type-margin-right, 0.05625cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, -10cqw);\n }\n}\n\n.vertical-vendor-row {\n display: flex;\n justify-content: end;\n}\n\n.vertical-vendor {\n width: 32cqw;\n height: 20cqw;\n flex-shrink: 0;\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n}\n","import { hasSlotContent } from '@/utils';\nimport {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n getAssetPath,\n Host,\n Prop,\n State,\n h,\n} from '@stencil/core';\n\n/\n @name Card Image\n * @summary Displays a visual representation of a credit or debit card with customizable styling\n * and card details. Supports horizontal and vertical orientations with responsive sizing\n * that adapts content visibility based on container width.\n \n @slot action - An optional slot for interactive elements. Supported elements:\n * - [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/) —\n * Renders in the top-right corner. Only visible at large and medium sizes.\n \n /\n@Component({ tag: 'q2-card-image', shadow: true, styleUrl: 'q2-card-image.scss', assetsDirs: ['assets'] })\nexport class Q2CardImage implements ComponentInterface {\n // #region Own Properties\n\n private predefinedBackgrounds = ['primary', 'secondary', 'tertiary', 'gradient'];\n private resizeObserver: ResizeObserver;\n private sizeBreakpoints = {\n vertical: { large: 176, medium: 113, small: 63 },\n horizontal: { large: 281, medium: 181, small: 100 },\n };\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 computedSize: 'large' \| 'medium' \| 'small' \| 'tiny' = 'medium';\n\n // #endregion\n // #region Public Property API\n\n /*\n Accessible label for the card image. When provided, this value is applied as `aria-label`\n * on either the card container (non-clickable) or the wrapping button (clickable).\n /\n @Prop({ reflect: false })\n accessibilityLabel?: string;\n\n /\n Background style for the base layer.\n * - `'primary'` \| `'secondary'` \| `'tertiary'`: Solid theme colors\n * - `'gradient'`: Grayscale gradient (themable via CSS variables)\n * - Custom string: URL/path to an image file (SVG, PNG, JPG)\n /\n @Prop({ reflect: true })\n background: 'primary' \| 'secondary' \| 'tertiary' \| 'gradient' \| string = 'primary';\n\n /\n The card holder name to display on the card. Only rendered at large and medium sizes.\n * When not provided, neither the label nor the name is displayed.\n /\n @Prop({ reflect: false })\n cardHolder?: string;\n\n /\n Controls whether the \"CARD HOLDER\" label is displayed above the card holder name.\n * The label is only supported at large size. At medium size, only the name is shown\n * regardless of this prop. When `false`, only the name is shown without the label.\n /\n @Prop({ reflect: false })\n cardHolderLabel: boolean = true;\n\n /\n The card number to display. Only the last 4 characters are used, prefixed with `** ** `.\n * The last 4 characters must all be digits; otherwise the card number is not displayed.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n cardNumber?: string;\n\n /\n The status of the card. When set, renders a status banner at the top of the card for card sizes medium and up.\n /\n @Prop({ reflect: true })\n cardStatus?: 'digital' \| 'enabled' \| 'disabled' \| 'locked' \| 'damaged' \| 'lost' \| 'stolen' \| 'lost or stolen';\n\n /\n The card type label displayed alongside the expiration date. Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n cardType?: 'atm' \| 'debit';\n\n /\n The color of the card type text. Only applies when `cardType` is set.\n /\n @Prop({ reflect: false })\n cardTypeColor?: 'black' \| 'white';\n\n /\n The chip style displayed on the card. Not rendered at tiny size.\n * - `'gold'`: Gold/brass colored EMV chip\n * - `'silver'`: Silver/platinum colored EMV chip\n /\n @Prop({ reflect: false })\n chip?: 'gold' \| 'silver';\n\n /\n If `true`, the card image is wrapped in a `q2-btn` to handle click interactions.\n /\n @Prop({ reflect: true })\n clickable: boolean = false;\n\n /\n If `true`, the card image is visually disabled and not clickable. Does not affect the dropdown.\n /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n The expiration date of the card in ISO 8601 extended format (`YYYY-MM`).\n * Displayed as `MM / YY` on the card. Only rendered at large and medium sizes.\n * When not provided, neither the label nor the date value is displayed.\n /\n @Prop({ reflect: false })\n expirationDate?: string;\n\n /\n Controls whether the \"EXPIRES\" label is displayed above the expiration date.\n * The label is only supported at large size. At medium size, only the date value is shown\n * regardless of this prop. When `false`, only the date value is shown without the label.\n /\n @Prop({ reflect: false })\n expirationDateLabel: boolean = true;\n\n /\n Path to the financial institution logo image (SVG, PNG, or JPG).\n * Max display dimensions: 280x45 for horizontal cards, 250x45 for vertical cards.\n * When not provided, an empty placeholder div is rendered to maintain consistent card structure.\n /\n @Prop({ reflect: false })\n fiLogo?: string;\n\n /\n If `true`, the component uses `display: inline-block`. If `false`, uses `display: block`.\n /\n @Prop({ reflect: true })\n inline: boolean = false;\n\n /\n The orientation of the card image.\n /\n @Prop({ reflect: false })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Background style for the overlay layer. When undefined, the overlay is not rendered.\n * - `'dot'`: CSS-generated dot pattern with mix-blend-mode overlay (themable via CSS variables)\n * - Custom string: URL/path to an image file (SVG, PNG, JPG)\n /\n @Prop({ reflect: true })\n overlay?: 'dot' \| string;\n\n /\n Overrides the default status banner text (which is the cardStatus value in uppercase).\n * Maximum 14 characters (including spaces) to ensure the text fits within the banner.\n /\n @Prop({ reflect: false })\n statusTextOverride?: string;\n\n /\n The card vendor. Renders the vendor logo in the bottom-right of the card.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: true })\n vendor?: 'mastercard' \| 'visa';\n\n /\n The color variant of the vendor logo. Only applies when `vendor` is set.\n * Defaults to `'white'` for Visa and `'brand'` for Mastercard.\n /\n @Prop({ reflect: false })\n vendorColor?: 'black' \| 'brand' \| 'white';\n\n /\n Path to a custom vendor logo image (SVG, PNG, or JPG).\n * When set, this overrides the `vendor` prop and displays the custom logo.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n vendorLogo?: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when a clickable card is clicked. Contains card details. /\n @Event()\n tctClick: EventEmitter<{\n cardNumber: string \| undefined;\n cardStatus: string \| undefined;\n statusTextOverride: string \| undefined;\n cardHolder: string \| undefined;\n expirationDate: string \| undefined;\n cardType: string \| undefined;\n vendor: string \| undefined;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentWillLoad(): void {\n if (typeof window !== 'undefined' && 'ResizeObserver' in window) {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n }\n }\n\n componentDidLoad(): void {\n this.resizeObserver?.observe(this.hostElement);\n const width = this.hostElement.getBoundingClientRect().width;\n if (width > 0) {\n this.computedSize = this.computeSizeFromWidth(width);\n }\n }\n\n componentDidRender(): void {\n this.handleDropdownElement();\n }\n\n // #endregion\n // #region Local Methods\n\n get hasActionSlotContent() {\n return hasSlotContent(this.hostElement, 'action');\n }\n\n private get isDecorative(): boolean {\n return this.size === 'tiny' && !this.clickable;\n }\n\n private get size(): 'large' \| 'medium' \| 'small' \| 'tiny' {\n return this.computedSize;\n }\n\n /\n Computes the display size from the container's current width.\n * Breakpoints represent the minimum widths at which certain card elements are applied to the layout.\n /\n private computeSizeFromWidth(width: number): 'large' \| 'medium' \| 'small' \| 'tiny' {\n if (this.orientation === 'vertical') {\n if (width >= this.sizeBreakpoints.vertical.large) return 'large';\n if (width >= this.sizeBreakpoints.vertical.medium) return 'medium';\n if (width >= this.sizeBreakpoints.vertical.small) return 'small';\n return 'tiny';\n }\n if (width >= this.sizeBreakpoints.horizontal.large) return 'large';\n if (width >= this.sizeBreakpoints.horizontal.medium) return 'medium';\n if (width >= this.sizeBreakpoints.horizontal.small) return 'small';\n return 'tiny';\n }\n\n /\n Generates inline styles for the base layer when using a custom image URL.\n /\n private getBaseStyles(): Record<string, string> {\n if (!this.isPredefinedBackground(this.background)) {\n return { '--tct-card-image-base-url': `url(${this.background})` };\n }\n return {};\n }\n\n /\n Returns the card holder name for display, or an empty string if not provided.\n * Only rendered at large and medium sizes.\n /\n private getCardHolderName(): string {\n if (!this.cardHolder \|\| this.size === 'small' \|\| this.size === 'tiny') return '';\n return this.cardHolder;\n }\n\n /\n Returns inline styles for the card type text color.\n /\n private getCardTypeColorStyle(): Record<string, string> {\n if (!this.cardType \|\| !this.cardTypeColor) return {};\n return { '--tct-card-image-type-color': this.cardTypeColor === 'black' ? '#2E2E2E' : '#fff' };\n }\n\n /\n Returns the card type text (ATM or DEBIT) for display, or null if not set.\n /\n private getCardTypeText(): string \| null {\n if (!this.cardType \|\| this.size === 'tiny') return null;\n return this.cardType.toUpperCase();\n }\n\n /\n Returns the resolved file path for the chip SVG, or null if no chip is set.\n /\n private getChipPath(orientation: 'horizontal' \| 'vertical'): string \| null {\n if (!this.chip \|\| this.size === 'tiny') return null;\n const suffix = orientation === 'vertical' ? '-vertical' : '';\n const chipFile = this.chip === 'gold' ? `chip-gold${suffix}.svg` : `chip-silver${suffix}.svg`;\n return getAssetPath(`assets/card-chip/${chipFile}`);\n }\n\n /\n Returns the formatted card number for display, or an empty string if invalid.\n * Extracts the last 4 characters and validates they are all digits.\n /\n private getFormattedCardNumber(): string {\n if (!this.cardNumber \|\| this.cardNumber.length < 4 \|\| this.size === 'tiny') return '';\n const lastFour = this.cardNumber.slice(-4);\n if (!/^\\d{4}$/.test(lastFour)) return '';\n if (this.size === 'large' \|\| this.size === 'medium') {\n return `* ${lastFour}`;\n } else {\n return ` ${lastFour}`;\n }\n }\n\n /\n * Returns the formatted expiration date for display as `MM / YY`, or an empty string if invalid.\n * Accepts ISO 8601 extended format `YYYY-MM`.\n * Only rendered at large and medium sizes.\n /\n private getFormattedExpirationDate(): string {\n if (!this.expirationDate \|\| this.size === 'small' \|\| this.size === 'tiny') return '';\n const match = this.expirationDate.match(/^(\\d{4})-(\\d{2})$/);\n if (!match) return '';\n const year = match[1].slice(-2);\n const month = match[2];\n return `${month} / ${year}`;\n }\n\n /\n Returns the last 4 digits of the card number, or undefined if not set or invalid.\n /\n private getLastFour(): string \| undefined {\n if (!this.cardNumber \|\| this.cardNumber.length < 4) return undefined;\n const lastFour = this.cardNumber.slice(-4);\n return /^\\d{4}$/.test(lastFour) ? lastFour : undefined;\n }\n\n /\n Generates inline styles for the overlay layer when using a custom image URL.\n /\n private getOverlayStyles(): Record<string, string> {\n if (this.overlay && !this.isDotOverlay(this.overlay)) {\n return { '--tct-card-image-overlay-url': `url(${this.overlay})` };\n }\n return {};\n }\n\n /\n Returns the display text for the status banner.\n /\n private getStatusText(): string {\n return this.statusTextOverride \|\| this.cardStatus.toUpperCase();\n }\n\n /\n Returns the resolved file path for the vendor logo SVG, or null if no vendor is set.\n * Custom vendorLogo takes precedence over the vendor prop.\n /\n private getVendorPath(): string \| null {\n if (this.size === 'tiny') return null;\n // Custom vendor logo takes precedence\n if (this.vendorLogo) return this.vendorLogo;\n if (!this.vendor) return null;\n const color = this.vendorColor ?? (this.vendor === 'visa' ? 'white' : 'brand');\n const vendorPrefix = this.vendor === 'mastercard' ? 'mc' : 'visa';\n return getAssetPath(`assets/card-vendor/${vendorPrefix}-${color}.svg`);\n }\n\n /\n Emits the tctClick event with card detail data.\n /\n private handleCardClick = () => {\n this.tctClick.emit({\n cardNumber: this.getLastFour(),\n cardStatus: this.cardStatus,\n statusTextOverride: this.statusTextOverride,\n cardHolder: this.cardHolder,\n expirationDate: this.expirationDate,\n cardType: this.cardType,\n vendor: this.vendor,\n });\n };\n\n /\n Validates and normalizes the action slot content.\n * Only allows a single q2-dropdown element with circular icon-only styling.\n /\n private handleDropdownElement() {\n if (!('HTMLSlotElement' in window)) return;\n const actionSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action\"]');\n const actionElements = actionSlot?.assignedElements({ flatten: true }) \|\| [];\n actionElements.forEach((el: HTMLElement, index) => {\n if (el.tagName !== 'Q2-DROPDOWN' \|\| index > 0) {\n el.remove();\n console.warn('Q2-CARD-IMAGE: Only one Q2-DROPDOWN is allowed in the action slot.');\n return;\n }\n // Force circular styling with filled background and downward opening\n el.setAttribute('type', 'neutral');\n el.setAttribute('popover-alignment', 'right');\n el.setAttribute('popover-direction', 'down');\n el.style.setProperty('--tct-btn-border-radius', '50%');\n el.setAttribute('hide-label', 'true');\n });\n }\n\n /\n Handles ResizeObserver entries and updates the computed size.\n /\n private handleResize = (entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const newSize = this.computeSizeFromWidth(entry.contentRect.width);\n if (newSize !== this.computedSize) {\n this.computedSize = newSize;\n }\n }\n };\n\n /\n Determines if the overlay value is the 'dot' pattern or a custom URL.\n /\n private isDotOverlay(value: string \| undefined): value is 'dot' {\n return value === 'dot';\n }\n\n /\n Determines if the background value is a predefined type or a custom URL.\n /\n private isPredefinedBackground(\n value: string \| undefined\n ): value is 'primary' \| 'secondary' \| 'tertiary' \| 'gradient' {\n return !!value && this.predefinedBackgrounds.includes(value);\n }\n\n /\n Returns whether the card holder label should be shown.\n * Only displayed at large size and when cardHolderLabel is true.\n /\n private showCardHolderLabel(): boolean {\n return this.cardHolderLabel && this.size === 'large' && !!this.getCardHolderName();\n }\n\n /\n Returns whether the expiration date label should be shown.\n * Only displayed at large size and when expirationDateLabel is true.\n */\n private showExpirationDateLabel(): boolean {\n return this.expirationDateLabel && this.size === 'large' && !!this.getFormattedExpirationDate();\n }\n\n // #endregion\n // #region Render Methods\n\n private renderAction() {\n if (!this.hasActionSlotContent \|\| this.size === 'small' \|\| this.size === 'tiny') return null;\n return (\n <div class=\"card-action\">\n <slot name=\"action\" />\n </div>\n );\n }\n\n private renderCardContent() {\n const cardDetails =\n this.orientation === 'horizontal' ? this.renderHorizontalCardDetails() : this.renderVerticalCardDetails();\n return (\n <div\n role={!this.isDecorative && !this.clickable ? 'img' : undefined}\n aria-label={!this.isDecorative && !this.clickable ? this.accessibilityLabel : undefined}\n aria-hidden={this.isDecorative \|\| this.clickable ? 'true' : undefined}\n class={{\n 'card-image-container': true,\n block: !this.inline,\n clickable: this.clickable && !this.disabled,\n inline: this.inline,\n [`${this.orientation}`]: true,\n }}\n >\n <div\n class={{\n 'card-image': true,\n [`bg-${this.background}`]: this.isPredefinedBackground(this.background),\n 'bg-custom': !this.isPredefinedBackground(this.background),\n }}\n style={this.getBaseStyles()}\n ></div>\n {this.overlay && (\n <div\n class={{\n 'card-image-overlay': true,\n 'bg-dot': this.isDotOverlay(this.overlay),\n 'bg-custom': !this.isDotOverlay(this.overlay),\n }}\n style={this.getOverlayStyles()}\n ></div>\n )}\n <div class=\"card-details-wrapper\">{cardDetails}</div>\n </div>\n );\n }\n\n private renderHorizontalCardDetails() {\n const logoStyle = this.fiLogo ? { '--tct-card-image-fi-logo': `url(${this.fiLogo})` } : {};\n const chipPath = this.getChipPath('horizontal');\n const vendorPath = this.getVendorPath();\n const cardTypeColorStyle = this.getCardTypeColorStyle();\n return (\n <div class=\"card-details-horizontal\">\n <div class=\"horizontal-logo-wrapper\">\n <div\n class=\"horizontal-logo\"\n style={logoStyle}\n ></div>\n </div>\n <div class=\"horizontal-chip\">\n {chipPath && (\n <img\n src={chipPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div class=\"horizontal-card-number card-text\">{this.getFormattedCardNumber()}</div>\n <div class=\"horizontal-exp-date-card-type-row\">\n <div class=\"horizontal-exp-date-wrapper\">\n {this.showExpirationDateLabel() && (\n <div class=\"horizontal-exp-date-label card-text\">EXPIRES</div>\n )}\n {this.getFormattedExpirationDate() && (\n <div class=\"horizontal-exp-date-value card-text\">{this.getFormattedExpirationDate()}</div>\n )}\n </div>\n <div\n class={{\n 'horizontal-card-type': true,\n 'card-text': true,\n 'vendor-mastercard': this.vendor === 'mastercard',\n 'vendor-visa': this.vendor === 'visa',\n }}\n style={cardTypeColorStyle}\n >\n {this.getCardTypeText()}\n </div>\n </div>\n <div class=\"horizontal-card-holder-vendor-row\">\n <div class=\"horizontal-card-holder-wrapper\">\n {this.showCardHolderLabel() && (\n <div class=\"horizontal-card-holder-label card-text\">CARD HOLDER</div>\n )}\n {this.getCardHolderName() && (\n <div class=\"horizontal-card-holder-value card-text\">{this.getCardHolderName()}</div>\n )}\n </div>\n <div class=\"horizontal-vendor\">\n {vendorPath && (\n <img\n src={vendorPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </div>\n </div>\n );\n }\n\n private renderStatusBanner() {\n if (!this.cardStatus \|\| this.size !== 'large') return null;\n return (\n <div\n class={{\n 'card-status-banner': true,\n [`status-${this.cardStatus.replace(/\\s+/g, '-')}`]: true,\n [this.orientation]: true,\n clickable: this.clickable && !this.disabled,\n }}\n onClick={this.clickable && !this.disabled ? this.handleCardClick : undefined}\n >\n <span class=\"card-status-text\">{this.getStatusText()}</span>\n </div>\n );\n }\n\n private renderVerticalCardDetails() {\n const logoStyle = this.fiLogo ? { '--tct-card-image-fi-logo': `url(${this.fiLogo})` } : {};\n const chipPath = this.getChipPath('vertical');\n const vendorPath = this.getVendorPath();\n const cardTypeColorStyle = this.getCardTypeColorStyle();\n return (\n <div class=\"card-details-vertical\">\n <div class=\"vertical-chip\">\n {chipPath && (\n <img\n src={chipPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div class=\"vertical-logo-wrapper\">\n <div\n class=\"vertical-logo\"\n style={logoStyle}\n ></div>\n </div>\n <div class=\"vertical-card-number card-text\">{this.getFormattedCardNumber()}</div>\n <div class=\"vertical-card-holder-wrapper\">\n {this.showCardHolderLabel() && <div class=\"vertical-card-holder-label card-text\">CARD HOLDER</div>}\n {this.getCardHolderName() && (\n <div class=\"vertical-card-holder-value card-text\">{this.getCardHolderName()}</div>\n )}\n </div>\n <div class=\"vertical-exp-date-card-type-row\">\n <div class=\"vertical-exp-date-wrapper\">\n {this.showExpirationDateLabel() && <div class=\"vertical-exp-date-label card-text\">EXPIRES</div>}\n {this.getFormattedExpirationDate() && (\n <div class=\"vertical-exp-date-value card-text\">{this.getFormattedExpirationDate()}</div>\n )}\n </div>\n <div\n class={{\n 'vertical-card-type': true,\n 'card-text': true,\n 'vendor-mastercard': this.vendor === 'mastercard',\n 'vendor-visa': this.vendor === 'visa',\n }}\n style={cardTypeColorStyle}\n >\n {this.getCardTypeText()}\n </div>\n </div>\n <div class=\"vertical-vendor-row\">\n <div class=\"vertical-vendor\">\n {vendorPath && (\n <img\n src={vendorPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </div>\n </div>\n );\n }\n\n render() {\n const cardContent = this.clickable ? (\n <q2-btn\n disabled={this.disabled}\n label={this.accessibilityLabel}\n hideLabel={true}\n onClick={this.handleCardClick}\n >\n {this.renderCardContent()}\n </q2-btn>\n ) : (\n this.renderCardContent()\n );\n\n const showBanner = !!this.cardStatus && this.size === 'large';\n\n return (\n <Host\n class={{\n [`${this.orientation}`]: true,\n 'has-action': this.hasActionSlotContent,\n 'has-banner': showBanner,\n }}\n >\n {this.renderStatusBanner()}\n <div class=\"card-wrapper\">\n {cardContent}\n {this.renderAction()}\n </div>\n </Host>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-card-image.js","mappings":"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","names":["Q2CardImage","__stencil_proxyCustomElement"],"sources":["src/components/q2-card-image/q2-card-image.scss?tag=q2-card-image&encapsulation=shadow","src/components/q2-card-image/q2-card-image.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: flex;\n flex-direction: column;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n,\n::before,\n::after {\n box-sizing: inherit;\n}\n\n:host {\n // Base layer variables\n --tct-card-image-base-blur: 0px;\n --tct-card-image-primary-color: var(--t-primary, #5446a4);\n --tct-card-image-secondary-color: var(--t-secondary, #2a7de1);\n --tct-card-image-tertiary-color: var(--t-tertiary, #6b7280);\n\n // Gradient variables\n --tct-card-image-base-gradient-deg: 110.95deg;\n --tct-card-image-base-gradient-left-color: var(--t-gray-2, #1a1a1a);\n --tct-card-image-base-gradient-left-stop: 0.54%;\n --tct-card-image-base-gradient-middle-color: var(--t-gray-11, #cccccc);\n --tct-card-image-base-gradient-middle-stop: 60.22%;\n --tct-card-image-base-gradient-right-color: var(--t-gray-2, #1a1a1a);\n --tct-card-image-base-gradient-right-stop: 100%;\n\n // Overlay layer variables\n --tct-card-image-overlay-opacity: 1;\n --tct-card-image-overlay-mix-blend-mode: normal;\n\n // Dot pattern variables\n --tct-card-image-dot-size: 0.5px;\n --tct-card-image-dot-spacing: 2px;\n --tct-card-image-dot-color: rgba(128, 128, 128, 0.5);\n\n // Card number font\n --tct-card-image-font-color: var(--t-base, #fff);\n --tct-card-image-text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);\n\n // Status banner variables\n --tct-card-image-status-box-shadow: var(\n --app-shadow-3,\n 0px 0px 2px rgba(0, 0, 0, 0.12),\n 0px 8px 16px rgba(0, 0, 0, 0.14)\n );\n --tct-card-image-status-background-digital: var(--tct-black, #000);\n --tct-card-image-status-color-digital: var(--tct-white, #fff);\n --tct-card-image-status-background-enabled: var(--tct-stoplight-info, #0079c1);\n --tct-card-image-status-color-enabled: var(--tct-white, #fff);\n --tct-card-image-status-background-disabled: var(--tct-stoplight-alert, #d20a0a);\n --tct-card-image-status-color-disabled: var(--tct-white, #fff);\n --tct-card-image-status-background-locked: var(--tct-stoplight-alert, #d20a0a);\n --tct-card-image-status-color-locked: var(--tct-white, #fff);\n --tct-card-image-status-background-damaged: var(--tct-stoplight-warning, #c35500);\n --tct-card-image-status-color-damaged: var(--tct-white, #fff);\n --tct-card-image-status-background-lost: var(--tct-stoplight-warning, #c35500);\n --tct-card-image-status-color-lost: var(--tct-white, #fff);\n --tct-card-image-status-background-stolen: var(--tct-stoplight-warning, #c35500);\n --tct-card-image-status-color-stolen: var(--tct-white, #fff);\n --tct-card-image-status-background-lost-or-stolen: var(--tct-stoplight-warning, #c35500);\n --tct-card-image-status-color-lost-or-stolen: var(--tct-white, #fff);\n}\n\n:host([inline]) {\n display: inline-flex;\n}\n\n:host(.horizontal) {\n max-width: var(--tct-card-image-max-width, min(400px, 100%));\n min-width: var(--tct-card-image-min-width, 40px);\n width: var(--tct-card-image-width);\n}\n\n:host(.vertical) {\n max-width: var(--tct-card-image-max-width, min(250px, 100%));\n min-width: var(--tct-card-image-min-width, 25px);\n width: var(--tct-card-image-width);\n}\n\n// Margins to prevent action slot content from overlapping surrounding content\n// Action element is 44x44, straddling corner = 22px above and 22px right of card\n:host(.has-action) {\n margin-top: 22px;\n margin-right: 22px;\n}\n\n// When banner is also present, reduce top margin (banner already provides 11px overhang)\n:host(.has-action.has-banner) {\n margin-top: 11px;\n}\n\n:host(:hover) .card-image-container.clickable,\n:host(:focus-within) .card-image-container.clickable {\n transform: translateY(-8px) scale(1.03);\n box-shadow: var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14));\n}\n\n:host(:hover) .card-status-banner.clickable,\n:host(:focus-within) .card-status-banner.clickable {\n transform: translateY(-8px) scale(1.03);\n}\n\n:host([disabled]:not([disabled='false'])) {\n .card-image-container {\n opacity: var(--tct-card-image-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));\n cursor: not-allowed;\n }\n\n .card-status-banner {\n cursor: not-allowed;\n }\n}\n\n.card-wrapper > q2-btn {\n --const-double-focus-ring: none;\n width: 100%;\n max-width: 100%;\n}\n\n// Wrapper for card + dropdown positioning\n.card-wrapper {\n position: relative;\n max-width: 100%;\n}\n\n// Action slot (top-right corner, straddling card edge)\n.card-action {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n z-index: 5;\n}\n\n.card-image-container {\n overflow: hidden;\n position: relative;\n border: 1px solid transparent;\n background:\n linear-gradient(#fff, #fff) padding-box,\n linear-gradient(to right, rgba(200, 200, 200, 1) 33%, rgba(150, 150, 150, 1)) border-box;\n background-origin: border-box;\n background-clip: padding-box, border-box;\n box-shadow: var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));\n\n &.inline {\n display: inline-block;\n }\n\n &.clickable {\n cursor: pointer;\n will-change: transform;\n transition:\n transform 0.3s ease,\n box-shadow 0.3s ease;\n }\n\n &.block {\n display: block;\n }\n\n &.horizontal {\n aspect-ratio: 8 / 5;\n border-radius: 3% / 4.8%;\n width: var(--tct-card-image-width, 100%);\n max-width: var(--tct-card-image-max-width, 400px);\n min-width: var(--tct-card-image-min-width, 40px);\n flex-shrink: 0;\n }\n\n &.vertical {\n aspect-ratio: 5 / 8;\n border-radius: 4.8% / 3%;\n width: var(--tct-card-image-width, 100%);\n max-width: var(--tct-card-image-max-width, 250px);\n min-width: var(--tct-card-image-min-width, 25px);\n flex-shrink: 0;\n }\n}\n\n// Layer positioning\n.card-image,\n.card-image-overlay {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n}\n\n.card-image {\n z-index: 1;\n filter: blur(var(--tct-card-image-base-blur));\n}\n\n.card-image-overlay {\n z-index: 2;\n opacity: var(--tct-card-image-overlay-opacity);\n}\n\n// Theme color classes (base layer only)\n.card-image {\n &.bg-primary {\n background-color: var(--tct-card-image-primary-color);\n }\n\n &.bg-secondary {\n background-color: var(--tct-card-image-secondary-color);\n }\n\n &.bg-tertiary {\n background-color: var(--tct-card-image-tertiary-color);\n }\n}\n\n// Gradient class (base layer only)\n.card-image.bg-gradient {\n background: linear-gradient(\n var(--tct-card-image-base-gradient-deg),\n var(--tct-card-image-base-gradient-left-color) var(--tct-card-image-base-gradient-left-stop),\n var(--tct-card-image-base-gradient-middle-color) var(--tct-card-image-base-gradient-middle-stop),\n var(--tct-card-image-base-gradient-right-color) var(--tct-card-image-base-gradient-right-stop)\n );\n}\n\n// Dot pattern class (overlay only)\n.card-image-overlay.bg-dot {\n background-image: radial-gradient(\n circle,\n var(--tct-card-image-dot-color) var(--tct-card-image-dot-size),\n transparent var(--tct-card-image-dot-size)\n );\n background-size: var(--tct-card-image-dot-spacing) var(--tct-card-image-dot-spacing);\n mix-blend-mode: var(--tct-card-image-overlay-mix-blend-mode);\n opacity: var(--tct-card-image-overlay-opacity);\n}\n\n// Custom URL classes\n.card-image.bg-custom {\n background-image: var(--tct-card-image-base-url);\n background-size: cover;\n background-position: center;\n}\n\n.card-image-overlay.bg-custom {\n background-image: var(--tct-card-image-overlay-url);\n background-size: cover;\n background-position: center;\n}\n\n// Status banner (positioned outside card-image-container, straddles top edge)\n.card-status-banner {\n position: relative;\n z-index: 4;\n width: fit-content;\n min-width: 33.33%;\n max-width: 72%;\n height: 22px;\n margin: 0 auto -11px;\n padding: 0 12px;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 5px / 5px;\n box-shadow: var(--tct-card-image-status-box-shadow);\n display: flex;\n align-items: center;\n justify-content: center;\n\n &.vertical {\n min-width: 60%;\n }\n\n &.clickable {\n cursor: pointer;\n transition: transform 0.3s ease;\n }\n}\n\n// Status banner text\n.card-status-text {\n font-size: 14px;\n font-family: var(--uux-app-fontFamily, OpenSans, Helvetica Neue, Helvetica, Arial, sans-serif);\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n// Status color classes\n.card-status-banner.status-enabled {\n background-color: var(--tct-card-image-status-background-enabled);\n color: var(--tct-card-image-status-color-enabled);\n}\n\n.card-status-banner.status-disabled {\n background-color: var(--tct-card-image-status-background-disabled);\n color: var(--tct-card-image-status-color-disabled);\n}\n\n.card-status-banner.status-locked {\n background-color: var(--tct-card-image-status-background-locked);\n color: var(--tct-card-image-status-color-locked);\n}\n\n.card-status-banner.status-damaged {\n background-color: var(--tct-card-image-status-background-damaged);\n color: var(--tct-card-image-status-color-damaged);\n}\n\n.card-status-banner.status-lost {\n background-color: var(--tct-card-image-status-background-lost);\n color: var(--tct-card-image-status-color-lost);\n}\n\n.card-status-banner.status-stolen {\n background-color: var(--tct-card-image-status-background-stolen);\n color: var(--tct-card-image-status-color-stolen);\n}\n\n.card-status-banner.status-lost-or-stolen {\n background-color: var(--tct-card-image-status-background-lost-or-stolen);\n color: var(--tct-card-image-status-color-lost-or-stolen);\n}\n\n.card-status-banner.status-digital {\n background-color: var(--tct-card-image-status-background-digital);\n color: var(--tct-card-image-status-color-digital);\n}\n\n// card details\n.card-details-wrapper {\n container-type: inline-size;\n position: relative;\n z-index: 3;\n height: calc(100% + 2px);\n width: calc(100% + 2px);\n margin-left: -1px;\n margin-top: -1px;\n}\n\n.card-text {\n color: var(--tct-card-image-font-color);\n font-family: 'Open Sans', Arial, sans-serif;\n font-weight: 600;\n line-height: 1;\n letter-spacing: 1.55px;\n text-shadow: var(--tct-card-image-text-shadow);\n text-transform: uppercase;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n}\n\n// card details (horizontal)\n.card-details-horizontal {\n padding: 2.5cqw;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.horizontal-logo-wrapper {\n padding: 0 1.25cqw;\n margin: 1.25cqw 0 2.5cqw 0;\n width: 70cqw;\n height: 11.25cqw;\n}\n\n.horizontal-logo {\n background-image: var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));\n background-size: contain;\n background-repeat: no-repeat;\n background-position: left center;\n background-origin: content-box;\n padding: var(--tct-card-image-logo-padding, 2.5cqw 0);\n width: 100%;\n height: 100%;\n}\n\n.horizontal-chip {\n width: 15cqw;\n height: 10cqw;\n margin-left: 8.75cqw;\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n}\n\n.horizontal-card-number {\n padding-top: 2.5cqw;\n text-align: left;\n font-size: 5cqw;\n height: 7.5cqw;\n width: 85cqw;\n margin-left: 5cqw;\n}\n\n.horizontal-exp-date-card-type-row {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: flex-end;\n width: 100%;\n height: 10cqw;\n margin: 1.25cqw 0;\n}\n\n.horizontal-exp-date-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n width: 25cqw;\n height: 100%;\n margin-left: 1.25cqw;\n}\n\n.horizontal-exp-date-label {\n font-size: 2.5cqw;\n margin-bottom: 1cqw;\n}\n\n.horizontal-exp-date-value {\n font-size: 3.5cqw;\n}\n\n.horizontal-card-type {\n font-size: var(--tct-card-image-type-font-size, 4cqw);\n color: var(--tct-card-image-type-color, var(--tct-card-image-font-color));\n margin-right: var(--tct-card-image-type-margin-right, 4.15cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, -10.1cqw);\n\n &.vendor-mastercard {\n font-size: var(--tct-card-image-type-font-size, 3cqw);\n margin-right: var(--tct-card-image-type-margin-right, 1.25cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, 0cqw);\n }\n\n &.vendor-visa {\n font-size: var(--tct-card-image-type-font-size, 3cqw);\n margin-right: var(--tct-card-image-type-margin-right, 0.09cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, -6.25cqw);\n }\n}\n\n.horizontal-card-holder-vendor-row {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n width: 100%;\n}\n\n.horizontal-card-holder-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n width: 73.75cqw;\n height: 10cqw;\n padding: 0 1.25cqw;\n margin-right: 1.25cqw;\n min-width: 0;\n}\n\n.horizontal-card-holder-label {\n font-size: 2.5cqw;\n margin-bottom: 1cqw;\n}\n\n.horizontal-card-holder-value {\n font-size: 4.5cqw;\n}\n\n.horizontal-vendor {\n width: 20cqw;\n height: 12.5cqw;\n flex-shrink: 0;\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n}\n\n// card details (vertical)\n.card-details-vertical {\n position: relative;\n z-index: 3;\n padding: 4cqw;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.vertical-chip {\n width: 16cqw;\n height: 24cqw;\n margin: 12cqw 0 30cqw 46cqw;\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n}\n\n.vertical-logo-wrapper {\n padding: 0 2cqw;\n margin-bottom: 4cqw;\n width: 100%;\n height: 18cqw;\n}\n\n.vertical-logo {\n background-image: var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n background-origin: content-box;\n padding: var(--tct-card-image-logo-padding, 4cqw 0);\n width: 100%;\n height: 100%;\n}\n\n.vertical-card-number {\n text-align: left;\n font-size: 8cqw;\n height: 12cqw;\n width: 100%;\n padding: 0 2cqw;\n}\n\n.vertical-card-holder-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n width: 100%;\n height: 16cqw;\n padding: 0 2cqw;\n min-width: 0;\n}\n\n.vertical-card-holder-label {\n font-size: 4cqw;\n margin-bottom: 1.6cqw;\n}\n\n.vertical-card-holder-value {\n font-size: 7.2cqw;\n}\n\n.vertical-exp-date-card-type-row {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: space-between;\n align-items: flex-end;\n width: 100%;\n height: 16cqw;\n}\n\n.vertical-exp-date-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n width: 40cqw;\n height: 100%;\n margin-left: 2cqw;\n padding-bottom: 2cqw;\n}\n\n.vertical-exp-date-label {\n font-size: 4cqw;\n margin-bottom: 1.6cqw;\n}\n\n.vertical-exp-date-value {\n font-size: 5.6cqw;\n}\n\n.vertical-card-type {\n font-size: var(--tct-card-image-type-font-size, 6.4cqw);\n padding-bottom: 2cqw;\n color: var(--tct-card-image-type-color, var(--tct-card-image-font-color));\n margin-right: var(--tct-card-image-type-margin-right, 3cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, -19cqw);\n\n &.vendor-mastercard {\n font-size: var(--tct-card-image-type-font-size, 4.8cqw);\n margin-right: var(--tct-card-image-type-margin-right, 2cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, 0cqw);\n }\n\n &.vendor-visa {\n font-size: var(--tct-card-image-type-font-size, 4.8cqw);\n margin-right: var(--tct-card-image-type-margin-right, 0.05625cqw);\n margin-bottom: var(--tct-card-image-type-margin-bottom, -10cqw);\n }\n}\n\n.vertical-vendor-row {\n display: flex;\n justify-content: end;\n}\n\n.vertical-vendor {\n width: 32cqw;\n height: 20cqw;\n flex-shrink: 0;\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n}\n","import { hasSlotContent, loc } from '@/utils';\nimport {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n getAssetPath,\n Host,\n Prop,\n State,\n h,\n} from '@stencil/core';\n\n/\n @name Card Image\n * @summary Displays a visual representation of a credit or debit card with customizable styling\n * and card details. Supports horizontal and vertical orientations with responsive sizing\n * that adapts content visibility based on container width.\n \n @slot action - An optional slot for interactive elements. Supported elements:\n * - [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/) —\n * Renders in the top-right corner. Only visible at large and medium sizes.\n \n /\n@Component({ tag: 'q2-card-image', shadow: true, styleUrl: 'q2-card-image.scss', assetsDirs: ['assets'] })\nexport class Q2CardImage implements ComponentInterface {\n // #region Own Properties\n\n private predefinedBackgrounds = ['primary', 'secondary', 'tertiary', 'gradient'];\n private resizeObserver: ResizeObserver;\n private sizeBreakpoints = {\n vertical: { large: 176, medium: 113, small: 63 },\n horizontal: { large: 281, medium: 181, small: 100 },\n };\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 computedSize: 'large' \| 'medium' \| 'small' \| 'tiny' = 'medium';\n\n // #endregion\n // #region Public Property API\n\n /*\n Accessible label for the card image. When provided, this value is applied as `aria-label`\n * on either the card container (non-clickable) or the wrapping button (clickable).\n /\n @Prop({ reflect: false })\n accessibilityLabel?: string;\n\n /\n Background style for the base layer.\n * - `'primary'` \| `'secondary'` \| `'tertiary'`: Solid theme colors\n * - `'gradient'`: Grayscale gradient (themable via CSS variables)\n * - Custom string: URL/path to an image file (SVG, PNG, JPG)\n /\n @Prop({ reflect: true })\n background: 'primary' \| 'secondary' \| 'tertiary' \| 'gradient' \| string = 'primary';\n\n /\n The card holder name to display on the card. Only rendered at large and medium sizes.\n * When not provided, neither the label nor the name is displayed.\n /\n @Prop({ reflect: false })\n cardHolder?: string;\n\n /\n Controls whether the \"CARD HOLDER\" label is displayed above the card holder name.\n * The label is only supported at large size. At medium size, only the name is shown\n * regardless of this prop. When `false`, only the name is shown without the label.\n /\n @Prop({ reflect: false })\n cardHolderLabel: boolean = true;\n\n /\n The card number to display. Only the last 4 characters are used, prefixed with `** ** `.\n * The last 4 characters must all be digits; otherwise the card number is not displayed.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n cardNumber?: string;\n\n /\n The status of the card. When set, renders a status banner at the top of the card for card sizes medium and up.\n /\n @Prop({ reflect: true })\n cardStatus?: 'digital' \| 'enabled' \| 'disabled' \| 'locked' \| 'damaged' \| 'lost' \| 'stolen' \| 'lost or stolen';\n\n /\n The card type label displayed alongside the expiration date. Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n cardType?: 'atm' \| 'debit';\n\n /\n The color of the card type text. Only applies when `cardType` is set.\n /\n @Prop({ reflect: false })\n cardTypeColor?: 'black' \| 'white';\n\n /\n The chip style displayed on the card. Not rendered at tiny size.\n * - `'gold'`: Gold/brass colored EMV chip\n * - `'silver'`: Silver/platinum colored EMV chip\n /\n @Prop({ reflect: false })\n chip?: 'gold' \| 'silver';\n\n /\n If `true`, the card image is wrapped in a `q2-btn` to handle click interactions.\n /\n @Prop({ reflect: true })\n clickable: boolean = false;\n\n /\n If `true`, the card image is visually disabled and not clickable. Does not affect the dropdown.\n /\n @Prop({ reflect: true })\n disabled: boolean = false;\n\n /\n The expiration date of the card in ISO 8601 extended format (`YYYY-MM`).\n * Displayed as `MM / YY` on the card. Only rendered at large and medium sizes.\n * When not provided, neither the label nor the date value is displayed.\n /\n @Prop({ reflect: false })\n expirationDate?: string;\n\n /\n Controls whether the \"EXPIRES\" label is displayed above the expiration date.\n * The label is only supported at large size. At medium size, only the date value is shown\n * regardless of this prop. When `false`, only the date value is shown without the label.\n /\n @Prop({ reflect: false })\n expirationDateLabel: boolean = true;\n\n /\n Path to the financial institution logo image (SVG, PNG, or JPG).\n * Max display dimensions: 280x45 for horizontal cards, 250x45 for vertical cards.\n * When not provided, an empty placeholder div is rendered to maintain consistent card structure.\n /\n @Prop({ reflect: false })\n fiLogo?: string;\n\n /\n If `true`, the component uses `display: inline-block`. If `false`, uses `display: block`.\n /\n @Prop({ reflect: true })\n inline: boolean = false;\n\n /\n The orientation of the card image.\n /\n @Prop({ reflect: false })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Background style for the overlay layer. When undefined, the overlay is not rendered.\n * - `'dot'`: CSS-generated dot pattern with mix-blend-mode overlay (themable via CSS variables)\n * - Custom string: URL/path to an image file (SVG, PNG, JPG)\n /\n @Prop({ reflect: true })\n overlay?: 'dot' \| string;\n\n /\n Overrides the default status banner text (which is the cardStatus value in uppercase).\n * Maximum 14 characters (including spaces) to ensure the text fits within the banner.\n /\n @Prop({ reflect: false })\n statusTextOverride?: string;\n\n /\n The card vendor. Renders the vendor logo in the bottom-right of the card.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: true })\n vendor?: 'mastercard' \| 'visa';\n\n /\n The color variant of the vendor logo. Only applies when `vendor` is set.\n * Defaults to `'white'` for Visa and `'brand'` for Mastercard.\n /\n @Prop({ reflect: false })\n vendorColor?: 'black' \| 'brand' \| 'white';\n\n /\n Path to a custom vendor logo image (SVG, PNG, or JPG).\n * When set, this overrides the `vendor` prop and displays the custom logo.\n * Not rendered at tiny size.\n /\n @Prop({ reflect: false })\n vendorLogo?: string;\n\n // #endregion\n // #region Events\n\n /* Emitted when a clickable card is clicked. Contains card details. /\n @Event()\n tctClick: EventEmitter<{\n cardNumber: string \| undefined;\n cardStatus: string \| undefined;\n statusTextOverride: string \| undefined;\n cardHolder: string \| undefined;\n expirationDate: string \| undefined;\n cardType: string \| undefined;\n vendor: string \| undefined;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n }\n\n componentWillLoad(): void {\n if (typeof window !== 'undefined' && 'ResizeObserver' in window) {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n }\n }\n\n componentDidLoad(): void {\n this.resizeObserver?.observe(this.hostElement);\n const width = this.hostElement.getBoundingClientRect().width;\n if (width > 0) {\n this.computedSize = this.computeSizeFromWidth(width);\n }\n }\n\n componentDidRender(): void {\n this.handleDropdownElement();\n }\n\n // #endregion\n // #region Local Methods\n\n get hasActionSlotContent() {\n return hasSlotContent(this.hostElement, 'action');\n }\n\n private get isDecorative(): boolean {\n return this.size === 'tiny' && !this.clickable;\n }\n\n private get size(): 'large' \| 'medium' \| 'small' \| 'tiny' {\n return this.computedSize;\n }\n\n /\n Computes the display size from the container's current width.\n * Breakpoints represent the minimum widths at which certain card elements are applied to the layout.\n /\n private computeSizeFromWidth(width: number): 'large' \| 'medium' \| 'small' \| 'tiny' {\n if (this.orientation === 'vertical') {\n if (width >= this.sizeBreakpoints.vertical.large) return 'large';\n if (width >= this.sizeBreakpoints.vertical.medium) return 'medium';\n if (width >= this.sizeBreakpoints.vertical.small) return 'small';\n return 'tiny';\n }\n if (width >= this.sizeBreakpoints.horizontal.large) return 'large';\n if (width >= this.sizeBreakpoints.horizontal.medium) return 'medium';\n if (width >= this.sizeBreakpoints.horizontal.small) return 'small';\n return 'tiny';\n }\n\n /\n Generates inline styles for the base layer when using a custom image URL.\n /\n private getBaseStyles(): Record<string, string> {\n if (!this.isPredefinedBackground(this.background)) {\n return { '--tct-card-image-base-url': `url(${this.background})` };\n }\n return {};\n }\n\n /\n Returns the card holder name for display, or an empty string if not provided.\n * Only rendered at large and medium sizes.\n /\n private getCardHolderName(): string {\n if (!this.cardHolder \|\| this.size === 'small' \|\| this.size === 'tiny') return '';\n return this.cardHolder;\n }\n\n /\n Returns inline styles for the card type text color.\n /\n private getCardTypeColorStyle(): Record<string, string> {\n if (!this.cardType \|\| !this.cardTypeColor) return {};\n return { '--tct-card-image-type-color': this.cardTypeColor === 'black' ? '#2E2E2E' : '#fff' };\n }\n\n /\n Returns the card type text (ATM or DEBIT) for display, or null if not set.\n /\n private getCardTypeText(): string \| null {\n if (!this.cardType \|\| this.size === 'tiny') return null;\n return this.cardType.toUpperCase();\n }\n\n /\n Returns the resolved file path for the chip SVG, or null if no chip is set.\n /\n private getChipPath(orientation: 'horizontal' \| 'vertical'): string \| null {\n if (!this.chip \|\| this.size === 'tiny') return null;\n const suffix = orientation === 'vertical' ? '-vertical' : '';\n const chipFile = this.chip === 'gold' ? `chip-gold${suffix}.svg` : `chip-silver${suffix}.svg`;\n return getAssetPath(`assets/card-chip/${chipFile}`);\n }\n\n /\n Returns the formatted card number for display, or an empty string if invalid.\n * Extracts the last 4 characters and validates they are all digits.\n /\n private getFormattedCardNumber(): string {\n if (!this.cardNumber \|\| this.cardNumber.length < 4 \|\| this.size === 'tiny') return '';\n const lastFour = this.cardNumber.slice(-4);\n if (!/^\\d{4}$/.test(lastFour)) return '';\n if (this.size === 'large' \|\| this.size === 'medium') {\n return `* ${lastFour}`;\n } else {\n return ` ${lastFour}`;\n }\n }\n\n /\n * Returns the formatted expiration date for display as `MM / YY`, or an empty string if invalid.\n * Accepts ISO 8601 extended format `YYYY-MM`.\n * Only rendered at large and medium sizes.\n /\n private getFormattedExpirationDate(): string {\n if (!this.expirationDate \|\| this.size === 'small' \|\| this.size === 'tiny') return '';\n const match = this.expirationDate.match(/^(\\d{4})-(\\d{2})$/);\n if (!match) return '';\n const year = match[1].slice(-2);\n const month = match[2];\n return `${month} / ${year}`;\n }\n\n /\n Returns the last 4 digits of the card number, or undefined if not set or invalid.\n /\n private getLastFour(): string \| undefined {\n if (!this.cardNumber \|\| this.cardNumber.length < 4) return undefined;\n const lastFour = this.cardNumber.slice(-4);\n return /^\\d{4}$/.test(lastFour) ? lastFour : undefined;\n }\n\n /\n Generates inline styles for the overlay layer when using a custom image URL.\n /\n private getOverlayStyles(): Record<string, string> {\n if (this.overlay && !this.isDotOverlay(this.overlay)) {\n return { '--tct-card-image-overlay-url': `url(${this.overlay})` };\n }\n return {};\n }\n\n /\n Returns the display text for the status banner.\n /\n private getStatusText(): string {\n return this.statusTextOverride \|\| this.cardStatus.toUpperCase();\n }\n\n /\n Returns the resolved file path for the vendor logo SVG, or null if no vendor is set.\n * Custom vendorLogo takes precedence over the vendor prop.\n /\n private getVendorPath(): string \| null {\n if (this.size === 'tiny') return null;\n // Custom vendor logo takes precedence\n if (this.vendorLogo) return this.vendorLogo;\n if (!this.vendor) return null;\n const color = this.vendorColor ?? (this.vendor === 'visa' ? 'white' : 'brand');\n const vendorPrefix = this.vendor === 'mastercard' ? 'mc' : 'visa';\n return getAssetPath(`assets/card-vendor/${vendorPrefix}-${color}.svg`);\n }\n\n /\n Emits the tctClick event with card detail data.\n /\n private handleCardClick = () => {\n this.tctClick.emit({\n cardNumber: this.getLastFour(),\n cardStatus: this.cardStatus,\n statusTextOverride: this.statusTextOverride,\n cardHolder: this.cardHolder,\n expirationDate: this.expirationDate,\n cardType: this.cardType,\n vendor: this.vendor,\n });\n };\n\n /\n Validates and normalizes the action slot content.\n * Only allows a single q2-dropdown element with circular icon-only styling.\n /\n private handleDropdownElement() {\n if (!('HTMLSlotElement' in window)) return;\n const actionSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action\"]');\n const actionElements = actionSlot?.assignedElements({ flatten: true }) \|\| [];\n actionElements.forEach((el: HTMLElement, index) => {\n if (el.tagName !== 'Q2-DROPDOWN' \|\| index > 0) {\n el.remove();\n console.warn('Q2-CARD-IMAGE: Only one Q2-DROPDOWN is allowed in the action slot.');\n return;\n }\n // Force circular styling with filled background and downward opening\n el.setAttribute('type', 'neutral');\n el.setAttribute('popover-alignment', 'right');\n el.setAttribute('popover-direction', 'down');\n el.style.setProperty('--tct-btn-border-radius', '50%');\n el.setAttribute('hide-label', 'true');\n });\n }\n\n /\n Handles ResizeObserver entries and updates the computed size.\n /\n private handleResize = (entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const newSize = this.computeSizeFromWidth(entry.contentRect.width);\n if (newSize !== this.computedSize) {\n this.computedSize = newSize;\n }\n }\n };\n\n /\n Determines if the overlay value is the 'dot' pattern or a custom URL.\n /\n private isDotOverlay(value: string \| undefined): value is 'dot' {\n return value === 'dot';\n }\n\n /\n Determines if the background value is a predefined type or a custom URL.\n /\n private isPredefinedBackground(\n value: string \| undefined\n ): value is 'primary' \| 'secondary' \| 'tertiary' \| 'gradient' {\n return !!value && this.predefinedBackgrounds.includes(value);\n }\n\n /\n Returns whether the card holder label should be shown.\n * Only displayed at large size and when cardHolderLabel is true.\n /\n private showCardHolderLabel(): boolean {\n return this.cardHolderLabel && this.size === 'large' && !!this.getCardHolderName();\n }\n\n /\n Returns whether the expiration date label should be shown.\n * Only displayed at large size and when expirationDateLabel is true.\n */\n private showExpirationDateLabel(): boolean {\n return this.expirationDateLabel && this.size === 'large' && !!this.getFormattedExpirationDate();\n }\n\n // #endregion\n // #region Render Methods\n\n private renderAction() {\n if (!this.hasActionSlotContent \|\| this.size === 'small' \|\| this.size === 'tiny') return null;\n return (\n <div class=\"card-action\">\n <slot name=\"action\" />\n </div>\n );\n }\n\n private renderCardContent() {\n const cardDetails =\n this.orientation === 'horizontal' ? this.renderHorizontalCardDetails() : this.renderVerticalCardDetails();\n return (\n <div\n role={!this.isDecorative && !this.clickable ? 'img' : undefined}\n aria-label={!this.isDecorative && !this.clickable ? this.accessibilityLabel : undefined}\n aria-hidden={this.isDecorative \|\| this.clickable ? 'true' : undefined}\n class={{\n 'card-image-container': true,\n block: !this.inline,\n clickable: this.clickable && !this.disabled,\n inline: this.inline,\n [`${this.orientation}`]: true,\n }}\n >\n <div\n class={{\n 'card-image': true,\n [`bg-${this.background}`]: this.isPredefinedBackground(this.background),\n 'bg-custom': !this.isPredefinedBackground(this.background),\n }}\n style={this.getBaseStyles()}\n ></div>\n {this.overlay && (\n <div\n class={{\n 'card-image-overlay': true,\n 'bg-dot': this.isDotOverlay(this.overlay),\n 'bg-custom': !this.isDotOverlay(this.overlay),\n }}\n style={this.getOverlayStyles()}\n ></div>\n )}\n <div class=\"card-details-wrapper\">{cardDetails}</div>\n </div>\n );\n }\n\n private renderHorizontalCardDetails() {\n const logoStyle = this.fiLogo ? { '--tct-card-image-fi-logo': `url(${this.fiLogo})` } : {};\n const chipPath = this.getChipPath('horizontal');\n const vendorPath = this.getVendorPath();\n const cardTypeColorStyle = this.getCardTypeColorStyle();\n return (\n <div class=\"card-details-horizontal\">\n <div class=\"horizontal-logo-wrapper\">\n <div\n class=\"horizontal-logo\"\n style={logoStyle}\n ></div>\n </div>\n <div class=\"horizontal-chip\">\n {chipPath && (\n <img\n src={chipPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div class=\"horizontal-card-number card-text\">{this.getFormattedCardNumber()}</div>\n <div class=\"horizontal-exp-date-card-type-row\">\n <div class=\"horizontal-exp-date-wrapper\">\n {this.showExpirationDateLabel() && (\n <div class=\"horizontal-exp-date-label card-text\">\n {loc('tecton.element.cardImage.expires')}\n </div>\n )}\n {this.getFormattedExpirationDate() && (\n <div class=\"horizontal-exp-date-value card-text\">{this.getFormattedExpirationDate()}</div>\n )}\n </div>\n <div\n class={{\n 'horizontal-card-type': true,\n 'card-text': true,\n 'vendor-mastercard': this.vendor === 'mastercard',\n 'vendor-visa': this.vendor === 'visa',\n }}\n style={cardTypeColorStyle}\n >\n {this.getCardTypeText()}\n </div>\n </div>\n <div class=\"horizontal-card-holder-vendor-row\">\n <div class=\"horizontal-card-holder-wrapper\">\n {this.showCardHolderLabel() && (\n <div class=\"horizontal-card-holder-label card-text\">\n {loc('tecton.element.cardImage.cardHolder')}\n </div>\n )}\n {this.getCardHolderName() && (\n <div class=\"horizontal-card-holder-value card-text\">{this.getCardHolderName()}</div>\n )}\n </div>\n <div class=\"horizontal-vendor\">\n {vendorPath && (\n <img\n src={vendorPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </div>\n </div>\n );\n }\n\n private renderStatusBanner() {\n if (!this.cardStatus \|\| this.size !== 'large') return null;\n return (\n <div\n class={{\n 'card-status-banner': true,\n [`status-${this.cardStatus.replace(/\\s+/g, '-')}`]: true,\n [this.orientation]: true,\n clickable: this.clickable && !this.disabled,\n }}\n onClick={this.clickable && !this.disabled ? this.handleCardClick : undefined}\n >\n <span class=\"card-status-text\">{this.getStatusText()}</span>\n </div>\n );\n }\n\n private renderVerticalCardDetails() {\n const logoStyle = this.fiLogo ? { '--tct-card-image-fi-logo': `url(${this.fiLogo})` } : {};\n const chipPath = this.getChipPath('vertical');\n const vendorPath = this.getVendorPath();\n const cardTypeColorStyle = this.getCardTypeColorStyle();\n return (\n <div class=\"card-details-vertical\">\n <div class=\"vertical-chip\">\n {chipPath && (\n <img\n src={chipPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div class=\"vertical-logo-wrapper\">\n <div\n class=\"vertical-logo\"\n style={logoStyle}\n ></div>\n </div>\n <div class=\"vertical-card-number card-text\">{this.getFormattedCardNumber()}</div>\n <div class=\"vertical-card-holder-wrapper\">\n {this.showCardHolderLabel() && (\n <div class=\"vertical-card-holder-label card-text\">\n {loc('tecton.element.cardImage.cardHolder')}\n </div>\n )}\n {this.getCardHolderName() && (\n <div class=\"vertical-card-holder-value card-text\">{this.getCardHolderName()}</div>\n )}\n </div>\n <div class=\"vertical-exp-date-card-type-row\">\n <div class=\"vertical-exp-date-wrapper\">\n {this.showExpirationDateLabel() && (\n <div class=\"vertical-exp-date-label card-text\">\n {loc('tecton.element.cardImage.expires')}\n </div>\n )}\n {this.getFormattedExpirationDate() && (\n <div class=\"vertical-exp-date-value card-text\">{this.getFormattedExpirationDate()}</div>\n )}\n </div>\n <div\n class={{\n 'vertical-card-type': true,\n 'card-text': true,\n 'vendor-mastercard': this.vendor === 'mastercard',\n 'vendor-visa': this.vendor === 'visa',\n }}\n style={cardTypeColorStyle}\n >\n {this.getCardTypeText()}\n </div>\n </div>\n <div class=\"vertical-vendor-row\">\n <div class=\"vertical-vendor\">\n {vendorPath && (\n <img\n src={vendorPath}\n alt=\"\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </div>\n </div>\n );\n }\n\n render() {\n const cardContent = this.clickable ? (\n <q2-btn\n disabled={this.disabled}\n label={this.accessibilityLabel}\n hideLabel={true}\n onClick={this.handleCardClick}\n >\n {this.renderCardContent()}\n </q2-btn>\n ) : (\n this.renderCardContent()\n );\n\n const showBanner = !!this.cardStatus && this.size === 'large';\n\n return (\n <Host\n class={{\n [`${this.orientation}`]: true,\n 'has-action': this.hasActionSlotContent,\n 'has-banner': showBanner,\n }}\n >\n {this.renderStatusBanner()}\n <div class=\"card-wrapper\">\n {cardContent}\n {this.renderAction()}\n </div>\n </Host>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-card.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { m as mirrorEmit } from './mirror-emit.js';
 import { d as defineCustomElement$3 } from './q2-avatar2.js';
 import { d as defineCustomElement$2 } from './q2-icon2.js';
-const q2CardCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));position:relative;width:100%;text-align:start;height:var(--tct-card-height, 100%);min-height:var(--tct-card-min-height, auto);display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-font-color, var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d))));backdrop-filter:var(--tct-card-backdrop-filter);background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));backdrop-filter:var(--tct-card-backdrop-filter, none);padding:var(--comp-card-padding);text-decoration:none;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));overflow:var(--tct-card-overflow, auto);max-height:var(--tct-card-max-height, none);box-shadow:var(--comp-card-shadow), 0 0 0 rgba(0, 0, 0, 0)}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}.container.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}.container.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable{cursor:pointer}.container.clickable:hover.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-hover-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-hover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-hover-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-active-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-active-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-active-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.clickable:focus-visible{--comp-focus-visible-shadow:var(--comp-card-shadow), var(--const-double-focus-ring);box-shadow:var(--tct-card-focus-visible-box-shadow, var(--comp-focus-visible-shadow))}.container.is-static{cursor:auto;background:var(--tct-card-static-background, var(--tct-card-background, none));color:var(--tct-card-static-font-color, var(--tct-card-color, var(--t-text, #4d4d4d)));backdrop-filter:none;border-radius:0;border:0;text-decoration:initial;padding:0}:host([bar]) .container.is-static{padding-left:var(--comp-card-padding)}.container.is-static,.container.is-static:hover,.container.is-static:active{box-shadow:none}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-title-line-count, 1);-webkit-box-orient:vertical}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-description-line-count, 2);-webkit-box-orient:vertical}.bar{position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}";
+const q2CardCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));position:relative;width:100%;text-align:start;height:var(--tct-card-height, 100%);min-height:var(--tct-card-min-height, auto);display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-font-color, var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d))));backdrop-filter:var(--tct-card-backdrop-filter);background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));backdrop-filter:var(--tct-card-backdrop-filter, none);padding:var(--comp-card-padding);text-decoration:none;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));overflow:var(--tct-card-overflow, auto);max-height:var(--tct-card-max-height, none);box-shadow:var(--comp-card-shadow), 0 0 0 rgba(0, 0, 0, 0)}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}.container.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}.container.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable{cursor:pointer}.container.clickable:hover.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-hover-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-hover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-hover-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable:hover.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-hover-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-1{--comp-card-shadow:var(--tct-card-elevation-1-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-2{--comp-card-shadow:var(--tct-card-elevation-2-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-3{--comp-card-shadow:var(--tct-card-elevation-3-active-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-4{--comp-card-shadow:var(--tct-card-elevation-4-active-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}.container.clickable:active.elevation-5{--comp-card-shadow:var(--tct-card-elevation-5-active-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}.container.clickable:focus-visible{--comp-focus-visible-shadow:var(--comp-card-shadow), var(--const-double-focus-ring);box-shadow:var(--tct-card-focus-visible-box-shadow, var(--comp-focus-visible-shadow))}.container.is-static{cursor:auto;background:var(--tct-card-static-background, var(--tct-card-background, none));color:var(--tct-card-static-font-color, var(--tct-card-color, var(--t-text, #4d4d4d)));backdrop-filter:none;border-radius:0;border:0;text-decoration:initial;padding:0}:host([bar]) .container.is-static{padding-left:var(--comp-card-padding)}.container.is-static,.container.is-static:hover,.container.is-static:active{box-shadow:none}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-title-line-count, 1);-webkit-box-orient:vertical}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-description-line-count, 2);-webkit-box-orient:vertical;font-size:var(--tct-card-description-font-size, inherit)}.bar{position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}";
 const PREDEFINED_COLORS = [
     'primary',

package/dist/components/q2-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-card.js","mappings":"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","names":["Q2Card","__stencil_proxyCustomElement"],"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';\nimport mirrorEmit from '@/utils/mirror-emit';\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/*\n @name Card\n * @category Display\n * @summary Use for grouping related content in a contained, elevated surface.\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 /\n Emitted when the card is clicked and the `url` property is not provided.\n * @deprecated Use 'tctClick' instead\n /\n @Event()\n click: EventEmitter<undefined>;\n\n /\n Emitted when the card is clicked and the `url` property is not provided.\n */\n @Event()\n tctClick: 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 mirrorEmit(this, ['click', 'tctClick'], undefined);\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-card.js","mappings":"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","names":["Q2Card","__stencil_proxyCustomElement"],"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 font-size: var(--tct-card-description-font-size, inherit);\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';\nimport mirrorEmit from '@/utils/mirror-emit';\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/*\n @name Card\n * @category Display\n * @summary Use for grouping related content in a contained, elevated surface.\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 /\n Emitted when the card is clicked and the `url` property is not provided.\n * @deprecated Use 'tctClick' instead\n /\n @Event()\n click: EventEmitter<undefined>;\n\n /\n Emitted when the card is clicked and the `url` property is not provided.\n */\n @Event()\n tctClick: 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 mirrorEmit(this, ['click', 'tctClick'], undefined);\n };\n\n isBarColorPredefined() {\n return PREDEFINED_COLORS.includes(this.bar);\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const { url, isStatic, type } = this;\n if (isStatic \|\| type === 'non-clickable')\n return (\n <div\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n >\n {this.generateContent()}\n </div>\n );\n else if (!!url)\n return (\n <a\n ref={e => (this.clickableElement = e)}\n href={this.url}\n class={this.generateContainerClasses()}\n target={this.target}\n rel=\"noopener noreferrer\"\n test-id=\"clickableElement\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </a>\n );\n else\n return (\n <button\n ref={e => (this.clickableElement = e)}\n class={this.generateContainerClasses()}\n test-id=\"clickableElement\"\n type=\"button\"\n onClick={this.handleClick}\n >\n {this.generateContent()}\n </button>\n );\n }\n\n // #endregion\n}\n"],"version":3}

package/dist/components/q2-carousel-pane.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as hasValidParent } from './component.js';
 import { l as loc } from './index2.js';
 import { m as mirrorEmit } from './mirror-emit.js';
-const q2CarouselPaneCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus-visible{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus-visible .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";
+const q2CarouselPaneCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content,q2-carousel .q2-carousel-swiper-container.frameless-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-background, var(--app-base, #ffffff))}q2-carousel .q2-carousel-swiper-container.full-width-display q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow))}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content{background:var(--tct-carousel-pane-inactive-background, var(--tct-carousel-background, var(--app-base, #ffffff)));box-shadow:var(--tct-carousel-pane-inactive-box-shadow, var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow)))}q2-carousel-pane.q2-carousel-pane:focus-visible{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus-visible .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";
 const Q2CarouselPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2CarouselPane extends HTMLElement {
     constructor() {
@@ -41,6 +42,9 @@ const Q2CarouselPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2CarouselPane e
         }
         this.removePointerMoveListeners();
     }
+    componentWillLoad() {
+        hasValidParent(this.hostElement, 'div.q2-carousel-swiper-wrapper');
+    }
     componentDidLoad() {
         this.determineDisabledContent();
         this.addPointerMoveListeners();
@@ -95,12 +99,12 @@ const Q2CarouselPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2CarouselPane e
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: '206bc8e172f7ded830f49cac340c27ecb96e2e87', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (h(Host, { key: 'c321264b11e25ec101280695fd2f869b92a18e26', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? loc(label)
                 : loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, h("article", { key: 'd98467abd35b1a54fc49caefbbffb6d824d54471', class: "q2-carousel-pane-main-content" }, h("slot", { key: '55d3059eaf742f8f8ce76b463c4a6e79e532285a' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: 'c506d1bdbbd434483a9447cce1a898b540cac6f2', class: "q2-carousel-pane-main-content" }, h("slot", { key: '406d356278c375ff44431c9df2cad1acac933be2' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {