@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/components/tttx-graph.js

@@ -1,153 +1,153 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { C as Chart, D as DoughnutController, L as LineController } from './auto.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;}";
 
-Chart.register(DoughnutController, LineController, gaugeLabelPlugin);
-const TttxGraph = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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();
-          Chart.register(gaugeLabelPlugin);
-          break;
-        case 'line':
-          console.log('line');
-          this.chartConfig = this.getLineConfig();
-          console.log(this.chartConfig);
-          break;
-      }
-    }
-    new Chart(this.canvasElement, JSON.parse(this.chartConfig));
-  }
-  render() {
-    return (h("div", { class: 'chart-container', style: { 'position': 'relative', 'height': '100%', 'width': '100%' } }, 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
-  }
-  static get style() { return tttxGraphCss; }
-}, [1, "tttx-graph_localcomponent", {
-    "chartType": [1, "chart-type"],
-    "chartData": [1, "chart-data"],
-    "chartText": [1, "chart-text"],
-    "chartConfig": [32],
-    "formattedData": [32]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-graph_localcomponent"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-graph_localcomponent":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxGraph);
-      }
-      break;
-  } });
+Chart.register(DoughnutController, LineController, gaugeLabelPlugin);
+const TttxGraph = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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();
+          Chart.register(gaugeLabelPlugin);
+          break;
+        case 'line':
+          console.log('line');
+          this.chartConfig = this.getLineConfig();
+          console.log(this.chartConfig);
+          break;
+      }
+    }
+    new Chart(this.canvasElement, JSON.parse(this.chartConfig));
+  }
+  render() {
+    return (h("div", { class: 'chart-container', style: { 'position': 'relative', 'height': '100%', 'width': '100%' } }, 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
+  }
+  static get style() { return tttxGraphCss; }
+}, [1, "tttx-graph_1_9_103", {
+    "chartType": [1, "chart-type"],
+    "chartData": [1, "chart-data"],
+    "chartText": [1, "chart-text"],
+    "chartConfig": [32],
+    "formattedData": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-graph_1_9_103"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-graph_1_9_103":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxGraph);
+      }
+      break;
+  } });
 }
 
 export { TttxGraph as T, defineCustomElement as d };

package/dist/components/tttx-graph_1_9_103.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxGraph_1_9_103 extends Components.TttxGraph_1_9_103, HTMLElement {}
+export const TttxGraph_1_9_103: {
+  prototype: TttxGraph_1_9_103;
+  new (): TttxGraph_1_9_103;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{tttx-graph_localcomponent.js → tttx-graph_1_9_103.js}

@@ -1,6 +1,6 @@
 import { T as TttxGraph, d as defineCustomElement$1 } from './tttx-graph.js';
 
-const TttxGraph_localcomponent = TttxGraph;
+const TttxGraph_1_9_103 = TttxGraph;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxGraph_localcomponent, defineCustomElement };
+export { TttxGraph_1_9_103, defineCustomElement };

package/dist/components/tttx-icon.js

@@ -2,48 +2,48 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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 (h(Host, null, h("span", { class: 'material-symbols-rounded', style: { color: this.color } }, this.icon)));
-    }
-    else {
-      return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color}` }, this.icon)));
-    }
-  }
-  get element() { return this; }
-  static get style() { return tttxIconCss; }
-}, [1, "tttx-icon_localcomponent", {
-    "icon": [1],
-    "color": [1],
-    "size": [1026]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-icon_localcomponent"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-icon_localcomponent":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxIcon);
-      }
-      break;
-  } });
+const TttxIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 (h(Host, null, h("span", { class: 'material-symbols-rounded', style: { color: this.color } }, this.icon)));
+    }
+    else {
+      return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color}` }, this.icon)));
+    }
+  }
+  get element() { return this; }
+  static get style() { return tttxIconCss; }
+}, [1, "tttx-icon_1_9_103", {
+    "icon": [1],
+    "color": [1],
+    "size": [1026]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-icon_1_9_103"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-icon_1_9_103":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxIcon);
+      }
+      break;
+  } });
 }
 
 export { TttxIcon as T, defineCustomElement as d };

package/dist/components/tttx-icon_1_9_103.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxIcon_1_9_103 extends Components.TttxIcon_1_9_103, HTMLElement {}
+export const TttxIcon_1_9_103: {
+  prototype: TttxIcon_1_9_103;
+  new (): TttxIcon_1_9_103;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{tttx-icon_localcomponent.js → tttx-icon_1_9_103.js}

@@ -1,6 +1,6 @@
 import { T as TttxIcon, d as defineCustomElement$1 } from './tttx-icon.js';
 
-const TttxIcon_localcomponent = TttxIcon;
+const TttxIcon_1_9_103 = TttxIcon;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxIcon_localcomponent, defineCustomElement };
+export { TttxIcon_1_9_103, defineCustomElement };

package/dist/components/tttx-keyvalue-block_1_9_103.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxKeyvalueBlock_1_9_103 extends Components.TttxKeyvalueBlock_1_9_103, HTMLElement {}
+export const TttxKeyvalueBlock_1_9_103: {
+  prototype: TttxKeyvalueBlock_1_9_103;
+  new (): TttxKeyvalueBlock_1_9_103;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{tttx-keyvalue-block_localcomponent.js → tttx-keyvalue-block_1_9_103.js}

@@ -2,90 +2,90 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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(h("div", { style: { maxWidth: divSize } }, h("dt", null, element), h("dd", null, values[element])));
-      }
-      else {
-        elements.push(h("dt", null, element));
-        elements.push(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(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
-      }
-      else {
-        elements.push(h("dt", { class: 'mainTitle' }, value.title));
-        elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
-        elements.push(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 (h(Host, null, h("dl", { class: [this.horizontal ? 'horizontal' : undefined, this.spacedout ? ' spacedout' : undefined].join(' ').trim() }, this._elements)));
-  }
-  static get style() { return tttxKeyvalueBlockCss; }
-}, [1, "tttx-keyvalue-block_localcomponent", {
-    "keyvalues": [1],
-    "horizontal": [4],
-    "spacedout": [4],
-    "_elements": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-keyvalue-block_localcomponent"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-keyvalue-block_localcomponent":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxKeyvalueBlock);
-      }
-      break;
-  } });
+const TttxKeyvalueBlock = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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(h("div", { style: { maxWidth: divSize } }, h("dt", null, element), h("dd", null, values[element])));
+      }
+      else {
+        elements.push(h("dt", null, element));
+        elements.push(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(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
+      }
+      else {
+        elements.push(h("dt", { class: 'mainTitle' }, value.title));
+        elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
+        elements.push(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 (h(Host, null, h("dl", { class: [this.horizontal ? 'horizontal' : undefined, this.spacedout ? ' spacedout' : undefined].join(' ').trim() }, this._elements)));
+  }
+  static get style() { return tttxKeyvalueBlockCss; }
+}, [1, "tttx-keyvalue-block_1_9_103", {
+    "keyvalues": [1],
+    "horizontal": [4],
+    "spacedout": [4],
+    "_elements": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-keyvalue-block_1_9_103"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-keyvalue-block_1_9_103":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxKeyvalueBlock);
+      }
+      break;
+  } });
 }
 
-const TttxKeyvalueBlock_localcomponent = TttxKeyvalueBlock;
+const TttxKeyvalueBlock_1_9_103 = TttxKeyvalueBlock;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxKeyvalueBlock_localcomponent, defineCustomElement };
+export { TttxKeyvalueBlock_1_9_103, defineCustomElement };