q2-tecton-elements 1.56.0 → 1.56.1

package/dist/bundle-report.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-06-24T16:31:38",
+  "timestamp": "2025-07-06T19:19:08",
   "compiler": {
     "name": "node",
     "version": "20.18.1"
@@ -1095,7 +1095,7 @@
           "index-7a5365e2.js",
           "index-c215e8ef.js"
         ],
-        "originalByteSize": 12798
+        "originalByteSize": 12990
       },
       {
         "key": "q2-carousel.entry",
@@ -1774,7 +1774,7 @@
           "index-7a5365e2.js",
           "index-c215e8ef.js"
         ],
-        "originalByteSize": 12798
+        "originalByteSize": 12990
       },
       {
         "key": "q2-carousel.entry",
@@ -2455,7 +2455,7 @@
           "index-e7e68b1e.js",
           "index-99667782.js"
         ],
-        "originalByteSize": 12878
+        "originalByteSize": 13070
       },
       {
         "key": "q2-carousel.entry",

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e7e68b1e.js');
 const index$1 = require('./index-99667782.js');
 
-const q2CardCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--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(: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)));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:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));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:focus:hover{box-shadow:var(--const-double-focus-ring), 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;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp: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{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-color, var(--t-card-color, var(--t-text, #4d4d4d)));--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(: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)));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:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));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:focus:hover{box-shadow:var(--const-double-focus-ring), 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 Q2CardStyle0 = q2CardCss;
 
 const PREDEFINED_COLORS = [

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

@@ -1 +1 @@
-{"file":"q2-card.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,07MAA07M,CAAC;AAC78M,qBAAe,SAAS;;ACYxB,MAAM,iBAAiB,GAAG;IACtB,SAAS;IACT,WAAW;IACX,UAAU;IACV,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;IACP,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,WAAW;IACX,WAAW;IACX,WAAW;CACd,CAAC;MAGW,MAAM;;;;QAkQf,gBAAW,GAAG,CAAC,KAAiB;YAC5B,IAAI,IAAI,CAAC,GAAG;gBAAE,OAAO,IAAI,CAAC;YAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;SACrB,CAAC;2BArPqB,KAAK;2BAGL,KAAK;;;;;;;;;uBAyETA,qBAAa,EAAE;;;oBAYI,WAAW;;;;;IAgBjD,oBAAoB;;QAChB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC9B;IAED,gBAAgB;QACZ,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;QAC/C,WAAW,CAAC,KAAK,GAAG,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC;QACnDC,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEhC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACjD;;;IAMD,kBAAkB,CAAC,KAAK;QACpB,IAAI,CAACC,0BAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;KACjC;;;IAKD,kBAAkB;;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC;YAAE,OAAO;QACtD,MAAM,EAAE,gBAAgB,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QACjD,MAAM,WAAW,GAAG,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,WAAW,mCAAI,CAAC,CAAC;QACpD,MAAM,cAAc,GAAG,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,mCAAI,CAAC,CAAC;QAC1D,MAAM,UAAU,GAAG,WAAW,GAAG,cAAc,CAAC;QAChD,IAAI,CAAC,WAAW,GAAG,UAAU,GAAG,GAAG,CAAC;KACvC;IAED,kBAAkB;QACd,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC;YAAE,OAAO;QACtD,IAAI,CAAC,WAAW,GAAGF,qBAAa,EAAE,CAAC;KACtC;IAED,cAAc;QACV,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAEnE,IAAI,UAAU,EAAE;YACZ,QACIG,qBACI,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,aAC1B,QAAQ,GACT,EACb;SACL;aAAM,IAAI,UAAU,IAAI,cAAc,IAAI,SAAS,EAAE;YAClD,QACIA,uBACI,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,cAAc,EACxB,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,aAC1B,QAAQ,GACP,EACf;SACL;KACJ;IAED,wBAAwB;QACpB,MAAM,EACF,OAAO,EACP,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACT,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,IAAI,GACP,GAAG,IAAI,CAAC;QACT,MAAM,MAAM,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACnC,MAAM,SAAS,GAAG,OAAO,IAAI,WAAW,CAAC;QACzC,MAAM,SAAS,GAAG,OAAO,IAAI,WAAW,CAAC;QACzC,MAAM,SAAS,GAAG,UAAU,IAAI,cAAc,IAAI,SAAS,IAAI,UAAU,CAAC;QAC1E,IAAI,SAAS;YAAE,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACvC,IAAI,SAAS,IAAI,CAAC,QAAQ;YAAE,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,SAAS;YAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzC,IAAI,QAAQ;YAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEvC,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC3B;IAED,eAAe;QACX,QACIA,QAACC,cAAQ,QACJ,IAAI,CAAC,GAAG,KACLD,iBACI,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,aACnB,KAAK,EACb,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GACvB,CACV,EACA,IAAI,CAAC,cAAc,EAAE,EACtBA,iBACI,KAAK,EAAC,SAAS,aACP,kBAAkB,EAC1B,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAEpC,IAAI,CAAC,KAAK,IAAIA,2BAAY,OAAO,IAAE,IAAI,CAAC,KAAK,CAAM,EACnD,IAAI,CAAC,WAAW,IAAIA,0BAAW,aAAa,IAAE,IAAI,CAAC,WAAW,CAAK,EACpEA,qBAAQ,CACN,EACL,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3BA,gCACY,gBAAgB,EACxB,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,iBAAiB,GAChB,CACd,CACM,EACb;KACL;IAED,aAAa;QACT,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAErB,OAAO;YACH,GAAG,EAAE,IAAI;YACT,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE;SAChD,CAAC;KACL;IAED,YAAY;QACR,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAErB,OAAO,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAE,CAAC;KACzE;IASD,oBAAoB;QAChB,OAAO,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC/C;;;IAKD,MAAM;QACF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACrC,IAAI,QAAQ,IAAI,IAAI,KAAK,eAAe;YACpC,QACIA,iBACI,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,aAC9B,kBAAkB,IAEzB,IAAI,CAAC,eAAe,EAAE,CACrB,EACR;aACD,IAAI,CAAC,CAAC,GAAG;YACV,QACIA,eACI,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,EACtC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAC,qBAAqB,aACjB,kBAAkB,EAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,eAAe,EAAE,CACvB,EACN;;YAEF,QACIA,oBACI,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,aAC9B,kBAAkB,EAC1B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,eAAe,EAAE,CAClB,EACX;KACT;;;;;;;","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: 100%;\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\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(: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        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(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\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                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), 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(1);\n}\n\np {\n    @include line-clamp(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":["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(var-prefixer(card-color), --t-text, #4d4d4d);\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(: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        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(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\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                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), 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}

package/dist/collection/components/q2-card/q2-card.css

@@ -73,7 +73,8 @@ button {
   position: relative;
   width: 100%;
   text-align: start;
-  height: 100%;
+  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;
@@ -157,14 +158,16 @@ h3 {
   font-size: var(--tct-card-font-size, var(--t-card-font-size, 17px));
   text-overflow: ellipsis;
   overflow: hidden;
-  white-space: nowrap;
+  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: 2;
+  -webkit-line-clamp: var(--tct-card-description-line-count, 2);
   -webkit-box-orient: vertical;
 }
 

package/dist/components/q2-card.js

@@ -3,7 +3,7 @@ import { b as isTouchDevice, o as overrideFocus, i as isEventFromElement } from
 import { d as defineCustomElement$3 } from './q2-avatar2.js';
 import { d as defineCustomElement$2 } from './q2-icon2.js';
 
-const q2CardCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--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(: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)));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:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));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:focus:hover{box-shadow:var(--const-double-focus-ring), 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;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp: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{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-color, var(--t-card-color, var(--t-text, #4d4d4d)));--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(: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)));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:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));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:focus:hover{box-shadow:var(--const-double-focus-ring), 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 Q2CardStyle0 = q2CardCss;
 
 const PREDEFINED_COLORS = [

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

@@ -1 +1 @@
-{"file":"q2-card.js","mappings":"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","names":["Q2Card"],"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: 100%;\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\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(: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        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(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\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                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), 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(1);\n}\n\np {\n    @include line-clamp(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.js","mappings":"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","names":["Q2Card"],"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(var-prefixer(card-color), --t-text, #4d4d4d);\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(: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        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(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\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                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), 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}

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-7a5365e2.js';
 import { k as isTouchDevice, o as overrideFocus, i as isEventFromElement } from './index-c215e8ef.js';
 
-const q2CardCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{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:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--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(: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)));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:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));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:focus:hover{box-shadow:var(--const-double-focus-ring), 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;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp: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{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-color, var(--t-card-color, var(--t-text, #4d4d4d)));--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(: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)));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:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));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:focus:hover{box-shadow:var(--const-double-focus-ring), 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 Q2CardStyle0 = q2CardCss;
 
 const PREDEFINED_COLORS = [

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

@@ -1 +1 @@
-{"file":"q2-card.entry.js","mappings":"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","names":[],"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: 100%;\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\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(: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        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(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\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                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), 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(1);\n}\n\np {\n    @include line-clamp(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.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,0nNAA0nN,CAAC;AAC7oN,qBAAe,SAAS;;ACYxB,MAAM,iBAAiB,GAAG;IACtB,SAAS;IACT,WAAW;IACX,UAAU;IACV,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;IACP,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,UAAU;IACV,WAAW;IACX,WAAW;IACX,WAAW;CACd,CAAC;MAGW,MAAM;;;;QAkQf,gBAAW,GAAG,CAAC,KAAiB;YAC5B,IAAI,IAAI,CAAC,GAAG;gBAAE,OAAO,IAAI,CAAC;YAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;SACrB,CAAC;2BArPqB,KAAK;2BAGL,KAAK;;;;;;;;;uBAyET,aAAa,EAAE;;;oBAYI,WAAW;;;;;IAgBjD,oBAAoB;;QAChB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC9B;IAED,gBAAgB;QACZ,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;QAC/C,WAAW,CAAC,KAAK,GAAG,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC;QACnD,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEhC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;QAC1E,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACjD;;;IAMD,kBAAkB,CAAC,KAAK;QACpB,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;KACjC;;;IAKD,kBAAkB;;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC;YAAE,OAAO;QACtD,MAAM,EAAE,gBAAgB,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QACjD,MAAM,WAAW,GAAG,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,WAAW,mCAAI,CAAC,CAAC;QACpD,MAAM,cAAc,GAAG,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,mCAAI,CAAC,CAAC;QAC1D,MAAM,UAAU,GAAG,WAAW,GAAG,cAAc,CAAC;QAChD,IAAI,CAAC,WAAW,GAAG,UAAU,GAAG,GAAG,CAAC;KACvC;IAED,kBAAkB;QACd,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC;YAAE,OAAO;QACtD,IAAI,CAAC,WAAW,GAAG,aAAa,EAAE,CAAC;KACtC;IAED,cAAc;QACV,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAEnE,IAAI,UAAU,EAAE;YACZ,QACI,eACI,IAAI,EAAE,UAAU,EAChB,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,aAC1B,QAAQ,GACT,EACb;SACL;aAAM,IAAI,UAAU,IAAI,cAAc,IAAI,SAAS,EAAE;YAClD,QACI,iBACI,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAE,cAAc,EACxB,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,aAC1B,QAAQ,GACP,EACf;SACL;KACJ;IAED,wBAAwB;QACpB,MAAM,EACF,OAAO,EACP,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACT,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,IAAI,GACP,GAAG,IAAI,CAAC;QACT,MAAM,MAAM,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACnC,MAAM,SAAS,GAAG,OAAO,IAAI,WAAW,CAAC;QACzC,MAAM,SAAS,GAAG,OAAO,IAAI,WAAW,CAAC;QACzC,MAAM,SAAS,GAAG,UAAU,IAAI,cAAc,IAAI,SAAS,IAAI,UAAU,CAAC;QAC1E,IAAI,SAAS;YAAE,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACvC,IAAI,SAAS,IAAI,CAAC,QAAQ;YAAE,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,SAAS;YAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzC,IAAI,QAAQ;YAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEvC,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC3B;IAED,eAAe;QACX,QACI,EAAC,QAAQ,QACJ,IAAI,CAAC,GAAG,KACL,WACI,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,aACnB,KAAK,EACb,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GACvB,CACV,EACA,IAAI,CAAC,cAAc,EAAE,EACtB,WACI,KAAK,EAAC,SAAS,aACP,kBAAkB,EAC1B,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAEpC,IAAI,CAAC,KAAK,IAAI,qBAAY,OAAO,IAAE,IAAI,CAAC,KAAK,CAAM,EACnD,IAAI,CAAC,WAAW,IAAI,oBAAW,aAAa,IAAE,IAAI,CAAC,WAAW,CAAK,EACpE,eAAQ,CACN,EACL,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3B,0BACY,gBAAgB,EACxB,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,iBAAiB,GAChB,CACd,CACM,EACb;KACL;IAED,aAAa;QACT,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAErB,OAAO;YACH,GAAG,EAAE,IAAI;YACT,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE;SAChD,CAAC;KACL;IAED,YAAY;QACR,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAErB,OAAO,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE,GAAG,EAAE,kBAAkB,EAAE,GAAG,EAAE,CAAC;KACzE;IASD,oBAAoB;QAChB,OAAO,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC/C;;;IAKD,MAAM;QACF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACrC,IAAI,QAAQ,IAAI,IAAI,KAAK,eAAe;YACpC,QACI,WACI,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,aAC9B,kBAAkB,IAEzB,IAAI,CAAC,eAAe,EAAE,CACrB,EACR;aACD,IAAI,CAAC,CAAC,GAAG;YACV,QACI,SACI,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,EACtC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAC,qBAAqB,aACjB,kBAAkB,EAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,eAAe,EAAE,CACvB,EACN;;YAEF,QACI,cACI,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,wBAAwB,EAAE,aAC9B,kBAAkB,EAC1B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,eAAe,EAAE,CAClB,EACX;KACT;;;;;;;","names":[],"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(var-prefixer(card-color), --t-text, #4d4d4d);\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(: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        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(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\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                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), 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}

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

@@ -1,10 +1,10 @@
 import { r as t, c as a, h as r, F as c, g as o } from "./index-7a5365e2.js";
 
-import { k as e, o as i, i as s } from "./index-c215e8ef.js";
+import { k as e, o as i, i as n } from "./index-c215e8ef.js";
 
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{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:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--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(: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)));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:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));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:focus:hover{box-shadow:var(--const-double-focus-ring), 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;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp: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 s = "*{box-sizing:border-box}*:active{outline:none}*:focus{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-color, var(--t-card-color, var(--t-text, #4d4d4d)));--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(: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)));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:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));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:focus:hover{box-shadow:var(--const-double-focus-ring), 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 d = n;
+const d = s;
 
 const l = [ "primary", "secondary", "tertiary", "info", "success", "warning", "alert", "accent-1", "accent-2", "accent-3", "accent-4", "accent-5", "accent-6", "accent-7", "accent-8", "accent-9", "accent-10", "accent-11", "accent-12" ];
 
@@ -51,7 +51,7 @@ const h = class {
   // #endregion
   // #region Listeners
   onHostElementFocus(t) {
-    if (!s(t, this.hostElement)) return;
+    if (!n(t, this.hostElement)) return;
     this.clickableElement.focus();
   }
   // #endregion
@@ -89,15 +89,15 @@ const h = class {
     }
   }
   generateContainerClasses() {
-    const {isSmall: t, isAutoSmall: a, avatarName: r, avatarInitials: c, avatarSrc: o, avatarIcon: e, isTouch: i, isAutoTouch: s, isStatic: n, type: d} = this;
+    const {isSmall: t, isAutoSmall: a, avatarName: r, avatarInitials: c, avatarSrc: o, avatarIcon: e, isTouch: i, isAutoTouch: n, isStatic: s, type: d} = this;
     const l = [ "container", d ];
     const h = t || a;
-    const v = i || s;
-    const p = r || c || o || e;
+    const v = i || n;
+    const b = r || c || o || e;
     if (h) l.push("is-small");
-    if (v && !n) l.push("is-touch");
-    if (p) l.push("has-avatar");
-    if (n) l.push("is-static");
+    if (v && !s) l.push("is-touch");
+    if (b) l.push("has-avatar");
+    if (s) l.push("is-static");
     return l.join(" ");
   }
   generateContent() {

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

@@ -1 +1 @@
-{"version":3,"names":["q2CardCss","Q2CardStyle0","PREDEFINED_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","disconnectedCallback","_a","resizeObserver","disconnect","componentDidLoad","hostElement","clickableElement","overrideFocus","ResizeObserver","determineAutoSmall","observe","onHostElementFocus","isEventFromElement","focus","isStatic","hasAttribute","containerElement","avatarElement","avatarWidth","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","determineAutoTouch","isAutoTouch","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContainerClasses","isSmall","isTouch","result","showSmall","showTouch","hasAvatar","push","join","generateContent","Fragment","bar","class","getBarClasses","style","getBarStyles","title","description","isBarColorPredefined","includes","render","href","target","rel","onClick"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    position: relative;\n    width: 100%;\n    text-align: start;\n    height: 100%;\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\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(: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        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(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\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                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), 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(1);\n}\n\np {\n    @include line-clamp(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"],"mappings":"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"}
+{"version":3,"names":["q2CardCss","Q2CardStyle0","PREDEFINED_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","disconnectedCallback","_a","resizeObserver","disconnect","componentDidLoad","hostElement","clickableElement","overrideFocus","ResizeObserver","determineAutoSmall","observe","onHostElementFocus","isEventFromElement","focus","isStatic","hasAttribute","containerElement","avatarElement","avatarWidth","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","determineAutoTouch","isAutoTouch","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContainerClasses","isSmall","isTouch","result","showSmall","showTouch","hasAvatar","push","join","generateContent","Fragment","bar","class","getBarClasses","style","getBarStyles","title","description","isBarColorPredefined","includes","render","href","target","rel","onClick"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    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(var-prefixer(card-color), --t-text, #4d4d4d);\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(: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        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(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\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                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), 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"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.56.0",
+    "version": "1.56.1",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -36,7 +36,7 @@
     },
     "dependencies": {
         "@stencil/core": "4.18.0",
-        "q2-tecton-common": "1.56.0",
+        "q2-tecton-common": "1.56.1",
         "swiper": "8.4.4"
     },
     "devDependencies": {
@@ -61,5 +61,5 @@
         "typescript": "5.4.5",
         "typescript-eslint": "^7.11.0"
     },
-    "gitHead": "e31f3c0c53fadac9ad79da8ed59a1ecc9b1d6607"
+    "gitHead": "ace5bdc10a9bd24a4ba6aa8c068d96c9692bb720"
 }