@3t-transform/threeteeui 1.9.101 → 1.9.103

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

@@ -1,26 +1,26 @@
-export default {
-  title: 'Atoms/Datacard',
-  component: 'tttx-datacard',
-  parameters: {
-    backgrounds: {
-      default: 'grey',
-      values: [
-        { name: 'grey', value: '#F0F0F0' },
-      ],
-    },
-  },
-  argTypes: {
-    iconStyle: {
-      control: { type: 'select' },
-      options: ['up', 'down'],
-    },
-    width: { control: { type: 'range', min: 100, max: 1000, step: 10 } },
-    height: { control: { type: 'range', min: 100, max: 1000, step: 10 } }
-  },
-};
+export default {
+  title: 'Atoms/Datacard',
+  component: 'tttx-datacard',
+  parameters: {
+    backgrounds: {
+      default: 'grey',
+      values: [
+        { name: 'grey', value: '#F0F0F0' },
+      ],
+    },
+  },
+  argTypes: {
+    iconStyle: {
+      control: { type: 'select' },
+      options: ['up', 'down'],
+    },
+    width: { control: { type: 'range', min: 100, max: 1000, step: 10 } },
+    height: { control: { type: 'range', min: 100, max: 1000, step: 10 } }
+  },
+};
 const Template = ({ cardTitle = '', leftData = '', rightData = '', iconStyle, rightSubtext, cardType = 'text', chartConfig, width = 392, height = 120 }) => `
 <div style="width: ${width}px; height: ${height}px;">
-    <tttx-datacard_1_9_101
+    <tttx-datacard_1_9_103
         card-title="${cardTitle}"
         left-data="${leftData}"
         right-data="${rightData}"
@@ -28,78 +28,78 @@ const Template = ({ cardTitle = '', leftData = '', rightData = '', iconStyle, ri
         right-subtext="${rightSubtext}"
         card-type="${cardType}"
         chart-config='${chartConfig}'
-    ></tttx-datacard_1_9_101>
+    ></tttx-datacard_1_9_103>
     <div style="clear: both;"></div>
-</div>`;
-export const DataCardUp = Template.bind({});
-DataCardUp.args = {
-  cardTitle: 'Competency',
-  leftData: '33%',
-  rightData: '12%',
-  iconStyle: 'up',
-  rightSubtext: 'vs last month',
-  cardType: 'text'
-};
-export const DataCardDown = Template.bind({});
-DataCardDown.args = {
-  cardTitle: 'Training',
-  leftData: '82%',
-  rightData: '6%',
-  iconStyle: 'down',
-  rightSubtext: 'vs last month',
-  cardType: 'text'
-};
-export const DataCardBasic = Template.bind({});
-DataCardBasic.args = {
-  cardTitle: 'Company Wide Training',
-  leftData: '82%',
-};
-export const DataCardLong = Template.bind({});
-DataCardLong.args = {
-  cardTitle: 'Predicted Training Spend',
-  leftData: '£123,456,789',
-};
-// export const DataCardGuage = Template.bind({});
-// DataCardGuage.args = {
-//     cardTitle: 'Training',
-//     leftData: 72,
-//     cardType: 'guage'
-// };
-const gaugeConfig = {
-  chartType: 'gauge',
-  chartData: '[25]',
-  chartText: '25%'
-};
-export const DataCardChartGuage = Template.bind({});
-DataCardChartGuage.args = {
-  cardTitle: 'Training',
-  cardType: 'chart',
-  chartConfig: JSON.stringify(gaugeConfig)
-};
-/*
-const lineConfig = {
-    chartType: 'line',
-    chartData: '[{"x":1 , "y":99 }, {"x": 2, "y": 100}, {"x":3, "y":97}]'
-};
-
-export const DataCardLineChart = Template.bind({});
-DataCardLineChart.args = {
-    cardTitle: 'Training 90 Days',
-    cardType: 'chart',
-    chartConfig: JSON.stringify(lineConfig)
-};
-*/
+</div>`;
+export const DataCardUp = Template.bind({});
+DataCardUp.args = {
+  cardTitle: 'Competency',
+  leftData: '33%',
+  rightData: '12%',
+  iconStyle: 'up',
+  rightSubtext: 'vs last month',
+  cardType: 'text'
+};
+export const DataCardDown = Template.bind({});
+DataCardDown.args = {
+  cardTitle: 'Training',
+  leftData: '82%',
+  rightData: '6%',
+  iconStyle: 'down',
+  rightSubtext: 'vs last month',
+  cardType: 'text'
+};
+export const DataCardBasic = Template.bind({});
+DataCardBasic.args = {
+  cardTitle: 'Company Wide Training',
+  leftData: '82%',
+};
+export const DataCardLong = Template.bind({});
+DataCardLong.args = {
+  cardTitle: 'Predicted Training Spend',
+  leftData: '£123,456,789',
+};
+// export const DataCardGuage = Template.bind({});
+// DataCardGuage.args = {
+//     cardTitle: 'Training',
+//     leftData: 72,
+//     cardType: 'guage'
+// };
+const gaugeConfig = {
+  chartType: 'gauge',
+  chartData: '[25]',
+  chartText: '25%'
+};
+export const DataCardChartGuage = Template.bind({});
+DataCardChartGuage.args = {
+  cardTitle: 'Training',
+  cardType: 'chart',
+  chartConfig: JSON.stringify(gaugeConfig)
+};
+/*
+const lineConfig = {
+    chartType: 'line',
+    chartData: '[{"x":1 , "y":99 }, {"x": 2, "y": 100}, {"x":3, "y":97}]'
+};
+
+export const DataCardLineChart = Template.bind({});
+DataCardLineChart.args = {
+    cardTitle: 'Training 90 Days',
+    cardType: 'chart',
+    chartConfig: JSON.stringify(lineConfig)
+};
+*/
 const StackTemplate = () => `
 <div style="background: #F0F0F0; padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(295px, 1fr)); gap: 16px;">
