@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/collection/components/atoms/tttx-percentage-bar/tttx-percentage-bar.js

@@ -1,168 +1,168 @@
-import { Host, h } from '@stencil/core';
-export class TttxPercentageBar {
-  constructor() {
-    this.percentage = undefined;
-    this.thresholds = undefined;
-    this.color = '#d5d5d5';
-    this.min = '1';
-    this.labelid = undefined;
-    this._percentage = undefined;
-    this._ranges = undefined;
-    this._min = undefined;
-  }
-  componentWillRender() {
-    if (typeof this.percentage === 'string') {
-      this._percentage = parseInt(this.percentage);
-    }
-    else {
-      this._percentage = this.percentage;
-    }
-    let thresholdsArray;
-    if (this.thresholds) {
-      if (typeof this.thresholds === 'string') {
-        thresholdsArray = JSON.parse(this.thresholds);
-      }
-      else {
-        thresholdsArray = this.thresholds;
-      }
-      this._ranges = [{ range: [0], color: thresholdsArray[0].color }];
-      for (const [i, thresholdsObj] of thresholdsArray.entries()) {
-        this._ranges[this._ranges.length - 1].range.push(thresholdsObj.threshold);
-        this._ranges[this._ranges.length - 1].color = thresholdsObj.color;
-        if (i < thresholdsArray.length - 1) {
-          this._ranges.push({ range: [thresholdsObj.threshold], color: undefined });
-        }
-      }
-    }
-    this._min = parseInt(this.min);
-  }
-  getColour() {
-    if (!this._ranges || this._ranges.length === 0) {
-      return this.color;
-    }
-    else {
-      const range = this._ranges.find(r => this._percentage >= r.range[0] && this._percentage <= r.range[1]);
-      return range.color;
-    }
-  }
-  getWidth() {
-    return Math.min(Math.max(this._percentage, Math.min(this._min, 100)), 100);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "progress" }, h("div", { class: "bar", style: { 'background-color': this.getColour(), 'width': `${this.getWidth()}%` }, role: "progressbar", "aria-valuemin": this._min, "aria-valuemax": "100", "aria-valuenow": this._percentage, "aria-labelledby": this.labelid }))));
-  }
-  static get is() { return "tttx-percentage-bar_1_9_101"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-percentage-bar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-percentage-bar.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "percentage": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "string | number",
-          "resolved": "number | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "percentage",
-        "reflect": false
-      },
-      "thresholds": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | Threshold[]",
-          "resolved": "Threshold[] | string",
-          "references": {
-            "Threshold": {
-              "location": "local"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "thresholds",
-        "reflect": false
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'#d5d5d5'"
-      },
-      "min": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "min",
-        "reflect": false,
-        "defaultValue": "'1'"
-      },
-      "labelid": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "labelid",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_percentage": {},
-      "_ranges": {},
-      "_min": {}
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class TttxPercentageBar {
+  constructor() {
+    this.percentage = undefined;
+    this.thresholds = undefined;
+    this.color = '#d5d5d5';
+    this.min = '1';
+    this.labelid = undefined;
+    this._percentage = undefined;
+    this._ranges = undefined;
+    this._min = undefined;
+  }
+  componentWillRender() {
+    if (typeof this.percentage === 'string') {
+      this._percentage = parseInt(this.percentage);
+    }
+    else {
+      this._percentage = this.percentage;
+    }
+    let thresholdsArray;
+    if (this.thresholds) {
+      if (typeof this.thresholds === 'string') {
+        thresholdsArray = JSON.parse(this.thresholds);
+      }
+      else {
+        thresholdsArray = this.thresholds;
+      }
+      this._ranges = [{ range: [0], color: thresholdsArray[0].color }];
+      for (const [i, thresholdsObj] of thresholdsArray.entries()) {
+        this._ranges[this._ranges.length - 1].range.push(thresholdsObj.threshold);
+        this._ranges[this._ranges.length - 1].color = thresholdsObj.color;
+        if (i < thresholdsArray.length - 1) {
+          this._ranges.push({ range: [thresholdsObj.threshold], color: undefined });
+        }
+      }
+    }
+    this._min = parseInt(this.min);
+  }
+  getColour() {
+    if (!this._ranges || this._ranges.length === 0) {
+      return this.color;
+    }
+    else {
+      const range = this._ranges.find(r => this._percentage >= r.range[0] && this._percentage <= r.range[1]);
+      return range.color;
+    }
+  }
+  getWidth() {
+    return Math.min(Math.max(this._percentage, Math.min(this._min, 100)), 100);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "progress" }, h("div", { class: "bar", style: { 'background-color': this.getColour(), 'width': `${this.getWidth()}%` }, role: "progressbar", "aria-valuemin": this._min, "aria-valuemax": "100", "aria-valuenow": this._percentage, "aria-labelledby": this.labelid }))));
+  }
+  static get is() { return "tttx-percentage-bar_1_9_103"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-percentage-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-percentage-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "percentage": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "percentage",
+        "reflect": false
+      },
+      "thresholds": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | Threshold[]",
+          "resolved": "Threshold[] | string",
+          "references": {
+            "Threshold": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "thresholds",
+        "reflect": false
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'#d5d5d5'"
+      },
+      "min": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "'1'"
+      },
+      "labelid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "labelid",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_percentage": {},
+      "_ranges": {},
+      "_min": {}
+    };
+  }
+}

