@3t-transform/threeteeui 1.9.70 → 1.9.72

package/dist/collection/components/atoms/tttx-tag-v2/tttx-tag-v2.css

@@ -0,0 +1,250 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+button {
+  cursor: pointer;
+}
+
+.button {
+  font-family: Roboto, serif;
+  box-sizing: border-box;
+  height: 36px;
+  min-width: 36px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  color: #212121;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.button-content {
+  display: block;
+  padding: 0 16px;
+}
+
+.icon-left,
+.icon-right {
+  margin-top: 4px;
+}
+
+.iconleft {
+  padding-left: 8px;
+}
+
+.iconleft .button-content {
+  padding-left: 4px;
+}
+
+.iconright {
+  padding-right: 8px;
+}
+
+.iconright .button-content {
+  padding-right: 4px;
+}
+
+.notext {
+  padding: 0 6px;
+}
+
+.button:active {
+  background: rgba(17, 17, 17, 0.2);
+  border: 1px solid #d5d5d5;
+}
+
+.blackout {
+  background: #363636;
+  border: 1px solid #363636;
+  color: white;
+}
+
+.blackout:active {
+  background: #212121;
+  border: 1px solid #212121;
+}
+
+.primary {
+  background: #1479c6;
+  border: 1px solid #1479c6;
+  color: white;
+}
+
+.primary:active {
+  background: #1464a2;
+  border: 1px solid #1464a2;
+}
+
+.borderless {
+  background: transparent;
+  border: none;
+  color: #212121;
+}
+
+.borderless:active {
+  background: rgba(17, 17, 17, 0.2);
+  border: none;
+}
+
+.borderless-circle {
+  background: transparent;
+  border: none;
+  color: #212121;
+  border-radius: 50%;
+}
+
+.borderless-circle:active {
+  border: none;
+}
+
+.borderless-circle:focus {
+  border-color: transparent;
+}
+
+.danger {
+  background: #dc0000;
+  border: 1px solid #dc0000;
+  color: white;
+}
+
+.danger:active {
+  background: #b00000;
+  border: 1px solid #b00000;
+}
+
+.disabled {
+  background: #aeaeae;
+  border: none;
+  color: #4c4c4c;
+  cursor: not-allowed;
+}
+
+.disabled:active {
+  background: #aeaeae;
+  border: none;
+  color: #4c4c4c;
+  cursor: not-allowed;
+}
+
+@media (hover: hover) {
+  .button:hover {
+    background: rgba(17, 17, 17, 0.1);
+    border: 1px solid #d5d5d5;
+  }
+
+  .primary:hover {
+    background: #146eb3;
+    border: 1px solid #146eb3;
+  }
+
+  .borderless:hover {
+    background: rgba(17, 17, 17, 0.1);
+    border: none;
+  }
+
+  .borderless-circle:hover {
+    background: rgba(17, 17, 17, 0.1);
+    border: none;
+  }
+
+  .danger:hover {
+    background: #c60000;
+    border: 1px solid #c60000;
+  }
+
+  .disabled:hover {
+    background: #aeaeae;
+    border: none;
+    color: #4c4c4c;
+    cursor: not-allowed;
+  }
+
+  .blackout:hover {
+    background: #212121;
+    border: 1px solid #212121;
+  }
+}
+:host {
+  display: inline-block;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 12px;
+  font-family: "Roboto", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  width: max-content;
+  border-radius: var(--sds-size-radius-200, 8px);
+  font-family: Roboto;
+}
+.tag.S {
+  font-size: 12px;
+  height: 20px;
+  padding: 4px;
+  border: var(--sds-size-stroke-border, 1px) solid #E5E5E5;
+  border-radius: var(--sds-size-radius-100, 4px);
+}
+.tag.M {
+  font-size: 16px;
+  height: 32px;
+  padding: 8px;
+  border: 1px solid #E5E5E5;
+  border-radius: 8px;
+  font-weight: 400;
+}
+.tag.M span {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+.tag.brand {
+  background-color: #1479c6;
+  color: #FFFFFF;
+}
+.tag.danger {
+  background-color: #DC2626;
+  color: #FFFFFF;
+}
+.tag.success {
+  background-color: #16A34A;
+  color: #FFFFFF;
+}
+.tag.warning {
+  background-color: #FACC15;
+  color: #58310E;
+}
+.tag.neutral {
+  background-color: #E5E5E5;
+  color: #737373;
+}
+.tag.primary {
+  background-color: #1479c6;
+  color: #FFFFFF;
+}
+.tag.secondary {
+  background-color: #b9d5ed;
+  color: #1479c6;
+}
+
+.tag_icon {
+  padding-top: 4px;
+}
+
+.tag span {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.icon {
+  height: 18px;
+  width: 18px;
+  font-weight: 400;
+}

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

@@ -0,0 +1,281 @@
+import { Host, h } from '@stencil/core';
+export class TttxTagV2 {
+  constructor() {
+    this.text = undefined;
+    this.color = undefined;
+    this.textColor = undefined;
+    this.iconStart = 'star';
+    this.iconEnd = 'close';
+    this.iconSize = 16;
+    this.state = 'neutral';
+    this.size = 'M';
+    this.variant = undefined;
+    this.hasStartIcon = true;
+    this.hasEndIcon = true;
+  }
+  getColors() {
+    // If both variant and state are given, state overrides variant
+    if (this.variant) {
+      let base;
+      switch (this.variant) {
+        case 'primary':
+          base = { bg: '#1479c6', text: '#FFFFFF', icon: '#FFFFFF' };
+          break;
+        case 'secondary':
+          base = { bg: '#b9d5ed', text: '#1479c6', icon: '#1479c6' };
+          break;
+      }
+      if (this.state && this.state !== 'neutral') {
+        // apply state overrides
+        switch (this.state) {
+          case 'danger':
+            return { bg: '#DC2626', text: '#FFFFFF', icon: '#FFFFFF' };
+          case 'success':
+            return { bg: '#16A34A', text: '#FFFFFF', icon: '#FFFFFF' };
+          case 'warning':
+            return { bg: '#FACC15', text: '#58310E', icon: '#58310E' };
+          case 'brand':
+            return { bg: '#1479c6', text: '#FFFFFF', icon: '#FFFFFF' };
+        }
+      }
+      return base;
+    }
+    // fall back to custom color or state
+    if (this.color || this.textColor) {
+      return {
+        bg: this.color || '#E5E5E5',
+        text: this.textColor || '#737373',
+        icon: this.textColor || '#737373',
+      };
+    }
+    // state only (no variant)
+    switch (this.state) {
+      case 'brand':
+        return { bg: '#197A68', text: '#FFFFFF', icon: '#FFFFFF' };
+      case 'danger':
+        return { bg: '#DC2626', text: '#FFFFFF', icon: '#FFFFFF' };
+      case 'success':
+        return { bg: '#16A34A', text: '#FFFFFF', icon: '#FFFFFF' };
+      case 'warning':
+        return { bg: '#FACC15', text: '#58310E', icon: '#58310E' };
+      case 'neutral':
+        return { bg: '#E5E5E5', text: '#737373', icon: '#737373' };
+      default:
+        return { bg: '#E5E5E5', text: '#737373', icon: '#737373' };
+    }
+  }
+  render() {
+    const colors = this.getColors();
+    return (h(Host, null, h("div", { class: `tag ${this.state} ${this.size} ${this.variant || ''}`, style: { 'background-color': colors.bg, color: colors.text } }, this.hasStartIcon && this.iconStart && (h("tttx-icon_1_9_72", { role: "icon", class: "tag_icon", "aria-label": colors.text, icon: this.iconStart, color: colors.icon, size: this.size === 'S' ? 12 : 16 })), h("span", null, this.text), this.hasEndIcon && this.iconEnd && (h("tttx-icon_1_9_72", { role: "icon", class: "tag_icon", "aria-label": colors.text, icon: this.iconEnd, color: colors.icon, size: this.iconSize })))));
+  }
+  static get is() { return "tttx-tag-v2_1_9_72"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-tag-v2.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-tag-v2.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text",
+        "reflect": false
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
+      "textColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-color",
+        "reflect": false
+      },
+      "iconStart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-start",
+        "reflect": false,
+        "defaultValue": "'star'"
+      },
+      "iconEnd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-end",
+        "reflect": false,
+        "defaultValue": "'close'"
+      },
+      "iconSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-size",
+        "reflect": false,
+        "defaultValue": "16"
+      },
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'brand' | 'danger' | 'success' | 'warning' | 'neutral'",
+          "resolved": "\"brand\" | \"danger\" | \"neutral\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "'neutral'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'S' | 'M'",
+          "resolved": "\"M\" | \"S\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'M'"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false
+      },
+      "hasStartIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-start-icon",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "hasEndIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-end-icon",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,84 @@
+export default {
+  title: 'Atoms/TagV2',
+  component: 'tttx-tag-v2_1_9_72',
+  argTypes: {
+    text: { control: 'text' },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+    },
+    state: {
+      control: 'select',
+      options: ['brand', 'danger', 'success', 'warning', 'neutral'],
+    },
+    size: { control: 'radio', options: ['S', 'M'] },
+    color: { control: 'color' },
+    textColor: { control: 'color' },
+    iconStart: { control: 'text' },
+    iconEnd: { control: 'text' },
+    hasStartIcon: { control: 'boolean' },
+    hasEndIcon: { control: 'boolean' }
+  },
+};
+const Template = (args) => {
+  const attrs = Object.entries(args)
+    .filter(([_, v]) => v !== undefined && v !== '')
+    .map(([k, v]) => {
+    const attr = k.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()); // camelCase → kebab-case
+    return `${attr}="${v}"`;
+  })
+    .join(' ');
+  return `<tttx-tag-v2_1_9_72 ${attrs}></tttx-tag-v2_1_9_72>`;
+};
+export const Default = Template.bind({});
+Default.args = {
+  text: 'Default Tag',
+  state: 'neutral',
+  size: 'M',
+  iconStart: 'star',
+  iconEnd: 'close',
+  hasStartIcon: true,
+  hasEndIcon: true,
+};
+export const Primary = Template.bind({});
+Primary.args = {
+  text: 'Primary Tag',
+  variant: 'primary',
+  size: 'M',
+};
+export const Secondary = Template.bind({});
+Secondary.args = {
+  text: 'Secondary Tag',
+  variant: 'secondary',
+  size: 'M',
+};
+export const Brand = Template.bind({});
+Brand.args = {
+  text: 'Brand Tag',
+  state: 'brand',
+  size: 'M',
+};
+export const Danger = Template.bind({});
+Danger.args = {
+  text: 'Danger Tag',
+  state: 'danger',
+  size: 'M',
+};
+export const Success = Template.bind({});
+Success.args = {
+  text: 'Success Tag',
+  state: 'success',
+  size: 'M',
+};
+export const Warning = Template.bind({});
+Warning.args = {
+  text: 'Warning Tag',
+  state: 'warning',
+  size: 'M',
+};
+export const Neutral = Template.bind({});
+Neutral.args = {
+  text: 'Neutral Tag',
+  state: 'neutral',
+  size: 'M',
+};

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

