@3t-transform/threeteeui 0.2.91 → 0.2.93

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

@@ -34,6 +34,7 @@
   bottom: 0;
   right: 0;
   border-bottom: 1px solid #d5d5d5;
+  pointer-events: none;
 }
 
 .element-row.rowSelected::before {
@@ -44,6 +45,7 @@
   bottom: 0;
   right: 0;
   background-color: rgba(17, 17, 17, 0.1);
+  pointer-events: none;
 }
 
 li {
@@ -64,18 +66,15 @@ li {
 }
 
 .treeNode {
+  width: 100%;
   font-weight: 500;
 }
 
 .treeLeaf {
+  width: 100%;
   font-weight: 400;
 }
 
-.right-buttons-container {
-  margin-left: auto;
-  display: flex;
-}
-
 .borderless:active {
   outline-style: none;
 }
@@ -94,6 +93,6 @@ li {
     background-color: rgba(17, 17, 17, 0.05);
     opacity: 0.5;
     right: 0;
-    z-index: -1;
+    pointer-events: none;
   }
 }

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ export { TttxCheckboxGroup as TttxCheckboxGroup } from '../types/components/mole
 export { TttxCheckboxGroupCaption as TttxCheckboxGroupCaption } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-caption';
 export { TttxCheckboxGroupHeading as TttxCheckboxGroupHeading } from '../types/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-heading';
 export { TttxDataPattern as TttxDataPattern } from '../types/components/organisms/tttx-data-pattern/tttx-data-pattern';
+export { TttxDialog as TttxDialog } from '../types/components/molecules/tttx-dialog/tttx-dialog';
 export { TttxDialogBox as TttxDialogBox } from '../types/components/molecules/tttx-dialog-box/tttx-dialog-box';
 export { TttxExpander as TttxExpander } from '../types/components/molecules/tttx-expander/tttx-expander';
 export { TttxFilter as TttxFilter } from '../types/components/molecules/tttx-filter/tttx-filter';

package/dist/components/index.js

