@3t-transform/threeteeui 0.2.87 → 0.2.89

package/dist/components/tttx-checkbox-group-heading.d.ts

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

package/dist/components/tttx-checkbox-group-heading.js

@@ -0,0 +1,29 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const TttxCheckboxGroupHeading$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'tttx-checkbox-group__heading' }, h("slot", null))));
+  }
+}, [4, "tttx-checkbox-group-heading"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-checkbox-group-heading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-checkbox-group-heading":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxCheckboxGroupHeading$1);
+      }
+      break;
+  } });
+}
+
+const TttxCheckboxGroupHeading = TttxCheckboxGroupHeading$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxCheckboxGroupHeading, defineCustomElement };

package/dist/components/tttx-checkbox-group.d.ts

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

package/dist/components/tttx-checkbox-group.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tttxCheckboxGroupCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox-group{display:flex;flex-direction:column}.tttx-checkbox-group__caption{color:#757575;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:normal;line-height:19px;margin-bottom:4px}.tttx-checkbox-group__heading{color:#212121;font-family:\"Roboto\", sans-serif;font-size:16px;font-weight:500;line-height:16px;margin-bottom:4px}";
+
+const TttxCheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'tttx-checkbox-group' }, h("slot", null))));
+  }
+  static get style() { return tttxCheckboxGroupCss; }
+}, [1, "tttx-checkbox-group"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-checkbox-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-checkbox-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxCheckboxGroup$1);
+      }
+      break;
+  } });
+}
+
+const TttxCheckboxGroup = TttxCheckboxGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxCheckboxGroup, defineCustomElement };

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

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

package/dist/components/tttx-checkbox.js

@@ -0,0 +1,68 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './tttx-icon2.js';
+
+const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tttx-checkbox{padding:8px;display:flex;justify-content:flex-start;font-size:16px;align-items:center;font-weight:normal;line-height:19px}.tttx-checkbox tttx-icon{height:24px}.tttx-checkbox.--inline{display:inline-flex}.tttx-checkbox__input{display:none}.tttx-checkbox__label{margin-left:8px;padding-right:0;color:#212121;font-weight:normal}";
+
+const TttxCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.checkboxChangeEvent = createEvent(this, "checkboxChangeEvent", 3);
+    this.checkboxId = undefined;
+    this.label = undefined;
+    this.inline = false;
+    this.indeterminate = false;
+    this.checked = undefined;
+  }
+  watchIndeterminateChange(newValue) {
+    this.checkbox.indeterminate = newValue;
+  }
+  onClick() {
+    const { checked, indeterminate } = this;
+    this.checkboxChangeEvent.emit({
+      indeterminate,
+      checked
+    });
+  }
+  componentDidLoad() {
+    this.checkbox.indeterminate = this.indeterminate;
+  }
+  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", { color: this.checked ? 'blue' : null, icon: renderedIcon, onClick: this.onClick.bind(this) }), h("span", { class: "tttx-checkbox__label" }, this.label))));
+  }
+  static get watchers() { return {
+    "indeterminate": ["watchIndeterminateChange"]
+  }; }
+  static get style() { return tttxCheckboxCss; }
+}, [0, "tttx-checkbox", {
+    "checkboxId": [1, "checkbox-id"],
+    "label": [1],
+    "inline": [4],
+    "indeterminate": [4],
+    "checked": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-checkbox", "tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxCheckbox$1);
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TttxCheckbox = TttxCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxCheckbox, defineCustomElement };

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

@@ -3,7 +3,7 @@ import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js
 import { d as defineCustomElement$3 } from './tttx-button2.js';
 import { d as defineCustomElement$2 } from './tttx-icon2.js';
 
-const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;right:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);z-index:-1}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;z-index:-1;right:0}}";
+const tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1)}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;right:0;z-index:-1}}";
 
 const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -11,6 +11,7 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.__registerHost();
     this.__attachShadow();
     this.clickEvent = createEvent(this, "clickEvent", 7);
+    this.expandNode = createEvent(this, "expandNode", 7);
     this.data = undefined;
     this.treeData = undefined;
     this.selectedId = undefined;
@@ -36,6 +37,7 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     event.stopPropagation();
     node.isOpen = !node.isOpen;
     this.treeData = [...this.treeData];
+    this.expandNode.emit({ node: node, treeViewData: this.treeData });
   }
   handleCheckboxChange(node, event) {
     event.stopPropagation();
@@ -97,13 +99,7 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     }
   }
   htmlcode(type, node, check_box, check_boxColor) {
-    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button", { 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", { 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) }), (node.menuActive || node.chevronActive) && (h("div", { class: "right-buttons-container" }, node.menuActive && (h("tttx-button", { design: "borderless-circle", notext: true, icon: "more_vert", color: "black", class: "padding-icon menu-button", onClick: (event) => {
-        event.stopPropagation();
-        this.onClickHandler('menu', event, node);
-      } })), node.chevronActive && (h("tttx-icon", { icon: "chevron_right", color: "black", class: "padding-icon chevron-button", onClick: (event) => {
-        event.stopPropagation();
-        this.onClickHandler('chevron', event, node);
-      } }))))));
+    const htmlcode = (h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (h("tttx-button", { 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", { 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() {