@3t-transform/threeteeui 1.9.63 → 1.9.65

package/dist/collection/components/atoms/tttx-button-v2/tttx-button-v2.js

@@ -0,0 +1,386 @@
+import { Host, h, } from '@stencil/core';
+export class TttxButton {
+  constructor() {
+    this.toggleDropdown = () => {
+      if (!this.isDisabled) {
+        this.dropdownOpen = !this.dropdownOpen;
+      }
+    };
+    this.handleDropdownItemClick = (item) => {
+      this.dropdownOpen = false;
+      this.buttonDropdownChange.emit(item);
+    };
+    this.notext = false;
+    this.icon = undefined;
+    this.label = undefined;
+    this.iconcolor = 'black';
+    this.iconposition = 'left';
+    this.iconStart = undefined;
+    this.iconEnd = undefined;
+    this.design = 'primary';
+    this.disabled = false;
+    this.type = 'button';
+    this.href = undefined;
+    this.options = [];
+    this.size = 'M';
+    this.dropdownOpen = false;
+  }
+  get isDisabled() {
+    return this.disabled || this.design === 'disabled';
+  }
+  get parsedOptions() {
+    if (Array.isArray(this.options)) {
+      return this.options.map(opt => (typeof opt === 'string' ? { label: opt } : opt));
+    }
+    try {
+      const parsed = JSON.parse(this.options);
+      return parsed.map((opt) => (typeof opt === 'string' ? { label: opt } : opt));
+    }
+    catch (_a) {
+      return [];
+    }
+  }
+  get iconSize() {
+    switch (this.size) {
+      case 'L':
+        return 24;
+      case 'M':
+        return 20;
+      case 'S':
+      default:
+        return 16;
+    }
+  }
+  componentWillLoad() {
+    const validDesigns = [
+      'primary',
+      'secondary',
+      'default',
+      'disabled',
+      'danger',
+      'light',
+      'success',
+      'warning',
+      'transparent'
+    ];
+    const validSizes = ['S', 'M', 'L'];
+    if (!validDesigns.includes(this.design)) {
+      this.design = 'primary';
+    }
+    if (!validSizes.includes(this.size)) {
+      this.size = 'M';
+    }
+    if (['primary', 'danger', 'light', 'success', 'warning'].includes(this.design)) {
+      this.iconcolor = 'white';
+    }
+    if (this.design === 'transparent') {
+      this.iconcolor = '#1479c6';
+    }
+  }
+  handleClickOutside(event) {
+    if (this.dropdownOpen && !this.host.contains(event.target)) {
+      this.dropdownOpen = false;
+    }
+  }
+  renderButtonContent() {
+    var _a;
+    return (h("div", { class: "button-content" }, this.iconStart && (h("div", { class: "icon-left" }, h("tttx-icon_1_9_65", { icon: this.iconStart, color: this.iconcolor, size: this.iconSize }))), !this.notext && (h("div", { class: "label-text" }, h("span", null, (_a = this.label) !== null && _a !== void 0 ? _a : h("slot", null)))), this.iconEnd && (h("div", { class: "icon-right" }, h("tttx-icon_1_9_65", { icon: this.iconEnd, color: this.iconcolor, size: this.iconSize }))), this.type === 'dropdown' && (h("div", { class: "dropdown-arrow" }, h("tttx-icon_1_9_65", { icon: "keyboard_arrow_down", color: this.iconcolor, size: this.iconSize })))));
+  }
+  renderDropdownList() {
+    if (this.type !== 'dropdown' || !this.dropdownOpen)
+      return null;
+    return (h("ul", { class: "dropdown-list", role: "listbox" }, this.parsedOptions.map((item, index) => (h("li", { class: "dropdown-option", role: "option", tabindex: 0, key: index, onClick: () => this.handleDropdownItemClick(item.label) }, h("div", { class: "dropdown-item-content" }, item.icon && (h("tttx-icon_1_9_65", { icon: item.icon, color: "black", size: this.iconSize, class: "dropdown-item-icon" })), h("span", { class: "dropdown-item-label" }, item.label)))))));
+  }
+  render() {
+    const classes = [
+      'button',
+      `btn-${this.design}`,
+      this.iconStart ? 'icon-start' : '',
+      this.iconEnd ? 'icon-end' : '',
+      this.notext ? 'notext' : '',
+      this.type === 'dropdown' ? 'dropdown-button' : '',
+      `btn-size-${this.size.toLowerCase()}`
+    ]
+      .filter(Boolean)
+      .join(' ');
+    return (h(Host, null, h("div", { class: "button-wrapper" }, h("button", { class: classes, disabled: this.isDisabled, onClick: this.type === 'dropdown' ? this.toggleDropdown : undefined, "aria-haspopup": this.type === 'dropdown' ? 'listbox' : undefined, "aria-expanded": this.type === 'dropdown' ? String(this.dropdownOpen) : undefined }, this.renderButtonContent()), this.renderDropdownList())));
+  }
+  static get is() { return "tttx-button-v2_1_9_65"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-button-v2.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-button-v2.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "notext": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "notext",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "iconcolor": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "iconcolor",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "iconposition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "iconposition",
+        "reflect": false,
+        "defaultValue": "'left'"
+      },
+      "iconStart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-start",
+        "reflect": false
+      },
+      "iconEnd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-end",
+        "reflect": false
+      },
+      "design": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| 'primary'\n    | 'secondary'\n    | 'default'\n    | 'disabled'\n    | 'danger'\n    | 'light'\n    | 'success'\n    | 'warning'\n    | 'transparent'",
+          "resolved": "\"danger\" | \"default\" | \"disabled\" | \"light\" | \"primary\" | \"secondary\" | \"success\" | \"transparent\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "design",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'button' | 'dropdown'",
+          "resolved": "\"button\" | \"dropdown\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'button'"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "options": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | { label: string; icon?: string }[]",
+          "resolved": "string | { label: string; icon?: string; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "options",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'S' | 'M' | 'L'",
+          "resolved": "\"L\" | \"M\" | \"S\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'M'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dropdownOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "buttonDropdownChange",
+        "name": "buttonDropdownChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClickOutside",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/atoms/tttx-button-v2/tttx-button-v2.stories.js