@@ -5,6 +5,7 @@ export { TttxCheckboxGroup, defineCustomElement as defineCustomElementTttxCheckb
 export { TttxCheckboxGroupCaption, defineCustomElement as defineCustomElementTttxCheckboxGroupCaption } from './tttx-checkbox-group-caption.js';
 export { TttxCheckboxGroupHeading, defineCustomElement as defineCustomElementTttxCheckboxGroupHeading } from './tttx-checkbox-group-heading.js';
 export { TttxDataPattern, defineCustomElement as defineCustomElementTttxDataPattern } from './tttx-data-pattern.js';
+export { TttxDialog, defineCustomElement as defineCustomElementTttxDialog } from './tttx-dialog.js';
 export { TttxDialogBox, defineCustomElement as defineCustomElementTttxDialogBox } from './tttx-dialog-box.js';
 export { TttxExpander, defineCustomElement as defineCustomElementTttxExpander } from './tttx-expander.js';
 export { TttxFilter, defineCustomElement as defineCustomElementTttxFilter } from './tttx-filter.js';

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

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

package/dist/components/tttx-dialog.js

@@ -0,0 +1,109 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './tttx-icon2.js';
+
+const ICON_TYPES = {
+  critical: { iconName: 'report', iconColor: 'red' },
+  info: { iconName: 'info', iconColor: 'blue' },
+  success: { iconName: 'check_circle', iconColor: 'green' },
+  warning: { iconName: 'warning', iconColor: 'orange' },
+};
+
+const tttxDialogCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.padding{padding:8px 16px}.align-right{margin-left:auto;display:flex}.header{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;align-items:center;height:36px}.title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.icon{padding-right:8px;width:24px;height:24px}.icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.body-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.body{text-overflow:ellipsis;padding:16px}.footer{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}::slotted([slot=buttons]){display:flex;gap:8px}.header.info{border-bottom:1px solid #1479c6}.header.success{border-bottom:1px solid #a2bb31}.header.warning{border-bottom:1px solid #f59500}.header.critical{border-bottom:1px solid #dc0000}";
+
+const TttxDialog$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.closeButtonClick = createEvent(this, "closeButtonClick", 6);
+    this.header = undefined;
+    this.type = undefined;
+    this.size = 'regular';
+    this.open = false;
+    this.allowOverflow = false;
+    this.closeEnabled = true;
+    this.elementSize = undefined;
+  }
+  handleResize() {
+    if (window.innerWidth < 698) {
+      this.elementSize = 'mobile';
+    }
+    else {
+      this.elementSize = this.size;
+    }
+  }
+  preventCancelOnDialog(event) {
+    event.preventDefault();
+  }
+  componentDidLoad() {
+    this.dialog.addEventListener('cancel', this.preventCancelOnDialog);
+  }
+  onCloseClickHandler() {
+    this.closeButtonClick.emit();
+  }
+  headerIconDetails(iconEnabled) {
+    if (!iconEnabled)
+      return { iconName: undefined, iconColor: undefined };
+    return ICON_TYPES[this.type];
+  }
+  renderHeader() {
+    const iconEnabled = typeof this.type !== 'undefined';
+    const { iconName, iconColor } = this.headerIconDetails(iconEnabled);
+    return (h("div", { class: `padding header ${this.type || ''}` }, iconEnabled && h("tttx-icon", { class: "icon", icon: iconName, color: iconColor }), h("h3", { class: "title" }, this.header), this.closeEnabled && (h("div", { class: "align-right close-button", onClick: () => this.onCloseClickHandler() }, h("tttx-icon", { class: "icon-close clickable", icon: "close", color: "black" })))));
+  }
+  body() {
+    return (h("div", { class: `body ${!this.allowOverflow ? 'overflow-hidden' : ''}` }, h("span", { class: "body-content" }, h("slot", null))));
+  }
+  footer() {
+    if (!this.el.querySelector('[slot="buttons"]'))
+      return;
+    return (h("div", { class: "padding footer" }, h("div", { class: "align-right" }, h("slot", { name: "buttons" }))));
+  }
+  componentDidRender() {
+    if (!this.open) {
+      this.dialog.close();
+      return;
+    }
+    if (!this.dialog.open)
+      this.dialog.showModal();
+  }
+  componentWillLoad() {
+    this.handleResize();
+  }
+  render() {
+    return (h("dialog", { ref: (el) => this.dialog = el, class: `dialog-box ${this.allowOverflow ? 'overflow-visible' : ''} ${this.elementSize}` }, h("div", { class: "contents" }, this.renderHeader(), this.body(), this.footer())));
+  }
+  get el() { return this; }
+  static get style() { return tttxDialogCss; }
+}, [1, "tttx-dialog", {
+    "header": [1],
+    "type": [1],
+    "size": [1],
+    "open": [4],
+    "allowOverflow": [4, "allow-overflow"],
+    "closeEnabled": [4, "close-enabled"],
+    "elementSize": [32]
+  }, [[9, "resize", "handleResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-dialog", "tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-dialog":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxDialog$1);
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TttxDialog = TttxDialog$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxDialog, 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%;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 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;pointer-events:none}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);pointer-events:none}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{width:100%;font-weight:500}.treeLeaf{width:100%;font-weight:400}.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;pointer-events:none}}";
 
 const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["tttx-data-pattern",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box",[[1,"tttx-multiselect-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"htmlVisibleValue":[4,"html-visible-value"],"visibleValue":[1,"visible-value"],"open":[32],"unsavedSelectedItems":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"selectedValue":[1,"selected-value"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-expander",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading",[[4,"tttx-checkbox-group-heading"]]],["tttx-form",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea",[[2,"tttx-textarea",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"rows":[2],"textareaautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"disabled":[4],"maxlength":[8],"name":[1],"placeholder":[1],"readonly":[8],"required":[4],"value":[1032]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-filter_4",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}],[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return bootstrapLazy([["tttx-data-pattern",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box",[[1,"tttx-multiselect-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"htmlVisibleValue":[4,"html-visible-value"],"visibleValue":[1,"visible-value"],"open":[32],"unsavedSelectedItems":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"selectedValue":[1,"selected-value"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog",[[1,"tttx-dialog",{"header":[1],"type":[1],"size":[1],"open":[4],"allowOverflow":[4,"allow-overflow"],"closeEnabled":[4,"close-enabled"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-expander",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading",[[4,"tttx-checkbox-group-heading"]]],["tttx-form",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea",[[2,"tttx-textarea",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"rows":[2],"textareaautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"disabled":[4],"maxlength":[8],"name":[1],"placeholder":[1],"readonly":[8],"required":[4],"value":[1032]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-filter_4",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}],[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
   });
 };
 

package/dist/esm/tttx-dialog.entry.js

@@ -0,0 +1,77 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b11965d8.js';
+
+const ICON_TYPES = {
+  critical: { iconName: 'report', iconColor: 'red' },
+  info: { iconName: 'info', iconColor: 'blue' },
+  success: { iconName: 'check_circle', iconColor: 'green' },
+  warning: { iconName: 'warning', iconColor: 'orange' },
+};
+
+const tttxDialogCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.padding{padding:8px 16px}.align-right{margin-left:auto;display:flex}.header{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;align-items:center;height:36px}.title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.icon{padding-right:8px;width:24px;height:24px}.icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.body-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.body{text-overflow:ellipsis;padding:16px}.footer{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}::slotted([slot=buttons]){display:flex;gap:8px}.header.info{border-bottom:1px solid #1479c6}.header.success{border-bottom:1px solid #a2bb31}.header.warning{border-bottom:1px solid #f59500}.header.critical{border-bottom:1px solid #dc0000}";
+
+const TttxDialog = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeButtonClick = createEvent(this, "closeButtonClick", 6);
+    this.header = undefined;
+    this.type = undefined;
+    this.size = 'regular';
+    this.open = false;
+    this.allowOverflow = false;
+    this.closeEnabled = true;
+    this.elementSize = undefined;
+  }
+  handleResize() {
+    if (window.innerWidth < 698) {
+      this.elementSize = 'mobile';
+    }
+    else {
+      this.elementSize = this.size;
+    }
+  }
+  preventCancelOnDialog(event) {
+    event.preventDefault();
+  }
+  componentDidLoad() {
+    this.dialog.addEventListener('cancel', this.preventCancelOnDialog);
+  }
+  onCloseClickHandler() {
+    this.closeButtonClick.emit();
+  }
+  headerIconDetails(iconEnabled) {
+    if (!iconEnabled)
+      return { iconName: undefined, iconColor: undefined };
+    return ICON_TYPES[this.type];
+  }
+  renderHeader() {
+    const iconEnabled = typeof this.type !== 'undefined';
+    const { iconName, iconColor } = this.headerIconDetails(iconEnabled);
+    return (h("div", { class: `padding header ${this.type || ''}` }, iconEnabled && h("tttx-icon", { class: "icon", icon: iconName, color: iconColor }), h("h3", { class: "title" }, this.header), this.closeEnabled && (h("div", { class: "align-right close-button", onClick: () => this.onCloseClickHandler() }, h("tttx-icon", { class: "icon-close clickable", icon: "close", color: "black" })))));
+  }
+  body() {
+    return (h("div", { class: `body ${!this.allowOverflow ? 'overflow-hidden' : ''}` }, h("span", { class: "body-content" }, h("slot", null))));
+  }
+  footer() {
+    if (!this.el.querySelector('[slot="buttons"]'))
+      return;
+    return (h("div", { class: "padding footer" }, h("div", { class: "align-right" }, h("slot", { name: "buttons" }))));
+  }
+  componentDidRender() {
+    if (!this.open) {
+      this.dialog.close();
+      return;
+    }
+    if (!this.dialog.open)
+      this.dialog.showModal();
+  }
+  componentWillLoad() {
+    this.handleResize();
+  }
+  render() {
+    return (h("dialog", { ref: (el) => this.dialog = el, class: `dialog-box ${this.allowOverflow ? 'overflow-visible' : ''} ${this.elementSize}` }, h("div", { class: "contents" }, this.renderHeader(), this.body(), this.footer())));
+  }
+  get el() { return getElement(this); }
+};
+TttxDialog.style = tttxDialogCss;
+
+export { TttxDialog as tttx_dialog };

package/dist/esm/tttx-tree-view.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h } from './index-b11965d8.js'
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-68752a19.js';
 import './_commonjsHelpers-9943807e.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%;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 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;pointer-events:none}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);pointer-events:none}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{width:100%;font-weight:500}.treeLeaf{width:100%;font-weight:400}.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;pointer-events:none}}";
 
 const TttxTreeView = class {
   constructor(hostRef) {

package/dist/esm/tttx.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["tttx-data-pattern",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box",[[1,"tttx-multiselect-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"htmlVisibleValue":[4,"html-visible-value"],"visibleValue":[1,"visible-value"],"open":[32],"unsavedSelectedItems":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"selectedValue":[1,"selected-value"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-expander",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading",[[4,"tttx-checkbox-group-heading"]]],["tttx-form",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea",[[2,"tttx-textarea",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"rows":[2],"textareaautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"disabled":[4],"maxlength":[8],"name":[1],"placeholder":[1],"readonly":[8],"required":[4],"value":[1032]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-filter_4",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}],[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return bootstrapLazy([["tttx-data-pattern",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box",[[1,"tttx-multiselect-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"htmlVisibleValue":[4,"html-visible-value"],"visibleValue":[1,"visible-value"],"open":[32],"unsavedSelectedItems":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"selectedValue":[1,"selected-value"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog",[[1,"tttx-dialog",{"header":[1],"type":[1],"size":[1],"open":[4],"allowOverflow":[4,"allow-overflow"],"closeEnabled":[4,"close-enabled"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-expander",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading",[[4,"tttx-checkbox-group-heading"]]],["tttx-form",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea",[[2,"tttx-textarea",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"rows":[2],"textareaautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"disabled":[4],"maxlength":[8],"name":[1],"placeholder":[1],"readonly":[8],"required":[4],"value":[1032]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-filter_4",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}],[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
 });

package/dist/tttx/p-cdac34b5.entry.js

@@ -0,0 +1 @@
+import{r as o,c as i,h as t,g as e}from"./p-65bb4035.js";const n={critical:{iconName:"report",iconColor:"red"},info:{iconName:"info",iconColor:"blue"},success:{iconName:"check_circle",iconColor:"green"},warning:{iconName:"warning",iconColor:"orange"}},s=class{constructor(t){o(this,t),this.closeButtonClick=i(this,"closeButtonClick",6),this.header=void 0,this.type=void 0,this.size="regular",this.open=!1,this.allowOverflow=!1,this.closeEnabled=!0,this.elementSize=void 0}handleResize(){this.elementSize=window.innerWidth<698?"mobile":this.size}preventCancelOnDialog(o){o.preventDefault()}componentDidLoad(){this.dialog.addEventListener("cancel",this.preventCancelOnDialog)}onCloseClickHandler(){this.closeButtonClick.emit()}headerIconDetails(o){return o?n[this.type]:{iconName:void 0,iconColor:void 0}}renderHeader(){const o=void 0!==this.type,{iconName:i,iconColor:e}=this.headerIconDetails(o);return t("div",{class:`padding header ${this.type||""}`},o&&t("tttx-icon",{class:"icon",icon:i,color:e}),t("h3",{class:"title"},this.header),this.closeEnabled&&t("div",{class:"align-right close-button",onClick:()=>this.onCloseClickHandler()},t("tttx-icon",{class:"icon-close clickable",icon:"close",color:"black"})))}body(){return t("div",{class:"body "+(this.allowOverflow?"":"overflow-hidden")},t("span",{class:"body-content"},t("slot",null)))}footer(){if(this.el.querySelector('[slot="buttons"]'))return t("div",{class:"padding footer"},t("div",{class:"align-right"},t("slot",{name:"buttons"})))}componentDidRender(){this.open?this.dialog.open||this.dialog.showModal():this.dialog.close()}componentWillLoad(){this.handleResize()}render(){return t("dialog",{ref:o=>this.dialog=o,class:`dialog-box ${this.allowOverflow?"overflow-visible":""} ${this.elementSize}`},t("div",{class:"contents"},this.renderHeader(),this.body(),this.footer()))}get el(){return e(this)}};s.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.padding{padding:8px 16px}.align-right{margin-left:auto;display:flex}.header{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;align-items:center;height:36px}.title{font-size:18;font-weight:500;font-family:"Roboto", serif}.icon{padding-right:8px;width:24px;height:24px}.icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.body-content{font-size:16;font-weight:400;font-family:"Roboto", serif}.body{text-overflow:ellipsis;padding:16px}.footer{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}::slotted([slot=buttons]){display:flex;gap:8px}.header.info{border-bottom:1px solid #1479c6}.header.success{border-bottom:1px solid #a2bb31}.header.warning{border-bottom:1px solid #f59500}.header.critical{border-bottom:1px solid #dc0000}';export{s as tttx_dialog}

package/dist/tttx/p-d5b6dd17.entry.js

@@ -0,0 +1 @@
+import{r as e,c as t,h as o}from"./p-65bb4035.js";import{p as i,d as n}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(o){e(this,o),this.clickEvent=t(this,"clickEvent",7),this.expandNode=t(this,"expandNode",7),this.data=void 0,this.treeData=void 0,this.selectedId=void 0}onClickHandler(e,t,o){t.stopPropagation();const i=JSON.stringify(o);this.clickEvent.emit({eventName:e,returnJsonObject:i}),"row"===e&&this.selectedElement(t,o)}updateSelectedId(e){this.selectedId=e}selectedElement(e,t){e.stopPropagation(),this.selectedId=t.id,this.treeData=[...this.treeData]}toggleNode(e,t){t.stopPropagation(),e.isOpen=!e.isOpen,this.treeData=[...this.treeData],this.expandNode.emit({node:e,treeViewData:this.treeData})}handleCheckboxChange(e,t){t.stopPropagation(),e.checked=!e.checked,this.updateChildrenCheckStatus(e),this.treeData=[...this.treeData]}updateChildrenCheckStatus(e){e.child&&e.child.forEach((t=>{t.checked=e.checked,this.updateChildrenCheckStatus(t)}))}updateSelected(e){let t=!1;return e.id===this.selectedId&&(t=!0),t}treeConfigs(e){let t,o;return e.checked?(t="check_box",o="blue"):(t="check_box_outline_blank",o="grey"),{checkboxColor:o,checkboxIcon:t,rowHoverActive:e.hasHover?"rowHover":"",expanderIcon:e.isOpen?"arrow_drop_down":"arrow_right",selectedActive:e.selectable&&e.selected?"rowSelected":""}}renderNode(e){e.selectable&&(e.selected=this.updateSelected(e));const t=this.treeConfigs(e);return e.child?o("li",null,o("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},o("tttx-button",{class:"toggleNode",design:"borderless-circle",notext:!0,icon:t.expanderIcon,color:"black",onClick:t=>this.toggleNode(e,t)}),this.htmlcode("treeNode",e,t.checkboxIcon,t.checkboxColor)),e.isOpen?o("ul",null,o("div",{class:"child-node"},e.child.map((e=>this.renderNode(e))))):null):o("li",null,o("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},this.htmlcode("treeLeaf",e,t.checkboxIcon,t.checkboxColor)))}htmlcode(e,t,r,s){return o("div",{class:"inline-tree-item element"},t.hasCheckbox&&o("tttx-button",{design:"borderless-circle",notext:!0,icon:r,iconcolor:s,class:"padding-icon checkbox",onClick:e=>this.handleCheckboxChange(t,e)}),!t.html&&t.hasIcon&&o("tttx-icon",{icon:t.icon,color:t.iconColor,class:"padding-icon"}),!t.html&&o("div",{class:e},t.title),t.html&&o("div",{class:e,innerHTML:i.sanitize(t.html,n)}))}render(){if(this.data)return this.treeData="string"==typeof this.data?JSON.parse(this.data):this.data,o("div",{class:"tree-view-element"},o("ul",null,this.treeData.map((e=>this.renderNode(e)))))}};r.style='.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;pointer-events:none}.element-row.rowSelected::before{content:"";position:absolute;left:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);pointer-events:none}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{width:100%;font-weight:500}.treeLeaf{width:100%;font-weight:400}.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;pointer-events:none}}';export{r as tttx_tree_view}

package/dist/tttx/tttx.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-65bb4035.js";export{s as setNonce}from"./p-65bb4035.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-7f1452fb",[[1,"tttx-data-pattern",{data:[1],sorteroptions:[1],filteroptions:[1],filterheader:[1]}]]],["p-9ad58b75",[[1,"tttx-multiselect-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],htmlVisibleValue:[4,"html-visible-value"],visibleValue:[1,"visible-value"],open:[32],unsavedSelectedItems:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-bc363141",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-d3a9fc42",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-177a760d",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-61ef7773",[[0,"tttx-checkbox",{checkboxId:[1,"checkbox-id"],label:[1],inline:[4],indeterminate:[4],checked:[4]}]]],["p-87b6e5a9",[[1,"tttx-expander",{name:[1],open:[4],lefticon:[1],lefticoncolor:[1],isExpanded:[32]}]]],["p-b189ca0f",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-67f24d17",[[1,"tttx-checkbox-group"]]],["p-a64c9910",[[4,"tttx-checkbox-group-caption"]]],["p-80e3bd36",[[4,"tttx-checkbox-group-heading"]]],["p-e2dda35e",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-15b7a577",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-fe6c321b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-be16cf2d",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-69642b71",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-e7b7d2e2",[[1,"tttx-tag",{text:[1],color:[1],textColor:[1,"text-color"]}]]],["p-34f328f9",[[2,"tttx-textarea",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],rows:[2],textareaautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],disabled:[4],maxlength:[8],name:[1],placeholder:[1],readonly:[8],required:[4],value:[1032]}]]],["p-a94f7efc",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-93e63568",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-f27adb48",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{data:[1025],name:[1],_data:[32]}],[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-61741832",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
+import{p as e,b as t}from"./p-65bb4035.js";export{s as setNonce}from"./p-65bb4035.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-7f1452fb",[[1,"tttx-data-pattern",{data:[1],sorteroptions:[1],filteroptions:[1],filterheader:[1]}]]],["p-9ad58b75",[[1,"tttx-multiselect-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],htmlVisibleValue:[4,"html-visible-value"],visibleValue:[1,"visible-value"],open:[32],unsavedSelectedItems:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-bc363141",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-d3a9fc42",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-d5b6dd17",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-61ef7773",[[0,"tttx-checkbox",{checkboxId:[1,"checkbox-id"],label:[1],inline:[4],indeterminate:[4],checked:[4]}]]],["p-cdac34b5",[[1,"tttx-dialog",{header:[1],type:[1],size:[1],open:[4],allowOverflow:[4,"allow-overflow"],closeEnabled:[4,"close-enabled"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-87b6e5a9",[[1,"tttx-expander",{name:[1],open:[4],lefticon:[1],lefticoncolor:[1],isExpanded:[32]}]]],["p-b189ca0f",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-67f24d17",[[1,"tttx-checkbox-group"]]],["p-a64c9910",[[4,"tttx-checkbox-group-caption"]]],["p-80e3bd36",[[4,"tttx-checkbox-group-heading"]]],["p-e2dda35e",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-15b7a577",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-fe6c321b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-be16cf2d",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-69642b71",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-e7b7d2e2",[[1,"tttx-tag",{text:[1],color:[1],textColor:[1,"text-color"]}]]],["p-34f328f9",[[2,"tttx-textarea",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],rows:[2],textareaautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],disabled:[4],maxlength:[8],name:[1],placeholder:[1],readonly:[8],required:[4],value:[1032]}]]],["p-a94f7efc",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-93e63568",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-f27adb48",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{data:[1025],name:[1],_data:[32]}],[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-61741832",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));

package/dist/types/components/molecules/tttx-dialog/icon-types.d.ts

@@ -0,0 +1,18 @@
+export declare const ICON_TYPES: {
+  critical: {
+    iconName: string;
+    iconColor: string;
+  };
+  info: {
+    iconName: string;
+    iconColor: string;
+  };
+  success: {
+    iconName: string;
+    iconColor: string;
+  };
+  warning: {
+    iconName: string;
+    iconColor: string;
+  };
+};

package/dist/types/components/molecules/tttx-dialog/tttx-dialog.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class TttxDialog {
+  header: string;
+  type: 'info' | 'success' | 'warning' | 'critical' | undefined;
+  size: 'regular' | 'mobile' | 'large' | 'small';
+  open: boolean;
+  allowOverflow: boolean;
+  closeEnabled: boolean;
+  elementSize: 'regular' | 'mobile' | 'large' | 'small';
+  el: any;
+  closeButtonClick: EventEmitter;
+  handleResize(): void;
+  private dialog;
+  private preventCancelOnDialog;
+  componentDidLoad(): void;
+  onCloseClickHandler(): void;
+  headerIconDetails(iconEnabled: boolean): {
+    iconName: string;
+    iconColor: string;
+  };
+  renderHeader(): any;
+  body(): any;
+  footer(): any;
+  componentDidRender(): void;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/molecules/tttx-dialog/tttx-dialog.stories.d.ts

@@ -0,0 +1,42 @@
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    header: {
+      control: {
+        type: string;
+      };
+    };
+    type: {
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+    size: {
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+    closeEnabled: {
+      control: {
+        type: string;
+      };
+    };
+  };
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+    docs: {
+      description: {
+        component: string;
+      };
+    };
+  };
+  decorators: (<T extends import("@storybook/types").Renderer>(storyFn: import("@storybook/types").PartialStoryFn<T, import("@storybook/types").Args>) => T["storyResult"])[];
+};
+export default _default;
+export declare const Default: any;
+export declare const WithoutFooter: any;

package/dist/types/components.d.ts

@@ -43,6 +43,14 @@ export namespace Components {
         "filteroptions": string;
         "sorteroptions": string;
     }
+    interface TttxDialog {
+        "allowOverflow": boolean;
+        "closeEnabled": boolean;
+        "header": string;
+        "open": boolean;
+        "size": 'regular' | 'mobile' | 'large' | 'small';
+        "type": 'info' | 'success' | 'warning' | 'critical' | undefined;
+    }
     interface TttxDialogBox {
         "allowOverflow": boolean;
         "data": string | DialogItems;
@@ -219,6 +227,10 @@ export interface TttxCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxCheckboxElement;
 }
+export interface TttxDialogCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxDialogElement;
+}
 export interface TttxDialogBoxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxDialogBoxElement;
@@ -304,6 +316,12 @@ declare global {
         prototype: HTMLTttxDataPatternElement;
         new (): HTMLTttxDataPatternElement;
     };
+    interface HTMLTttxDialogElement extends Components.TttxDialog, HTMLStencilElement {
+    }
+    var HTMLTttxDialogElement: {
+        prototype: HTMLTttxDialogElement;
+        new (): HTMLTttxDialogElement;
+    };
     interface HTMLTttxDialogBoxElement extends Components.TttxDialogBox, HTMLStencilElement {
     }
     var HTMLTttxDialogBoxElement: {
@@ -425,6 +443,7 @@ declare global {
         "tttx-checkbox-group-caption": HTMLTttxCheckboxGroupCaptionElement;
         "tttx-checkbox-group-heading": HTMLTttxCheckboxGroupHeadingElement;
         "tttx-data-pattern": HTMLTttxDataPatternElement;
+        "tttx-dialog": HTMLTttxDialogElement;
         "tttx-dialog-box": HTMLTttxDialogBoxElement;
         "tttx-expander": HTMLTttxExpanderElement;
         "tttx-filter": HTMLTttxFilterElement;
@@ -474,6 +493,15 @@ declare namespace LocalJSX {
         "filteroptions"?: string;
         "sorteroptions"?: string;
     }
+    interface TttxDialog {
+        "allowOverflow"?: boolean;
+        "closeEnabled"?: boolean;
+        "header"?: string;
+        "onCloseButtonClick"?: (event: TttxDialogCustomEvent<any>) => void;
+        "open"?: boolean;
+        "size"?: 'regular' | 'mobile' | 'large' | 'small';
+        "type"?: 'info' | 'success' | 'warning' | 'critical' | undefined;
+    }
     interface TttxDialogBox {
         "allowOverflow"?: boolean;
         "data"?: string | DialogItems;
@@ -683,6 +711,7 @@ declare namespace LocalJSX {
         "tttx-checkbox-group-caption": TttxCheckboxGroupCaption;
         "tttx-checkbox-group-heading": TttxCheckboxGroupHeading;
         "tttx-data-pattern": TttxDataPattern;
+        "tttx-dialog": TttxDialog;
         "tttx-dialog-box": TttxDialogBox;
         "tttx-expander": TttxExpander;
         "tttx-filter": TttxFilter;
@@ -714,6 +743,7 @@ declare module "@stencil/core" {
             "tttx-checkbox-group-caption": LocalJSX.TttxCheckboxGroupCaption & JSXBase.HTMLAttributes<HTMLTttxCheckboxGroupCaptionElement>;
             "tttx-checkbox-group-heading": LocalJSX.TttxCheckboxGroupHeading & JSXBase.HTMLAttributes<HTMLTttxCheckboxGroupHeadingElement>;
             "tttx-data-pattern": LocalJSX.TttxDataPattern & JSXBase.HTMLAttributes<HTMLTttxDataPatternElement>;
+            "tttx-dialog": LocalJSX.TttxDialog & JSXBase.HTMLAttributes<HTMLTttxDialogElement>;
             "tttx-dialog-box": LocalJSX.TttxDialogBox & JSXBase.HTMLAttributes<HTMLTttxDialogBoxElement>;
             "tttx-expander": LocalJSX.TttxExpander & JSXBase.HTMLAttributes<HTMLTttxExpanderElement>;
             "tttx-filter": LocalJSX.TttxFilter & JSXBase.HTMLAttributes<HTMLTttxFilterElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.2.91",
+    "version": "0.2.93",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
@@ -76,4 +76,4 @@
         "storybook": "^7.4.0",
         "ts-qrcode": "^0.0.4"
     }
-}
+}

package/dist/tttx/p-177a760d.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as i}from"./p-65bb4035.js";import{p as o,d as n}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(i){e(this,i),this.clickEvent=t(this,"clickEvent",7),this.expandNode=t(this,"expandNode",7),this.data=void 0,this.treeData=void 0,this.selectedId=void 0}onClickHandler(e,t,i){t.stopPropagation();const o=JSON.stringify(i);this.clickEvent.emit({eventName:e,returnJsonObject:o}),"row"===e&&this.selectedElement(t,i)}updateSelectedId(e){this.selectedId=e}selectedElement(e,t){e.stopPropagation(),this.selectedId=t.id,this.treeData=[...this.treeData]}toggleNode(e,t){t.stopPropagation(),e.isOpen=!e.isOpen,this.treeData=[...this.treeData],this.expandNode.emit({node:e,treeViewData:this.treeData})}handleCheckboxChange(e,t){t.stopPropagation(),e.checked=!e.checked,this.updateChildrenCheckStatus(e),this.treeData=[...this.treeData]}updateChildrenCheckStatus(e){e.child&&e.child.forEach((t=>{t.checked=e.checked,this.updateChildrenCheckStatus(t)}))}updateSelected(e){let t=!1;return e.id===this.selectedId&&(t=!0),t}treeConfigs(e){let t,i;return e.checked?(t="check_box",i="blue"):(t="check_box_outline_blank",i="grey"),{checkboxColor:i,checkboxIcon:t,rowHoverActive:e.hasHover?"rowHover":"",expanderIcon:e.isOpen?"arrow_drop_down":"arrow_right",selectedActive:e.selectable&&e.selected?"rowSelected":""}}renderNode(e){e.selectable&&(e.selected=this.updateSelected(e));const t=this.treeConfigs(e);return e.child?i("li",null,i("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},i("tttx-button",{class:"toggleNode",design:"borderless-circle",notext:!0,icon:t.expanderIcon,color:"black",onClick:t=>this.toggleNode(e,t)}),this.htmlcode("treeNode",e,t.checkboxIcon,t.checkboxColor)),e.isOpen?i("ul",null,i("div",{class:"child-node"},e.child.map((e=>this.renderNode(e))))):null):i("li",null,i("div",{class:`inline-tree-item element-row ${t.rowHoverActive} ${t.selectedActive}`,onClick:t=>{e.hasHover&&(t.stopPropagation(),this.onClickHandler("row",t,e))}},this.htmlcode("treeLeaf",e,t.checkboxIcon,t.checkboxColor)))}htmlcode(e,t,r,s){return i("div",{class:"inline-tree-item element"},t.hasCheckbox&&i("tttx-button",{design:"borderless-circle",notext:!0,icon:r,iconcolor:s,class:"padding-icon checkbox",onClick:e=>this.handleCheckboxChange(t,e)}),!t.html&&t.hasIcon&&i("tttx-icon",{icon:t.icon,color:t.iconColor,class:"padding-icon"}),!t.html&&i("div",{class:e},t.title),t.html&&i("div",{class:e,innerHTML:o.sanitize(t.html,n)}))}render(){if(this.data)return this.treeData="string"==typeof this.data?JSON.parse(this.data):this.data,i("div",{class:"tree-view-element"},i("ul",null,this.treeData.map((e=>this.renderNode(e)))))}};r.style='.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}}';export{r as tttx_tree_view}