q2-tecton-elements 1.62.6 → 1.63.0

package/dist/cjs/q2-card.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-BuXzB2ML.js');
+var index$1 = require('./index-CyqXtdz-.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{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);--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--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)))}.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)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host([is-static]:not([is-static=false])) .container{background:var(--tct-card-static-background, var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff))));color:var(--tct-card-static-font-color, var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d))))}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));backdrop-filter:var(--tct-card-backdrop-filter, none);padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-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))))}:host(:not([is-static])) .container.clickable:focus-visible{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--tct-card-focus-visible-box-shadow, var(--const-double-focus-ring))}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-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))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.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{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);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))}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
+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 PREDEFINED_COLORS = [
     'primary',
@@ -30,17 +30,13 @@ const Q2Card = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.click = index.createEvent(this, "click", 7);
-        // #endregion
-        // #region State Properties
-        this.isAutoSmall = false;
-        this.isAutoTouch = false;
         /**
-         * Display the card with a view optimized for touch displays.
+         * The size of the box-shadow applied to the component, giving it a sense of depth.
          *
          * @info
-         * This will be determined automatically if the attribute is not manually provided.
+         * Set to `0` to disable.
          */
-        this.isTouch = index$1.isTouchDevice();
+        this.elevation = 2;
         /** Alters the interactive behavior of the card while maintaining visual appearance. */
         this.type = 'clickable';
         this.handleClick = (event) => {
@@ -53,17 +49,20 @@ const Q2Card = class {
     }
     // #endregion
     // #region Component Lifecycle Events
-    disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.resizeObserver = null;
-    }
     componentDidLoad() {
         const { hostElement, clickableElement } = this;
         hostElement.click = () => clickableElement.click();
         index$1.overrideFocus(this.hostElement);
-        this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());
-        this.resizeObserver.observe(this.hostElement);
+    }
+    disconnectedCallback() {
+        // Clean up manual click override
+        if (this.hostElement) {
+            this.hostElement.click = null;
+        }
+        // Nullify DOM references
+        this.avatarElement = null;
+        this.clickableElement = null;
+        this.containerElement = null;
     }
     // #endregion
     // #region Listeners
@@ -74,23 +73,6 @@ const Q2Card = class {
     }
     // #endregion
     // #region Local Methods
-    determineAutoSmall() {
-        var _a, _b;
-        if (this.isStatic)
-            return;
-        if (this.hostElement.hasAttribute('is-small'))
-            return;
-        const { containerElement, avatarElement } = this;
-        const avatarWidth = (_a = avatarElement === null || avatarElement === void 0 ? void 0 : avatarElement.offsetWidth) !== null && _a !== void 0 ? _a : 0;
-        const containerWidth = (_b = containerElement === null || containerElement === void 0 ? void 0 : containerElement.offsetWidth) !== null && _b !== void 0 ? _b : 0;
-        const totalWidth = avatarWidth + containerWidth;
-        this.isAutoSmall = totalWidth < 350;
-    }
-    determineAutoTouch() {
-        if (this.hostElement.hasAttribute('is-touch'))
-            return;
-        this.isAutoTouch = index$1.isTouchDevice();
-    }
     generateAvatar() {
         const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;
         if (avatarIcon) {
@@ -101,23 +83,21 @@ const Q2Card = class {
         }
     }
     generateContainerClasses() {
-        const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch, isStatic, type, } = this;
+        const { isSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isStatic, type, elevation } = this;
         const result = ['container', type];
-        const showSmall = isSmall || isAutoSmall;
-        const showTouch = isTouch || isAutoTouch;
         const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;
-        if (showSmall)
+        if (isSmall)
             result.push('is-small');
-        if (showTouch && !isStatic)
-            result.push('is-touch');
         if (hasAvatar)
             result.push('has-avatar');
         if (isStatic)
             result.push('is-static');
+        if (!isStatic && elevation && elevation > 0)
+            result.push(`elevation-${elevation}`);
         return result.join(' ');
     }
     generateContent() {
-        return (index.h(index.Fragment, null, this.bar && (index.h("div", { class: this.getBarClasses(), "test-id": "bar", style: this.getBarStyles() })), this.generateAvatar(), index.h("div", { class: "content", "test-id": "contentContainer", ref: e => (this.containerElement = e) }, this.title && index.h("h3", { "test-id": "title" }, this.title), this.description && index.h("p", { "test-id": "description" }, this.description), index.h("slot", null)), this.isTouch && !this.isStatic && (index.h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
+        return (index.h(index.Fragment, null, this.bar && (index.h("div", { class: this.getBarClasses(), "test-id": "bar", style: this.getBarStyles() })), this.generateAvatar(), index.h("div", { class: "content", "test-id": "contentContainer", ref: e => (this.containerElement = e) }, this.title && index.h("h3", { "test-id": "title" }, this.title), this.description && index.h("p", { "test-id": "description" }, this.description), index.h("slot", null))));
     }
     getBarClasses() {
         const { bar } = this;

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

@@ -1 +1 @@
-{"file":"q2-card.entry.cjs.js","mappings":"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","names":["isTouchDevice","overrideFocus","isEventFromElement","h","Fragment"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    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    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-chevron-size: 0;\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    &.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    :host([bar][is-static]) & {\n        padding-left: var(--comp-card-padding);\n    }\n\n    :host([is-static]:not([is-static='false'])) & {\n        background: var-list(--tct-card-static-background, var-prefixer(card-background), --t-base, #ffffff);\n        color: var-list(--tct-card-static-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n    }\n\n    :host(:not([is-static])) & {\n        --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n        --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n        border: none;\n        background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n        backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n        padding: var(--comp-card-padding);\n        text-decoration: none;\n        border-width: var(--comp-border-width);\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(--comp-border-radius);\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        box-shadow: var-list(\n            var-prefixer(card-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        &.clickable {\n            cursor: pointer;\n            @media (hover: hover) {\n                --comp-card-hover-box-shadow: #{var-list(\n                        var-prefixer(card-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                &:focus-visible {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var-list(--tct-card-focus-visible-box-shadow, --const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:active {\n                    box-shadow: var-list(\n                        var-prefixer(card-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            }\n        }\n\n        &.is-touch {\n            --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n            grid-template-columns: 1fr var(--comp-chevron-size);\n        }\n\n        &.has-avatar.is-touch {\n            grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\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    --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n    border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\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\n.touch-indicator {\n    align-self: center;\n    --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Event,\n    h,\n    Fragment,\n    Listen,\n    Element,\n    EventEmitter,\n    State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'info',\n    'success',\n    'warning',\n    'alert',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n    // #region Own Properties\n\n    avatarElement: HTMLElement;\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n    resizeObserver: ResizeObserver;\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    isAutoSmall: boolean = false;\n\n    @State()\n    isAutoTouch: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. */\n    @Prop({ reflect: true })\n    avatarIcon: string;\n\n    /** The initials to be placed in the avatar of the card. */\n    @Prop({ reflect: true })\n    avatarInitials: string;\n\n    /** The name to be used for the avatar of the card which will be converted to initials. */\n    @Prop({ reflect: true })\n    avatarName: string;\n\n    /** The source of the image to be displayed in the avatar location. */\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    /** The description of the card (truncated after two lines). */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Display the card with a view optimized for smaller displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isSmall: boolean;\n\n    /** Display the card with no borders, padding, drop-shadows, or clickable behavior. */\n    @Prop({ reflect: true })\n    isStatic: boolean;\n\n    /**\n     * Display the card with a view optimized for touch displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isTouch: boolean = isTouchDevice();\n\n    /** Target to be applied to the link when a URL is provided. */\n    @Prop({ reflect: true })\n    target: '_self' | '_blank' | '_parent' | '_top';\n\n    /** The title of the card. */\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    /** URL to navigate the user to when the card is clicked. */\n    @Prop({ reflect: true })\n    url: string;\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the card is clicked and the `url` property is not provided. */\n    @Event()\n    click: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n\n        this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n        this.resizeObserver.observe(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    determineAutoSmall() {\n        if (this.isStatic) return;\n        if (this.hostElement.hasAttribute('is-small')) return;\n        const { containerElement, avatarElement } = this;\n        const avatarWidth = avatarElement?.offsetWidth ?? 0;\n        const containerWidth = containerElement?.offsetWidth ?? 0;\n        const totalWidth = avatarWidth + containerWidth;\n        this.isAutoSmall = totalWidth < 350;\n    }\n\n    determineAutoTouch() {\n        if (this.hostElement.hasAttribute('is-touch')) return;\n        this.isAutoTouch = isTouchDevice();\n    }\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 {\n            isSmall,\n            isAutoSmall,\n            avatarName,\n            avatarInitials,\n            avatarSrc,\n            avatarIcon,\n            isTouch,\n            isAutoTouch,\n            isStatic,\n            type,\n        } = this;\n        const result = ['container', type];\n        const showSmall = isSmall || isAutoSmall;\n        const showTouch = isTouch || isAutoTouch;\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (showSmall) result.push('is-small');\n        if (showTouch && !isStatic) result.push('is-touch');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\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                {this.isTouch && !this.isStatic && (\n                    <q2-icon\n                        test-id=\"touchIndicator\"\n                        type=\"chevron-right\"\n                        class=\"touch-indicator\"\n                    ></q2-icon>\n                )}\n            </Fragment>\n        );\n    }\n\n    getBarClasses() {\n        const { bar } = this;\n\n        return {\n            bar: true,\n            [`color-${bar}`]: this.isBarColorPredefined(),\n        };\n    }\n\n    getBarStyles() {\n        const { bar } = this;\n\n        return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    isBarColorPredefined() {\n        return PREDEFINED_COLORS.includes(this.bar);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-card.entry.cjs.js","mappings":"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","names":["overrideFocus","isEventFromElement","h","Fragment"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n    --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n    position: relative;\n    width: 100%;\n    text-align: start;\n    height: var-list(--tct-card-height, 100%);\n    min-height: var-list(--tct-card-min-height, auto);\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(--tct-card-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n    backdrop-filter: var(--tct-card-backdrop-filter);\n\n    background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n    border-width: var-list(var-prefixer(card-border-width), 0px);\n    border-color: var-list(var-prefixer(card-border-color), transparent);\n    border-style: var-list(--tct-card-border-style, solid);\n    border-radius: var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px);\n    backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n    padding: var(--comp-card-padding);\n    text-decoration: none;\n    transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: var(--tct-card-overflow, auto);\n    max-height: var-list(--tct-card-max-height, none);\n    box-shadow:\n        var(--comp-card-shadow),\n        0 0 0 rgba(0, 0, 0, 0);\n\n    &.is-small {\n        --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n    }\n    &.has-avatar {\n        grid-template-columns: var(--comp-avatar-size) 1fr;\n        --tct-avatar-width: var(--comp-avatar-size);\n        --tct-avatar-height: var(--comp-avatar-size);\n        --tct-icon-size: var(--comp-avatar-size);\n    }\n\n    &.elevation-1 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-1-box-shadow,\n                --app-shadow-1,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-2 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-2-box-shadow,\n                --app-shadow-2,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-3 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-3-box-shadow,\n                --app-shadow-3,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-4 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-4-box-shadow,\n                --app-shadow-4,\n                #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-5 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-5-box-shadow,\n                --app-shadow-5,\n                #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n\n    &.clickable {\n        cursor: pointer;\n\n        &:hover {\n            &.elevation-1 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-1-hover-box-shadow,\n                        --app-shadow-2,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-2 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-2-hover-box-shadow,\n                        --app-shadow-3,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-3 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-3-hover-box-shadow,\n                        --app-shadow-4,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-4 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-4-hover-box-shadow,\n                        --app-shadow-5,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-5 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-5-hover-box-shadow,\n                        --app-shadow-5,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n        }\n\n        &:active {\n            &.elevation-1 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-1-active-box-shadow,\n                        --app-shadow-1,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-2 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-2-active-box-shadow,\n                        --app-shadow-1,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-3 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-3-active-box-shadow,\n                        --app-shadow-2,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-4 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-4-active-box-shadow,\n                        --app-shadow-3,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-5 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-5-active-box-shadow,\n                        --app-shadow-4,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n        }\n        &:focus-visible {\n            --comp-focus-visible-shadow: var(--comp-card-shadow), var(--const-double-focus-ring);\n            box-shadow: var-list(--tct-card-focus-visible-box-shadow, --comp-focus-visible-shadow);\n        }\n    }\n\n    &.is-static {\n        cursor: auto;\n        background: var-list(--tct-card-static-background, --tct-card-background, none);\n        color: var-list(--tct-card-static-font-color, --tct-card-color, --t-text, #4d4d4d);\n        backdrop-filter: none;\n        border-radius: 0;\n        border: 0;\n        text-decoration: initial;\n        padding: 0;\n\n        :host([bar]) & {\n            padding-left: var(--comp-card-padding);\n        }\n\n        &,\n        &:hover,\n        &:active {\n            box-shadow: none;\n        }\n    }\n}\n\n.content {\n    overflow: hidden;\n    display: grid;\n    gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n    align-content: start;\n}\n\nh3,\np {\n    margin: 0;\n    padding: 0;\n    line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n    font-weight: var-list(var-prefixer(card-font-weight), 600);\n    font-size: var-list(var-prefixer(card-font-size), 17px);\n    @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n    @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: var(--comp-bar-width);\n    background: var(--comp-bar-color);\n    height: 100%;\n\n    &.color-primary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n    }\n\n    &.color-secondary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n    }\n\n    &.color-tertiary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n    }\n\n    &.color-info {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n    }\n\n    &.color-success {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n    }\n\n    &.color-warning {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n    }\n\n    &.color-alert {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n    }\n\n    &.color-accent-1 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n    }\n\n    &.color-accent-2 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n    }\n\n    &.color-accent-3 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n    }\n\n    &.color-accent-4 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n    }\n\n    &.color-accent-5 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n    }\n\n    &.color-accent-6 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n    }\n\n    &.color-accent-7 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n    }\n\n    &.color-accent-8 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n    }\n\n    &.color-accent-9 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n    }\n\n    &.color-accent-10 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n    }\n\n    &.color-accent-11 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n    }\n\n    &.color-accent-12 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n    }\n}\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, Listen, Element, EventEmitter } from '@stencil/core';\nimport { overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'info',\n    'success',\n    'warning',\n    'alert',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n    // #region Own Properties\n\n    avatarElement: HTMLElement;\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarIcon: string;\n\n    /**\n     * The initials to be placed in the avatar of the card.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarInitials: string;\n\n    /**\n     * The name to be used for the avatar of the card which will be converted to initials.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarName: string;\n\n    /**\n     * The source of the image to be displayed in the avatar location.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarSrc: string;\n\n    /**\n     * Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n     *\n     * - primary\n     * - secondary\n     * - tertiary\n     * - info\n     * - success\n     * - warning\n     * - alert\n     * - accent-1\n     * - accent-2\n     * - accent-3\n     * - accent-4\n     * - accent-5\n     * - accent-6\n     * - accent-7\n     * - accent-8\n     * - accent-9\n     * - accent-10\n     * - accent-11\n     * - accent-12\n     *\n     * Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n     */\n    @Prop({ reflect: true })\n    bar: string;\n\n    /**\n     * The description of the card (truncated after two lines).\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * The size of the box-shadow applied to the component, giving it a sense of depth.\n     *\n     * @info\n     * Set to `0` to disable.\n     */\n    @Prop({ reflect: true })\n    elevation: 0 | 1 | 2 | 3 | 4 | 5 = 2;\n\n    /**\n     * Display the card with a view optimized for smaller displays.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    isSmall: boolean;\n\n    /**\n     * Display the card with no borders, padding, drop-shadows, or clickable behavior.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    isStatic: boolean;\n\n    /**\n     * Target to be applied to the link when a URL is provided.\n     *\n     * @warning\n     * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n     */\n    @Prop({ reflect: true })\n    target: '_self' | '_blank' | '_parent' | '_top';\n\n    /**\n     * The title of the card.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    title: string;\n\n    /** Alters the interactive behavior of the card while maintaining visual appearance. */\n    @Prop({ reflect: true })\n    type: 'clickable' | 'non-clickable' = 'clickable';\n\n    /**\n     * URL to navigate the user to when the card is clicked.\n     *\n     * @warning\n     * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n     */\n    @Prop({ reflect: true })\n    url: string;\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the card is clicked and the `url` property is not provided. */\n    @Event()\n    click: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        // Clean up manual click override\n        if (this.hostElement) {\n            this.hostElement.click = null;\n        }\n\n        // Nullify DOM references\n        this.avatarElement = null;\n        this.clickableElement = null;\n        this.containerElement = null;\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.clickableElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    generateAvatar() {\n        const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n        if (avatarIcon) {\n            return (\n                <q2-icon\n                    type={avatarIcon}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-icon>\n            );\n        } else if (avatarName || avatarInitials || avatarSrc) {\n            return (\n                <q2-avatar\n                    name={avatarName}\n                    initials={avatarInitials}\n                    src={avatarSrc}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-avatar>\n            );\n        }\n    }\n\n    generateContainerClasses() {\n        const { isSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isStatic, type, elevation } = this;\n        const result = ['container', type];\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (isSmall) result.push('is-small');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\n        if (!isStatic && elevation && elevation > 0) result.push(`elevation-${elevation}`);\n\n        return result.join(' ');\n    }\n\n    generateContent() {\n        return (\n            <Fragment>\n                {this.bar && (\n                    <div\n                        class={this.getBarClasses()}\n                        test-id=\"bar\"\n                        style={this.getBarStyles()}\n                    ></div>\n                )}\n                {this.generateAvatar()}\n                <div\n                    class=\"content\"\n                    test-id=\"contentContainer\"\n                    ref={e => (this.containerElement = e)}\n                >\n                    {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n                    {this.description && <p test-id=\"description\">{this.description}</p>}\n                    <slot />\n                </div>\n            </Fragment>\n        );\n    }\n\n    getBarClasses() {\n        const { bar } = this;\n\n        return {\n            bar: true,\n            [`color-${bar}`]: this.isBarColorPredefined(),\n        };\n    }\n\n    getBarStyles() {\n        const { bar } = this;\n\n        return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    isBarColorPredefined() {\n        return PREDEFINED_COLORS.includes(this.bar);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n\n    // #endregion\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"version":3,"file":"q2-card.entry.cjs.js","sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    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    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-chevron-size: 0;\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    &.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    :host([bar][is-static]) & {\n        padding-left: var(--comp-card-padding);\n    }\n\n    :host([is-static]:not([is-static='false'])) & {\n        background: var-list(--tct-card-static-background, var-prefixer(card-background), --t-base, #ffffff);\n        color: var-list(--tct-card-static-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n    }\n\n    :host(:not([is-static])) & {\n        --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n        --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n        border: none;\n        background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n        backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n        padding: var(--comp-card-padding);\n        text-decoration: none;\n        border-width: var(--comp-border-width);\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(--comp-border-radius);\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        box-shadow: var-list(\n            var-prefixer(card-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        &.clickable {\n            cursor: pointer;\n            @media (hover: hover) {\n                --comp-card-hover-box-shadow: #{var-list(\n                        var-prefixer(card-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                &:focus-visible {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var-list(--tct-card-focus-visible-box-shadow, --const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:active {\n                    box-shadow: var-list(\n                        var-prefixer(card-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            }\n        }\n\n        &.is-touch {\n            --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n            grid-template-columns: 1fr var(--comp-chevron-size);\n        }\n\n        &.has-avatar.is-touch {\n            grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\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    --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n    border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\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\n.touch-indicator {\n    align-self: center;\n    --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Event,\n    h,\n    Fragment,\n    Listen,\n    Element,\n    EventEmitter,\n    State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'info',\n    'success',\n    'warning',\n    'alert',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n    // #region Own Properties\n\n    avatarElement: HTMLElement;\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n    resizeObserver: ResizeObserver;\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    isAutoSmall: boolean = false;\n\n    @State()\n    isAutoTouch: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. */\n    @Prop({ reflect: true })\n    avatarIcon: string;\n\n    /** The initials to be placed in the avatar of the card. */\n    @Prop({ reflect: true })\n    avatarInitials: string;\n\n    /** The name to be used for the avatar of the card which will be converted to initials. */\n    @Prop({ reflect: true })\n    avatarName: string;\n\n    /** The source of the image to be displayed in the avatar location. */\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    /** The description of the card (truncated after two lines). */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Display the card with a view optimized for smaller displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isSmall: boolean;\n\n    /** Display the card with no borders, padding, drop-shadows, or clickable behavior. */\n    @Prop({ reflect: true })\n    isStatic: boolean;\n\n    /**\n     * Display the card with a view optimized for touch displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isTouch: boolean = isTouchDevice();\n\n    /** Target to be applied to the link when a URL is provided. */\n    @Prop({ reflect: true })\n    target: '_self' | '_blank' | '_parent' | '_top';\n\n    /** The title of the card. */\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    /** URL to navigate the user to when the card is clicked. */\n    @Prop({ reflect: true })\n    url: string;\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the card is clicked and the `url` property is not provided. */\n    @Event()\n    click: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n\n        this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n        this.resizeObserver.observe(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    determineAutoSmall() {\n        if (this.isStatic) return;\n        if (this.hostElement.hasAttribute('is-small')) return;\n        const { containerElement, avatarElement } = this;\n        const avatarWidth = avatarElement?.offsetWidth ?? 0;\n        const containerWidth = containerElement?.offsetWidth ?? 0;\n        const totalWidth = avatarWidth + containerWidth;\n        this.isAutoSmall = totalWidth < 350;\n    }\n\n    determineAutoTouch() {\n        if (this.hostElement.hasAttribute('is-touch')) return;\n        this.isAutoTouch = isTouchDevice();\n    }\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 {\n            isSmall,\n            isAutoSmall,\n            avatarName,\n            avatarInitials,\n            avatarSrc,\n            avatarIcon,\n            isTouch,\n            isAutoTouch,\n            isStatic,\n            type,\n        } = this;\n        const result = ['container', type];\n        const showSmall = isSmall || isAutoSmall;\n        const showTouch = isTouch || isAutoTouch;\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (showSmall) result.push('is-small');\n        if (showTouch && !isStatic) result.push('is-touch');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\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                {this.isTouch && !this.isStatic && (\n                    <q2-icon\n                        test-id=\"touchIndicator\"\n                        type=\"chevron-right\"\n                        class=\"touch-indicator\"\n                    ></q2-icon>\n                )}\n            </Fragment>\n        );\n    }\n\n    getBarClasses() {\n        const { bar } = this;\n\n        return {\n            bar: true,\n            [`color-${bar}`]: this.isBarColorPredefined(),\n        };\n    }\n\n    getBarStyles() {\n        const { bar } = this;\n\n        return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    isBarColorPredefined() {\n        return PREDEFINED_COLORS.includes(this.bar);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n\n    // #endregion\n}\n"],"names":["isTouchDevice","overrideFocus","isEventFromElement","h","Fragment"],"mappings":"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"}
+{"version":3,"file":"q2-card.entry.cjs.js","sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n    --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n    position: relative;\n    width: 100%;\n    text-align: start;\n    height: var-list(--tct-card-height, 100%);\n    min-height: var-list(--tct-card-min-height, auto);\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(--tct-card-font-color, var-prefixer(card-color), --t-text, #4d4d4d);\n    backdrop-filter: var(--tct-card-backdrop-filter);\n\n    background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n    border-width: var-list(var-prefixer(card-border-width), 0px);\n    border-color: var-list(var-prefixer(card-border-color), transparent);\n    border-style: var-list(--tct-card-border-style, solid);\n    border-radius: var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px);\n    backdrop-filter: var-list(--tct-card-backdrop-filter, none);\n    padding: var(--comp-card-padding);\n    text-decoration: none;\n    transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: var(--tct-card-overflow, auto);\n    max-height: var-list(--tct-card-max-height, none);\n    box-shadow:\n        var(--comp-card-shadow),\n        0 0 0 rgba(0, 0, 0, 0);\n\n    &.is-small {\n        --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n    }\n    &.has-avatar {\n        grid-template-columns: var(--comp-avatar-size) 1fr;\n        --tct-avatar-width: var(--comp-avatar-size);\n        --tct-avatar-height: var(--comp-avatar-size);\n        --tct-icon-size: var(--comp-avatar-size);\n    }\n\n    &.elevation-1 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-1-box-shadow,\n                --app-shadow-1,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-2 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-2-box-shadow,\n                --app-shadow-2,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-3 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-3-box-shadow,\n                --app-shadow-3,\n                #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-4 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-4-box-shadow,\n                --app-shadow-4,\n                #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n    &.elevation-5 {\n        --comp-card-shadow: #{var-list(\n                --tct-card-elevation-5-box-shadow,\n                --app-shadow-5,\n                #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n            )};\n    }\n\n    &.clickable {\n        cursor: pointer;\n\n        &:hover {\n            &.elevation-1 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-1-hover-box-shadow,\n                        --app-shadow-2,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-2 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-2-hover-box-shadow,\n                        --app-shadow-3,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-3 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-3-hover-box-shadow,\n                        --app-shadow-4,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-4 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-4-hover-box-shadow,\n                        --app-shadow-5,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-5 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-5-hover-box-shadow,\n                        --app-shadow-5,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n        }\n\n        &:active {\n            &.elevation-1 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-1-active-box-shadow,\n                        --app-shadow-1,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-2 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-2-active-box-shadow,\n                        --app-shadow-1,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-3 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-3-active-box-shadow,\n                        --app-shadow-2,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-4 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-4-active-box-shadow,\n                        --app-shadow-3,\n                        #{unquote('0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n            &.elevation-5 {\n                --comp-card-shadow: #{var-list(\n                        --tct-card-elevation-5-active-box-shadow,\n                        --app-shadow-4,\n                        #{unquote('0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)')}\n                    )};\n            }\n        }\n        &:focus-visible {\n            --comp-focus-visible-shadow: var(--comp-card-shadow), var(--const-double-focus-ring);\n            box-shadow: var-list(--tct-card-focus-visible-box-shadow, --comp-focus-visible-shadow);\n        }\n    }\n\n    &.is-static {\n        cursor: auto;\n        background: var-list(--tct-card-static-background, --tct-card-background, none);\n        color: var-list(--tct-card-static-font-color, --tct-card-color, --t-text, #4d4d4d);\n        backdrop-filter: none;\n        border-radius: 0;\n        border: 0;\n        text-decoration: initial;\n        padding: 0;\n\n        :host([bar]) & {\n            padding-left: var(--comp-card-padding);\n        }\n\n        &,\n        &:hover,\n        &:active {\n            box-shadow: none;\n        }\n    }\n}\n\n.content {\n    overflow: hidden;\n    display: grid;\n    gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n    align-content: start;\n}\n\nh3,\np {\n    margin: 0;\n    padding: 0;\n    line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n    font-weight: var-list(var-prefixer(card-font-weight), 600);\n    font-size: var-list(var-prefixer(card-font-size), 17px);\n    @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n    @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: var(--comp-bar-width);\n    background: var(--comp-bar-color);\n    height: 100%;\n\n    &.color-primary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n    }\n\n    &.color-secondary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n    }\n\n    &.color-tertiary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n    }\n\n    &.color-info {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n    }\n\n    &.color-success {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n    }\n\n    &.color-warning {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n    }\n\n    &.color-alert {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n    }\n\n    &.color-accent-1 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n    }\n\n    &.color-accent-2 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n    }\n\n    &.color-accent-3 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n    }\n\n    &.color-accent-4 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n    }\n\n    &.color-accent-5 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n    }\n\n    &.color-accent-6 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n    }\n\n    &.color-accent-7 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n    }\n\n    &.color-accent-8 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n    }\n\n    &.color-accent-9 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n    }\n\n    &.color-accent-10 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n    }\n\n    &.color-accent-11 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n    }\n\n    &.color-accent-12 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n    }\n}\n","import { Component, ComponentInterface, Prop, Event, h, Fragment, Listen, Element, EventEmitter } from '@stencil/core';\nimport { overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'info',\n    'success',\n    'warning',\n    'alert',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n    // #region Own Properties\n\n    avatarElement: HTMLElement;\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarIcon: string;\n\n    /**\n     * The initials to be placed in the avatar of the card.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarInitials: string;\n\n    /**\n     * The name to be used for the avatar of the card which will be converted to initials.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarName: string;\n\n    /**\n     * The source of the image to be displayed in the avatar location.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    avatarSrc: string;\n\n    /**\n     * Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n     *\n     * - primary\n     * - secondary\n     * - tertiary\n     * - info\n     * - success\n     * - warning\n     * - alert\n     * - accent-1\n     * - accent-2\n     * - accent-3\n     * - accent-4\n     * - accent-5\n     * - accent-6\n     * - accent-7\n     * - accent-8\n     * - accent-9\n     * - accent-10\n     * - accent-11\n     * - accent-12\n     *\n     * Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n     */\n    @Prop({ reflect: true })\n    bar: string;\n\n    /**\n     * The description of the card (truncated after two lines).\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * The size of the box-shadow applied to the component, giving it a sense of depth.\n     *\n     * @info\n     * Set to `0` to disable.\n     */\n    @Prop({ reflect: true })\n    elevation: 0 | 1 | 2 | 3 | 4 | 5 = 2;\n\n    /**\n     * Display the card with a view optimized for smaller displays.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    isSmall: boolean;\n\n    /**\n     * Display the card with no borders, padding, drop-shadows, or clickable behavior.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    isStatic: boolean;\n\n    /**\n     * Target to be applied to the link when a URL is provided.\n     *\n     * @warning\n     * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n     */\n    @Prop({ reflect: true })\n    target: '_self' | '_blank' | '_parent' | '_top';\n\n    /**\n     * The title of the card.\n     *\n     * Please use q2-item instead.\n     *\n     * @deprecated\n     */\n    @Prop({ reflect: true })\n    title: string;\n\n    /** Alters the interactive behavior of the card while maintaining visual appearance. */\n    @Prop({ reflect: true })\n    type: 'clickable' | 'non-clickable' = 'clickable';\n\n    /**\n     * URL to navigate the user to when the card is clicked.\n     *\n     * @warning\n     * Do not use in Online Banking. Use the `openURL` capability on the click event instead.\n     */\n    @Prop({ reflect: true })\n    url: string;\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the card is clicked and the `url` property is not provided. */\n    @Event()\n    click: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        // Clean up manual click override\n        if (this.hostElement) {\n            this.hostElement.click = null;\n        }\n\n        // Nullify DOM references\n        this.avatarElement = null;\n        this.clickableElement = null;\n        this.containerElement = null;\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.clickableElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    generateAvatar() {\n        const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n        if (avatarIcon) {\n            return (\n                <q2-icon\n                    type={avatarIcon}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-icon>\n            );\n        } else if (avatarName || avatarInitials || avatarSrc) {\n            return (\n                <q2-avatar\n                    name={avatarName}\n                    initials={avatarInitials}\n                    src={avatarSrc}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-avatar>\n            );\n        }\n    }\n\n    generateContainerClasses() {\n        const { isSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isStatic, type, elevation } = this;\n        const result = ['container', type];\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (isSmall) result.push('is-small');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\n        if (!isStatic && elevation && elevation > 0) result.push(`elevation-${elevation}`);\n\n        return result.join(' ');\n    }\n\n    generateContent() {\n        return (\n            <Fragment>\n                {this.bar && (\n                    <div\n                        class={this.getBarClasses()}\n                        test-id=\"bar\"\n                        style={this.getBarStyles()}\n                    ></div>\n                )}\n                {this.generateAvatar()}\n                <div\n                    class=\"content\"\n                    test-id=\"contentContainer\"\n                    ref={e => (this.containerElement = e)}\n                >\n                    {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n                    {this.description && <p test-id=\"description\">{this.description}</p>}\n                    <slot />\n                </div>\n            </Fragment>\n        );\n    }\n\n    getBarClasses() {\n        const { bar } = this;\n\n        return {\n            bar: true,\n            [`color-${bar}`]: this.isBarColorPredefined(),\n        };\n    }\n\n    getBarStyles() {\n        const { bar } = this;\n\n        return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    isBarColorPredefined() {\n        return PREDEFINED_COLORS.includes(this.bar);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n\n    // #endregion\n}\n"],"names":["overrideFocus","isEventFromElement","h","Fragment"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-BuXzB2ML.js');
+var index$1 = require('./index-CyqXtdz-.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}";
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index$1 = require('./index-BYXz4owL.js');
-var index$2 = require('./index-BuXzB2ML.js');
+var index$2 = require('./index-CyqXtdz-.js');
 
 /**
  * SSR Window 4.0.2

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-BuXzB2ML.js');
+var index$1 = require('./index-CyqXtdz-.js');
 var charting = require('./charting-BqHKRVua.js');
 var universalTransition = require('./universalTransition-BeWpxVgM.js');
 require('./install-ELaMxyQ-.js');

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BYXz4owL.js');
-var index$1 = require('./index-BuXzB2ML.js');
+var index$1 = require('./index-CyqXtdz-.js');
 var charting = require('./charting-BqHKRVua.js');
 var universalTransition = require('./universalTransition-BeWpxVgM.js');
 

package/dist/cjs/q2-chart-bar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-chart-bar.entry.cjs.js","mappings":"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","names":["BarView","BarSeries","zrUtil.curry","layout","createProgressiveLayout","dataSample","echarts.use","AriaComponent","BarChart","CanvasRenderer","LabelLayout","GridComponent","TitleComponent","echarts.init","overrideFocus","getCSSProperty","isValidColor","formatValue","loc","h"],"sources":["../../node_modules/.pnpm/echarts@5.6.0/node_modules/echarts/lib/chart/bar/install.js","src/components/q2-chart-bar/q2-chart-bar.scss?tag=q2-chart-bar&encapsulation=shadow","src/components/q2-chart-bar/q2-chart-bar.tsx"],"sourcesContent":["\n/*\n* Licensed to the Apache Software Foundation (ASF) under one\n* or more contributor license agreements.  See the NOTICE file\n* distributed with this work for additional information\n* regarding copyright ownership.  The ASF licenses this file\n* to you under the Apache License, Version 2.0 (the\n* \"License\"); you may not use this file except in compliance\n* with the License.  You may obtain a copy of the License at\n*\n*   http://www.apache.org/licenses/LICENSE-2.0\n*\n* Unless required by applicable law or agreed to in writing,\n* software distributed under the License is distributed on an\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n* KIND, either express or implied.  See the License for the\n* specific language governing permissions and limitations\n* under the License.\n*/\n\n\n/**\n * AUTO-GENERATED FILE. DO NOT MODIFY.\n */\n\n/*\r\n* Licensed to the Apache Software Foundation (ASF) under one\r\n* or more contributor license agreements.  See the NOTICE file\r\n* distributed with this work for additional information\r\n* regarding copyright ownership.  The ASF licenses this file\r\n* to you under the Apache License, Version 2.0 (the\r\n* \"License\"); you may not use this file except in compliance\r\n* with the License.  You may obtain a copy of the License at\r\n*\r\n*   http://www.apache.org/licenses/LICENSE-2.0\r\n*\r\n* Unless required by applicable law or agreed to in writing,\r\n* software distributed under the License is distributed on an\r\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\n* KIND, either express or implied.  See the License for the\r\n* specific language governing permissions and limitations\r\n* under the License.\r\n*/\nimport * as zrUtil from 'zrender/lib/core/util.js';\nimport { layout, createProgressiveLayout } from '../../layout/barGrid.js';\nimport dataSample from '../../processor/dataSample.js';\nimport BarSeries from './BarSeries.js';\nimport BarView from './BarView.js';\nexport function install(registers) {\n  registers.registerChartView(BarView);\n  registers.registerSeriesModel(BarSeries);\n  registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, zrUtil.curry(layout, 'bar'));\n  // Do layout after other overall layout, which can prepare some information.\n  registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout('bar'));\n  // Down sample after filter\n  registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('bar'));\n  /**\r\n   * @payload\r\n   * @property {string} [componentType=series]\r\n   * @property {number} [dx]\r\n   * @property {number} [dy]\r\n   * @property {number} [zoom]\r\n   * @property {number} [originX]\r\n   * @property {number} [originY]\r\n   */\n  registers.registerAction({\n    type: 'changeAxisOrder',\n    event: 'changeAxisOrder',\n    update: 'update'\n  }, function (payload, ecModel) {\n    var componentType = payload.componentType || 'series';\n    ecModel.eachComponent({\n      mainType: componentType,\n      query: payload\n    }, function (componentModel) {\n      if (payload.sortInfo) {\n        componentModel.axis.setCategorySortInfo(payload.sortInfo);\n      }\n    });\n  });\n}","@import '../../styles/host.scss';\n\n:host {\n    width: var(--tct-bar-chart-width, 100%);\n    height: var(--tct-bar-chart-height, 100%);\n    display: block;\n}\n\n.container {\n    width: 100%;\n    height: 100%;\n}\n\n.chart-container {\n    width: 100%;\n    height: 100%;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n    TitleComponent,\n    TitleComponentOption,\n    AriaComponent,\n    AriaComponentOption,\n    GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption | BarSeriesOption | TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n    // #region Own Properties\n\n    chart: echarts.ECharts;\n    chartContainer: HTMLDivElement;\n    chartContainerStyles: CSSStyleDeclaration;\n    hostElementStyles: CSSStyleDeclaration;\n    resizeEventListener: EventListener;\n    chartFinishedListener: () => void;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Controls alignment of the chart name when its visible. */\n    @Prop({ reflect: true })\n    alignChartName: 'left' | 'right' | 'center';\n\n    /**\n     * The title of the chart. We recommend always including this for accessibility purposes.\n     *\n     * It is hidden by default, but can be made visible with the `showChartName` variable.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    chartName: string;\n\n    /** A subtitile to the chart name. Often used to provide a brief description of what the data represents. */\n    @Prop({ reflect: true })\n    chartSubTitle: string;\n\n    /**\n     * Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n     * Accept variables, hex codes, an CSS color names.\n     *\n     * **Examples:**\n     * @snippet\n     * element.areaColor = \"#ff0000\";\n     * element.areaColor = \"papayawhip\";\n     * element.areaColor = \"var(--t-accent-1)\";\n     */\n    @Prop({ reflect: true })\n    color: string;\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IChartData[] = [];\n\n    /**\n     * Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n     * Values will ellipsize if the truncate option is used.\n     */\n    @Prop({ reflect: true })\n    dataNamesOverflow: 'break' | 'truncate';\n\n    /**\n     * Sets width available for labels on the name axis.\n     * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n     */\n    @Prop({ reflect: true })\n    dataNamesWidth: number;\n\n    /** Controls whether values on the value axis are shown as numbers or as currency. */\n    @Prop({ reflect: true })\n    format: 'currency' | 'default';\n\n    /**\n     * Can be used in coordination with the currency format property to control decimal handling.\n     * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n     */\n    @Prop({ reflect: true })\n    formatModifier: string;\n\n    /**\n     * Sets chart padding around the grid.\n     * Each value in the object will be interpreted as pixels.\n     *\n     * **Example:**\n     * @snippet\n     * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n     */\n    @Prop()\n    gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n    /** Controls visibility of labels on the name axis. */\n    @Prop({ reflect: true })\n    hideBarLabels: boolean = false;\n\n    /** Controls visibility of labels on the value axis. */\n    @Prop({ reflect: true })\n    hideValueAxisLabels: boolean = false;\n\n    /**\n     * Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataNames: boolean = false;\n\n    /**\n     * Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataValues: boolean = false;\n\n    /**\n     * Controls which axes are the value and name axes.\n     * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n     * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n     */\n    @Prop({ reflect: true })\n    orientation: 'vertical' | 'horizontal';\n\n    /** Controls the visibility of the chart name at the top of the chart. */\n    @Prop({ reflect: true })\n    showChartName: boolean = false;\n\n    /**\n     * By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n     * When set to `true`, values on the bar will be re-sorted in descending order.\n     */\n    @Prop({ reflect: true })\n    sort: boolean = false;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        // Remove event listeners\n        window.removeEventListener('resize', this.resizeEventListener);\n\n        // Clean up chart instance\n        if (this.chart) {\n            if (this.chartFinishedListener) {\n                this.chart.off('finished', this.chartFinishedListener);\n            }\n            this.chart.dispose();\n            this.chart = null;\n        }\n\n        // Null out cached computed styles to allow GC\n        this.chartContainerStyles = null;\n        this.hostElementStyles = null;\n\n        // Null out DOM references\n        this.chartContainer = null;\n        this.resizeEventListener = null;\n        this.chartFinishedListener = null;\n    }\n\n    componentDidLoad() {\n        const chart = echarts.init(this.chartContainer);\n\n        this.chart = chart;\n\n        this.resizeEventListener = () => this.resizeChart();\n        window.addEventListener('resize', this.resizeEventListener);\n\n        this.cacheComputedStyles();\n        this.updateChart(chart);\n        this.setupChartEvents(chart);\n\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('chartName')\n    @Watch('chartSubTitle')\n    @Watch('color')\n    @Watch('hideBarLabels')\n    @Watch('showChartName')\n    @Watch('alignChartName')\n    @Watch('orientation')\n    @Watch('format')\n    @Watch('sort')\n    @Watch('data')\n    @Watch('offsetDataNames')\n    @Watch('hideValueAxisLabels')\n    @Watch('formatModifier')\n    @Watch('dataNamesOverflow')\n    @Watch('gridPadding')\n    propsUpdates() {\n        this.updateChart(this.chart);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    cacheComputedStyles() {\n        this.chartContainerStyles = getComputedStyle(this.chartContainer);\n        this.hostElementStyles = getComputedStyle(this.hostElement);\n    }\n\n    getColor(color: string) {\n        const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n        const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n        const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n        if (cssColorProp) return cssColorProp;\n        if (isValidColor(color)) return color;\n        if (seriesColor) return seriesColor;\n        if (isValidColor(this.color)) return this.color;\n        return primaryColor;\n    }\n\n    processData(data: IChartData[]) {\n        return data.map(datum => {\n            return {\n                value: datum.value || 0,\n                itemStyle: {\n                    color: this.getColor(datum.color),\n                },\n            };\n        });\n    }\n\n    resizeChart() {\n        this.chart.resize();\n    }\n\n    setupChartEvents(chart: echarts.ECharts) {\n        this.chartFinishedListener = () => {\n            const canvas = chart.getDom().querySelector('canvas');\n            if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n            canvas.setAttribute('aria-hidden', 'true');\n        };\n        chart.on('finished', this.chartFinishedListener);\n    }\n\n    updateChart(chart: echarts.ECharts) {\n        const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n        const valueAxis = {\n            type: 'value',\n            axisLabel: {\n                formatter: (value: number) =>\n                    formatValue(value, {\n                        type: this.format,\n                        decimals,\n                    }),\n                rotate: this.offsetDataValues ? 45 : 0,\n                margin: this.offsetDataValues ? 15 : 8,\n                show: !this.hideValueAxisLabels,\n            },\n        };\n\n        const categoryAxis = {\n            type: 'category',\n            data: this.data.map(datum => loc(datum.name) || ''),\n            axisLabel: {\n                rotate: this.offsetDataNames ? 45 : 0,\n                margin: this.offsetDataNames ? 15 : 8,\n                interval: 0,\n                width: this.dataNamesWidth || 50,\n                overflow: this.dataNamesOverflow || 'none',\n                truncate: 'ellipsis',\n            },\n            axisTick: {\n                alignWithLabel: this.offsetDataNames,\n            },\n        };\n\n        return chart.setOption<EChartsOption>({\n            aria: {\n                enabled: true,\n            },\n            title: {\n                text: loc(this.chartName),\n                show: this.showChartName,\n                left: this.alignChartName,\n                subtext: this.chartSubTitle,\n            },\n            grid: {\n                containLabel: true,\n                ...this.gridPadding,\n            },\n            xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n            yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n            series: [\n                {\n                    data: this.processData(this.data),\n                    id: 'bar',\n                    type: 'bar',\n                    label: {\n                        show: !this.hideBarLabels,\n                        position: 'top',\n                        fontWeight: 'bold',\n                        formatter: (params: CallbackDataParams) => {\n                            return formatValue(params.value as number, {\n                                type: this.format,\n                                decimals,\n                            });\n                        },\n                    },\n                    realtimeSort: this.sort,\n                },\n            ],\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"container\">\n                <div\n                    ref={el => (this.chartContainer = el)}\n                    class=\"chart-container\"\n                    role=\"img\"\n                    test-id=\"barChartContainer\"\n                ></div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-chart-bar.entry.cjs.js","mappings":"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","names":["BarView","BarSeries","zrUtil.curry","layout","createProgressiveLayout","dataSample","echarts.use","AriaComponent","BarChart","CanvasRenderer","LabelLayout","GridComponent","TitleComponent","echarts.init","overrideFocus","getCSSProperty","isValidColor","formatValue","loc","h"],"sources":["../../node_modules/.pnpm/echarts@5.6.0/node_modules/echarts/lib/chart/bar/install.js","src/components/q2-chart-bar/q2-chart-bar.scss?tag=q2-chart-bar&encapsulation=shadow","src/components/q2-chart-bar/q2-chart-bar.tsx"],"sourcesContent":["\n/*\n* Licensed to the Apache Software Foundation (ASF) under one\n* or more contributor license agreements.  See the NOTICE file\n* distributed with this work for additional information\n* regarding copyright ownership.  The ASF licenses this file\n* to you under the Apache License, Version 2.0 (the\n* \"License\"); you may not use this file except in compliance\n* with the License.  You may obtain a copy of the License at\n*\n*   http://www.apache.org/licenses/LICENSE-2.0\n*\n* Unless required by applicable law or agreed to in writing,\n* software distributed under the License is distributed on an\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n* KIND, either express or implied.  See the License for the\n* specific language governing permissions and limitations\n* under the License.\n*/\n\n\n/**\n * AUTO-GENERATED FILE. DO NOT MODIFY.\n */\n\n/*\r\n* Licensed to the Apache Software Foundation (ASF) under one\r\n* or more contributor license agreements.  See the NOTICE file\r\n* distributed with this work for additional information\r\n* regarding copyright ownership.  The ASF licenses this file\r\n* to you under the Apache License, Version 2.0 (the\r\n* \"License\"); you may not use this file except in compliance\r\n* with the License.  You may obtain a copy of the License at\r\n*\r\n*   http://www.apache.org/licenses/LICENSE-2.0\r\n*\r\n* Unless required by applicable law or agreed to in writing,\r\n* software distributed under the License is distributed on an\r\n* \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\n* KIND, either express or implied.  See the License for the\r\n* specific language governing permissions and limitations\r\n* under the License.\r\n*/\nimport * as zrUtil from 'zrender/lib/core/util.js';\nimport { layout, createProgressiveLayout } from '../../layout/barGrid.js';\nimport dataSample from '../../processor/dataSample.js';\nimport BarSeries from './BarSeries.js';\nimport BarView from './BarView.js';\nexport function install(registers) {\n  registers.registerChartView(BarView);\n  registers.registerSeriesModel(BarSeries);\n  registers.registerLayout(registers.PRIORITY.VISUAL.LAYOUT, zrUtil.curry(layout, 'bar'));\n  // Do layout after other overall layout, which can prepare some information.\n  registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, createProgressiveLayout('bar'));\n  // Down sample after filter\n  registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('bar'));\n  /**\r\n   * @payload\r\n   * @property {string} [componentType=series]\r\n   * @property {number} [dx]\r\n   * @property {number} [dy]\r\n   * @property {number} [zoom]\r\n   * @property {number} [originX]\r\n   * @property {number} [originY]\r\n   */\n  registers.registerAction({\n    type: 'changeAxisOrder',\n    event: 'changeAxisOrder',\n    update: 'update'\n  }, function (payload, ecModel) {\n    var componentType = payload.componentType || 'series';\n    ecModel.eachComponent({\n      mainType: componentType,\n      query: payload\n    }, function (componentModel) {\n      if (payload.sortInfo) {\n        componentModel.axis.setCategorySortInfo(payload.sortInfo);\n      }\n    });\n  });\n}","@import '../../styles/host.scss';\n\n:host {\n    width: var(--tct-bar-chart-width, 100%);\n    height: var(--tct-bar-chart-height, 100%);\n    display: block;\n}\n\n.container {\n    width: 100%;\n    height: 100%;\n}\n\n.chart-container {\n    width: 100%;\n    height: 100%;\n}\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n    TitleComponent,\n    TitleComponentOption,\n    AriaComponent,\n    AriaComponentOption,\n    GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption | BarSeriesOption | TitleComponentOption>;\n\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n    // #region Own Properties\n\n    chart: echarts.ECharts;\n    chartContainer: HTMLDivElement;\n    chartContainerStyles: CSSStyleDeclaration;\n    chartFinishedListener: () => void;\n    hostElementStyles: CSSStyleDeclaration;\n    resizeEventListener: EventListener;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Controls alignment of the chart name when its visible. */\n    @Prop({ reflect: true })\n    alignChartName: 'left' | 'right' | 'center';\n\n    /**\n     * The title of the chart. We recommend always including this for accessibility purposes.\n     *\n     * It is hidden by default, but can be made visible with the `showChartName` variable.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    chartName: string;\n\n    /** A subtitile to the chart name. Often used to provide a brief description of what the data represents. */\n    @Prop({ reflect: true })\n    chartSubTitle: string;\n\n    /**\n     * Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n     * Accept variables, hex codes, an CSS color names.\n     *\n     * **Examples:**\n     * @snippet\n     * element.areaColor = \"#ff0000\";\n     * element.areaColor = \"papayawhip\";\n     * element.areaColor = \"var(--t-accent-1)\";\n     */\n    @Prop({ reflect: true })\n    color: string;\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IChartData[] = [];\n\n    /**\n     * Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n     * Values will ellipsize if the truncate option is used.\n     */\n    @Prop({ reflect: true })\n    dataNamesOverflow: 'break' | 'truncate';\n\n    /**\n     * Sets width available for labels on the name axis.\n     * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n     */\n    @Prop({ reflect: true })\n    dataNamesWidth: number;\n\n    /** Controls whether values on the value axis are shown as numbers or as currency. */\n    @Prop({ reflect: true })\n    format: 'currency' | 'default';\n\n    /**\n     * Can be used in coordination with the currency format property to control decimal handling.\n     * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n     */\n    @Prop({ reflect: true })\n    formatModifier: string;\n\n    /**\n     * Sets chart padding around the grid.\n     * Each value in the object will be interpreted as pixels.\n     *\n     * **Example:**\n     * @snippet\n     * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n     */\n    @Prop()\n    gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n    /** Controls visibility of labels on the name axis. */\n    @Prop({ reflect: true })\n    hideBarLabels: boolean = false;\n\n    /** Controls visibility of labels on the value axis. */\n    @Prop({ reflect: true })\n    hideValueAxisLabels: boolean = false;\n\n    /**\n     * Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataNames: boolean = false;\n\n    /**\n     * Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n     * Can be used when space is limited or with longer name labels.\n     */\n    @Prop({ reflect: true })\n    offsetDataValues: boolean = false;\n\n    /**\n     * Controls which axes are the value and name axes.\n     * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n     * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n     */\n    @Prop({ reflect: true })\n    orientation: 'vertical' | 'horizontal';\n\n    /** Controls the visibility of the chart name at the top of the chart. */\n    @Prop({ reflect: true })\n    showChartName: boolean = false;\n\n    /**\n     * By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n     * When set to `true`, values on the bar will be re-sorted in descending order.\n     */\n    @Prop({ reflect: true })\n    sort: boolean = false;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        // Remove event listeners\n        window.removeEventListener('resize', this.resizeEventListener);\n\n        // Clean up chart instance\n        if (this.chart) {\n            if (this.chartFinishedListener) {\n                this.chart.off('finished', this.chartFinishedListener);\n            }\n            this.chart.dispose();\n            this.chart = null;\n        }\n\n        // Null out cached computed styles to allow GC\n        this.chartContainerStyles = null;\n        this.hostElementStyles = null;\n\n        // Null out DOM references\n        this.chartContainer = null;\n        this.resizeEventListener = null;\n        this.chartFinishedListener = null;\n    }\n\n    componentDidLoad() {\n        const chart = echarts.init(this.chartContainer);\n\n        this.chart = chart;\n\n        this.resizeEventListener = () => this.resizeChart();\n        window.addEventListener('resize', this.resizeEventListener);\n\n        this.cacheComputedStyles();\n        this.updateChart(chart);\n        this.setupChartEvents(chart);\n\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('chartName')\n    @Watch('chartSubTitle')\n    @Watch('color')\n    @Watch('hideBarLabels')\n    @Watch('showChartName')\n    @Watch('alignChartName')\n    @Watch('orientation')\n    @Watch('format')\n    @Watch('sort')\n    @Watch('data')\n    @Watch('offsetDataNames')\n    @Watch('hideValueAxisLabels')\n    @Watch('formatModifier')\n    @Watch('dataNamesOverflow')\n    @Watch('gridPadding')\n    propsUpdates() {\n        this.updateChart(this.chart);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    cacheComputedStyles() {\n        this.chartContainerStyles = getComputedStyle(this.chartContainer);\n        this.hostElementStyles = getComputedStyle(this.hostElement);\n    }\n\n    getColor(color: string) {\n        const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n        const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n        const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n        if (cssColorProp) return cssColorProp;\n        if (isValidColor(color)) return color;\n        if (seriesColor) return seriesColor;\n        if (isValidColor(this.color)) return this.color;\n        return primaryColor;\n    }\n\n    processData(data: IChartData[]) {\n        return data.map(datum => {\n            return {\n                value: datum.value || 0,\n                itemStyle: {\n                    color: this.getColor(datum.color),\n                },\n            };\n        });\n    }\n\n    resizeChart() {\n        this.chart.resize();\n    }\n\n    setupChartEvents(chart: echarts.ECharts) {\n        this.chartFinishedListener = () => {\n            const canvas = chart.getDom().querySelector('canvas');\n            if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n            canvas.setAttribute('aria-hidden', 'true');\n        };\n        chart.on('finished', this.chartFinishedListener);\n    }\n\n    updateChart(chart: echarts.ECharts) {\n        const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n        const valueAxis = {\n            type: 'value',\n            axisLabel: {\n                formatter: (value: number) =>\n                    formatValue(value, {\n                        type: this.format,\n                        decimals,\n                    }),\n                rotate: this.offsetDataValues ? 45 : 0,\n                margin: this.offsetDataValues ? 15 : 8,\n                show: !this.hideValueAxisLabels,\n            },\n        };\n\n        const categoryAxis = {\n            type: 'category',\n            data: this.data.map(datum => loc(datum.name) || ''),\n            axisLabel: {\n                rotate: this.offsetDataNames ? 45 : 0,\n                margin: this.offsetDataNames ? 15 : 8,\n                interval: 0,\n                width: this.dataNamesWidth || 50,\n                overflow: this.dataNamesOverflow || 'none',\n                truncate: 'ellipsis',\n            },\n            axisTick: {\n                alignWithLabel: this.offsetDataNames,\n            },\n        };\n\n        return chart.setOption<EChartsOption>({\n            aria: {\n                enabled: true,\n            },\n            title: {\n                text: loc(this.chartName),\n                show: this.showChartName,\n                left: this.alignChartName,\n                subtext: this.chartSubTitle,\n            },\n            grid: {\n                containLabel: true,\n                ...this.gridPadding,\n            },\n            xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n            yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n            series: [\n                {\n                    data: this.processData(this.data),\n                    id: 'bar',\n                    type: 'bar',\n                    label: {\n                        show: !this.hideBarLabels,\n                        position: 'top',\n                        fontWeight: 'bold',\n                        formatter: (params: CallbackDataParams) => {\n                            return formatValue(params.value as number, {\n                                type: this.format,\n                                decimals,\n                            });\n                        },\n                    },\n                    realtimeSort: this.sort,\n                },\n            ],\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"container\">\n                <div\n                    ref={el => (this.chartContainer = el)}\n                    class=\"chart-container\"\n                    role=\"img\"\n                    test-id=\"barChartContainer\"\n                ></div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}