@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/cjs/{tttx-graph_1_9_101.cjs.entry.js → tttx-graph_1_9_103.cjs.entry.js}

@@ -3,134 +3,134 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2c07dc57.js');
-const auto = require('./auto-be8ad100.js');
+const auto = require('./auto-356ad09b.js');
 
-const gaugeLabelPlugin = {
-  id: 'gaugeLabel',
-  beforeDatasetsDraw(chart) {
-    const { ctx } = chart;
-    ctx.save();
-    const xCoor = chart.getDatasetMeta(0).data[0].x;
-    const yCoor = chart.getDatasetMeta(0).data[0].y - 12;
-    ctx.font = 'bold 20px sans-serif';
-    ctx.fillStyle = 'rgba(0, 0, 0, 1)';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(chart.config.options.gaugeText || '', xCoor, yCoor);
-  }
+const gaugeLabelPlugin = {
+  id: 'gaugeLabel',
+  beforeDatasetsDraw(chart) {
+    const { ctx } = chart;
+    ctx.save();
+    const xCoor = chart.getDatasetMeta(0).data[0].x;
+    const yCoor = chart.getDatasetMeta(0).data[0].y - 12;
+    ctx.font = 'bold 20px sans-serif';
+    ctx.fillStyle = 'rgba(0, 0, 0, 1)';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(chart.config.options.gaugeText || '', xCoor, yCoor);
+  }
 };
 
 const tttxGraphCss = ":host{display:block;width:100%;height:100%}.chart-container{display:flex;align-items:center;justify-content:center}.overlay-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:white;font-size:24px;font-weight:bold;text-shadow:2px 2px 4px rgba(0, 0, 0, 0.7);pointer-events:none;}";
 
-auto.Chart.register(auto.DoughnutController, auto.LineController, gaugeLabelPlugin);
-const TttxGraph = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.chartConfig = undefined;
-    this.chartType = undefined;
-    this.chartData = undefined;
-    this.chartText = undefined;
-    this.formattedData = undefined;
-  }
-  componentDidLoad() {
-    this.formattedData = JSON.parse(this.chartData);
-    if (!this.chartConfig) {
-      switch (this.chartType) {
-        case 'gauge':
-          this.chartConfig = this.getGaugeConfig();
-          auto.Chart.register(gaugeLabelPlugin);
-          break;
-        case 'line':
-          console.log('line');
-          this.chartConfig = this.getLineConfig();
-          console.log(this.chartConfig);
-          break;
-      }
-    }
-    new auto.Chart(this.canvasElement, JSON.parse(this.chartConfig));
-  }
-  render() {
-    return (index.h("div", { class: 'chart-container', style: { 'position': 'relative', 'height': '100%', 'width': '100%' } }, index.h("canvas", { ref: (el) => this.canvasElement = el })));
-  }
-  getLineConfig() {
-    console.log(this.formattedData);
-    const config = {
-      type: 'line',
-      data: {
-        datasets: [{
-            fill: false,
-            borderColor: '#00187C',
-            tension: 0.1,
-            data: this.formattedData
-          }]
-      },
-      options: {
-        maintainAspectRatio: false,
-        responsive: true,
-        plugins: {
-          legend: {
-            display: false,
-          }
-        },
-        scales: {
-          x: {
-            type: 'linear',
-            position: 'bottom'
-          }
-        }
-      }
-    };
-    return JSON.stringify(config);
-  }
-  getGaugeConfig() {
-    this.formattedData.push(100 - this.formattedData[0]);
-    const config = {
-      type: 'doughnut',
-      data: {
-        datasets: [
-          {
-            'data': this.formattedData,
-            'backgroundColor': [
-              this.getRAGColour(this.formattedData[0]),
-              '#F0F0F0'
-            ],
-            'borderWidth': 0,
-            'hoverBorderWidth': 0
-          },
-        ]
-      },
-      options: {
-        maintainAspectRatio: false,
-        responsive: true,
-        rotation: 270,
-        circumference: 180,
-        cutout: '60%',
-        gaugeText: this.chartText,
-        plugins: {
-          legend: {
-            display: false,
-          },
-          tooltip: {
-            enabled: false
-          },
-          hover: {
-            enabled: false
-          }
-        },
-      }
-    };
-    return JSON.stringify(config);
-  }
-  getRAGColour(perc) {
-    if (perc < 50)
-      return '#DC0000'; // Red for values below 50
-    if (perc < 100)
-      return '#F59500'; // Orange for values from 50 to 99
-    if (perc === 100)
-      return '#A2BB31'; // Green for a value of 100
-    return '#F0F0F0'; // Default color
-  }
-};
+auto.Chart.register(auto.DoughnutController, auto.LineController, gaugeLabelPlugin);
+const TttxGraph = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.chartConfig = undefined;
+    this.chartType = undefined;
+    this.chartData = undefined;
+    this.chartText = undefined;
+    this.formattedData = undefined;
+  }
+  componentDidLoad() {
+    this.formattedData = JSON.parse(this.chartData);
+    if (!this.chartConfig) {
+      switch (this.chartType) {
+        case 'gauge':
+          this.chartConfig = this.getGaugeConfig();
+          auto.Chart.register(gaugeLabelPlugin);
+          break;
+        case 'line':
+          console.log('line');
+          this.chartConfig = this.getLineConfig();
+          console.log(this.chartConfig);
+          break;
+      }
+    }
+    new auto.Chart(this.canvasElement, JSON.parse(this.chartConfig));
+  }
+  render() {
+    return (index.h("div", { class: 'chart-container', style: { 'position': 'relative', 'height': '100%', 'width': '100%' } }, index.h("canvas", { ref: (el) => this.canvasElement = el })));
+  }
+  getLineConfig() {
+    console.log(this.formattedData);
+    const config = {
+      type: 'line',
+      data: {
+        datasets: [{
+            fill: false,
+            borderColor: '#00187C',
+            tension: 0.1,
+            data: this.formattedData
+          }]
+      },
+      options: {
+        maintainAspectRatio: false,
+        responsive: true,
+        plugins: {
+          legend: {
+            display: false,
+          }
+        },
+        scales: {
+          x: {
+            type: 'linear',
+            position: 'bottom'
+          }
+        }
+      }
+    };
+    return JSON.stringify(config);
+  }
+  getGaugeConfig() {
+    this.formattedData.push(100 - this.formattedData[0]);
+    const config = {
+      type: 'doughnut',
+      data: {
+        datasets: [
+          {
+            'data': this.formattedData,
+            'backgroundColor': [
+              this.getRAGColour(this.formattedData[0]),
+              '#F0F0F0'
+            ],
+            'borderWidth': 0,
+            'hoverBorderWidth': 0
+          },
+        ]
+      },
+      options: {
+        maintainAspectRatio: false,
+        responsive: true,
+        rotation: 270,
+        circumference: 180,
+        cutout: '60%',
+        gaugeText: this.chartText,
+        plugins: {
+          legend: {
+            display: false,
+          },
+          tooltip: {
+            enabled: false
+          },
+          hover: {
+            enabled: false
+          }
+        },
+      }
+    };
+    return JSON.stringify(config);
+  }
+  getRAGColour(perc) {
+    if (perc < 50)
+      return '#DC0000'; // Red for values below 50
+    if (perc < 100)
+      return '#F59500'; // Orange for values from 50 to 99
+    if (perc === 100)
+      return '#A2BB31'; // Green for a value of 100
+    return '#F0F0F0'; // Default color
+  }
+};
 TttxGraph.style = tttxGraphCss;
 