package/dist/collection/components/atoms/tttx-percentage-bar/tttx-percentage-bar.stories.js

@@ -1,58 +1,58 @@
-export default {
-  title: 'atoms/Percentage Bar',
-  component: 'tttx-percentage-bar',
-};
-const TemplatePercentageBar = ({ percentage, thresholds }) => `<tttx-percentage-bar_1_9_101 percentage='${percentage}' thresholds='${JSON.stringify(thresholds)}'></tttx-percentage-bar_1_9_101>`;
-export const PercentageBar = TemplatePercentageBar.bind({});
-PercentageBar.args = {
-  percentage: 20,
-  thresholds: [
-    {
-      threshold: 50,
-      color: '#a20000',
-    },
-    {
-      threshold: 75,
-      color: '#fdc500',
-    },
-    {
-      threshold: 100,
-      color: '#397a4c',
-    },
-  ],
-};
-const TemplatePercentageBarWithoutThresholds = ({ percentage, color }) => `<tttx-percentage-bar_1_9_101 percentage='${percentage}' color='${color}'></tttx-percentage-bar_1_9_101>`;
-export const PercentageBarWithoutThresholds = TemplatePercentageBarWithoutThresholds.bind({});
-PercentageBarWithoutThresholds.args = {
-  percentage: 20,
-  color: '#397a4c',
-};
-const TemplatePercentageBarWithoutMinimum = ({ percentage, color, min }) => `<tttx-percentage-bar_1_9_101 percentage='${percentage}' color='${color}' min='${min}'></tttx-percentage-bar_1_9_101>`;
-export const PercentageBarWithoutMinimum = TemplatePercentageBarWithoutMinimum.bind({});
-PercentageBarWithoutMinimum.args = {
-  percentage: 0,
-  color: '#397a4c',
-  min: 0,
-};
+export default {
+  title: 'atoms/Percentage Bar',
+  component: 'tttx-percentage-bar',
+};
+const TemplatePercentageBar = ({ percentage, thresholds }) => `<tttx-percentage-bar_1_9_103 percentage='${percentage}' thresholds='${JSON.stringify(thresholds)}'></tttx-percentage-bar_1_9_103>`;
+export const PercentageBar = TemplatePercentageBar.bind({});
+PercentageBar.args = {
+  percentage: 20,
+  thresholds: [
+    {
+      threshold: 50,
+      color: '#a20000',
+    },
+    {
+      threshold: 75,
+      color: '#fdc500',
+    },
+    {
+      threshold: 100,
+      color: '#397a4c',
+    },
+  ],
+};
+const TemplatePercentageBarWithoutThresholds = ({ percentage, color }) => `<tttx-percentage-bar_1_9_103 percentage='${percentage}' color='${color}'></tttx-percentage-bar_1_9_103>`;
+export const PercentageBarWithoutThresholds = TemplatePercentageBarWithoutThresholds.bind({});
+PercentageBarWithoutThresholds.args = {
+  percentage: 20,
+  color: '#397a4c',
+};
+const TemplatePercentageBarWithoutMinimum = ({ percentage, color, min }) => `<tttx-percentage-bar_1_9_103 percentage='${percentage}' color='${color}' min='${min}'></tttx-percentage-bar_1_9_103>`;
+export const PercentageBarWithoutMinimum = TemplatePercentageBarWithoutMinimum.bind({});
+PercentageBarWithoutMinimum.args = {
+  percentage: 0,
+  color: '#397a4c',
+  min: 0,
+};
 const TemplatePercentageBarLabeled = ({ percentage, color, labelid }) => `
 <label id="someLabel">
     ${percentage}%
-    <tttx-percentage-bar_1_9_101 style='width: 100px;' percentage='${percentage}' color='${color}' labelid='${labelid}'></tttx-percentage-bar_1_9_101>
+    <tttx-percentage-bar_1_9_103 style='width: 100px;' percentage='${percentage}' color='${color}' labelid='${labelid}'></tttx-percentage-bar_1_9_103>
 </label>
-`;
-export const PercentageBarLabeled = TemplatePercentageBarLabeled.bind({});
-PercentageBarLabeled.args = {
-  percentage: 69,
-  color: '#397a4c',
-  labelid: 'someLabel',
-};
+`;
+export const PercentageBarLabeled = TemplatePercentageBarLabeled.bind({});
+PercentageBarLabeled.args = {
+  percentage: 69,
+  color: '#397a4c',
+  labelid: 'someLabel',
+};
 const TemplatePercentageBarLabeledInline = ({ percentage, color, labelid }) => `