@@ -0,0 +1,197 @@
+export default {
+  title: 'Atoms/Button v2',
+  component: 'tttx-button-v2_1_9_65',
+  argTypes: {
+    showIconStart: {
+      control: 'boolean',
+      description: 'Toggle iconStart',
+    },
+    iconStart: {
+      control: 'text',
+      description: 'Icon to show at the start (left)',
+    },
+    showIconEnd: {
+      control: 'boolean',
+      description: 'Toggle iconEnd',
+    },
+    iconEnd: {
+      control: 'text',
+      description: 'Icon to show at the end (right)',
+    },
+    label: { control: 'text' },
+    design: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'transparent'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['S', 'M', 'L'],
+      defaultValue: 'M',
+      description: 'Size of the button: Small (S), Medium (M), or Large (L)',
+    },
+    notext: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    type: {
+      control: { type: 'select' },
+      options: ['button', 'dropdown'],
+    },
+    options: {
+      control: 'object',
+      description: 'Options for dropdown button',
+      defaultValue: [],
+    },
+  },
+};
+const renderButtons = (args) => {
+  const getIconStartAttr = () => {
+    return args.showIconStart && args.iconStart ? `icon-start="${args.iconStart}"` : '';
+  };
+  const getIconEndAttr = () => {
+    if (args.type === 'dropdown')
+      return '';
+    return args.showIconEnd && args.iconEnd ? `icon-end="${args.iconEnd}"` : '';
+  };
+  const getSizeAttr = () => {
+    return args.size ? `size="${args.size}"` : '';
+  };
+  const getCursorStyle = () => (args.disabled ? 'cursor: not-allowed;' : 'pointer');
+  const label = args.label || (args.design === 'secondary' ? 'Secondary' : 'Primary');
+  if (args.type === 'dropdown') {
+    return `
+      <div style="width: 250px;">
+        <tttx-button-v2_1_9_65
+          design="${args.design}"
+          ${getSizeAttr()}
+          type="dropdown"
+          ${args.disabled ? 'disabled' : ''}
+          options='${JSON.stringify(args.options || [])}'
+          ${getIconStartAttr()}
+          ${getIconEndAttr()}
+        >
+          ${label}
+        </tttx-button-v2_1_9_65>
+      </div>
+    `;
+  }
+  const sections = [];
+  // Standard Button
+  sections.push(`
+    <h2>Standard</h2>
+    <tttx-button-v2_1_9_65
+      design="${args.design}"
+       ${getSizeAttr()}
+      ${args.disabled ? 'disabled' : ''}
+      ${args.notext ? 'notext' : ''}
+       style="${getCursorStyle()}"
+    >
+      ${!args.notext ? label : ''}
+    </tttx-button-v2_1_9_65>
+  `);
+  // Icon Both Sides
+  if (args.showIconStart && args.iconStart && args.showIconEnd && args.iconEnd) {
+    sections.push(`
+      <hr />
+      <h2>Icons on Both Sides</h2>
+      <tttx-button-v2_1_9_65
+        design="${args.design}"
+         ${getSizeAttr()}
+        ${args.disabled ? 'disabled' : ''}
+        ${args.notext ? 'notext' : ''}
+        icon-start="${args.iconStart}"
+        icon-end="${args.iconEnd}"
+            style="${getCursorStyle()}"
+      >
+        ${!args.notext ? label : ''}
+      </tttx-button-v2_1_9_65>
+    `);
+  }
+  else {
+    // Icon Start Only
+    if (args.showIconStart && args.iconStart) {
+      sections.push(`
+        <hr />
+        <h2>Icon Left</h2>
+        <tttx-button-v2_1_9_65
+          design="${args.design}"
+           ${getSizeAttr()}
+          ${args.disabled ? 'disabled' : ''}
+          ${args.notext ? 'notext' : ''}
+          icon-start="${args.iconStart}"
+              style="${getCursorStyle()}"
+        >
+          ${!args.notext ? label : ''}
+        </tttx-button-v2_1_9_65>
+      `);
+    }
+    // Icon End Only
+    if (args.showIconEnd && args.iconEnd) {
+      sections.push(`
+        <hr />
+        <h2>Icon Right</h2>
+        <tttx-button-v2_1_9_65
+          design="${args.design}"
+           ${getSizeAttr()}
+          ${args.disabled ? 'disabled' : ''}
+          ${args.notext ? 'notext' : ''}
+          icon-end="${args.iconEnd}"
+              style="${getCursorStyle()}"
+        >
+          ${!args.notext ? label : ''}
+        </tttx-button-v2_1_9_65>
+      `);
+    }
+  }
+  // Icon Only
+  if (args.showIconStart && args.iconStart && args.notext) {
+    sections.push(`
+      <hr />
+      <h2>Icon Only</h2>
+      <tttx-button-v2_1_9_65
+        design="${args.design}"
+         ${getSizeAttr()}
+             style="${getCursorStyle()}"
+        icon-start="${args.iconStart}"
+        notext
+        ${args.disabled ? 'disabled' : ''}
+      ></tttx-button-v2_1_9_65>
+    `);
+  }
+  return sections.join('\n');
+};
+export const Primary = renderButtons.bind({});
+Primary.args = {
+  disabled: false,
+  label: 'Primary',
+  design: 'primary',
+  notext: false,
+  type: 'button',
+  size: 'M',
+  showIconStart: true,
+  iconStart: 'star',
+  showIconEnd: false,
+  iconEnd: 'close',
+  options: [
+    { label: 'Add worker', icon: 'group' },
+    { label: 'Book training', icon: 'event' },
+    { label: 'New training request', icon: 'school' },
+    { label: 'Add activity', icon: 'description' },
+    { label: 'Add Group', icon: 'grid_view' },
+  ],
+};
+export const Secondary = renderButtons.bind({});
+Secondary.args = Object.assign(Object.assign({}, Primary.args), { label: 'Secondary', design: 'secondary' });
+// ---------- Danger ----------
+export const Danger = renderButtons.bind({});
+Danger.args = Object.assign(Object.assign({}, Primary.args), { label: 'Danger', design: 'danger' });
+// ---------- Success ----------
+export const Success = renderButtons.bind({});
+Success.args = Object.assign(Object.assign({}, Primary.args), { label: 'Success', design: 'success' });
+// ---------- Warning ----------
+export const Warning = renderButtons.bind({});
+Warning.args = Object.assign(Object.assign({}, Primary.args), { label: 'Warning', design: 'warning' });
+// ---------- light ----------
+export const Light = renderButtons.bind({});
+Light.args = Object.assign(Object.assign({}, Primary.args), { label: 'Light', design: 'light' });
+// ---------- Transparent ----------
+export const Transparent = renderButtons.bind({});
+Transparent.args = Object.assign(Object.assign({}, Primary.args), { label: 'Transparent', design: 'transparent' });

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

