@3t-transform/threeteeui 0.2.79 → 0.2.81

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4cfa8e25.js');
-const domsanitiser_options = require('./domsanitiser.options-1dfa7205.js');
+const domsanitiser_options = require('./domsanitiser.options-32e670aa.js');
 require('./_commonjsHelpers-537d719a.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;border-bottom:1px solid #d5d5d5}.rowHover{cursor:pointer}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){.rowHover:hover{background-color:rgba(17, 17, 17, 0.05)}}";
+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;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom: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}}";
 
 const TttxTreeView = class {
   constructor(hostRef) {
@@ -14,11 +14,24 @@ const TttxTreeView = class {
     this.clickEvent = index.createEvent(this, "clickEvent", 7);
     this.data = undefined;
     this.treeData = undefined;
+    this.selectedId = undefined;
   }
   onClickHandler(clickName, event, node) {
     event.stopPropagation();
     const returnJsonObject = JSON.stringify(node);
     this.clickEvent.emit({ eventName: clickName, returnJsonObject });
+    if (clickName === 'row') {
+      this.selectedElement(event, node);
+    }
+  }
+  //for testing as SelectedId is a state
+  updateSelectedId(newId) {
+    this.selectedId = newId;
+  }
+  selectedElement(event, node) {
+    event.stopPropagation();
+    this.selectedId = node.id;
+    this.treeData = [...this.treeData];
   }
   toggleNode(node, event) {
     event.stopPropagation();
@@ -39,7 +52,14 @@ const TttxTreeView = class {
       });
     }
   }
