@3t-transform/threeteeui 1.9.67 → 1.9.68

package/dist/components/{tttx-toggle_1_9_67.js → tttx-toggle_1_9_68.js}

@@ -33,7 +33,7 @@ const TttxToggle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h("div", { id: 'toggle-switch' }, checkbox, h("div", { id: 'toggle-body' })));
   }
   static get style() { return tttxToggleCss; }
-}, [1, "tttx-toggle_1_9_67", {
+}, [1, "tttx-toggle_1_9_68", {
     "initialstate": [8],
     "_state": [32]
   }]);
@@ -41,9 +41,9 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-toggle_1_9_67"];
+  const components = ["tttx-toggle_1_9_68"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-toggle_1_9_67":
+    case "tttx-toggle_1_9_68":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxToggle);
       }
@@ -51,7 +51,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const TttxToggle_1_9_67 = TttxToggle;
+const TttxToggle_1_9_68 = TttxToggle;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxToggle_1_9_67, defineCustomElement };
+export { TttxToggle_1_9_68, defineCustomElement };

package/dist/components/tttx-toolbar.js

@@ -28,7 +28,7 @@ const TttxToolbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, null, h("div", { class: `container ${this.border ? 'bordered' : ''} ${this.viewSize}` }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' }))));
   }
   static get style() { return tttxToolbarCss; }
-}, [1, "tttx-toolbar_1_9_67", {
+}, [1, "tttx-toolbar_1_9_68", {
     "border": [4],
     "viewSize": [32]
   }, [[9, "resize", "handleResize"]]]);
@@ -36,9 +36,9 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-toolbar_1_9_67"];
+  const components = ["tttx-toolbar_1_9_68"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-toolbar_1_9_67":
+    case "tttx-toolbar_1_9_68":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxToolbar);
       }

package/dist/components/tttx-toolbar_1_9_68.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxToolbar_1_9_68 extends Components.TttxToolbar_1_9_68, HTMLElement {}
+export const TttxToolbar_1_9_68: {
+  prototype: TttxToolbar_1_9_68;
+  new (): TttxToolbar_1_9_68;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{tttx-toolbar_1_9_67.js → tttx-toolbar_1_9_68.js}

@@ -1,6 +1,6 @@
 import { T as TttxToolbar, d as defineCustomElement$1 } from './tttx-toolbar.js';
 
-const TttxToolbar_1_9_67 = TttxToolbar;
+const TttxToolbar_1_9_68 = TttxToolbar;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxToolbar_1_9_67, defineCustomElement };
+export { TttxToolbar_1_9_68, defineCustomElement };

package/dist/components/tttx-tooltip_1_9_68.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxTooltip_1_9_68 extends Components.TttxTooltip_1_9_68, HTMLElement {}
+export const TttxTooltip_1_9_68: {
+  prototype: TttxTooltip_1_9_68;
+  new (): TttxTooltip_1_9_68;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/tttx-tooltip_1_9_68.js

@@ -0,0 +1,83 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const tttxTooltipCss = ":host{position:relative;display:inline-block}.tooltip-box{width:200px;position:absolute;background-color:#020505;color:#fff;padding:8px 12px;border-radius:8px;font-size:12px;z-index:100000;box-shadow:0px 1px 4px 0px #0C0C0D}.tooltip-box.top{bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px}.tooltip-box.bottom{top:100%;left:50%;transform:translateX(-50%);margin-top:8px}.tooltip-box.left{right:100%;top:50%;transform:translateY(-50%);margin-right:8px}.tooltip-box.right{left:100%;top:50%;transform:translateY(-50%);margin-left:8px}.arrow{width:0;height:0;position:absolute;border-style:solid}.tooltip-box.top .arrow{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0 5px;border-color:#1e1e1e transparent transparent transparent}.tooltip-box.bottom .arrow{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent #1e1e1e transparent}.tooltip-box.left .arrow{right:-5px;top:50%;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent #1e1e1e}.tooltip-box.right .arrow{left:-5px;top:50%;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent #1e1e1e transparent transparent}";
+
+const TttxTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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" })))));
+  }
+  get el() { return this; }
+  static get style() { return tttxTooltipCss; }
+}, [1, "tttx-tooltip_1_9_68", {
+    "text": [1],
+    "placement": [1],
+    "trigger": [16],
+    "delay": [2],
+    "disabled": [4],
+    "ariaLabel": [1, "aria-label"],
+    "visible": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-tooltip_1_9_68"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-tooltip_1_9_68":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxTooltip);
+      }
+      break;
+  } });
+}
+
+const TttxTooltip_1_9_68 = TttxTooltip;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxTooltip_1_9_68, defineCustomElement };

package/dist/components/tttx-tree-view_1_9_68.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxTreeView_1_9_68 extends Components.TttxTreeView_1_9_68, HTMLElement {}
+export const TttxTreeView_1_9_68: {
+  prototype: TttxTreeView_1_9_68;
+  new (): TttxTreeView_1_9_68;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{tttx-tree-view_1_9_67.js → tttx-tree-view_1_9_68.js}

@@ -178,7 +178,7 @@ const TttxTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           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));
     }
@@ -191,7 +191,7 @@ const TttxTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   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: purify.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: purify.sanitize(node.html, domSanitiserOptions) })));
     return htmlcode;
   }
   render() {
@@ -201,7 +201,7 @@ const TttxTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   get el() { return this; }
   static get style() { return tttxTreeViewCss; }
-}, [1, "tttx-tree-view_1_9_67", {
+}, [1, "tttx-tree-view_1_9_68", {
     "data": [1040],
     "treeData": [32]
   }]);
@@ -209,19 +209,19 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-tree-view_1_9_67", "tttx-button_1_9_67", "tttx-icon_1_9_67"];
+  const components = ["tttx-tree-view_1_9_68", "tttx-button_1_9_68", "tttx-icon_1_9_68"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-tree-view_1_9_67":
+    case "tttx-tree-view_1_9_68":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxTreeView);
       }
       break;
-    case "tttx-button_1_9_67":
+    case "tttx-button_1_9_68":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "tttx-icon_1_9_67":
+    case "tttx-icon_1_9_68":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
@@ -229,7 +229,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const TttxTreeView_1_9_67 = TttxTreeView;
+const TttxTreeView_1_9_68 = TttxTreeView;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxTreeView_1_9_67, defineCustomElement };
+export { TttxTreeView_1_9_68, defineCustomElement };