@@ -25,7 +25,7 @@ export class TttxToggle {
     }
     return (h("div", { id: 'toggle-switch' }, checkbox, h("div", { id: 'toggle-body' })));
   }
-  static get is() { return "tttx-toggle_1_9_70"; }
+  static get is() { return "tttx-toggle_1_9_72"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

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

@@ -3,8 +3,8 @@ export default {
   component: 'tttx-toggle',
 };
 const DefaultStory = () => `
-<div><div>Off by default</div><tttx-toggle_1_9_70 id="off" title="Off by default"></tttx-toggle_1_9_70></div>
-<div><div>On by default</div><tttx-toggle_1_9_70 id="on" initialstate="true" title="True by default"></tttx-toggle_1_9_70></div>
+<div><div>Off by default</div><tttx-toggle_1_9_72 id="off" title="Off by default"></tttx-toggle_1_9_72></div>
+<div><div>On by default</div><tttx-toggle_1_9_72 id="on" initialstate="true" title="True by default"></tttx-toggle_1_9_72></div>
 <script>
     off.addEventListener('toggleSwitchEvent', (ev) => { console.log(ev) });
     on.addEventListener('toggleSwitchEvent', (ev) => { console.log(ev) });

package/dist/collection/components/molecules/tttx-action-dropdown/tttx-action-dropdown.js

@@ -41,11 +41,11 @@ export class TttxActionDropdown {
       return;
     const actionKey = `action-dropdown__${this.actionKey}`;
     const chevronIcon = this.dropdownExpand ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
-    return (h(Host, { id: actionKey }, h("div", { tabindex: 0, class: `action-dropdown-container ${this.dropdownExpand ? '--expanded' : ''}` }, h("button", { class: "action-button", type: "button", onClick: this.onActionClick.bind(this) }, h("div", { class: "button-content" }, this.isIconVisible && (h("tttx-icon_1_9_70", { icon: this.icon, color: "black" })), h("span", { class: "action-text" }, this.selectedField)), h("div", { class: "dropdown-arrow" }, h("tttx-icon_1_9_70", { icon: chevronIcon, color: "black" }))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.actionOptions.map(option => {
+    return (h(Host, { id: actionKey }, h("div", { tabindex: 0, class: `action-dropdown-container ${this.dropdownExpand ? '--expanded' : ''}` }, h("button", { class: "action-button", type: "button", onClick: this.onActionClick.bind(this) }, h("div", { class: "button-content" }, this.isIconVisible && (h("tttx-icon_1_9_72", { icon: this.icon, color: "black" })), h("span", { class: "action-text" }, this.selectedField)), h("div", { class: "dropdown-arrow" }, h("tttx-icon_1_9_72", { icon: chevronIcon, color: "black" }))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.actionOptions.map(option => {
       return (h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
     }))))));
   }
-  static get is() { return "tttx-action-dropdown_1_9_70"; }
+  static get is() { return "tttx-action-dropdown_1_9_72"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

package/dist/collection/components/molecules/tttx-action-dropdown/tttx-action-dropdown.stories.js

@@ -26,7 +26,7 @@ export default {
 const TemplateActionDropdown = ({ fieldOptionsData, actionKey, icon, isIconVisible }) => {
   return `
         <div style='width: 250px;'>
-          <tttx-action-dropdown_1_9_70
+          <tttx-action-dropdown_1_9_72
               field-options-data='${JSON.stringify(fieldOptionsData)}'
               action-key='${actionKey}'
               icon='${icon}'

package/dist/collection/components/molecules/tttx-chart/tttx-chart.js

@@ -211,13 +211,13 @@ export class TttxChart {
     return this.commonContent('ssid_chart', 'No data available', 'There is currently no data available to show performance trends.', '#111');
   }
   commonContent(iconName, heading, message, iconColor, showActions = false) {
-    return (h("div", { class: "error-content" }, h("tttx-icon_1_9_70", { icon: iconName, color: iconColor, size: 48 }), h("span", { class: 'error-heading' }, heading), h("span", { class: 'error-message' }, message), showActions && h("div", { class: "error-actions" }, h("tttx-button_1_9_70", { class: 'support-btn', icon: "help", design: "primary", onClick: () => this.renderChart() }, "Contact support"))));
+    return (h("div", { class: "error-content" }, h("tttx-icon_1_9_72", { icon: iconName, color: iconColor, size: 48 }), h("span", { class: 'error-heading' }, heading), h("span", { class: 'error-message' }, message), showActions && h("div", { class: "error-actions" }, h("tttx-button_1_9_72", { class: 'support-btn', icon: "help", design: "primary", onClick: () => this.renderChart() }, "Contact support"))));
   }
   render() {
     var _a, _b, _c;
-    return (h("div", { class: "chart-wrapper", style: { width: this.width, height: this.height } }, this.loading && h("div", { class: "chart-loading" }, h("tttx-loading-spinner_1_9_70", { size: 'large', color: '#2b9ab7' })), this.error && this.getErrorContent(), !this.loading && !this.error && (!this.chartData || !((_a = this.chartData.datasets) === null || _a === void 0 ? void 0 : _a.length)) && (this.getNoDataContent()), !this.loading && !this.error && ((_c = (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.datasets) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h("canvas", { ref: el => (this.canvasEl = el), "aria-label": "Chart canvas", role: "img" })), this.exportable && !this.loading && !this.error && (h("div", { class: "export-buttons" }, this.showPngSvgExport && h("tttx-button_1_9_70", { class: 'export-png', design: "primary", onClick: () => this.exportChart('png') }, "Export PNG"), this.showPngSvgExport && h("tttx-button_1_9_70", { class: 'export-svg', design: "primary", onClick: () => this.exportChart('svg') }, "Export SVG"), h("tttx-button_1_9_70", { class: 'export-csv', design: "primary", onClick: () => this.exportCSV.emit({ name: this.chartType }) }, "Export CSV")))));
+    return (h("div", { class: "chart-wrapper", style: { width: this.width, height: this.height } }, this.loading && h("div", { class: "chart-loading" }, h("tttx-loading-spinner_1_9_72", { size: 'large', color: '#2b9ab7' })), this.error && this.getErrorContent(), !this.loading && !this.error && (!this.chartData || !((_a = this.chartData.datasets) === null || _a === void 0 ? void 0 : _a.length)) && (this.getNoDataContent()), !this.loading && !this.error && ((_c = (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.datasets) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h("canvas", { ref: el => (this.canvasEl = el), "aria-label": "Chart canvas", role: "img" })), this.exportable && !this.loading && !this.error && (h("div", { class: "export-buttons" }, this.showPngSvgExport && h("tttx-button_1_9_72", { class: 'export-png', design: "primary", onClick: () => this.exportChart('png') }, "Export PNG"), this.showPngSvgExport && h("tttx-button_1_9_72", { class: 'export-svg', design: "primary", onClick: () => this.exportChart('svg') }, "Export SVG"), h("tttx-button_1_9_72", { class: 'export-csv', design: "primary", onClick: () => this.exportCSV.emit({ name: this.chartType }) }, "Export CSV")))));
   }
-  static get is() { return "tttx-chart_1_9_70"; }
+  static get is() { return "tttx-chart_1_9_72"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {