q2-tecton-elements 1.54.3 → 1.55.0

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

@@ -1,6 +1,6 @@
 import { r as t, h as e, g as i, c as o } from "./index-7a5365e2.js";
 
-import { o as n, e as r } from "./index-504f1a9e.js";
+import { o as n, e as r } from "./index-f2a66217.js";
 
 const a = "*{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}*{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}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 
@@ -106,44 +106,44 @@ const d = class {
   render() {
     const {clickable: t} = this;
     return e("div", {
-      key: "0829fd5b35d9479ab8a7dae744e8a09e90a1a128",
+      key: "7b0894fa0180d68cba7b47a6e63f837255a70057",
       "test-id": "itemContainer",
       class: this.itemClasses,
       ref: t => this.itemElement = t,
       role: t ? "button" : undefined,
       tabIndex: t ? 0 : undefined
     }, this.hasBulletSlotContent && e("div", {
-      key: "6fba2ecbbe6fe30121f15cda9cc5026a5c5468c2",
+      key: "5ef5a26d2fb4644e9b9d902bc7ff314a90df9976",
       class: this.bulletClasses
     }, e("slot", {
-      key: "9bd9880d99124c1102725b5ce6ca49ac1e229cf9",
+      key: "7db082ffd73b04494e67cbdee93b140afb11e016",
       name: "bullet"
     })), e("div", {
-      key: "0c184236511ba043c91a009c93680858e34de545",
+      key: "42212f56e12da4b57ae14b613efcdc59fbbc93b4",
       class: this.mainClasses
     }, this.hasHeaderSlotContent && e("div", {
-      key: "2570b5fd60955dbbc97f5f3d941a5d653785fb0e",
+      key: "9153d8de21c4809716f17f31717d97463bb045a5",
       class: "header"
     }, e("slot", {
-      key: "a438cafe8aeded03ee814f736ae897852a9f1415",
+      key: "ab504063f003daa1ea3984555ccf703426116dc0",
       name: "header"
     })), this.hasBodySlotContent && e("div", {
-      key: "270585a7a4ca111aedd4baeab101c353814aa72c",
+      key: "1a8b650df30033853919f6492aaa194f60a11c60",
       class: "body"
     }, e("slot", {
-      key: "cc95afec425e06c0a9edccedb0420207ccab88a0",
+      key: "b8262d4ef02751e63b62b525543394d0f14824db",
       name: "body"
     }))), this.hasActionSlotContent && e("div", {
-      key: "c6a32baa731bd79c57a625d615058442a5bc764a",
+      key: "056bc3b9f932495baf46613b66857325d19c0e3b",
       class: this.actionClasses
     }, e("slot", {
-      key: "2b3104f1e0b4eed5e605c5784468f608240a881b",
+      key: "f5332dd36657b470c993b773195044f7c809fe66",
       name: "action"
     })), this.hasFooterSlotContent && e("div", {
-      key: "0a989b6ec5ca51e55fb44d0e90f57fe792a6bf35",
+      key: "111359c030a37ad8e72df6e3a40d8b8d226a4734",
       class: this.footerClasses
     }, e("slot", {
-      key: "76ae62c0b433f78b187853da2cf40394f7ca315e",
+      key: "8afe6c9372a9c53663d6383116256f19b470858b",
       name: "footer"
     })));
   }
@@ -154,9 +154,9 @@ const d = class {
 
 d.style = s;
 
-const c = "*{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:inline-block}:host:active{box-shadow:none}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link-container.standalone .link{color:var(--tct-link-color-standalone, var(--t-primary));height:var(--tct-link-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:0.5}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";
+const l = "*{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:inline-block}:host:active{box-shadow:none}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit)}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5)}.link-container.standalone .link{color:var(--tct-link-color-standalone, var(--t-primary));height:var(--tct-link-height, 24px);display:flex;align-items:center;--tct-icon-size:16px;text-decoration:none}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px)}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled, var(--t-primary));opacity:0.5;text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:0.5}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";
 
-const l = c;
+const c = l;
 
 const h = class {
   constructor(e) {
@@ -232,7 +232,7 @@ const h = class {
   }
 };
 
-h.style = l;
+h.style = c;
 
 const p = "*{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}*{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([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}::slotted(q2-item){--comp-item-padding:var(--tct-list-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));--tct-item-padding:var(--comp-item-padding)}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}slot:not([name]){display:flex;flex-direction:column;gap:var(--tct-list-item-gap, 0)}";
 
@@ -302,23 +302,23 @@ const f = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "e4371faae59ae85dee324d6d6783a4b93c23f67f",
+      key: "cb7c090b2e018bc46ef3ae829f4fd7f3cbb896e8",
       class: this.listClasses,
       ref: t => this.listElement = t
     }, (this.hasFilterSlot || this.hasLabelContent) && e("div", {
-      key: "59cc98b62d2581a66a9ed127189fb23364c49bff",
+      key: "16672b343894a78a378b17e18f21b1412b103683",
       class: this.headerClasses
     }, e("div", {
-      key: "568b6fab57c7552d5a577d19bd31760f6d1aa461",
+      key: "4f78dabab7f982fb6e472c29195bbcc8f4c6758c",
       class: "label"
     }, this.label), this.hasFilterSlot && e("slot", {
-      key: "d27e785788847cf1a422568383bfe5d986764b2b",
+      key: "7ce97a75b66749f137a6c1b70827ddcef60df8ce",
       name: "filter"
     })), e("div", {
-      key: "7a00add6911167d7a27008f10f5d44cfae5d80b2",
+      key: "05f39d183177a30f3d5edacecafa57503e1bef9c",
       role: "list"
     }, e("slot", {
-      key: "dd5a0290091b0f1cb00a14cde43bab36e87573d2"
+      key: "37be8bca5d3b81404db947d96605585b3a1cce32"
     })));
   }
   get hostElement() {

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

@@ -1,10 +1,10 @@
 import { r as t, c as e, h as i } from "./index-7a5365e2.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{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:center;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;height:var(--tct-legend-item-height, var(--app-scale-9x, 45px));opacity:1;padding-block:0;padding-inline:var(--tct-legend-item-padding-inline, var(--app-scale-2x, 10px));transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, var(--app-line-height, 1.428571429em));text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, var(--app-line-height, 1.428571429em));text-align:right}";
+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{position:relative;width:100%;display:block}ul{list-style:none;padding:0;margin:0}.item-button{align-items:center;background-color:transparent;border:none;column-gap:var(--tct-legend-item-gap, var(--app-scale-2x, 10px));display:flex;height:var(--tct-legend-item-height, 24px);opacity:1;padding-block:0;padding-inline:var(--tct-legend-item-padding-inline, var(--app-scale-2x, 10px));transition:opacity var(--app-tween-1, 0.2s ease);width:100%}.item-button:hover{cursor:pointer}.item-button-faded>*{opacity:var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4))}.item-color-indicator{border-radius:50%;display:inline-block;flex-shrink:0;height:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));width:var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px))}.item-name{color:var(--tct-legend-item-name-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-name-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-name-font-weight, 600);line-height:var(--tct-legend-item-name-line-height, var(--app-line-height, 1.428571429em));text-align:left}.item-value{color:var(--tct-legend-item-value-font-color, var(--t-text, #4d4d4d));display:inline-block;flex-grow:1;font-size:var(--tct-legend-item-value-font-size, var(--app-font-size, 14px));font-weight:var(--tct-legend-item-value-font-weight, 400);line-height:var(--tct-legend-item-value-line-height, var(--app-line-height, 1.428571429em));text-align:right}";
 
 const s = n;
 
-const a = class {
+const o = class {
   constructor(i) {
     t(this, i);
     this.click = e(this, "click", 7);
@@ -103,10 +103,10 @@ const a = class {
   // #region Render Methods
   render() {
     return i("click-elsewhere", {
-      key: "b80e97d61b66d2a3950c0e680d8f6fdf0594391a",
+      key: "17df977aa81845d2b4e6db411b2860495ba61e4b",
       onChange: () => this.onClickElsewhere(this)
     }, i("ul", {
-      key: "14dc772fa9b1608e415573e90d4c2780c12adef5"
+      key: "21d4f05b1b2e5f5374e04a8a93249704043ed447"
     }, this.dataWithClasses.map((t => i("li", {
       class: "item"
     }, i("button", {
@@ -140,7 +140,7 @@ const a = class {
   }
 };
 
-a.style = s;
+o.style = s;
 
-export { a as q2_legend };
+export { o as q2_legend };
 //# sourceMappingURL=q2-legend.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["q2LegendCss","Q2LegendStyle0","Q2Legend","componentWillLoad","this","watchHoveredItemId","hoveredItemId","watchSelectedItemId","selectedItemId","newItemId","newItemIndex","getDataIndexForId","hoveredItemIndex","selectedItemIndex","dataWithClasses","data","map","item","index","Object","assign","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","format","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","click","emit","onClickElsewhere","obj","onMouseEnter","mouseenter","onMouseLeave","mouseleave","render","h","key","onChange","class","name","backgroundColor","color"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n}\n\nul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.item-button {\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n    display: flex;\n    height: var-list(--tct-legend-item-height, --app-scale-9x, 45px);\n    opacity: 1;\n    padding-block: 0;\n    padding-inline: #{var-list(--tct-legend-item-padding-inline, --app-scale-2x, 10px)};\n    transition: opacity var(--app-tween-1, 0.2s ease);\n    width: 100%;\n\n    &:hover {\n        cursor: pointer;\n    }\n\n    &-faded > * {\n        opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n    }\n}\n\n.item-color-indicator {\n    border-radius: 50%;\n    display: inline-block;\n    flex-shrink: 0;\n    height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n    width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n    color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-name-font-weight, 600);\n    line-height: var-list(--tct-legend-item-name-line-height, --app-line-height, 1.428571429em);\n    text-align: left;\n}\n\n.item-value {\n    color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-legend-item-value-font-weight, 400);\n    line-height: var-list(--tct-legend-item-value-line-height, --app-line-height, 1.428571429em);\n    text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IDonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    click: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseenter: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseleave: EventEmitter<IDonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            this.click.emit(null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        this.click.emit(this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        this.mouseenter.emit(this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        this.mouseleave.emit(this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2LegendCss","Q2LegendStyle0","Q2Legend","componentWillLoad","this","watchHoveredItemId","hoveredItemId","watchSelectedItemId","selectedItemId","newItemId","newItemIndex","getDataIndexForId","hoveredItemIndex","selectedItemIndex","dataWithClasses","data","map","item","index","Object","assign","classes","isItemButtonFaded","isItemButtonSelected","formatValue","value","valueAsFloat","parseFloat","toString","format","Intl","NumberFormat","style","currency","id","findIndex","onClick","event","itemData","stopPropagation","itemIndex","detail","click","emit","onClickElsewhere","obj","onMouseEnter","mouseenter","onMouseLeave","mouseleave","render","h","key","onChange","class","name","backgroundColor","color"],"sources":["src/components/q2-legend/q2-legend.scss?tag=q2-legend&encapsulation=shadow","src/components/q2-legend/q2-legend.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    position: relative;\n    width: 100%;\n    display: block;\n}\n\nul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.item-button {\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    column-gap: var-list(--tct-legend-item-gap, --app-scale-2x, 10px);\n    display: flex;\n    height: var-list(--tct-legend-item-height, 24px);\n    opacity: 1;\n    padding-block: 0;\n    padding-inline: #{var-list(--tct-legend-item-padding-inline, --app-scale-2x, 10px)};\n    transition: opacity var(--app-tween-1, 0.2s ease);\n    width: 100%;\n\n    &:hover {\n        cursor: pointer;\n    }\n\n    &-faded > * {\n        opacity: var-list(--tct-legend-item-opacity-faded, --app-disabled-opacity, 0.4);\n    }\n}\n\n.item-color-indicator {\n    border-radius: 50%;\n    display: inline-block;\n    flex-shrink: 0;\n    height: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n    width: var-list(--tct-legend-item-color-indicator-size, --app-scale-3x, 15px);\n}\n\n.item-name {\n    color: var-list(--tct-legend-item-name-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-name-font-size, --app-font-size, 14px);\n    font-weight: var(--tct-legend-item-name-font-weight, 600);\n    line-height: var-list(--tct-legend-item-name-line-height, --app-line-height, 1.428571429em);\n    text-align: left;\n}\n\n.item-value {\n    color: var-list(--tct-legend-item-value-font-color, --t-text, #4d4d4d);\n    display: inline-block;\n    flex-grow: 1;\n    font-size: var-list(--tct-legend-item-value-font-size, --app-font-size, 14px);\n    font-weight: var-list(--tct-legend-item-value-font-weight, 400);\n    line-height: var-list(--tct-legend-item-value-line-height, --app-line-height, 1.428571429em);\n    text-align: right;\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { IDonutChartData } from 'q2-tecton-common/lib/types/element-types';\n\n@Component({\n    tag: 'q2-legend',\n    shadow: true,\n    styleUrl: 'q2-legend.scss',\n})\nexport class Q2Legend implements ComponentInterface {\n    // #region State Properties\n\n    @State()\n    hoveredItemIndex: number = -1;\n\n    @State()\n    selectedItemIndex: number = -1;\n\n    // #endregion\n    // #region Public Property API\n\n    /** An array of objects that contain the data to be displayed. */\n    @Prop()\n    data: IDonutChartData[] = [];\n\n    /** The format of the value displayed in the legend. */\n    @Prop({ reflect: true })\n    format: 'default' | 'currency' = 'default';\n\n    /** The id of the item to set as hovered. */\n    @Prop({ reflect: true })\n    hoveredItemId: string = null;\n\n    /** The id of the item to set as selected. */\n    @Prop({ reflect: true })\n    selectedItemId: string = null;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    click: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseenter: EventEmitter<IDonutChartData>;\n\n    @Event()\n    mouseleave: EventEmitter<IDonutChartData>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this.watchHoveredItemId(this.hoveredItemId);\n        this.watchSelectedItemId(this.selectedItemId);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('hoveredItemId')\n    watchHoveredItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.hoveredItemIndex = newItemIndex;\n    }\n\n    @Watch('selectedItemId')\n    watchSelectedItemId(newItemId: string) {\n        const newItemIndex = this.getDataIndexForId(newItemId);\n        this.selectedItemIndex = newItemIndex;\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get dataWithClasses() {\n        return this.data.map((item, index) => ({\n            ...item,\n            classes: {\n                'item-button': true,\n                'item-button-faded': this.isItemButtonFaded(index),\n                'item-button-selected': this.isItemButtonSelected(index),\n            },\n        }));\n    }\n\n    formatValue(value: string | number) {\n        const valueAsFloat = parseFloat(value.toString());\n        if (this.format === 'currency') {\n            return Intl.NumberFormat('en-US', {\n                style: 'currency',\n                currency: 'USD',\n            }).format(valueAsFloat);\n        }\n\n        return Intl.NumberFormat('en-US').format(valueAsFloat);\n    }\n\n    getDataIndexForId(id: string) {\n        const index = this.data.findIndex(item => item.id === id);\n        return index >= 0 ? index : -1;\n    }\n\n    isItemButtonFaded(index: number) {\n        if (this.isItemButtonSelected(index) || index == this.hoveredItemIndex) return false;\n\n        if (this.selectedItemIndex >= 0 && this.hoveredItemIndex === -1) return true;\n\n        return this.hoveredItemIndex >= 0 && index !== this.hoveredItemIndex;\n    }\n\n    isItemButtonSelected(index: number) {\n        return index === this.selectedItemIndex;\n    }\n\n    onClick(event: MouseEvent, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        if (this.selectedItemIndex === itemIndex) {\n            this.selectedItemIndex = -1;\n            if (event.detail === 0) {\n                // Keyboard click\n                this.hoveredItemIndex = -1;\n            } else {\n                // Mouse click\n                this.hoveredItemIndex = itemIndex;\n            }\n            this.click.emit(null);\n            return;\n        }\n\n        this.selectedItemIndex = itemIndex;\n        this.click.emit(this.data[itemIndex]);\n    }\n\n    onClickElsewhere(obj) {\n        obj.selectedItemIndex = -1;\n    }\n\n    onMouseEnter(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = itemIndex;\n        this.mouseenter.emit(this.data[itemIndex]);\n    }\n\n    onMouseLeave(event: Event, itemData: IDonutChartData) {\n        event.stopPropagation();\n        const itemIndex = this.getDataIndexForId(itemData.id);\n        this.hoveredItemIndex = -1;\n        this.mouseleave.emit(this.data[itemIndex]);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <click-elsewhere onChange={() => this.onClickElsewhere(this)}>\n                <ul>\n                    {this.dataWithClasses.map(item => (\n                        <li class=\"item\">\n                            <button\n                                test-id=\"item\"\n                                aria-label={`${item.name} ${this.formatValue(item.value)}`}\n                                class={item.classes}\n                                onClick={event => this.onClick(event, item)}\n                                onMouseEnter={event => this.onMouseEnter(event, item)}\n                                onMouseLeave={event => this.onMouseLeave(event, item)}\n                            >\n                                <span\n                                    test-id=\"itemColor\"\n                                    class=\"item-color-indicator\"\n                                    style={{ backgroundColor: item.color }}\n                                    aria-hidden=\"true\"\n                                />\n                                <span\n                                    test-id=\"itemName\"\n                                    class=\"item-name\"\n                                >\n                                    {item.name}\n                                </span>\n                                <span\n                                    id={`item-${item.id}`}\n                                    test-id=\"itemValue\"\n                                    class=\"item-value\"\n                                >\n                                    {this.formatValue(item.value)}\n                                </span>\n                            </button>\n                        </li>\n                    ))}\n                </ul>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

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

@@ -1,17 +1,16 @@
-import { r as t, h as i, g as n } from "./index-7a5365e2.js";
+import { r as t, g as i } from "./index-7a5365e2.js";
 
-import { l as s } from "./index-504f1a9e.js";
+import { l as n } from "./index-f2a66217.js";
 
 const e = "*{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:inline}";
 
 const o = e;
 
-const r = class {
+const s = class {
   constructor(i) {
     t(this, i);
-    // #endregion
-    // #region Local Methods
-        this.initMutationObserver = () => {
+    this.initMutationObserver = () => {
+      if (!("MutationObserver" in window)) return;
       const t = new MutationObserver(this.mutationHandler);
       t.observe(this.hostElement, {
         childList: true,
@@ -20,23 +19,20 @@ const r = class {
       });
       this.mutationObserver = t;
     };
-    this.initValue = async () => {
-      const t = this.hostElement.textContent.trim();
+    this.initValue = () => {
+      const {hostTextContent: t} = this;
+      this.hostElement.textContent = null;
       if (!this.value && t) {
         this.value = t;
-        this.hostElement.textContent = null;
-      } else {
-        this.propHandler();
       }
     };
-    this.mutationHandler = async () => {
-      const t = this.hostElement.textContent.trim();
-      if (t && this.value !== t) {
-        this.value = t;
+    this.mutationHandler = () => {
+      const {hostTextContent: t} = this;
+      if (t && this.translatedValue !== t) {
         this.hostElement.textContent = null;
+        this.value = t;
       }
     };
-    this.displayValue = undefined;
     this.substitutions = undefined;
     this.value = undefined;
   }
@@ -51,32 +47,27 @@ const r = class {
     this.initValue();
   }
   componentDidLoad() {
-    if ("MutationObserver" in window) this.initMutationObserver();
+    this.initMutationObserver();
   }
   // #endregion
-  // #region Watchers
-  propHandler() {
-    this.displayValue = s(this.value, this.substitutions);
+  // #region Local Methods
+  get hostTextContent() {
+    return this.hostElement.textContent.trim();
+  }
+  get translatedValue() {
+    return n(this.value, this.substitutions);
   }
   // #endregion
   // #region Render Methods
   render() {
-    return i("span", {
-      key: "8774b0a4bfb39826f6d7be0640c7a0244ab22a09"
-    }, this.displayValue);
+    return this.translatedValue;
   }
   get hostElement() {
-    return n(this);
-  }
-  static get watchers() {
-    return {
-      value: [ "propHandler" ],
-      substitutions: [ "propHandler" ]
-    };
+    return i(this);
   }
 };
 
-r.style = o;
+s.style = o;
 
-export { r as q2_loc };
+export { s as q2_loc };
 //# sourceMappingURL=q2-loc.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["q2LocCss","Q2LocStyle0","Q2Loc","this","initMutationObserver","observer","MutationObserver","mutationHandler","observe","hostElement","childList","subtree","characterData","mutationObserver","initValue","async","textContent","trim","value","propHandler","disconnectedCallback","_a","disconnect","componentWillLoad","componentDidLoad","window","displayValue","loc","substitutions","render","h","key"],"sources":["src/components/q2-loc/q2-loc.scss?tag=q2-loc&encapsulation=shadow","src/components/q2-loc/q2-loc.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline\n}","import { Element, Component, Prop, State, Watch, h } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-loc', shadow: true, styleUrl: 'q2-loc.scss' })\nexport class Q2Loc {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\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    displayValue: string;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Any substitutions you would like to pass into the localization string. */\n    @Prop()\n    substitutions: string[];\n\n    /**\n     * The reference to the localization key you would like to display the localized output of.\n     * If no value is provided, any text inside the element will be used as a fallback.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initValue();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('value')\n    @Watch('substitutions')\n    propHandler() {\n        this.displayValue = loc(this.value, this.substitutions);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    initValue = async () => {\n        const textContent = this.hostElement.textContent.trim();\n        if (!this.value && textContent) {\n            this.value = textContent;\n            this.hostElement.textContent = null;\n        } else {\n            this.propHandler();\n        }\n    };\n\n    mutationHandler = async () => {\n        const textContent = this.hostElement.textContent.trim();\n        if (textContent && this.value !== textContent) {\n            this.value = textContent;\n            this.hostElement.textContent = null;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <span>{this.displayValue}</span>;\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAW;;AACjB,MAAAC,IAAeD;;MCGFE,IAAK;;;;;QA4DdC,KAAAC,uBAAuB;MACnB,MAAMC,IAAW,IAAIC,iBAAiBH,KAAKI;MAC3CF,EAASG,QAAQL,KAAKM,aAAa;QAAEC,WAAW;QAAMC,SAAS;QAAMC,eAAe;;MACpFT,KAAKU,mBAAmBR;AAAQ;IAGpCF,KAAAW,YAAYC;MACR,MAAMC,IAAcb,KAAKM,YAAYO,YAAYC;MACjD,KAAKd,KAAKe,SAASF,GAAa;QAC5Bb,KAAKe,QAAQF;QACbb,KAAKM,YAAYO,cAAc;aAC5B;QACHb,KAAKgB;;;IAIbhB,KAAAI,kBAAkBQ;MACd,MAAMC,IAAcb,KAAKM,YAAYO,YAAYC;MACjD,IAAID,KAAeb,KAAKe,UAAUF,GAAa;QAC3Cb,KAAKe,QAAQF;QACbb,KAAKM,YAAYO,cAAc;;;;;;;;;EA7CvC,oBAAAI;;KACIC,IAAAlB,KAAKU,sBAAgB,QAAAQ,WAAA,aAAAA,EAAEC;IACvBnB,KAAKU,mBAAmB;;EAG5B,iBAAAU;IACIpB,KAAKW;;EAGT,gBAAAU;IACI,IAAI,sBAAsBC,QAAQtB,KAAKC;;;;EAQ3C,WAAAe;IACIhB,KAAKuB,eAAeC,EAAIxB,KAAKe,OAAOf,KAAKyB;;;;EAiC7C,MAAAC;IACI,OAAOC,EAAA;MAAAC,KAAA;OAAO5B,KAAKuB"}
+{"version":3,"names":["q2LocCss","Q2LocStyle0","Q2Loc","this","initMutationObserver","window","observer","MutationObserver","mutationHandler","observe","hostElement","childList","subtree","characterData","mutationObserver","initValue","hostTextContent","textContent","value","translatedValue","disconnectedCallback","_a","disconnect","componentWillLoad","componentDidLoad","trim","loc","substitutions","render"],"sources":["src/components/q2-loc/q2-loc.scss?tag=q2-loc","src/components/q2-loc/q2-loc.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n\n:host {\n    display: inline\n}","import { Element, Component, Prop } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-loc', shadow: false, styleUrl: 'q2-loc.scss' })\nexport class Q2Loc {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Any substitutions you would like to pass into the localization string. */\n    @Prop()\n    substitutions: string[];\n\n    /**\n     * The reference to the localization key you would like to display the localized output of.\n     * If no value is provided, any text inside the element will be used as a fallback.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initValue();\n    }\n\n    componentDidLoad() {\n        this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hostTextContent(): string {\n        return this.hostElement.textContent.trim();\n    }\n\n    get translatedValue(): string {\n        return loc(this.value, this.substitutions);\n    }\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    initValue = () => {\n        const { hostTextContent } = this;\n        this.hostElement.textContent = null;\n        if (!this.value && hostTextContent) {\n            this.value = hostTextContent;\n        }\n    };\n\n    mutationHandler = () => {\n        const { hostTextContent } = this;\n        if (hostTextContent && this.translatedValue !== hostTextContent) {\n            this.hostElement.textContent = null;\n            this.value = hostTextContent;\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return this.translatedValue;\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAW;;AACjB,MAAAC,IAAeD;;MCGFE,IAAK;;;IAqDdC,KAAAC,uBAAuB;MACnB,MAAM,sBAAsBC,SAAS;MACrC,MAAMC,IAAW,IAAIC,iBAAiBJ,KAAKK;MAC3CF,EAASG,QAAQN,KAAKO,aAAa;QAAEC,WAAW;QAAMC,SAAS;QAAMC,eAAe;;MACpFV,KAAKW,mBAAmBR;AAAQ;IAGpCH,KAAAY,YAAY;MACR,OAAMC,iBAAEA,KAAoBb;MAC5BA,KAAKO,YAAYO,cAAc;MAC/B,KAAKd,KAAKe,SAASF,GAAiB;QAChCb,KAAKe,QAAQF;;;IAIrBb,KAAAK,kBAAkB;MACd,OAAMQ,iBAAEA,KAAoBb;MAC5B,IAAIa,KAAmBb,KAAKgB,oBAAoBH,GAAiB;QAC7Db,KAAKO,YAAYO,cAAc;QAC/Bd,KAAKe,QAAQF;;;;;;;;EA3CrB,oBAAAI;;KACIC,IAAAlB,KAAKW,sBAAgB,QAAAO,WAAA,aAAAA,EAAEC;IACvBnB,KAAKW,mBAAmB;;EAG5B,iBAAAS;IACIpB,KAAKY;;EAGT,gBAAAS;IACIrB,KAAKC;;;;EAMT,mBAAIY;IACA,OAAOb,KAAKO,YAAYO,YAAYQ;;EAGxC,mBAAIN;IACA,OAAOO,EAAIvB,KAAKe,OAAOf,KAAKwB;;;;EA6BhC,MAAAC;IACI,OAAOzB,KAAKgB"}

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

@@ -1,14 +1,14 @@
-import { r as t, h as a, g as e } from "./index-7a5365e2.js";
+import { r as t, h as e, g as a } from "./index-7a5365e2.js";
 
-import { o as s, i as o, n as r, t as i, l as n } from "./index-504f1a9e.js";
+import { o as s, i as o, n as r, t as i, l as n } from "./index-f2a66217.js";
 
 const c = "*{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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
 
 const p = c;
 
 const d = class {
-  constructor(a) {
-    t(this, a);
+  constructor(e) {
+    t(this, e);
     this.presentToggle = undefined;
     this.appearance = "standard";
     this.description = false;
@@ -44,15 +44,15 @@ const d = class {
     return i();
   }
   messageIcon(t) {
-    const e = {
+    const a = {
       success: "success",
       warning: "warning",
       danger: "error",
       error: "error",
       info: "info"
     };
-    const s = e[t] || e.info;
-    return a("q2-icon", {
+    const s = a[t] || a.info;
+    return e("q2-icon", {
       type: s,
       class: "message-icon"
     });
@@ -61,35 +61,35 @@ const d = class {
   // #region Render Methods
   render() {
     const {isFirefox: t} = this;
-    const e = t && this.presentToggle;
+    const a = t && this.presentToggle;
     const s = !t && this.presentToggle;
     const {description: o} = this;
     const r = n(`tecton.element.message.type.${this.type ? this.type : "info"}`);
-    return a("div", {
-      key: "862e4f7aa7ae624a695ce6727f72ed8759584173",
+    return e("div", {
+      key: "ccca9e80908f73482c73f865743e5f7cd6438d99",
       tabindex: "-1",
       class: "message",
       role: o ? undefined : "alert",
       "aria-live": o ? undefined : "assertive",
       "aria-atomic": o ? undefined : "true",
-      "aria-relevant": o && e ? undefined : "all",
+      "aria-relevant": o && a ? undefined : "all",
       "test-id": "messageContainer"
-    }, this.appearance === "standard" ? this.messageIcon(this.type) : "", s && a("div", {
-      key: "84084e80aac97b4e4e33a2bcf348094cd88279fb",
+    }, this.appearance === "standard" ? this.messageIcon(this.type) : "", s && e("div", {
+      key: "a9937495e83a7e0852034c36639d8c60ea3c30ac",
       class: "sr"
-    }), a("div", {
-      key: "4a437099dce9df5657a7f5039a55f5b326d2ee58",
+    }), e("div", {
+      key: "e650f7ef7c2544e44f63ce7a23f33f04145a7e83",
       class: "sr message-label"
-    }, r), a("div", {
-      key: "8bf021fb84aa6d4973546060acaddae5d059d351",
+    }, r), e("div", {
+      key: "daa66069373ac3030fb33dc3c88c0621c91bb6a4",
       class: "message-content",
-      "aria-hidden": e ? "true" : undefined
-    }, a("slot", {
-      key: "1790d7a0df5758d13c8b76577a4703808cddc832"
+      "aria-hidden": a ? "true" : undefined
+    }, e("slot", {
+      key: "464a52a941be194c1267beee2c1b307ece17f964"
     })));
   }
   get hostElement() {
-    return e(this);
+    return a(this);
   }
 };