-  renderNode(node) {
+  updateSelected(node) {
+    let selected = false;
+    if (node.id === this.selectedId) {
+      selected = true;
+    }
+    return selected;
+  }
+  treeConfigs(node) {
     let checkboxIcon, checkboxColor;
     if (node.checked) {
       checkboxIcon = 'check_box';
@@ -49,29 +69,36 @@ const TttxTreeView = class {
       checkboxIcon = 'check_box_outline_blank';
       checkboxColor = 'grey';
     }
-    const rowHoverActive = node.chevronActive ? 'rowHover' : '';
+    const rowHoverActive = node.hasHover ? 'rowHover' : '';
     const expanderIcon = node.isOpen ? 'arrow_drop_down' : 'arrow_right';
-    if (node.child && node.child.length > 0) {
-      return (index.h("li", null, index.h("div", { class: `inline-tree-item element-row ${rowHoverActive}`, onClick: (event) => {
-          if (node.chevronActive) {
+    const selectedActive = node.selectable && node.selected ? 'rowSelected' : '';
+    return { checkboxColor, checkboxIcon, rowHoverActive, expanderIcon, selectedActive };
+  }
+  renderNode(node) {
+    if (node.selectable)
+      node.selected = this.updateSelected(node);
+    const options = this.treeConfigs(node);
+    if (node.child) {
+      return (index.h("li", null, index.h("div", { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: (event) => {
+          if (node.hasHover) {
             event.stopPropagation();
             this.onClickHandler('row', event, node);
           }
-        } }, index.h("tttx-button", { class: "toggleNode", design: "borderless-circle", notext: true, icon: expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, checkboxIcon, checkboxColor)), node.isOpen ? (index.h("ul", null, index.h("div", { class: "child-node" }, node.child.map(childNode => {
+        } }, index.h("tttx-button", { 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)), node.isOpen ? (index.h("ul", null, index.h("div", { class: "child-node" }, node.child.map(childNode => {
         return this.renderNode(childNode);
       })))) : null));
     }
     else {
-      return (index.h("li", null, index.h("div", { class: `inline-tree-item element-row ${rowHoverActive}`, onClick: (event) => {
-          if (node.chevronActive) {
+      return (index.h("li", null, index.h("div", { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: (event) => {
+          if (node.hasHover) {
             event.stopPropagation();
             this.onClickHandler('row', event, node);
           }
-        } }, this.htmlcode('treeLeaf', node, checkboxIcon, checkboxColor))));
+        } }, this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor))));
     }
   }
   htmlcode(type, node, check_box, check_boxColor) {
-    const htmlcode = (index.h("div", { class: 'inline-tree-item element' }, node.hasCheckbox && (index.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 && index.h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && index.h("div", { class: type }, node.title), node.html && index.h("div", { class: type, innerHTML: domsanitiser_options.purify.sanitize(node.html, domsanitiser_options.domSanitiserOptions) }), (node.menuActive || node.chevronActive) && (index.h("div", { class: "right-buttons-container" }, node.menuActive && (index.h("tttx-button", { design: "borderless-circle", notext: true, icon: "more_vert", color: "black", class: "padding-icon menu-button", onClick: (event) => {
+    const htmlcode = (index.h("div", { class: "inline-tree-item element" }, node.hasCheckbox && (index.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 && index.h("tttx-icon", { icon: node.icon, color: node.iconColor, class: "padding-icon" }), !node.html && index.h("div", { class: type }, node.title), node.html && index.h("div", { class: type, innerHTML: domsanitiser_options.purify.sanitize(node.html, domsanitiser_options.domSanitiserOptions) }), (node.menuActive || node.chevronActive) && (index.h("div", { class: "right-buttons-container" }, node.menuActive && (index.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 && (index.h("tttx-icon", { icon: "chevron_right", color: "black", class: "padding-icon chevron-button", onClick: (event) => {

package/dist/cjs/tttx.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-multiselect-box.cjs",[[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.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[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.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter.cjs",[[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"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}]]],["tttx-sorter.cjs",[[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"]]]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["tttx-textarea.cjs",[[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-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[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-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-multiselect-box.cjs",[[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.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[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.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32],"selectedId":[32]}]]],["tttx-filter.cjs",[[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"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}]]],["tttx-sorter.cjs",[[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"]]]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["tttx-textarea.cjs",[[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-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[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-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/molecules/tttx-textarea/tttx-textarea.css

@@ -51,6 +51,12 @@ label .textarea-container textarea ~ .errorBubble span {
   font-size: 16px;
   margin-right: 4px;
 }
+label .textarea-container textarea:focus {
+  border-color: #1479c6;
+}
+label .textarea-container textarea:focus-visible {
+  outline: none;
+}
 label .secondarylabel {
   color: #757575;
   font-size: 14px;

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

@@ -24,11 +24,27 @@
   font-family: "Roboto", serif;
   font-size: 16px;
   padding: 8px 0px;
+  position: relative;
+}
+
+.element-row::before {
+  content: "";
+  position: absolute;
+  left: -50%;
+  right: -50%;
+  bottom: 0;
   border-bottom: 1px solid #d5d5d5;
 }
 
-.rowHover {
-  cursor: pointer;
+.element-row.rowSelected::before {
+  content: "";
+  position: absolute;
+  left: -50%;
+  right: -50%;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(17, 17, 17, 0.1);
+  z-index: -1;
 }
 
 li {
@@ -66,7 +82,19 @@ li {
 }
 
 @media (hover: hover) {
-  .rowHover: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;
   }
 }

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

@@ -6,11 +6,24 @@ export class TttxTreeView {
   constructor() {
     this.data = undefined;
     this.treeData = undefined;
+    this.selectedId = undefined;
   }
   onClickHandler(clickName, event, node) {
     event.stopPropagation();
     const returnJsonObject = JSON.stringify(node);
     this.clickEvent.emit({ eventName: clickName, returnJsonObject });
+    if (clickName === 'row') {
+      this.selectedElement(event, node);
+    }
+  }
+  //for testing as SelectedId is a state
+  updateSelectedId(newId) {
+    this.selectedId = newId;
+  }
+  selectedElement(event, node) {
+    event.stopPropagation();
+    this.selectedId = node.id;
+    this.treeData = [...this.treeData];
   }
   toggleNode(node, event) {
     event.stopPropagation();
@@ -31,7 +44,14 @@ export class TttxTreeView {
       });
     }
   }
-  renderNode(node) {
+  updateSelected(node) {
+    let selected = false;
+    if (node.id === this.selectedId) {
+      selected = true;
+    }
+    return selected;
+  }
+  treeConfigs(node) {
     let checkboxIcon, checkboxColor;
     if (node.checked) {
       checkboxIcon = 'check_box';
@@ -41,29 +61,36 @@ export class TttxTreeView {
       checkboxIcon = 'check_box_outline_blank';
       checkboxColor = 'grey';
     }
-    const rowHoverActive = node.chevronActive ? 'rowHover' : '';
+    const rowHoverActive = node.hasHover ? 'rowHover' : '';
     const expanderIcon = node.isOpen ? 'arrow_drop_down' : 'arrow_right';
-    if (node.child && node.child.length > 0) {
-      return (h("li", null, h("div", { class: `inline-tree-item element-row ${rowHoverActive}`, onClick: (event) => {
-          if (node.chevronActive) {
+    const selectedActive = node.selectable && node.selected ? 'rowSelected' : '';
+    return { checkboxColor, checkboxIcon, rowHoverActive, expanderIcon, selectedActive };
+  }
+  renderNode(node) {
+    if (node.selectable)
+      node.selected = this.updateSelected(node);
+    const options = this.treeConfigs(node);
+    if (node.child) {
+      return (h("li", null, h("div", { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: (event) => {
+          if (node.hasHover) {
             event.stopPropagation();
             this.onClickHandler('row', event, node);
           }
-        } }, h("tttx-button", { class: "toggleNode", design: "borderless-circle", notext: true, icon: expanderIcon, color: "black", onClick: event => this.toggleNode(node, event) }), this.htmlcode('treeNode', node, checkboxIcon, checkboxColor)), node.isOpen ? (h("ul", null, h("div", { class: "child-node" }, node.child.map(childNode => {
+        } }, h("tttx-button", { 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)), node.isOpen ? (h("ul", null, h("div", { class: "child-node" }, node.child.map(childNode => {
         return this.renderNode(childNode);
       })))) : null));
     }
     else {
-      return (h("li", null, h("div", { class: `inline-tree-item element-row ${rowHoverActive}`, onClick: (event) => {
-          if (node.chevronActive) {
+      return (h("li", null, h("div", { class: `inline-tree-item element-row ${options.rowHoverActive} ${options.selectedActive}`, onClick: (event) => {
+          if (node.hasHover) {
             event.stopPropagation();
             this.onClickHandler('row', event, node);
           }
-        } }, this.htmlcode('treeLeaf', node, checkboxIcon, checkboxColor))));
+        } }, this.htmlcode('treeLeaf', node, options.checkboxIcon, options.checkboxColor))));
     }
   }
   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: DOMPurify.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) => {
+    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: DOMPurify.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) => {
@@ -116,7 +143,8 @@ export class TttxTreeView {
   }
   static get states() {
     return {
-      "treeData": {}
+      "treeData": {},
+      "selectedId": {}
     };
   }
   static get events() {

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

@@ -19,7 +19,6 @@ const TttxTreeViewStory = ({ data }) => `
     }
     treeViewDefault.data = ${JSON.stringify(data)};
     </script>
-
 `;
 export const Default = TttxTreeViewStory.bind({});
 Default.args = {
@@ -401,7 +400,7 @@ HTML.args = {
       id: 1,
       title: 'Role Specific Vocational Qualification',
       isOpen: false,
-      html: '<p>This is html </p>',
+      html: '<div>This is html </div>',
       openOrClosed: 'arrow_right',
       hasCheckbox: false,
       hasIcon: false,
@@ -410,14 +409,14 @@ HTML.args = {
           id: 2,
           title: 'Boop',
           isOpen: false,
-          html: '<p>This is html </p>',
+          html: '<div>This is html </div>',
           openOrClosed: 'arrow_right',
           child: [
             {
               id: 2,
               hasIcon: false,
               title: 'this is a test',
-              html: '<p>This is html </p>',
+              html: '<div>This is html </div>',
             },
           ],
         },
@@ -427,7 +426,7 @@ HTML.args = {
           isOpen: false,
           openOrClosed: 'arrow_right',
           hasIcon: false,
-          html: '<p>This is html </p>',
+          html: '<div>This is html </div>',
         },
       ],
     },
@@ -438,17 +437,17 @@ HTML.args = {
       openOrClosed: 'arrow_right',
       hasIcon: false,
       hasCheckbox: false,
-      html: '<p>This is html </p>',
+      html: '<div>This is html </div>',
       child: [
         {
           id: 4,
           title: 'Boop 2077',
-          html: '<p>This is html </p>',
+          html: '<div>This is html </div>',
         },
         {
           id: 4,
           title: 'sjdnfkn 2077',
-          html: '<p>This is html </p>',
+          html: '<div>This is html </div>',
         },
       ],
     },
@@ -741,3 +740,91 @@ const convertedData2 = {
 RequirementsList2.args = {
   data: [convertedData2],
 };
+const TttxTreeViewEmptyGroup = ({ data }) => `
+    <tttx-tree-view id="treeViewEmptyGroup"></tttx-tree-view>
+    <script>
+    if(!treeViewEmptyGroup) {
+      const treeViewEmptyGroup = document.getElementById('treeViewEmptyGroup');
+    }
+    treeViewEmptyGroup.data = ${JSON.stringify(data)};
+    </script>
+`;
+export const EmptyGroup = TttxTreeViewEmptyGroup.bind({});
+EmptyGroup.args = {
+  data: [
+    {
+      id: 1,
+      title: 'Role Specific Vocational Qualification',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasCheckbox: true,
+      checked: false,
+      hasIcon: true,
+      icon: 'check_circle',
+      iconColor: 'green',
+      child: [],
+    },
+  ],
+};
+const TttxTreeViewselectable = ({ data }) => `
+    <tttx-tree-view id="treeViewselectable"></tttx-tree-view>
+    <script>
+    if(!treeViewselectable) {
+      const treeViewselectable = document.getElementById('treeViewselectable');
+    }
+    treeViewselectable.data = ${JSON.stringify(data)};
+    </script>
+`;
+export const selectableAndHover = TttxTreeViewselectable.bind({});
+selectableAndHover.args = {
+  data: [
+    {
+      id: 1,
+      title: 'Role Specific Vocational Qualification',
+      isOpen: false,
+      openOrClosed: 'arrow_right',
+      hasCheckbox: false,
+      hasIcon: false,
+      hasHover: true,
+      selectable: true,
+      selected: false,
+      chevronActive: true,
+      child: [
+        {
+          id: 2,
+          title: 'Boop',
+          isOpen: false,
+          hasCheckbox: false,
+          hasIcon: false,
+          openOrClosed: 'arrow_right',
+          hasHover: true,
+          selectable: true,
+          selected: false,
+          chevronActive: true,
+          child: [
+            {
+              id: 4,
+              hasCheckbox: false,
+              hasIcon: false,
+              title: 'this is a test',
+              hasHover: true,
+              selectable: true,
+              selected: false,
+            },
+          ],
+        },
+        {
+          id: 3,
+          title: 'Boop',
+          isOpen: false,
+          openOrClosed: 'arrow_right',
+          hasCheckbox: false,
+          hasIcon: false,
+          hasHover: true,
+          selectable: true,
+          selected: false,
+        },
+      ],
+    },
+  ],
+};