-    <tttx-datacard_1_9_101 card-title="Employees" left-data="200" right-data="1%" icon-style="up" right-subtext="vs last month"></tttx-datacard_1_9_101>
-    <tttx-datacard_1_9_101 card-title="Training" left-data="82%" right-data="6%" icon-style="down" right-subtext="vs last month"></tttx-datacard_1_9_101>
-    <tttx-datacard_1_9_101 card-title="Safety critical training" left-data="88%" right-data="4%" icon-style="up" right-subtext="vs last month"></tttx-datacard_1_9_101>
-    <tttx-datacard_1_9_101 card-title="Competency" left-data="76%" right-data="11%" icon-style="up" right-subtext="vs last month" card-type="text"></tttx-datacard_1_9_101>
-    <tttx-datacard_1_9_101 style="height: 250px;" card-title="Training Progress" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[50]", "chartText": "50%"}'></tttx-datacard_1_9_101>
-    <tttx-datacard_1_9_101 style="height: 250px;" card-title="Budget Utilization" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[15]", "chartText":"15%"}'></tttx-datacard_1_9_101>
-    <tttx-datacard_1_9_101 style="height: 250px;" card-title="Project Completion" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[60]", "chartText": "60%"}'></tttx-datacard_1_9_101>
-    <tttx-datacard_1_9_101 style="height: 250px;" card-title="Employee Satisfaction" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[100]", "chartText": "99%"}'></tttx-datacard_1_9_101>
+    <tttx-datacard_1_9_103 card-title="Employees" left-data="200" right-data="1%" icon-style="up" right-subtext="vs last month"></tttx-datacard_1_9_103>
+    <tttx-datacard_1_9_103 card-title="Training" left-data="82%" right-data="6%" icon-style="down" right-subtext="vs last month"></tttx-datacard_1_9_103>
+    <tttx-datacard_1_9_103 card-title="Safety critical training" left-data="88%" right-data="4%" icon-style="up" right-subtext="vs last month"></tttx-datacard_1_9_103>
+    <tttx-datacard_1_9_103 card-title="Competency" left-data="76%" right-data="11%" icon-style="up" right-subtext="vs last month" card-type="text"></tttx-datacard_1_9_103>
+    <tttx-datacard_1_9_103 style="height: 250px;" card-title="Training Progress" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[50]", "chartText": "50%"}'></tttx-datacard_1_9_103>
+    <tttx-datacard_1_9_103 style="height: 250px;" card-title="Budget Utilization" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[15]", "chartText":"15%"}'></tttx-datacard_1_9_103>
+    <tttx-datacard_1_9_103 style="height: 250px;" card-title="Project Completion" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[60]", "chartText": "60%"}'></tttx-datacard_1_9_103>
+    <tttx-datacard_1_9_103 style="height: 250px;" card-title="Employee Satisfaction" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[100]", "chartText": "99%"}'></tttx-datacard_1_9_103>
 </div>
-`;
-export const DataCardStacked = StackTemplate.bind({});
-DataCardStacked.args = {};
+`;
+export const DataCardStacked = StackTemplate.bind({});
+DataCardStacked.args = {};

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

@@ -1,92 +1,92 @@
-import { Host, h } from '@stencil/core';
-export class TttxIcon {
-  constructor() {
-    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)));
-    }
-  }
-  static get is() { return "tttx-icon_1_9_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'grey'"
-      },
-      "size": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "24"
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-}
+import { Host, h } from '@stencil/core';
+export class TttxIcon {
+  constructor() {
+    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)));
+    }
+  }
+  static get is() { return "tttx-icon_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'grey'"
+      },
+      "size": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -1,26 +1,26 @@
-import icons from './../../../icons';
-const colors = ['red', 'blue', 'black', 'white', 'gray', 'green', 'orange', 'darkred', '#397A4C', '#FF00BB'];
-export default {
-  title: 'Atoms/Icons',
-  component: 'tttx-icon',
-  argTypes: {
-    icon: {
-      control: { type: 'select' },
-      options: icons,
-    },
-    color: {
-      control: { type: 'select' },
-      options: colors,
-    },
-    size: {
-      control: { type: 'number' }
-    },
-  },
-};
-const Template = ({ icon, color, size }) => `<tttx-icon_1_9_101 icon="${icon}" color="${color}" size="${size}"/>`;
-export const Icon = Template.bind({});
-Icon.args = {
-  icon: 'warning',
-  color: 'red',
-  size: 24,
-};
+import icons from './../../../icons';
+const colors = ['red', 'blue', 'black', 'white', 'gray', 'green', 'orange', 'darkred', '#397A4C', '#FF00BB'];
+export default {
+  title: 'Atoms/Icons',
+  component: 'tttx-icon',
+  argTypes: {
+    icon: {
+      control: { type: 'select' },
+      options: icons,
+    },
+    color: {
+      control: { type: 'select' },
+      options: colors,
+    },
+    size: {
+      control: { type: 'number' }
+    },
+  },
+};
+const Template = ({ icon, color, size }) => `<tttx-icon_1_9_103 icon="${icon}" color="${color}" size="${size}"/>`;
+export const Icon = Template.bind({});
+Icon.args = {
+  icon: 'warning',
+  color: 'red',
+  size: 24,
+};