@3t-transform/threeteeui 1.9.100 → 1.9.101

package/dist/components/tttx-tag.js

@@ -18,10 +18,10 @@ const TttxTag = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     return (h(Host, null, h("div", { class: "tag", style: { 'background-color': this.color, color: this.textColor } }, this.hasIcon &&
-      h("tttx-icon_1_9_100", { role: "icon", class: "tag_icon", "aria-label": this.text, icon: this.icon, color: this.iconColor, size: this.iconSize }), h("span", null, this.text))));
+      h("tttx-icon_1_9_101", { role: "icon", class: "tag_icon", "aria-label": this.text, icon: this.icon, color: this.iconColor, size: this.iconSize }), h("span", null, this.text))));
   }
   static get style() { return tttxTagCss; }
-}, [1, "tttx-tag_1_9_100", {
+}, [1, "tttx-tag_1_9_101", {
     "text": [1],
     "color": [1],
     "textColor": [1, "text-color"],
@@ -34,14 +34,14 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-tag_1_9_100", "tttx-icon_1_9_100"];
+  const components = ["tttx-tag_1_9_101", "tttx-icon_1_9_101"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-tag_1_9_100":
+    case "tttx-tag_1_9_101":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxTag);
       }
       break;
-    case "tttx-icon_1_9_100":
+    case "tttx-icon_1_9_101":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/{tttx-tag_1_9_100.d.ts → tttx-tag_1_9_101.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface TttxTag_1_9_100 extends Components.TttxTag_1_9_100, HTMLElement {}
-export const TttxTag_1_9_100: {
-  prototype: TttxTag_1_9_100;
-  new (): TttxTag_1_9_100;
+interface TttxTag_1_9_101 extends Components.TttxTag_1_9_101, HTMLElement {}
+export const TttxTag_1_9_101: {
+  prototype: TttxTag_1_9_101;
+  new (): TttxTag_1_9_101;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/{tttx-tag_1_9_100.js → tttx-tag_1_9_101.js}

@@ -1,6 +1,6 @@
 import { T as TttxTag, d as defineCustomElement$1 } from './tttx-tag.js';
 
-const TttxTag_1_9_100 = TttxTag;
+const TttxTag_1_9_101 = TttxTag;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxTag_1_9_100, defineCustomElement };
+export { TttxTag_1_9_101, defineCustomElement };

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

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

package/dist/components/{tttx-textarea_1_9_100.js → tttx-textarea_1_9_101.js}

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const tttxTextareaCss = ".material-symbols-rounded.sc-tttx-textarea_1_9_100{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-textarea_1_9_100-h{display:block}label.sc-tttx-textarea_1_9_100{font-weight:500;font-size:16px;line-height:18.752px;color:#212121}label.sc-tttx-textarea_1_9_100 .textarea-container.sc-tttx-textarea_1_9_100{position:relative}label.sc-tttx-textarea_1_9_100 .textarea-container.sc-tttx-textarea_1_9_100 textarea.sc-tttx-textarea_1_9_100{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;padding:9px 16px;font-size:16px;line-height:18.752px;border:1px solid #d5d5d5;border-radius:4px;margin-top:8px;resize:none}label.sc-tttx-textarea_1_9_100 .textarea-container.sc-tttx-textarea_1_9_100 textarea.no-label.sc-tttx-textarea_1_9_100{margin-top:0}label.sc-tttx-textarea_1_9_100 .textarea-container.sc-tttx-textarea_1_9_100 textarea.sc-tttx-textarea_1_9_100~.errorBubble.sc-tttx-textarea_1_9_100{font-size:14px;line-height:16.408px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label.sc-tttx-textarea_1_9_100 .textarea-container.sc-tttx-textarea_1_9_100 textarea.sc-tttx-textarea_1_9_100~.errorBubble.sc-tttx-textarea_1_9_100:not(.visible){display:none}label.sc-tttx-textarea_1_9_100 .textarea-container.sc-tttx-textarea_1_9_100 textarea.sc-tttx-textarea_1_9_100~.errorBubble.sc-tttx-textarea_1_9_100 span.sc-tttx-textarea_1_9_100{color:#dc0000;font-size:16px;margin-right:4px}label.sc-tttx-textarea_1_9_100 .textarea-container.sc-tttx-textarea_1_9_100 textarea.sc-tttx-textarea_1_9_100:focus{border-color:#1479c6}label.sc-tttx-textarea_1_9_100 .textarea-container.sc-tttx-textarea_1_9_100 textarea.sc-tttx-textarea_1_9_100:focus-visible{outline:none}label.sc-tttx-textarea_1_9_100 .secondarylabel.sc-tttx-textarea_1_9_100{color:#757575;font-size:14px;line-height:16.408px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-textarea_1_9_100 .optional.sc-tttx-textarea_1_9_100{color:#757575;font-weight:normal}";
+const tttxTextareaCss = ".material-symbols-rounded.sc-tttx-textarea_1_9_101{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-textarea_1_9_101-h{display:block}label.sc-tttx-textarea_1_9_101{font-weight:500;font-size:16px;line-height:18.752px;color:#212121}label.sc-tttx-textarea_1_9_101 .textarea-container.sc-tttx-textarea_1_9_101{position:relative}label.sc-tttx-textarea_1_9_101 .textarea-container.sc-tttx-textarea_1_9_101 textarea.sc-tttx-textarea_1_9_101{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;padding:9px 16px;font-size:16px;line-height:18.752px;border:1px solid #d5d5d5;border-radius:4px;margin-top:8px;resize:none}label.sc-tttx-textarea_1_9_101 .textarea-container.sc-tttx-textarea_1_9_101 textarea.no-label.sc-tttx-textarea_1_9_101{margin-top:0}label.sc-tttx-textarea_1_9_101 .textarea-container.sc-tttx-textarea_1_9_101 textarea.sc-tttx-textarea_1_9_101~.errorBubble.sc-tttx-textarea_1_9_101{font-size:14px;line-height:16.408px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label.sc-tttx-textarea_1_9_101 .textarea-container.sc-tttx-textarea_1_9_101 textarea.sc-tttx-textarea_1_9_101~.errorBubble.sc-tttx-textarea_1_9_101:not(.visible){display:none}label.sc-tttx-textarea_1_9_101 .textarea-container.sc-tttx-textarea_1_9_101 textarea.sc-tttx-textarea_1_9_101~.errorBubble.sc-tttx-textarea_1_9_101 span.sc-tttx-textarea_1_9_101{color:#dc0000;font-size:16px;margin-right:4px}label.sc-tttx-textarea_1_9_101 .textarea-container.sc-tttx-textarea_1_9_101 textarea.sc-tttx-textarea_1_9_101:focus{border-color:#1479c6}label.sc-tttx-textarea_1_9_101 .textarea-container.sc-tttx-textarea_1_9_101 textarea.sc-tttx-textarea_1_9_101:focus-visible{outline:none}label.sc-tttx-textarea_1_9_101 .secondarylabel.sc-tttx-textarea_1_9_101{color:#757575;font-size:14px;line-height:16.408px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-textarea_1_9_101 .optional.sc-tttx-textarea_1_9_101{color:#757575;font-weight:normal}";
 
 const TttxTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -51,7 +51,7 @@ const TttxTextarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return (h(Host, null, h("label", null, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: "textarea-container" }, h("textarea", { rows: this.rows, class: classNames, autofocus: this.textareaautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, disabled: this.disabled, maxlength: this.maxlength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.secondarylabel && h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
   }
   static get style() { return tttxTextareaCss; }
-}, [2, "tttx-textarea_1_9_100", {
+}, [2, "tttx-textarea_1_9_101", {
     "label": [1],
     "secondarylabel": [1],
     "showerrormsg": [4],
@@ -74,9 +74,9 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-textarea_1_9_100"];
+  const components = ["tttx-textarea_1_9_101"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-textarea_1_9_100":
+    case "tttx-textarea_1_9_101":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxTextarea);
       }
@@ -84,7 +84,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const TttxTextarea_1_9_100 = TttxTextarea;
+const TttxTextarea_1_9_101 = TttxTextarea;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxTextarea_1_9_100, defineCustomElement };
+export { TttxTextarea_1_9_101, defineCustomElement };

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

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

package/dist/components/{tttx-toggle_1_9_100.js → tttx-toggle_1_9_101.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_100", {
+}, [1, "tttx-toggle_1_9_101", {
     "initialstate": [8],
     "_state": [32]
   }]);
@@ -41,9 +41,9 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-toggle_1_9_100"];
+  const components = ["tttx-toggle_1_9_101"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-toggle_1_9_100":
+    case "tttx-toggle_1_9_101":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxToggle);
       }
@@ -51,7 +51,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const TttxToggle_1_9_100 = TttxToggle;
+const TttxToggle_1_9_101 = TttxToggle;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxToggle_1_9_100, defineCustomElement };
+export { TttxToggle_1_9_101, 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_100", {
+}, [1, "tttx-toolbar_1_9_101", {
     "border": [4],
     "viewSize": [32]
   }, [[9, "resize", "handleResize"]]]);
@@ -36,9 +36,9 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-toolbar_1_9_100"];
+  const components = ["tttx-toolbar_1_9_101"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-toolbar_1_9_100":
+    case "tttx-toolbar_1_9_101":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxToolbar);
       }

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

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

package/dist/components/{tttx-toolbar_1_9_100.js → tttx-toolbar_1_9_101.js}

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

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

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

package/dist/components/{tttx-tooltip_1_9_100.js → tttx-tooltip_1_9_101.js}

@@ -90,7 +90,7 @@ const TttxTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   get el() { return this; }
   static get style() { return tttxTooltipCss; }
-}, [1, "tttx-tooltip_1_9_100", {
+}, [1, "tttx-tooltip_1_9_101", {
     "text": [1],
     "placement": [1],
     "trigger": [16],
@@ -106,9 +106,9 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-tooltip_1_9_100"];
+  const components = ["tttx-tooltip_1_9_101"];
   components.forEach(tagName => { switch (tagName) {
-    case "tttx-tooltip_1_9_100":
+    case "tttx-tooltip_1_9_101":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxTooltip);
       }
@@ -116,7 +116,7 @@ function defineCustomElement$1() {
   } });
 }
 
-const TttxTooltip_1_9_100 = TttxTooltip;
+const TttxTooltip_1_9_101 = TttxTooltip;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxTooltip_1_9_100, defineCustomElement };
+export { TttxTooltip_1_9_101, defineCustomElement };

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

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

package/dist/components/tttx-tree-view_1_9_101.js

@@ -0,0 +1,389 @@
+import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h } from '@stencil/core/internal/client';
+import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js';
+import { d as defineCustomElement$3 } from './tttx-button.js';
+import { d as defineCustomElement$2 } from './tttx-icon.js';
+
+const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{--tree-accent:#1579C6;--tree-selected-bg:#E7E7E7;--indent:36px;--accent-gap:46px;--accent-width:6px;--tree-left-edge-shift:0px;--leaf-accent-offset:48px}.drag-drop-placeholder-row{background-color:#DBEAFE;padding:5px;border:1px dashed #3B82F6;border-radius:4px;width:100%}.drag_drop_success_fade{transition:background-color 1s linear}.inline-tree-item>.drag-drop-placeholder-row>.treeLeaf{text-align:center;padding:10px 0px}.placeholder-text{color:#3B82F6;width:100%;font-weight:400;text-align:center;padding:8px}.is-being-dragged{background-color:rgba(125, 130, 138, 0.05) !important}.drag-handle-container{height:100%}.tree-node{padding-top:0px !important;padding-bottom:0px !important;height:51px}.tree-view-element>ul{margin:0;padding:0}.tree-view-element ul{padding-left:var(--indent)}.tree-view-element ul li{list-style:none}.tree-view-element ul li.selected-group{position:relative;}.tree-view-element ul li.selected-group::before,.tree-view-element ul li.selected-group::after{display:none}.tree-view-element ul li.selected-group>li.inline-tree-item.element-row.tree-node{background-color:var(--tree-selected-bg) !important;position:relative}.tree-view-element ul li.selected-group>li.inline-tree-item.element-row.tree-node::after{content:\"\";position:absolute;top:0;bottom:0;width:var(--accent-width);left:calc(-1 * (var(--accent-gap) + var(--level, 0) * var(--indent)));background-color:var(--tree-accent);z-index:5}.tree-view-element ul li.selected-group>ul li.inline-tree-item.element-row.tree-node{background-color:#F9F9F9 !important}.tree-view-element ul li.selected-group>ul li.inline-tree-item.element-row.tree-node::after{display:none !important}.tree-view-element ul li.inline-tree-item{display:flex;align-items:center}.tree-view-element ul li.inline-tree-item .element{display:flex;width:100%;padding-left:8px;align-items:center}.tree-view-element ul li.inline-tree-item .element .padding-icon{padding:6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}@media (hover: hover){.tree-view-element ul li.inline-tree-item.element-row.rowHover:hover:not(.rowSelected)::before{background-color:rgba(17, 17, 17, 0.05);z-index:3}.tree-view-element ul li.inline-tree-item.element-row.rowHover:hover.rowSelected::before{background-color:rgba(17, 17, 17, 0.15);z-index:3}}.tree-view-element ul li.inline-tree-item.precedes_drag_drop::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #3B82F6 !important}.tree-view-element ul li.inline-tree-item.element-row{font-family:\"Roboto\", serif;font-size:16px;padding:15px 0px;position:relative;color:#212121 !important;}.tree-view-element ul li.inline-tree-item.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5;pointer-events:none}.tree-view-element ul li.inline-tree-item.element-row.tree-node::before{height:51px;z-index:2;background-color:#F9F9F9}.tree-view-element ul li.inline-tree-item.element-row.tree-node *{z-index:3}.tree-view-element ul li.inline-tree-item.element-row .treeNode{width:100%;font-weight:500;color:#212121}.tree-view-element ul li.inline-tree-item.element-row .treeLeaf{width:100%;font-weight:400;color:#212121 !important}.tree-view-element ul li.inline-tree-item.element-row.rowSelected{background-color:var(--tree-selected-bg) !important;}.tree-view-element ul li.inline-tree-item.element-row.rowSelected::before{background-color:var(--tree-selected-bg) !important}.tree-view-element ul li.inline-tree-item.element-row.rowSelected .treeLeaf,.tree-view-element ul li.inline-tree-item.element-row.rowSelected .treeNode{color:#212121 !important}.tree-view-element ul li.inline-tree-item.element-row.tree-node.rowSelected{position:relative}.tree-view-element ul li.inline-tree-item.element-row.tree-node.rowSelected::after{content:\"\";position:absolute;top:0;bottom:0;width:var(--accent-width);left:calc(-1 * (var(--accent-gap) + var(--level, 0) * var(--indent)));background-color:var(--tree-accent);z-index:5}.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node){position:relative}.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node)::after{content:\"\";position:absolute;top:0;bottom:0;width:var(--accent-width);background-color:var(--tree-accent);z-index:5}.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node)[data-has-drag-handle=true]{--drag-handle-offset:34px}.tree-view-element ul li.inline-tree-item.element-row.rowSelected:not(.tree-node)[data-has-checkbox=true]{--checkbox-offset:36px}.tree-view-element ul li.inline-tree-item.element-row .drag-handle{margin-right:10px;cursor:grab}.tree-view-element ul li.inline-tree-item.element-row.rowSelected .drag-handle{margin-left:10px}.tree-view-element ul li.inline-tree-item.element-row .drop-not-allowed{border-color:red;border-style:dashed;opacity:0.7}@media (forced-colors: active){.tree-view-element ul li.selected-group li.inline-tree-item.element-row.tree-node::after{background:CanvasText}.tree-view-element ul li.selected-group::after{background:Highlight}.tree-view-element ul li.inline-tree-item.element-row.rowSelected{background:Highlight !important}}.inline-tree-item:focus-visible{outline:2px solid var(--tree-accent);outline-offset:2px;border-radius:6px}";
+
+const TttxTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.clickEvent = createEvent(this, "clickEvent", 7);
+    this.expandNode = createEvent(this, "expandNode", 7);
+    this.checkboxChange = createEvent(this, "checkboxChange", 7);
+    this.moveNode = createEvent(this, "moveNode", 7);
+    this.dragGhost = {
+      el: null,
+    };
+    this.dragDropPlaceholderId = 'drag-drop-placeholder';
+    this.createGhostImage = (label) => {
+      if (label.length > 30)
+        label = `${label.slice(0, 30)}...`;
+      const ghost = document.createElement('div');
+      Object.assign(ghost.style, {
+        position: 'absolute',
+        top: '-9999px',
+        left: '-9999px',
+        padding: '8px 12px',
+        background: 'white',
+        pointerEvents: 'none',
+        boxShadow: '0px 0px 12px #F9F9F9',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '10px',
+        borderRadius: '4px'
+      });
+      const dragHandle = document.createElement('img');
+      dragHandle.src = this.dragIcon;
+      dragHandle.alt = 'drag';
+      ghost.appendChild(dragHandle);
+      const ghostText = document.createElement('span');
+      Object.assign(ghostText.style, { fontSize: '14px' });
+      ghostText.textContent = label;
+      ghost.appendChild(ghostText);
+      document.body.appendChild(ghost);
+      return ghost;
+    };
+    this.handleDragStart = (event, node, index, parentId) => {
+      if (!event.dataTransfer)
+        return;
+      this.draggedNodeParentId = parentId;
+      this.draggedNodeId = node.id;
+      const payload = JSON.stringify({ parentId, index, node });
+      event.dataTransfer.setData('text/plain', payload);
+      const ghostImg = this.createGhostImage(node.title);
+      this.dragGhost.el = ghostImg;
+      event.dataTransfer.setDragImage(ghostImg, 32, 30);
+    };
+    this.handleDragEnd = () => {
+      // if drag ends on a valid target, handleDragDrop should handle everything
+      // if not dropped on a valid target, use this trigger to remove the placeholder
+      setTimeout(() => {
+        const placeHolderExists = this.findNodeById(this.treeData, this.dragDropPlaceholderId);
+        if (placeHolderExists) {
+          const placeHolderRemovedList = this.updateDragDropPlaceholder(this.treeData);
+          this.treeData = [...placeHolderRemovedList];
+        }
+      }, 300);
+    };
+    this.handleDragDrop = (event, node, parentId) => {
+      var _a;
+      event.preventDefault();
+      const nodeData = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
+      if (!nodeData)
+        return;
+      const { parentId: sourceParentId, node: sourceNode } = JSON.parse(nodeData);
+      // Prevent dropping on itself or different parents
+      if (node.id === sourceNode.id || sourceParentId !== parentId)
+        return;
+      const updatedTree = [...this.treeData];
+      // Find the parent node
+      const parent = parentId ? this.findNodeById(updatedTree, parentId) : null;
+      // If no parent (root level), work with treeData directly
+      const children = (parent === null || parent === void 0 ? void 0 : parent.child) ? [...parent.child] : [...updatedTree];
+      if (!children || children.length === 0)
+        return;
+      // move the node to wherever the placeholder now is
+      const movedElement = sourceNode;
+      const newChildren = [];
+      for (const child of children) {
+        if (child.id == movedElement.id)
+          continue; // will be inserted in placeholder position
+        if (child.id == this.dragDropPlaceholderId) {
+          // moved element added to new list in placeholder's place
+          newChildren.push(movedElement);
+          continue;
+        }
+        newChildren.push(child); // retain existing elements
+      }
+      // Update the tree
+      if (parent) {
+        parent.child = newChildren;
+      }
+      else {
+        this.treeData = newChildren;
+      }
+      this.draggedNodeParentId = undefined;
+      this.draggedNodeId = undefined;
+      if (this.dragGhost.el) {
+        this.dragGhost.el.remove();
+        this.dragGhost.el = null;
+      }
+      this.handleDragDropSuccessBackground(movedElement.id);
+      this.treeData = [...this.updateDragDropPlaceholder(this.treeData)];
+      this.moveNode.emit(this.treeData);
+    };
+    this.handleDragOver = (event, draggedOverId, parentId, isDragDropPlaceholder) => {
+      event.preventDefault();
+      if (!event.dataTransfer)
+        return;
+      const validDrag = this.draggedNodeParentId === parentId || isDragDropPlaceholder;
+      event.dataTransfer.dropEffect = validDrag ? 'move' : 'none';
+      if (validDrag && !isDragDropPlaceholder) {
+        this.treeData = [...this.updateDragDropPlaceholder(this.treeData, draggedOverId)];
+      }
+    };
+    this.updateDragDropPlaceholder = (treeData, createPlaceholderOnId) => {
+      const newTreeData = [];
+      for (const treeViewItem of treeData) {
+        // delete existing placeholders & create a new one if this is where it should be dropped
+        if (treeViewItem.isDragDropPlaceholder)
+          continue;
+        if (treeViewItem.id == createPlaceholderOnId) {
+          newTreeData.push({
+            id: this.dragDropPlaceholderId,
+            title: 'Drop here',
+            isDragDropPlaceholder: true
+          });
+        }
+        if (treeViewItem.child) {
+          const children = this.updateDragDropPlaceholder(treeViewItem.child, createPlaceholderOnId);
+          treeViewItem.child = children;
+        }
+        newTreeData.push(treeViewItem);
+      }
+      return newTreeData;
+    };
+    this.data = undefined;
+    this.treeData = undefined;
+    this.nodesRecentlyMoved = [];
+  }
+  componentWillRender() {
+    if (!this.data)
+      return;
+    this.treeData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data;
+    if (!this.dragIcon) {
+      this.dragIcon = getAssetPath('assets/img/drag-icon.svg');
+    }
+  }
+  onClickHandler(event, node) {
+    event.stopPropagation();
+    // Handle selection: if node is already selected, deselect it; otherwise select it and deselect all others
+    if (node.selectable) {
+      if (node.selected) {
+        // Toggle off: deselect this node
+        node.selected = false;
+      }
+      else {
+        // Toggle on: deselect all others and select this one
+        this.handleNodeSelection(node);
+        // node.selected is already set to true in handleNodeSelection
+      }
+      this.treeData = [...this.treeData];
+    }
+    this.clickEvent.emit(node);
+  }
+  toggleNode(node, event) {
+    event.stopPropagation();
+    node.isOpen = !node.isOpen;
+    this.treeData = [...this.treeData];
+    this.expandNode.emit({ node: node, treeViewData: this.treeData });
+  }
+  handleCheckboxChange(node, event) {
+    event.stopPropagation();
+    node.checked = !node.checked;
+    this.updateChildrenCheckStatus(node);
+    this.updateParentCheckStatus();
+    this.treeData = [...this.treeData];
+    this.checkboxChange.emit(this.treeData);
+  }
+  updateChildrenCheckStatus(node) {
+    if (node.child) {
+      node.child.forEach(childNode => {
+        if (childNode.hasCheckbox && childNode.checked !== undefined) {
+          // don't set checked on a child that doesn't have a checkbox
+          // makes it impossible to unselect a parent as child can never be unchecked in frontend
+          childNode.checked = node.checked;
+        }
+        this.updateChildrenCheckStatus(childNode);
+      });
+    }
+  }
+  /**
+   * Update the checkbox status of parent nodes when children have been updated.
+   * Called recursively to traverse the tree for parents.
+   * First call with no params to automatically start at the top of the tree.
+   *
+   * Any children checked -> parent is checked.
+   *
+   * All children unchecked -> parent is unchecked.
+   */
+  updateParentCheckStatus(parent = undefined, children = undefined) {
+    if (parent === undefined) {
+      this.treeData.forEach(node => this.updateParentCheckStatus(node, node.child));
+      return;
+    }
+    let childrenCheckedStatuses = [];
+    // set status relative to children if we have some
+    if (children && children.length > 0) {
+      childrenCheckedStatuses = children.map(node => this.updateParentCheckStatus(node, node.child)).flat(1);
+      // parent checked if any children are checked
+      if (childrenCheckedStatuses.some(checked => checked)) {
+        parent.checked = true;
+      }
+      // parent unchecked if all children are unchecked
+      if (childrenCheckedStatuses.every(checked => !checked)) {
+        parent.checked = false;
+      }
+    }
+    // return the gathered checked statuses so nodes above can make check choices
+    return [...childrenCheckedStatuses, parent.checked];
+  }
+  treeConfigs(node) {
+    let checkboxIcon, checkboxColor;
+    if (node.checked) {
+      checkboxIcon = 'check_box';
+      checkboxColor = 'blue';
+    }
+    else {
+      checkboxIcon = 'check_box_outline_blank';
+      checkboxColor = 'grey';
+    }
+    const rowHoverActive = node.hasHover ? 'rowHover' : '';
+    const expanderIcon = node.isOpen ? 'arrow_drop_down' : 'arrow_right';
+    const selectedActive = node.selectable && node.selected ? 'rowSelected' : '';
+    const dragDropPlaceholder = node.isDragDropPlaceholder ? 'drag_drop_placeholder' : '';
+    return { checkboxColor, checkboxIcon, rowHoverActive, expanderIcon, selectedActive, dragDropPlaceholder };
+  }
+  findNodeById(nodes, id) {
+    for (const node of nodes) {
+      if (node.id === id)
+        return node;
+      if (node.child) {
+        const found = this.findNodeById(node.child, id);
+        if (found)
+          return found;
+      }
+    }
+    return undefined;
+  }
+  deselectAllNodes(nodes) {
+    for (const node of nodes) {
+      if (node.selectable) {
+        node.selected = false;
+      }
+      if (node.child) {
+        this.deselectAllNodes(node.child);
+      }
+    }
+  }
+  handleNodeSelection(node) {
+    // Deselect all nodes first
+    this.deselectAllNodes(this.treeData);
+    // Select only the clicked node if it's selectable
+    if (node.selectable) {
+      node.selected = true;
+    }
+    // Update the tree to trigger re-render
+    this.treeData = [...this.treeData];
+  }
+  handleDragDropSuccessBackground(nodeId) {
+    this.nodesRecentlyMoved.push(nodeId);
+    setTimeout((nodeId) => {
+      this.nodesRecentlyMoved = [...this.nodesRecentlyMoved.filter((id) => id !== nodeId)];
+    }, 300, nodeId);
+  }
+  doesNodePrecedeDragDropPlaceholder(node, index, parentId = undefined) {
+    var _a;
+    if (node.child) {
+      // is parent, so first child would have to be placeholder
+      return node.child.length > 0 && node.child[0].isDragDropPlaceholder;
+    }
+    // child, so check if following element is placeholder
+    const parentNode = parentId ? this.findNodeById(this.treeData, parentId) : undefined;
+    if (parentNode) {
+      return index !== parentNode.child.length && ((_a = parentNode.child[index + 1]) === null || _a === void 0 ? void 0 : _a.isDragDropPlaceholder);
+    }
+    return false;
+  }
+  renderNode(node, index, parentId = undefined, level = 0 // <-- depth
+  ) {
+    const options = this.treeConfigs(node);
+    const precedesDragDropPlaceholderClass = this.doesNodePrecedeDragDropPlaceholder(node, index, parentId) ? 'precedes_drag_drop' : '';
+    if (node.child) {
+      // group node
+      const isSelectedGroup = !!node.selected;
+      return (h("li", { class: `${isSelectedGroup ? 'selected-group' : ''}`, style: { '--level': String(level) } }, h("li", Object.assign({ id: node.id, "data-id": node.id }, (node.draggable || node.isDragDropPlaceholder ? { onDragOver: event => this.handleDragOver(event, node.id, parentId, node.isDragDropPlaceholder) } : {}), (node.draggable || node.isDragDropPlaceholder ? { onDrop: event => this.handleDragDrop(event, node, parentId) } : {}), { class: `inline-tree-item element-row tree-node ${options.rowHoverActive} ${options.selectedActive} ${options.dragDropPlaceholder} ${precedesDragDropPlaceholderClass}`, onClick: event => {
+          if (node.hasHover) {
+            this.onClickHandler(event, node);
+          }
+        } }), h("tttx-button_1_9_101", { 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("ul", null, node.child.map((childNode, childIndex) => {
+        // next level = level + 1
+        return this.renderNode(childNode, childIndex, node.id, level + 1);
+      }))) : null));
+    }
+    // leaf (activity)
+    const leafStyle = { '--level': String(level) };
+    if (this.nodesRecentlyMoved.find((x) => x == node.id)) {
+      leafStyle['background-color'] = '#D1F7F0'; //'rgba(51, 170, 51, .1)';
+    }
+    return (h("li", Object.assign({ "data-id": node.id }, (node.draggable || node.isDragDropPlaceholder ? { onDragOver: event => this.handleDragOver(event, node.id, parentId, node.isDragDropPlaceholder) } : {}), (node.draggable || node.isDragDropPlaceholder ? { onDrop: event => this.handleDragDrop(event, node, parentId) } : {}), { class: `
+                    inline-tree-item element-row
+                    ${options.rowHoverActive}
+                    ${options.selectedActive}
+                    ${options.dragDropPlaceholder}
+                    ${precedesDragDropPlaceholderClass}
+                    drag_drop_success_fade
+                    ${this.draggedNodeId == node.id ? ' is-being-dragged' : ''}
+                `, style: leafStyle, onClick: event => {
+        if (node.hasHover) {
+          this.onClickHandler(event, node);
+        }
+      } }), this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor, index, parentId)));
+  }
+  htmlcode(type, node, check_box, check_boxColor, index, parentId = undefined) {
+    if (node.isDragDropPlaceholder) {
+      return (h("div", { class: "inline-tree-item element" }, h("div", { class: 'drag-drop-placeholder-row' }, h("div", { class: 'placeholder-text' }, node.title))));
+    }
+    return (h("div", { class: "inline-tree-item element" }, node.draggable && (h("div", { class: "drag-handle-container" }, h("img", { src: this.dragIcon, alt: "drag", class: "drag-handle", draggable: node.draggable, onDragStart: event => {
+        if (node.draggable) {
+          this.handleDragStart(event, node, index, parentId);
+        }
+      }, onDragEnd: () => {
+        if (node.draggable) {
+          this.handleDragEnd();
+        }
+      } }))), node.hasCheckbox && (h("tttx-button_1_9_101", { 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_101", { 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) })));
+  }
+  render() {
+    if (!this.data)
+      return;
+    return (h("div", { ref: (element) => this.rootElement = element, class: "tree-view-element" }, h("ul", null, this.treeData.map((node, index) => this.renderNode(node, index)))));
+  }
+  get el() { return this; }
+  static get style() { return tttxTreeViewCss; }
+}, [1, "tttx-tree-view_1_9_101", {
+    "data": [1040],
+    "treeData": [32],
+    "nodesRecentlyMoved": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-tree-view_1_9_101", "tttx-button_1_9_101", "tttx-icon_1_9_101"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-tree-view_1_9_101":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxTreeView);
+      }
+      break;
+    case "tttx-button_1_9_101":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tttx-icon_1_9_101":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TttxTreeView_1_9_101 = TttxTreeView;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxTreeView_1_9_101, defineCustomElement };