-exports.tttx_graph_1_9_101 = TttxGraph;
+exports.tttx_graph_1_9_103 = TttxGraph;

package/dist/cjs/{tttx-icon_1_9_101.cjs.entry.js → tttx-icon_1_9_103.cjs.entry.js}

@@ -6,29 +6,29 @@ const index = require('./index-2c07dc57.js');
 
 const tttxIconCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}:host{--icon-size:24;display:inline-block;cursor:default;user-select:none}.material-symbols-rounded{font-size:var(--icon-size)}.icon-size{width:var(--icon-size);height:var(--icon-size)}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#dc0000}.darkred{color:#A20000}.orange{color:#f59500}.blue{color:#1479c6}.green{color:#a2bb31}.gray{color:#757575}.black{color:#212121}.white{color:white}";
 
-const TttxIcon = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.icon = undefined;
-    this.color = 'grey';
-    this.size = 24;
-  }
-  updateIconSize(newSize) {
-    this.element.style.setProperty('--icon-size', newSize);
-  }
-  componentWillRender() {
-    this.updateIconSize(this.size + 'px');
-  }
-  render() {
-    if (this.color.startsWith('#')) {
-      return (index.h(index.Host, null, index.h("span", { class: 'material-symbols-rounded', style: { color: this.color } }, this.icon)));
-    }
-    else {
-      return (index.h(index.Host, null, index.h("span", { class: `material-symbols-rounded ${this.color}` }, this.icon)));
-    }
-  }
-  get element() { return index.getElement(this); }
-};
+const TttxIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.icon = undefined;
+    this.color = 'grey';
+    this.size = 24;
+  }
+  updateIconSize(newSize) {
+    this.element.style.setProperty('--icon-size', newSize);
+  }
+  componentWillRender() {
+    this.updateIconSize(this.size + 'px');
+  }
+  render() {
+    if (this.color.startsWith('#')) {
+      return (index.h(index.Host, null, index.h("span", { class: 'material-symbols-rounded', style: { color: this.color } }, this.icon)));
+    }
+    else {
+      return (index.h(index.Host, null, index.h("span", { class: `material-symbols-rounded ${this.color}` }, this.icon)));
+    }
+  }
+  get element() { return index.getElement(this); }
+};
 TttxIcon.style = tttxIconCss;
 
-exports.tttx_icon_1_9_101 = TttxIcon;
+exports.tttx_icon_1_9_103 = TttxIcon;

package/dist/cjs/{tttx-keyvalue-block_1_9_101.cjs.entry.js → tttx-keyvalue-block_1_9_103.cjs.entry.js}