@@ -23,9 +23,9 @@ export class TttxCheckbox {
   render() {
     const checkBoxIcon = this.checked ? 'check_box' : 'check_box_outline_blank';
     const renderedIcon = this.indeterminate ? 'indeterminate_check_box' : checkBoxIcon;
-    return (h(Host, null, h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), h("tttx-icon_1_9_63", { color: this.checked ? 'blue' : 'grey', icon: renderedIcon, onClick: this.onClick.bind(this) }), h("span", { class: "tttx-checkbox__label" }, this.label))));
+    return (h(Host, null, h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), h("tttx-icon_1_9_65", { color: this.checked ? 'blue' : 'grey', icon: renderedIcon, onClick: this.onClick.bind(this) }), h("span", { class: "tttx-checkbox__label" }, this.label))));
   }
-  static get is() { return "tttx-checkbox_1_9_63"; }
+  static get is() { return "tttx-checkbox_1_9_65"; }
   static get originalStyleUrls() {
     return {
       "$": ["tttx-checkbox.scss"]

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

@@ -32,7 +32,7 @@ export default {
   decorators: [withActions],
 };
 const Template = ({ label, inline, indeterminate, checked }) => `
-    <tttx-checkbox_1_9_63 
+    <tttx-checkbox_1_9_65 
         id="checkbox"
         checkbox-id="checkbox" 
         label="${label}" 

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

@@ -24,19 +24,19 @@ export class TttxDatacard {
   renderIcon(iconstyle) {
     switch (iconstyle) {
       case 'up':
-        return h("tttx-icon_1_9_63", { size: 24, icon: "arrow_circle_up", color: "green" });
+        return h("tttx-icon_1_9_65", { size: 24, icon: "arrow_circle_up", color: "green" });
       case 'down':
-        return h("tttx-icon_1_9_63", { size: 24, icon: "arrow_circle_down", color: "darkred" });
+        return h("tttx-icon_1_9_65", { size: 24, icon: "arrow_circle_down", color: "darkred" });
       default:
         return null;
     }
   }
   render() {
     return (h(Host, null, h("div", { class: "datacard" }, this.cardTitle && h("h2", { style: { 'position': 'relative', 'top': '0', 'left': '0', 'height': '40px' } }, this.cardTitle), this.chartRender && this.cardType === 'chart' &&
-      h("tttx-graph_1_9_63", { style: { 'position': 'relative', 'width': '100%', 'height': this.cardTitle ? 'calc(100% - 40px)' : '100%' }, class: 'chart', "chart-data": this._chartConfig.chartData, "chart-text": this._chartConfig.chartText, "chart-type": this._chartConfig.chartType }), h("div", { style: { 'position': 'relative', 'width': '100%', 'height': this.cardTitle ? 'calc(100% - 40px)' : '100%' } }, h("div", { class: "lower" }, h("div", { class: this.rightData && this.rightData !== 'undefined' ? 'left' : 'centered' }, this.leftData), this.rightData && this.rightData !== 'undefined' &&
+      h("tttx-graph_1_9_65", { style: { 'position': 'relative', 'width': '100%', 'height': this.cardTitle ? 'calc(100% - 40px)' : '100%' }, class: 'chart', "chart-data": this._chartConfig.chartData, "chart-text": this._chartConfig.chartText, "chart-type": this._chartConfig.chartType }), h("div", { style: { 'position': 'relative', 'width': '100%', 'height': this.cardTitle ? 'calc(100% - 40px)' : '100%' } }, h("div", { class: "lower" }, h("div", { class: this.rightData && this.rightData !== 'undefined' ? 'left' : 'centered' }, this.leftData), this.rightData && this.rightData !== 'undefined' &&
       h("div", { class: "right" }, h("div", { class: "flex" }, h("div", { class: "righticon" }, this.renderIcon(this.iconStyle)), h("div", { class: "rightdata" }, this.rightData)), h("div", { class: "subtext" }, this.rightSubtext)))))));
   }
-  static get is() { return "tttx-datacard_1_9_63"; }
+  static get is() { return "tttx-datacard_1_9_65"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

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

@@ -20,7 +20,7 @@ export default {
 };
 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_63
+    <tttx-datacard_1_9_65
         card-title="${cardTitle}"
         left-data="${leftData}"
         right-data="${rightData}"
@@ -28,7 +28,7 @@ const Template = ({ cardTitle = '', leftData = '', rightData = '', iconStyle, ri
         right-subtext="${rightSubtext}"
         card-type="${cardType}"
         chart-config='${chartConfig}'
-    ></tttx-datacard_1_9_63>
+    ></tttx-datacard_1_9_65>
     <div style="clear: both;"></div>
 </div>`;
 export const DataCardUp = Template.bind({});
@@ -91,14 +91,14 @@ DataCardLineChart.args = {
 */
 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_63 card-title="Employees" left-data="200" right-data="1%" icon-style="up" right-subtext="vs last month"></tttx-datacard_1_9_63>
-    <tttx-datacard_1_9_63 card-title="Training" left-data="82%" right-data="6%" icon-style="down" right-subtext="vs last month"></tttx-datacard_1_9_63>
-    <tttx-datacard_1_9_63 card-title="Safety critical training" left-data="88%" right-data="4%" icon-style="up" right-subtext="vs last month"></tttx-datacard_1_9_63>
-    <tttx-datacard_1_9_63 card-title="Competency" left-data="76%" right-data="11%" icon-style="up" right-subtext="vs last month" card-type="text"></tttx-datacard_1_9_63>
-    <tttx-datacard_1_9_63 style="height: 250px;" card-title="Training Progress" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[50]", "chartText": "50%"}'></tttx-datacard_1_9_63>
-    <tttx-datacard_1_9_63 style="height: 250px;" card-title="Budget Utilization" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[15]", "chartText":"15%"}'></tttx-datacard_1_9_63>
-    <tttx-datacard_1_9_63 style="height: 250px;" card-title="Project Completion" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[60]", "chartText": "60%"}'></tttx-datacard_1_9_63>
-    <tttx-datacard_1_9_63 style="height: 250px;" card-title="Employee Satisfaction" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[100]", "chartText": "99%"}'></tttx-datacard_1_9_63>
+    <tttx-datacard_1_9_65 card-title="Employees" left-data="200" right-data="1%" icon-style="up" right-subtext="vs last month"></tttx-datacard_1_9_65>
+    <tttx-datacard_1_9_65 card-title="Training" left-data="82%" right-data="6%" icon-style="down" right-subtext="vs last month"></tttx-datacard_1_9_65>
+    <tttx-datacard_1_9_65 card-title="Safety critical training" left-data="88%" right-data="4%" icon-style="up" right-subtext="vs last month"></tttx-datacard_1_9_65>
+    <tttx-datacard_1_9_65 card-title="Competency" left-data="76%" right-data="11%" icon-style="up" right-subtext="vs last month" card-type="text"></tttx-datacard_1_9_65>
+    <tttx-datacard_1_9_65 style="height: 250px;" card-title="Training Progress" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[50]", "chartText": "50%"}'></tttx-datacard_1_9_65>
+    <tttx-datacard_1_9_65 style="height: 250px;" card-title="Budget Utilization" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[15]", "chartText":"15%"}'></tttx-datacard_1_9_65>
+    <tttx-datacard_1_9_65 style="height: 250px;" card-title="Project Completion" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[60]", "chartText": "60%"}'></tttx-datacard_1_9_65>
+    <tttx-datacard_1_9_65 style="height: 250px;" card-title="Employee Satisfaction" card-type="chart" chart-config='{"chartType": "gauge", "chartData": "[100]", "chartText": "99%"}'></tttx-datacard_1_9_65>
 </div>
 `;
 export const DataCardStacked = StackTemplate.bind({});