@3t-transform/threeteeui 1.9.67 → 1.9.68

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

@@ -0,0 +1,180 @@
+import { h } from '@stencil/core';
+export class TttxTooltip {
+  constructor() {
+    this.show = () => {
+      if (this.disabled)
+        return;
+      this.timeoutId = setTimeout(() => {
+        this.visible = true;
+      }, this.delay);
+    };
+    this.hide = () => {
+      clearTimeout(this.timeoutId);
+      this.visible = false;
+    };
+    this.toggle = () => {
+      this.visible = !this.visible;
+    };
+    this.text = undefined;
+    this.placement = 'top';
+    this.trigger = ['hover', 'click'];
+    this.delay = 0;
+    this.disabled = false;
+    this.ariaLabel = '';
+    this.visible = false;
+  }
+  connectedCallback() {
+    if (this.trigger.includes('hover')) {
+      this.el.addEventListener('mouseenter', this.show);
+      this.el.addEventListener('mouseleave', this.hide);
+    }
+    if (this.trigger.includes('focus')) {
+      this.el.addEventListener('focus', this.show);
+      this.el.addEventListener('blur', this.hide);
+    }
+    if (this.trigger.includes('click')) {
+      this.el.addEventListener('click', this.toggle);
+    }
+  }
+  disconnectedCallback() {
+    this.el.removeEventListener('mouseenter', this.show);
+    this.el.removeEventListener('mouseleave', this.hide);
+    this.el.removeEventListener('focus', this.show);
+    this.el.removeEventListener('blur', this.hide);
+    this.el.removeEventListener('click', this.toggle);
+  }
+  render() {
+    return (h("div", { class: "tooltip-wrapper" }, h("slot", null), this.visible && (h("div", { class: `tooltip-box ${this.placement}`, role: "tooltip", "aria-label": this.ariaLabel || this.text }, this.text, h("span", { class: "arrow" })))));
+  }
+  static get is() { return "tttx-tooltip_1_9_68"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-tooltip.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
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'top' | 'bottom' | 'left' | 'right'",
+          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'top'"
+      },
+      "trigger": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<'hover' | 'click' | 'focus'>",
+          "resolved": "(\"focus\" | \"click\" | \"hover\")[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "['hover', 'click']"
+      },
+      "delay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "delay",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "visible": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/molecules/tttx-tooltip/tttx-tootip.stories.js

@@ -0,0 +1,39 @@
+import { action } from '@storybook/addon-actions';
+export default {
+  title: 'atoms/Tooltip',
+  component: 'tttx-tooltip_1_9_68',
+  parameters: {
+    layout: 'centered',
+  },
+};
+const Template = ({ text, placement, delay }) => {
+  const wrapper = document.createElement('div');
+  wrapper.style.display = 'inline-block';
+  wrapper.style.margin = '100px'; // Ensure enough space around for placement testing
+  const tooltip = document.createElement('tttx-tooltip_1_9_68');
+  tooltip.setAttribute('text', text);
+  tooltip.setAttribute('placement', placement);
+  tooltip.setAttribute('delay', delay);
+  const button = document.createElement('button');
+  button.innerText = 'Hover me';
+  button.style.padding = '8px 16px';
+  // Optional: You can trigger an event for demonstration
+  tooltip.addEventListener('mouseover', (e) => {
+    action('Tooltip hovered')(e);
+  });
+  tooltip.appendChild(button);
+  wrapper.appendChild(tooltip);
+  return wrapper;
+};
+export const DefaultTooltip = Template.bind({});
+DefaultTooltip.args = {
+  text: 'This is a helpful tooltip',
+  placement: 'top',
+  delay: 0,
+};
+export const TooltipWithDelay = Template.bind({});
+TooltipWithDelay.args = {
+  text: 'This tooltip appears after 1 second',
+  placement: 'right',
+  delay: 1000,
+};

package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.js

@@ -168,7 +168,7 @@ export class TttxTreeView {
           if (node.hasHover) {
             this.onClickHandler(event, node);
           }
-        } }), h("tttx-button_1_9_67", { class: "toggleNode", design: "borderless-circle", notext: true, icon: options.expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, options.checkboxIcon, options.checkboxColor, index, parentId)), node.isOpen ? (h("li", null, h("ul", null, node.child.map((childNode, index) => {
+        } }), h("tttx-button_1_9_68", { class: "toggleNode", design: "borderless-circle", notext: true, icon: options.expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, options.checkboxIcon, options.checkboxColor, index, parentId)), node.isOpen ? (h("li", null, h("ul", null, node.child.map((childNode, index) => {
         return this.renderNode(childNode, index, node.id);
       })))) : null));
     }