-<label id="someLabel" style='display: flex;'>${percentage}%&emsp;<tttx-percentage-bar_1_9_101 style='width: 100px;' percentage='${percentage}' color='${color}' labelid='${labelid}'></tttx-percentage-bar_1_9_101>
+<label id="someLabel" style='display: flex;'>${percentage}%&emsp;<tttx-percentage-bar_1_9_103 style='width: 100px;' percentage='${percentage}' color='${color}' labelid='${labelid}'></tttx-percentage-bar_1_9_103>
 </label>
-`;
-export const PercentageBarLabeledInline = TemplatePercentageBarLabeledInline.bind({});
-PercentageBarLabeledInline.args = {
-  percentage: 69,
-  color: '#397a4c',
-  labelid: 'someLabel',
-};
+`;
+export const PercentageBarLabeledInline = TemplatePercentageBarLabeledInline.bind({});
+PercentageBarLabeledInline.args = {
+  percentage: 69,
+  color: '#397a4c',
+  labelid: 'someLabel',
+};

package/dist/collection/components/atoms/tttx-qrcode/tttx-qrcode.js

@@ -1,81 +1,81 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h } from '@stencil/core';
-import { QRCode, QRErrorCorrectLevel } from 'ts-qrcode';
-export class TttxQrCode {
-  constructor() {
-    this.link = 'https://example.com';
-    this.size = 258;
-  }
-  componentDidLoad() {
-    const options = {
-      width: this.size,
-      height: this.size,
-      correctLevel: QRErrorCorrectLevel.H,
-      background: '#ffffff',
-      foreground: '#000000',
-      text: this.link,
-    };
-    this.setShadowCanvas('qrcode', options);
-  }
-  setShadowCanvas(id, options) {
-    const parent = this.hostElement.shadowRoot.getElementById(id);
-    parent.innerHTML = '';
-    parent.appendChild(QRCode.createCanvas(options));
-  }
-  render() {
-    return h("div", { id: "qrcode" });
-  }
-  static get is() { return "tttx-qrcode_1_9_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-qrcode.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-qrcode.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "link": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "link",
-        "reflect": false,
-        "defaultValue": "'https://example.com'"
-      },
-      "size": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "258"
-      }
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from '@stencil/core';
+import { QRCode, QRErrorCorrectLevel } from 'ts-qrcode';
+export class TttxQrCode {
+  constructor() {
+    this.link = 'https://example.com';
+    this.size = 258;
+  }
+  componentDidLoad() {
+    const options = {
+      width: this.size,
+      height: this.size,
+      correctLevel: QRErrorCorrectLevel.H,
+      background: '#ffffff',
+      foreground: '#000000',
+      text: this.link,
+    };
+    this.setShadowCanvas('qrcode', options);
+  }
+  setShadowCanvas(id, options) {
+    const parent = this.hostElement.shadowRoot.getElementById(id);
+    parent.innerHTML = '';
+    parent.appendChild(QRCode.createCanvas(options));
+  }
+  render() {
+    return h("div", { id: "qrcode" });
+  }
+  static get is() { return "tttx-qrcode_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-qrcode.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-qrcode.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "link": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "link",
+        "reflect": false,
+        "defaultValue": "'https://example.com'"
+      },
+      "size": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "258"
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/atoms/tttx-qrcode/tttx-qrcode.stories.js

@@ -1,22 +1,22 @@
-export default {
-  title: 'Atoms/QRCode',
-  component: 'tttx-qrcode',
-  argTypes: {
-    url: {
-      control: { type: 'text' },
-    },
-    size: {
-      control: 'number',
-      default: 258
-    },
-  },
-};
-export const basicQRCode = args => {
-  const url = args.url;
-  const size = args.size;
-  return `<tttx-qrcode_1_9_101 link='${url}' size='${size}'></tttx-qrcode_1_9_101>`;
-};
-basicQRCode.args = {
-  url: 'https://example.com',
-  size: 258
-};
+export default {
+  title: 'Atoms/QRCode',
+  component: 'tttx-qrcode',
+  argTypes: {
+    url: {
+      control: { type: 'text' },
+    },
+    size: {
+      control: 'number',
+      default: 258
+    },
+  },
+};
+export const basicQRCode = args => {
+  const url = args.url;
+  const size = args.size;
+  return `<tttx-qrcode_1_9_103 link='${url}' size='${size}'></tttx-qrcode_1_9_103>`;
+};
+basicQRCode.args = {
+  url: 'https://example.com',
+  size: 258
+};