@@ -6,67 +6,67 @@ const index = require('./index-2c07dc57.js');
 
 const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;font-size:16px;margin-bottom:4px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dt,dd{overflow-wrap:anywhere}dd{margin:0;font-weight:400;font-size:16px;color:#212121}dd:not(:last-child){margin-bottom:16px}dl.spacedout,dl.horizontal{display:flex;flex-direction:row;width:100%}dl.spacedout{justify-content:space-between}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%;max-width:50% !important}}@media (max-width: 600px){dl.horizontal div{width:100%;max-width:100% !important}}";
 
-const TttxKeyvalueBlock = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.keyvalues = undefined;
-    this.horizontal = undefined;
-    this.spacedout = undefined;
-    this._elements = undefined;
-  }
-  renderSingleElements(values) {
-    const keys = Object.keys(values);
-    const elements = [];
-    const divSize = (100 / keys.length).toString() + '%';
-    for (const element of keys) {
-      if (this.horizontal || this.spacedout) {
-        elements.push(index.h("div", { style: { maxWidth: divSize } }, index.h("dt", null, element), index.h("dd", null, values[element])));
-      }
-      else {
-        elements.push(index.h("dt", null, element));
-        elements.push(index.h("dd", null, values[element]));
-      }
-    }
-    return elements;
-  }
-  renderArrayElements(values) {
-    const elements = [];
-    const divSize = (100 / values.length).toString() + '%';
-    for (const element of values) {
-      const value = element;
-      if (this.horizontal || this.spacedout) {
-        elements.push(index.h("div", { style: { maxWidth: divSize } }, index.h("dt", { class: 'mainTitle' }, value.title), index.h("dt", { class: 'subTitle' }, value.subTitle), index.h("dd", null, value.data)));
-      }
-      else {
-        elements.push(index.h("dt", { class: 'mainTitle' }, value.title));
-        elements.push(index.h("dt", { class: 'subTitle' }, value.subTitle));
-        elements.push(index.h("dd", null, value.data));
-      }
-    }
-    return elements;
-  }
-  componentWillRender() {
-    if (!this.keyvalues) {
-      return;
-    }
-    let values;
-    if (typeof this.keyvalues === 'string') {
-      values = JSON.parse(this.keyvalues);
-    }
-    else {
-      values = this.keyvalues;
-    }
-    if (Array.isArray(values)) {
-      this._elements = this.renderArrayElements(values);
-    }
-    else {
-      this._elements = this.renderSingleElements(values);
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("dl", { class: [this.horizontal ? 'horizontal' : undefined, this.spacedout ? ' spacedout' : undefined].join(' ').trim() }, this._elements)));
-  }
-};
+const TttxKeyvalueBlock = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.keyvalues = undefined;
+    this.horizontal = undefined;
+    this.spacedout = undefined;
+    this._elements = undefined;
+  }
+  renderSingleElements(values) {
+    const keys = Object.keys(values);
+    const elements = [];
+    const divSize = (100 / keys.length).toString() + '%';
+    for (const element of keys) {
+      if (this.horizontal || this.spacedout) {
+        elements.push(index.h("div", { style: { maxWidth: divSize } }, index.h("dt", null, element), index.h("dd", null, values[element])));
+      }
+      else {
+        elements.push(index.h("dt", null, element));
+        elements.push(index.h("dd", null, values[element]));
+      }
+    }
+    return elements;
+  }
+  renderArrayElements(values) {
+    const elements = [];
+    const divSize = (100 / values.length).toString() + '%';
+    for (const element of values) {
+      const value = element;
+      if (this.horizontal || this.spacedout) {
+        elements.push(index.h("div", { style: { maxWidth: divSize } }, index.h("dt", { class: 'mainTitle' }, value.title), index.h("dt", { class: 'subTitle' }, value.subTitle), index.h("dd", null, value.data)));
+      }
+      else {
+        elements.push(index.h("dt", { class: 'mainTitle' }, value.title));
+        elements.push(index.h("dt", { class: 'subTitle' }, value.subTitle));
+        elements.push(index.h("dd", null, value.data));
+      }
+    }
+    return elements;
+  }
+  componentWillRender() {
+    if (!this.keyvalues) {
+      return;
+    }
+    let values;
+    if (typeof this.keyvalues === 'string') {
+      values = JSON.parse(this.keyvalues);
+    }
+    else {
+      values = this.keyvalues;
+    }
+    if (Array.isArray(values)) {
+      this._elements = this.renderArrayElements(values);
+    }
+    else {
+      this._elements = this.renderSingleElements(values);
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("dl", { class: [this.horizontal ? 'horizontal' : undefined, this.spacedout ? ' spacedout' : undefined].join(' ').trim() }, this._elements)));
+  }
+};
 TttxKeyvalueBlock.style = tttxKeyvalueBlockCss;
 
-exports.tttx_keyvalue_block_1_9_101 = TttxKeyvalueBlock;
+exports.tttx_keyvalue_block_1_9_103 = TttxKeyvalueBlock;