@@ -181,7 +181,7 @@ export class TttxTreeView {
     }
   }
   htmlcode(type, node, check_box, check_boxColor, index, parentId = undefined) {
-    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.draggable && (h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: true, onDragStart: event => this.handleDragStart(event, node, index, parentId) })), node.hasCheckbox && (h("tttx-button_1_9_67", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && (h("tttx-icon_1_9_67", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: DOMPurify.sanitize(node.html, domSanitiserOptions) })));
+    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.draggable && (h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: true, onDragStart: event => this.handleDragStart(event, node, index, parentId) })), node.hasCheckbox && (h("tttx-button_1_9_68", { design: "borderless-circle", notext: true, icon: check_box, iconcolor: check_boxColor, class: "padding-icon checkbox", onClick: event => this.handleCheckboxChange(node, event) })), !node.html && node.hasIcon && (h("tttx-icon_1_9_68", { icon: node.icon, color: node.iconColor, class: "padding-icon" })), !node.html && h("div", { class: type }, node.title), node.html && h("div", { class: type, innerHTML: DOMPurify.sanitize(node.html, domSanitiserOptions) })));
     return htmlcode;
   }
   render() {
@@ -189,7 +189,7 @@ export class TttxTreeView {
       return;
     return (h("div", { class: "tree-view-element" }, h("ul", null, this.treeData.map((node, index) => this.renderNode(node, index)))));
   }
-  static get is() { return "tttx-tree-view_1_9_67"; }
+  static get is() { return "tttx-tree-view_1_9_68"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.stories.js

@@ -10,7 +10,7 @@ export default {
   decorators: [withActions],
 };
 const TttxTreeViewDragDrop = ({ data }) => `
-    <tttx-tree-view_1_9_67 id="treeViewDragDrop"></tttx-tree-view_1_9_67>
+    <tttx-tree-view_1_9_68 id="treeViewDragDrop"></tttx-tree-view_1_9_68>
     <script>
     if (!treeViewDragDrop) {
       const treeViewDragDrop = document.getElementById('treeViewDragDrop');

package/dist/collection/components/organisms/tttx-data-pattern/tttx-data-pattern.js

@@ -11,12 +11,12 @@ export class TttxDataPattern {
     this.addbutton = false;
   }
   render() {
-    return (h(Host, null, h("div", { class: "container" }, h("tttx-toolbar_1_9_67", { border: true }, h("span", { slot: "before" }, this.sorterOptions &&
-      h("tttx-sorter_1_9_67", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorterOptions, defaultOption: this.defaultSortOption }), this.filterOptions &&
-      h("tttx-filter_1_9_67", { "filter-options": JSON.stringify(this.filterOptions), showSelectAll: false, "show-option-icons": true, "filter-header": this.filterHeader, "filter-key": "data-pattern-list" })), h("span", { slot: "after" }, h("tttx-standalone-input_1_9_67", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: this.searchplaceholder, type: "text", maxlength: 30 }))), h("tttx-toolbar_1_9_67", { border: false }, h("span", { slot: "before" }, this.addbutton &&
-      h("tttx-button_1_9_67", { design: "primary", icon: "add" }, this.addbuttonlabel))), h("tttx-list_1_9_67", { data: this.data }))));
+    return (h(Host, null, h("div", { class: "container" }, h("tttx-toolbar_1_9_68", { border: true }, h("span", { slot: "before" }, this.sorterOptions &&
+      h("tttx-sorter_1_9_68", { sorterKey: "data-pattern-list", fieldOptionsData: this.sorterOptions, defaultOption: this.defaultSortOption }), this.filterOptions &&
+      h("tttx-filter_1_9_68", { "filter-options": JSON.stringify(this.filterOptions), showSelectAll: false, "show-option-icons": true, "filter-header": this.filterHeader, "filter-key": "data-pattern-list" })), h("span", { slot: "after" }, h("tttx-standalone-input_1_9_68", { class: "qualifications-filter", showerrorbubble: false, inputicon: "search", inline: true, required: true, placeholder: this.searchplaceholder, type: "text", maxlength: 30 }))), h("tttx-toolbar_1_9_68", { border: false }, h("span", { slot: "before" }, this.addbutton &&
+      h("tttx-button_1_9_68", { design: "primary", icon: "add" }, this.addbuttonlabel))), h("tttx-list_1_9_68", { data: this.data }))));
   }
-  static get is() { return "tttx-data-pattern_1_9_67"; }
+  static get is() { return "tttx-data-pattern_1_9_68"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

package/dist/collection/components/organisms/tttx-data-pattern/tttx-data-pattern.stories.js

@@ -8,7 +8,7 @@ export default {
   },
 };
 const Default = ({ data, sorterOptions, filterOptions }) => `
-    <tttx-data-pattern_1_9_67 id="datapatternlist"></tttx-data-pattern_1_9_67>
+    <tttx-data-pattern_1_9_68 id="datapatternlist"></tttx-data-pattern_1_9_68>
     <script>
       const element = document.getElementById('datapatternlist');
       element.data = ${JSON.stringify(data)};
@@ -19,10 +19,10 @@ const Default = ({ data, sorterOptions, filterOptions }) => `
 export const WIPDefaultDataPattern = Default.bind({});
 WIPDefaultDataPattern.args = {
   data: [
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_67 icon="egg" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_67 icon="egg" color="red" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_67 icon="add" /></span> Lee' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_67 icon="egg" /></span> Ben' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_68 icon="egg" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_68 icon="egg" color="red" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_68 icon="add" /></span> Lee' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_9_68 icon="egg" /></span> Ben' },
   ],
   sorterOptions: {
     sorterOptions: [{ optionLabel: 'Name' }, { optionLabel: 'Age' }],