@3t-transform/threeteeui 0.2.80 → 0.2.82

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,
+        },
+      ],
+    },
+  ],
+};

package/dist/components/index.d.ts

@@ -8,6 +8,7 @@ export { TttxKeyvalueBlock as TttxKeyvalueBlock } from '../types/components/atom
 export { TttxList as TttxList } from '../types/components/molecules/tttx-list/tttx-list';
 export { TttxLoadingSpinner as TttxLoadingSpinner } from '../types/components/atoms/tttx-loading-spinner/tttx-loading-spinner';
 export { TttxMultiselectBox as TttxMultiselectBox } from '../types/components/molecules/tttx-multiselect-box/tttx-multiselect-box';
+export { TttxPercentageBar as TttxPercentageBar } from '../types/components/atoms/tttx-percentage-bar/tttx-percentage-bar';
 export { TttxQrCode as TttxQrcode } from '../types/components/atoms/tttx-qrcode/tttx-qrcode';
 export { TttxSelectBox as TttxSelectBox } from '../types/components/molecules/tttx-select-box/tttx-select-box';
 export { TttxSorter as TttxSorter } from '../types/components/molecules/tttx-sorter/tttx-sorter';

package/dist/components/index.js

@@ -8,6 +8,7 @@ export { TttxKeyvalueBlock, defineCustomElement as defineCustomElementTttxKeyval
 export { TttxList, defineCustomElement as defineCustomElementTttxList } from './tttx-list.js';
 export { TttxLoadingSpinner, defineCustomElement as defineCustomElementTttxLoadingSpinner } from './tttx-loading-spinner.js';
 export { TttxMultiselectBox, defineCustomElement as defineCustomElementTttxMultiselectBox } from './tttx-multiselect-box.js';
+export { TttxPercentageBar, defineCustomElement as defineCustomElementTttxPercentageBar } from './tttx-percentage-bar.js';
 export { TttxQrcode, defineCustomElement as defineCustomElementTttxQrcode } from './tttx-qrcode.js';
 export { TttxSelectBox, defineCustomElement as defineCustomElementTttxSelectBox } from './tttx-select-box.js';
 export { TttxSorter, defineCustomElement as defineCustomElementTttxSorter } from './tttx-sorter.js';

package/dist/components/tttx-percentage-bar.d.ts

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

package/dist/components/tttx-percentage-bar.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tttxPercentageBarCss = ".sc-tttx-percentage-bar-h{display:block}.progress.sc-tttx-percentage-bar{width:100%;background-color:#dbdbdb}.progress.sc-tttx-percentage-bar .bar.sc-tttx-percentage-bar{height:20px}";
+
+const TttxPercentageBar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.percentage = undefined;
+    this.thresholds = undefined;
+    this.color = '#d5d5d5';
+    this.min = '1';
+    this.labelid = undefined;
+    this._percentage = undefined;
+    this._ranges = undefined;
+    this._min = undefined;
+  }
+  componentWillRender() {
+    if (typeof this.percentage === 'string') {
+      this._percentage = parseInt(this.percentage);
+    }
+    else {
+      this._percentage = this.percentage;
+    }
+    let thresholdsArray;
+    if (this.thresholds) {
+      if (typeof this.thresholds === 'string') {
+        thresholdsArray = JSON.parse(this.thresholds);
+      }
+      else {
+        thresholdsArray = this.thresholds;
+      }
+      this._ranges = [{ range: [0], color: thresholdsArray[0].color }];
+      for (const [i, thresholdsObj] of thresholdsArray.entries()) {
+        this._ranges[this._ranges.length - 1].range.push(thresholdsObj.threshold);
+        this._ranges[this._ranges.length - 1].color = thresholdsObj.color;
+        if (i < thresholdsArray.length - 1) {
+          this._ranges.push({ range: [thresholdsObj.threshold], color: undefined });
+        }
+      }
+    }
+    this._min = parseInt(this.min);
+  }
+  getColour() {
+    if (!this._ranges || this._ranges.length === 0) {
+      return this.color;
+    }
+    else {
+      const range = this._ranges.find(r => this._percentage >= r.range[0] && this._percentage <= r.range[1]);
+      return range.color;
+    }
+  }
+  getWidth() {
+    return Math.min(Math.max(this._percentage, Math.min(this._min, 100)), 100);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "progress" }, h("div", { class: "bar", style: { 'background-color': this.getColour(), 'width': `${this.getWidth()}%` }, role: "progressbar", "aria-valuemin": this._min, "aria-valuemax": "100", "aria-valuenow": this._percentage, "aria-labelledby": this.labelid }))));
+  }
+  static get style() { return tttxPercentageBarCss; }
+}, [2, "tttx-percentage-bar", {
+    "percentage": [8],
+    "thresholds": [1],
+    "color": [1],
+    "min": [1],
+    "labelid": [1],
+    "_percentage": [32],
+    "_ranges": [32],
+    "_min": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-percentage-bar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-percentage-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxPercentageBar$1);
+      }
+      break;
+  } });
+}
+
+const TttxPercentageBar = TttxPercentageBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxPercentageBar, 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;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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -13,11 +13,24 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.clickEvent = 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();
@@ -38,7 +51,14 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       });
     }
   }
