@record-evolution/widget-value 1.1.19 → 1.1.21

package/dist/widget-value.js

@@ -33,7 +33,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const t$4 = globalThis,
-  e$3 = t$4.ShadowRoot && (void 0 === t$4.ShadyCSS || t$4.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
+  e$5 = t$4.ShadowRoot && (void 0 === t$4.ShadyCSS || t$4.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
   s$3 = Symbol(),
   o$4 = new WeakMap();
 let n$3 = class n {
@@ -44,7 +44,7 @@ let n$3 = class n {
   get styleSheet() {
     let t = this.o;
     const s = this.t;
-    if (e$3 && void 0 === t) {
+    if (e$5 && void 0 === t) {
       const e = void 0 !== s && 1 === s.length;
       e && (t = o$4.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$4.set(s, t));
     }
@@ -64,13 +64,13 @@ const r$5 = t => new n$3("string" == typeof t ? t : t + "", void 0, s$3),
     return new n$3(o, t, s$3);
   },
   S$1 = (s, o) => {
-    if (e$3) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
+    if (e$5) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
       const o = document.createElement("style"),
         n = t$4.litNonce;
       void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
     }
   },
-  c$3 = e$3 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
+  c$3 = e$5 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
     let e = "";
     for (const s of t.cssRules) e += s.cssText;
     return r$5(e);
@@ -83,7 +83,7 @@ const r$5 = t => new n$3("string" == typeof t ? t : t + "", void 0, s$3),
  */
 const {
     is: i$3,
-    defineProperty: e$2,
+    defineProperty: e$4,
     getOwnPropertyDescriptor: h$1,
     getOwnPropertyNames: r$4,
     getOwnPropertySymbols: o$3,
@@ -147,7 +147,7 @@ let y$1 = class y extends HTMLElement {
     if (s.state && (s.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t) && ((s = Object.create(s)).wrapped = true), this.elementProperties.set(t, s), !s.noAccessor) {
       const i = Symbol(),
         h = this.getPropertyDescriptor(t, i, s);
-      void 0 !== h && e$2(this.prototype, t, h);
+      void 0 !== h && e$4(this.prototype, t, h);
     }
   }
   static getPropertyDescriptor(t, s, i) {
@@ -354,7 +354,7 @@ const t$3 = globalThis,
   s$2 = i$2 ? i$2.createPolicy("lit-html", {
     createHTML: t => t
   }) : void 0,
-  e$1 = "$lit$",
+  e$3 = "$lit$",
   h = `lit$${Math.random().toFixed(9).slice(2)}$`,
   o$2 = "?" + h,
   n$1 = `<${o$2}>`,
@@ -399,7 +399,7 @@ const V = (t, i) => {
       y = 0;
     for (; y < s.length && (c.lastIndex = y, u = c.exec(s), null !== u);) y = c.lastIndex, c === f ? "!--" === u[1] ? c = v$1 : void 0 !== u[1] ? c = _ : void 0 !== u[2] ? ($.test(u[2]) && (r = RegExp("</" + u[2], "g")), c = m$1) : void 0 !== u[3] && (c = m$1) : c === m$1 ? ">" === u[0] ? (c = r ?? f, d = -1) : void 0 === u[1] ? d = -2 : (d = c.lastIndex - u[2].length, a = u[1], c = void 0 === u[3] ? m$1 : '"' === u[3] ? g : p$1) : c === g || c === p$1 ? c = m$1 : c === v$1 || c === _ ? c = f : (c = m$1, r = void 0);
     const x = c === m$1 && t[i + 1].startsWith("/>") ? " " : "";
-    l += c === f ? s + n$1 : d >= 0 ? (o.push(a), s.slice(0, d) + e$1 + s.slice(d) + h + x) : s + h + (-2 === d ? i : x);
+    l += c === f ? s + n$1 : d >= 0 ? (o.push(a), s.slice(0, d) + e$3 + s.slice(d) + h + x) : s + h + (-2 === d ? i : x);
   }
   return [P(t, l + (t[s] || "<?>") + (2 === i ? "</svg>" : 3 === i ? "</math>" : "")), o];
 };
@@ -421,7 +421,7 @@ class N {
     }
     for (; null !== (r = C.nextNode()) && d.length < u;) {
       if (1 === r.nodeType) {
-        if (r.hasAttributes()) for (const t of r.getAttributeNames()) if (t.endsWith(e$1)) {
+        if (r.hasAttributes()) for (const t of r.getAttributeNames()) if (t.endsWith(e$3)) {
           const i = v[a++],
             s = r.getAttribute(t).split(h),
             e = /([.?@])?(.*)/.exec(i);
@@ -699,7 +699,7 @@ o$1?.({
  */
 const t$2 = {
     CHILD: 2},
-  e = t => (...e) => ({
+  e$2 = t => (...e) => ({
     _$litDirective$: t,
     values: e
   });
@@ -777,7 +777,7 @@ const u = (e, s, t) => {
     for (let l = s; l <= t; l++) r.set(e[l], l);
     return r;
   },
-  c = e(class extends i {
+  c = e$2(class extends i {
     constructor(e) {
       if (super(e), e.type !== t$2.CHILD) throw Error("repeat() can only be used in text expressions");
     }
@@ -908,12 +908,35 @@ function r(r) {
   });
 }
 
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$1 = (e, t, c) => (c.configurable = true, c.enumerable = true, Reflect.decorate && "object" != typeof t && Object.defineProperty(e, t, c), c);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function e(e, r) {
+  return (n, s, i) => {
+    const o = t => t.renderRoot?.querySelector(e) ?? null;
+    return e$1(n, s, {
+      get() {
+        return o(this);
+      }
+    });
+  };
+}
+
 let WidgetValue = class WidgetValue extends i$1 {
     constructor() {
         super();
         this.dataSets = new Map();
         this.textActive = true;
-        this.version = '1.1.19';
+        this.version = '1.1.21';
         this.origWidth = 0;
         this.origHeight = 0;
         this.resizeObserver = new ResizeObserver(this.applyData.bind(this));
@@ -926,23 +949,23 @@ let WidgetValue = class WidgetValue extends i$1 {
         }
     }
     firstUpdated(_changedProperties) {
-        var _a;
-        this.valueContainer = (_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.value-container');
         this.registerTheme(this.theme);
-        this.sizingSetup();
-        this.transformData();
-        this.applyData();
     }
     update(changedProperties) {
         if (changedProperties.has('inputData')) {
-            this.sizingSetup();
             this.transformData();
+        }
+        super.update(changedProperties);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('inputData')) {
+            this.sizingSetup();
             this.applyData();
         }
         if (changedProperties.has('theme')) {
             this.registerTheme(this.theme);
         }
-        super.update(changedProperties);
+        super.updated(changedProperties);
     }
     registerTheme(theme) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -954,17 +977,32 @@ let WidgetValue = class WidgetValue extends i$1 {
             cssTextColor || ((_k = (_j = (_h = (_g = this.theme) === null || _g === void 0 ? void 0 : _g.theme_object) === null || _h === void 0 ? void 0 : _h.title) === null || _j === void 0 ? void 0 : _j.subtextStyle) === null || _k === void 0 ? void 0 : _k.color) || this.themeTitleColor;
     }
     sizingSetup() {
-        var _a, _b, _c;
-        const boxes = Array.from((_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sizing-container > .single-value'));
-        this.origWidth =
-            (_b = boxes === null || boxes === void 0 ? void 0 : boxes.map((b) => b.getBoundingClientRect().width).reduce((p, c) => (c > p ? c : p), 0)) !== null && _b !== void 0 ? _b : 0;
-        this.origHeight =
-            (_c = boxes === null || boxes === void 0 ? void 0 : boxes.map((b) => b.getBoundingClientRect().height).reduce((p, c) => (c > p ? c : p), 0)) !== null && _c !== void 0 ? _c : 0;
+        var _a;
+        const boxes = Array.from((_a = this.sizingContainer) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.single-value'));
+        let width = 0;
+        let height = 0;
+        for (const box of boxes) {
+            const dims = box.getBoundingClientRect();
+            width = Math.max(dims.width, width);
+            height = Math.max(dims.height, height);
+        }
+        if (width < this.origWidth) {
+            if (!this.lastLargerWidthTime || Date.now() - this.lastLargerWidthTime > 5000) {
+                this.origWidth = width;
+            }
+        }
+        else {
+            this.origWidth = width;
+            this.lastLargerWidthTime = Date.now();
+        }
+        this.origHeight = height;
     }
     applyData() {
-        var _a, _b, _c, _d;
-        const userWidth = (_a = this.valueContainer) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-        const userHeight = (_b = this.valueContainer) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        if (!this.valueContainer)
+            return;
+        const userWidth = this.valueContainer.getBoundingClientRect().width;
+        const userHeight = this.valueContainer.getBoundingClientRect().height;
         const count = this.dataSets.size;
         const width = this.origWidth;
         const height = this.origHeight;
@@ -978,7 +1016,7 @@ let WidgetValue = class WidgetValue extends i$1 {
             const m = uwgap / width / c;
             const size = m * m * width * height * count;
             if (r * m * height <= uhgap)
-                fits.push({ c, m, size, width, height, userWidth, userHeight });
+                fits.push({ r, c, m, size, width, height, userWidth, userHeight });
         }
         for (let r = 1; r <= count; r++) {
             const c = Math.ceil(count / r);
@@ -987,33 +1025,30 @@ let WidgetValue = class WidgetValue extends i$1 {
             const m = uhgap / height / r;
             const size = m * m * width * height * count;
             if (c * m * width <= uwgap)
-                fits.push({ r, m, size, width, height, userWidth, userHeight });
+                fits.push({ r, c, m, size, width, height, userWidth, userHeight });
         }
         const maxSize = fits.reduce((p, c) => (c.size < p ? p : c.size), 0);
         const fit = fits.find((f) => f.size === maxSize);
-        const modifier = (_c = fit === null || fit === void 0 ? void 0 : fit.m) !== null && _c !== void 0 ? _c : 1;
+        if (!fit)
+            return;
+        const modifier = (_a = fit.m) !== null && _a !== void 0 ? _a : 1;
         // console.log('FITS', fits, 'modifier', modifier, 'cols',fit?.c, 'rows', fit?.r, 'new size', fit?.size.toFixed(0), 'total space', (userWidth* userHeight).toFixed(0))
-        const boxes = Array.from((_d = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelectorAll('.value-container > .single-value'));
-        boxes === null || boxes === void 0 ? void 0 : boxes.forEach((box) => box.setAttribute('style', `width:${modifier * width}px; height:${modifier * height}px; padding:${modifier * 6}px`));
-        boxes === null || boxes === void 0 ? void 0 : boxes.forEach((n) => {
-            var _a, _b, _c, _d;
-            const label = n.getAttribute('label');
+        const boxes = Array.from((_b = this.valueContainer) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.single-value'));
+        this.valueContainer.style.gridTemplateColumns = `repeat(${fit.c}, 1fr)`;
+        for (const box of boxes) {
+            box.setAttribute('style', `width:${modifier * width}px; height:${modifier * height}px; padding:${modifier * 6}px`);
+            const label = box.getAttribute('label');
             const ds = this.dataSets.get(label !== null && label !== void 0 ? label : '');
-            const numberText = n.querySelector('.current-value');
+            const numberText = box.querySelector('.current-value');
             numberText.setAttribute('style', `font-size: ${32 * modifier}px; 
-                color: ${((_a = ds === null || ds === void 0 ? void 0 : ds.styling) === null || _a === void 0 ? void 0 : _a.valueColor) || ((_d = (_c = (_b = this.theme) === null || _b === void 0 ? void 0 : _b.theme_object) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[0]) || this.themeTitleColor};`);
-        });
-        boxes === null || boxes === void 0 ? void 0 : boxes.forEach((n) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            const label = n.getAttribute('label');
-            const ds = this.dataSets.get(label !== null && label !== void 0 ? label : '');
-            const labelText = n.querySelector('.label');
+                color: ${((_c = ds === null || ds === void 0 ? void 0 : ds.styling) === null || _c === void 0 ? void 0 : _c.valueColor) || ((_f = (_e = (_d = this.theme) === null || _d === void 0 ? void 0 : _d.theme_object) === null || _e === void 0 ? void 0 : _e.color) === null || _f === void 0 ? void 0 : _f[0]) || this.themeTitleColor};`);
+            const labelText = box.querySelector('.label');
             labelText.setAttribute('style', `font-size: ${26 * modifier}px; 
-                color: ${((_a = ds === null || ds === void 0 ? void 0 : ds.styling) === null || _a === void 0 ? void 0 : _a.labelColor) || ((_d = (_c = (_b = this.theme) === null || _b === void 0 ? void 0 : _b.theme_object) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[1]) || this.themeSubtitleColor};`);
-            const unitText = n.querySelector('.unit');
+                color: ${((_g = ds === null || ds === void 0 ? void 0 : ds.styling) === null || _g === void 0 ? void 0 : _g.labelColor) || ((_k = (_j = (_h = this.theme) === null || _h === void 0 ? void 0 : _h.theme_object) === null || _j === void 0 ? void 0 : _j.color) === null || _k === void 0 ? void 0 : _k[1]) || this.themeSubtitleColor};`);
+            const unitText = box.querySelector('.unit');
             unitText.setAttribute('style', `font-size: ${26 * modifier}px; 
-                color: ${((_e = ds === null || ds === void 0 ? void 0 : ds.styling) === null || _e === void 0 ? void 0 : _e.valueColor) || ((_h = (_g = (_f = this.theme) === null || _f === void 0 ? void 0 : _f.theme_object) === null || _g === void 0 ? void 0 : _g.color) === null || _h === void 0 ? void 0 : _h[0]) || this.themeTitleColor};`);
-        });
+                color: ${((_l = ds === null || ds === void 0 ? void 0 : ds.styling) === null || _l === void 0 ? void 0 : _l.valueColor) || ((_p = (_o = (_m = this.theme) === null || _m === void 0 ? void 0 : _m.theme_object) === null || _o === void 0 ? void 0 : _o.color) === null || _p === void 0 ? void 0 : _p[0]) || this.themeTitleColor};`);
+        }
         this.textActive = true;
     }
     async transformData() {
@@ -1028,8 +1063,9 @@ let WidgetValue = class WidgetValue extends i$1 {
         (_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.dataseries) === null || _b === void 0 ? void 0 : _b.forEach((ds) => {
             var _a;
             // pivot data
-            const distincts = [...new Set((_a = ds.data) === null || _a === void 0 ? void 0 : _a.map((d) => d.pivot))].sort();
-            ds.needleValue = undefined;
+            const distincts = ds.multiChart
+                ? [...new Set((_a = ds.data) === null || _a === void 0 ? void 0 : _a.map((d) => d.pivot))].sort()
+                : [''];
             distincts.forEach((piv) => {
                 var _a, _b, _c;
                 const prefix = piv !== null && piv !== void 0 ? piv : '';
@@ -1071,9 +1107,6 @@ let WidgetValue = class WidgetValue extends i$1 {
                 }
             }
         });
-        this.requestUpdate();
-        await this.updateComplete;
-        // console.log('Value Datasets', this.dataSets)
     }
     render() {
         var _a, _b, _c, _d;
@@ -1115,7 +1148,7 @@ let WidgetValue = class WidgetValue extends i$1 {
                 <div class="paging no-data" ?active=${!this.dataSets.size}>No Data</div>
                 <div class="value-container">
                     ${c([...this.dataSets.entries()].sort(), ([label]) => label, ([label, ds]) => {
-            var _a, _b;
+            var _a;
             return x `
                                 <div class="single-value" label="${label}">
                                     <div class="label paging" ?active=${this.textActive}>${label}</div>
@@ -1124,9 +1157,11 @@ let WidgetValue = class WidgetValue extends i$1 {
                                         ?active=${this.textActive}
                                         style="color: ${this.themeTitleColor}"
                                     >
-                                        ${isNaN((_a = ds.needleValue) !== null && _a !== void 0 ? _a : 0) || ds.needleValue === undefined
+                                        ${ds.needleValue === undefined ||
+                ds.needleValue === null ||
+                isNaN(ds.needleValue)
                 ? ''
-                : ds.needleValue.toFixed(Math.max(0, (_b = ds.precision) !== null && _b !== void 0 ? _b : 0))}
+                : ds.needleValue.toFixed(Math.max(0, (_a = ds.precision) !== null && _a !== void 0 ? _a : 0))}
                                         <span class="unit paging" ?active=${this.textActive}>${ds.unit}</span>
                                     </span>
                                 </div>
@@ -1177,10 +1212,7 @@ WidgetValue.styles = i$4 `
         }
 
         .value-container {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: center;
+            display: grid;
             line-height: 0.9;
             flex: 1;
             overflow: hidden;
@@ -1194,7 +1226,6 @@ WidgetValue.styles = i$4 `
             align-items: end;
             padding: 6px;
             box-sizing: border-box;
-            /* border-left: 4px solid #ddd; */
         }
 
         .current-value {
@@ -1212,13 +1243,8 @@ WidgetValue.styles = i$4 `
 
         .sizing-container {
             position: absolute;
-            left: 10000px;
-            display: flex;
+            left: 100000px;
             line-height: 0.9;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: center;
-            flex: 1;
             overflow: hidden;
             gap: 12px;
         }
@@ -1254,8 +1280,14 @@ __decorate([
 __decorate([
     r()
 ], WidgetValue.prototype, "themeSubtitleColor", void 0);
+__decorate([
+    e('.value-container')
+], WidgetValue.prototype, "valueContainer", void 0);
+__decorate([
+    e('.sizing-container')
+], WidgetValue.prototype, "sizingContainer", void 0);
 WidgetValue = __decorate([
-    t('widget-value-1.1.19')
+    t('widget-value-1.1.21')
 ], WidgetValue);
 
 export { WidgetValue };