-  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';
@@ -48,29 +68,36 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       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: 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) => {
+    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) => {
@@ -88,7 +115,8 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   static get style() { return tttxTreeViewCss; }
 }, [1, "tttx-tree-view", {
     "data": [1040],
-    "treeData": [32]
+    "treeData": [32],
+    "selectedId": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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-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]}]]],["tttx-filter",[[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",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}]]],["tttx-sorter",[[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",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["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-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["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-toolbar",[[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["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-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return bootstrapLazy([["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-filter",[[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",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}]]],["tttx-sorter",[[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",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["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]}]]],["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-toolbar",[[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["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-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
   });
 };
 

package/dist/esm/tttx-percentage-bar.entry.js

@@ -0,0 +1,61 @@
+import { r as registerInstance, h, H as Host } from './index-6a372ea6.js';
+
+const tttxPercentageBarCss = ".sc-tttx-percentage-bar-h{display:block}.progress.sc-tttx-percentage-bar{width:100%;background-color:#dbdbdb}.progress.sc-tttx-percentage-bar .bar.sc-tttx-percentage-bar{height:20px}";
+
+const TttxPercentageBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.percentage = undefined;
+    this.thresholds = undefined;
+    this.color = '#d5d5d5';
+    this.min = '1';
+    this.labelid = undefined;
+    this._percentage = undefined;
+    this._ranges = undefined;
+    this._min = undefined;
+  }
+  componentWillRender() {
+    if (typeof this.percentage === 'string') {
+      this._percentage = parseInt(this.percentage);
+    }
+    else {
+      this._percentage = this.percentage;
+    }
+    let thresholdsArray;
+    if (this.thresholds) {
+      if (typeof this.thresholds === 'string') {
+        thresholdsArray = JSON.parse(this.thresholds);
+      }
+      else {
+        thresholdsArray = this.thresholds;
+      }
+      this._ranges = [{ range: [0], color: thresholdsArray[0].color }];
+      for (const [i, thresholdsObj] of thresholdsArray.entries()) {
+        this._ranges[this._ranges.length - 1].range.push(thresholdsObj.threshold);
+        this._ranges[this._ranges.length - 1].color = thresholdsObj.color;
+        if (i < thresholdsArray.length - 1) {
+          this._ranges.push({ range: [thresholdsObj.threshold], color: undefined });
+        }
+      }
+    }
+    this._min = parseInt(this.min);
+  }
+  getColour() {
+    if (!this._ranges || this._ranges.length === 0) {
+      return this.color;
+    }
+    else {
+      const range = this._ranges.find(r => this._percentage >= r.range[0] && this._percentage <= r.range[1]);
+      return range.color;
+    }
+  }
+  getWidth() {
+    return Math.min(Math.max(this._percentage, Math.min(this._min, 100)), 100);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "progress" }, h("div", { class: "bar", style: { 'background-color': this.getColour(), 'width': `${this.getWidth()}%` }, role: "progressbar", "aria-valuemin": this._min, "aria-valuemax": "100", "aria-valuenow": this._percentage, "aria-labelledby": this.labelid }))));
+  }
+};
+TttxPercentageBar.style = tttxPercentageBarCss;
+
+export { TttxPercentageBar as tttx_percentage_bar };

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h } from './index-6a372ea6.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;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) {
@@ -10,11 +10,24 @@ const TttxTreeView = class {
     this.clickEvent = 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();
@@ -35,7 +48,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';
@@ -45,29 +65,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 (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: 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) => {
+    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) => {

package/dist/esm/tttx.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["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]}]]],["tttx-filter",[[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",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}]]],["tttx-sorter",[[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",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["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-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["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-toolbar",[[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["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-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return bootstrapLazy([["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-filter",[[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",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}]]],["tttx-sorter",[[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",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["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]}]]],["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-toolbar",[[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["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-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
 });

package/dist/tttx/p-149f806e.entry.js

@@ -0,0 +1 @@
+import{r as t,h as s,H as i}from"./p-3f1b6013.js";const r=class{constructor(s){t(this,s),this.percentage=void 0,this.thresholds=void 0,this.color="#d5d5d5",this.min="1",this.labelid=void 0,this._percentage=void 0,this._ranges=void 0,this._min=void 0}componentWillRender(){let t;if(this._percentage="string"==typeof this.percentage?parseInt(this.percentage):this.percentage,this.thresholds){t="string"==typeof this.thresholds?JSON.parse(this.thresholds):this.thresholds,this._ranges=[{range:[0],color:t[0].color}];for(const[s,i]of t.entries())this._ranges[this._ranges.length-1].range.push(i.threshold),this._ranges[this._ranges.length-1].color=i.color,s<t.length-1&&this._ranges.push({range:[i.threshold],color:void 0})}this._min=parseInt(this.min)}getColour(){return this._ranges&&0!==this._ranges.length?this._ranges.find((t=>this._percentage>=t.range[0]&&this._percentage<=t.range[1])).color:this.color}getWidth(){return Math.min(Math.max(this._percentage,Math.min(this._min,100)),100)}render(){return s(i,null,s("div",{class:"progress"},s("div",{class:"bar",style:{"background-color":this.getColour(),width:`${this.getWidth()}%`},role:"progressbar","aria-valuemin":this._min,"aria-valuemax":"100","aria-valuenow":this._percentage,"aria-labelledby":this.labelid})))}};r.style=".sc-tttx-percentage-bar-h{display:block}.progress.sc-tttx-percentage-bar{width:100%;background-color:#dbdbdb}.progress.sc-tttx-percentage-bar .bar.sc-tttx-percentage-bar{height:20px}";export{r as tttx_percentage_bar}

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

@@ -0,0 +1 @@
+import{r as e,c as t,h as o}from"./p-3f1b6013.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.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]}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)}),(t.menuActive||t.chevronActive)&&o("div",{class:"right-buttons-container"},t.menuActive&&o("tttx-button",{design:"borderless-circle",notext:!0,icon:"more_vert",color:"black",class:"padding-icon menu-button",onClick:e=>{e.stopPropagation(),this.onClickHandler("menu",e,t)}}),t.chevronActive&&o("tttx-icon",{icon:"chevron_right",color:"black",class:"padding-icon chevron-button",onClick:e=>{e.stopPropagation(),this.onClickHandler("chevron",e,t)}})))}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%;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}}';export{r as tttx_tree_view}