@3t-transform/threeteeui 0.2.81 → 0.2.83

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  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);
+  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-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["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);
   });
 };
 

package/dist/cjs/tttx-multiselect-box.cjs.entry.js

@@ -33,6 +33,9 @@ const TttxMultiselectBox = class {
     this.open = false;
     this.toggleOpen.emit(false);
   }
+  handleOptionsDataChange() {
+    this.unsavedSelectedItems = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
+  }
   /**
    * We want to generally clone instances of optionsData, _optionsData and unsavedSelectedItems
    * This is because they may be assigned from each other, but have different purposes
@@ -127,6 +130,9 @@ const TttxMultiselectBox = class {
     })), index.h("div", { class: 'footer' }, index.h("tttx-button", { design: "primary", onClick: this.applyChanges.bind(this) }, "Apply"), index.h("tttx-button", { onClick: this.onCancel.bind(this) }, "Cancel"))))))));
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "optionsData": ["handleOptionsDataChange"]
+  }; }
 };
 TttxMultiselectBox.style = tttxMultiselectBoxCss;
 

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

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4cfa8e25.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) {
+    index.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 (index.h(index.Host, null, index.h("div", { class: "progress" }, index.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;
+
+exports.tttx_percentage_bar = TttxPercentageBar;

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

@@ -6,7 +6,7 @@ const index = require('./index-4cfa8e25.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;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 tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;right:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);z-index:-1}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;z-index:-1;right:0}}";
 
 const TttxTreeView = class {
   constructor(hostRef) {

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],"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);
+  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-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["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/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "./components/molecules/tttx-filter/tttx-filter.js",
     "./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js",
+    "./components/atoms/tttx-percentage-bar/tttx-percentage-bar.js",
     "./components/molecules/tttx-standalone-input/tttx-standalone-input.js",
     "./components/atoms/tttx-button/tttx-button.js",
     "./components/atoms/tttx-icon/tttx-icon.js",

package/dist/collection/components/atoms/tttx-percentage-bar/tttx-percentage-bar.css

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+
+.progress {
+  width: 100%;
+  background-color: #dbdbdb;
+}
+.progress .bar {
+  height: 20px;
+}

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

@@ -0,0 +1,168 @@
+import { Host, h } from '@stencil/core';
+export class TttxPercentageBar {
+  constructor() {
+    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 is() { return "tttx-percentage-bar"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-percentage-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-percentage-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "percentage": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "percentage",
+        "reflect": false
+      },
+      "thresholds": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | Threshold[]",
+          "resolved": "Threshold[] | string",
+          "references": {
+            "Threshold": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "thresholds",
+        "reflect": false
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'#d5d5d5'"
+      },
+      "min": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "'1'"
+      },
+      "labelid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "labelid",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_percentage": {},
+      "_ranges": {},
+      "_min": {}
+    };
+  }
+}

package/dist/collection/components/atoms/tttx-percentage-bar/tttx-percentage-bar.stories.js

@@ -0,0 +1,58 @@
+export default {
+  title: 'atoms/Percentage Bar',
+  component: 'tttx-percentage-bar',
+};
+const TemplatePercentageBar = ({ percentage, thresholds }) => `<tttx-percentage-bar percentage='${percentage}' thresholds='${JSON.stringify(thresholds)}'></tttx-percentage-bar>`;
+export const PercentageBar = TemplatePercentageBar.bind({});
+PercentageBar.args = {
+  percentage: 20,
+  thresholds: [
+    {
+      threshold: 50,
+      color: '#a20000',
+    },
+    {
+      threshold: 75,
+      color: '#fdc500',
+    },
+    {
+      threshold: 100,
+      color: '#397a4c',
+    },
+  ],
+};
+const TemplatePercentageBarWithoutThresholds = ({ percentage, color }) => `<tttx-percentage-bar percentage='${percentage}' color='${color}'></tttx-percentage-bar>`;
+export const PercentageBarWithoutThresholds = TemplatePercentageBarWithoutThresholds.bind({});
+PercentageBarWithoutThresholds.args = {
+  percentage: 20,
+  color: '#397a4c',
+};
+const TemplatePercentageBarWithoutMinimum = ({ percentage, color, min }) => `<tttx-percentage-bar percentage='${percentage}' color='${color}' min='${min}'></tttx-percentage-bar>`;
+export const PercentageBarWithoutMinimum = TemplatePercentageBarWithoutMinimum.bind({});
+PercentageBarWithoutMinimum.args = {
+  percentage: 0,
+  color: '#397a4c',
+  min: 0,
+};
+const TemplatePercentageBarLabeled = ({ percentage, color, labelid }) => `
+<label id="someLabel">
+    ${percentage}%
+    <tttx-percentage-bar style='width: 100px;' percentage='${percentage}' color='${color}' labelid='${labelid}'></tttx-percentage-bar>
+</label>
+`;
+export const PercentageBarLabeled = TemplatePercentageBarLabeled.bind({});
+PercentageBarLabeled.args = {
+  percentage: 69,
+  color: '#397a4c',
+  labelid: 'someLabel',
+};
+const TemplatePercentageBarLabeledInline = ({ percentage, color, labelid }) => `
+<label id="someLabel" style='display: flex;'>${percentage}%&emsp;<tttx-percentage-bar style='width: 100px;' percentage='${percentage}' color='${color}' labelid='${labelid}'></tttx-percentage-bar>
+</label>
+`;
+export const PercentageBarLabeledInline = TemplatePercentageBarLabeledInline.bind({});
+PercentageBarLabeledInline.args = {
+  percentage: 69,
+  color: '#397a4c',
+  labelid: 'someLabel',
+};

package/dist/collection/components/molecules/tttx-multiselect-box/tttx-multiselect-box.js

@@ -23,6 +23,9 @@ export class TttxMultiselectBox {
     this.open = false;
     this.toggleOpen.emit(false);
   }
+  handleOptionsDataChange() {
+    this.unsavedSelectedItems = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
+  }
   /**
    * We want to generally clone instances of optionsData, _optionsData and unsavedSelectedItems
    * This is because they may be assigned from each other, but have different purposes
@@ -324,6 +327,12 @@ export class TttxMultiselectBox {
       }];
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "optionsData",
+        "methodName": "handleOptionsDataChange"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "closeSelectBox",

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

@@ -33,6 +33,7 @@
   left: -50%;
   right: -50%;
   bottom: 0;
+  right: 0;
   border-bottom: 1px solid #d5d5d5;
 }
 
@@ -43,6 +44,7 @@
   right: -50%;
   top: 0;
   bottom: 0;
+  right: 0;
   background-color: rgba(17, 17, 17, 0.1);
   z-index: -1;
 }
@@ -96,5 +98,6 @@ li {
     background-color: rgba(17, 17, 17, 0.05);
     opacity: 0.5;
     z-index: -1;
+    right: 0;
   }
 }

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-multiselect-box.js

@@ -33,6 +33,9 @@ const TttxMultiselectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.open = false;
     this.toggleOpen.emit(false);
   }
+  handleOptionsDataChange() {
+    this.unsavedSelectedItems = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
+  }
   /**
    * We want to generally clone instances of optionsData, _optionsData and unsavedSelectedItems
    * This is because they may be assigned from each other, but have different purposes
@@ -127,6 +130,9 @@ const TttxMultiselectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     })), h("div", { class: 'footer' }, h("tttx-button", { design: "primary", onClick: this.applyChanges.bind(this) }, "Apply"), h("tttx-button", { onClick: this.onCancel.bind(this) }, "Cancel"))))))));
   }
   get el() { return this; }
+  static get watchers() { return {
+    "optionsData": ["handleOptionsDataChange"]
+  }; }
   static get style() { return tttxMultiselectBoxCss; }
 }, [1, "tttx-multiselect-box", {
     "optionsData": [1, "options-data"],

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;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 tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;right:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);z-index:-1}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;z-index:-1;right:0}}";
 
 const 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-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-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-multiselect-box.entry.js

@@ -29,6 +29,9 @@ const TttxMultiselectBox = class {
     this.open = false;
     this.toggleOpen.emit(false);
   }
+  handleOptionsDataChange() {
+    this.unsavedSelectedItems = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
+  }
   /**
    * We want to generally clone instances of optionsData, _optionsData and unsavedSelectedItems
    * This is because they may be assigned from each other, but have different purposes
@@ -123,6 +126,9 @@ const TttxMultiselectBox = class {
     })), h("div", { class: 'footer' }, h("tttx-button", { design: "primary", onClick: this.applyChanges.bind(this) }, "Apply"), h("tttx-button", { onClick: this.onCancel.bind(this) }, "Cancel"))))))));
   }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "optionsData": ["handleOptionsDataChange"]
+  }; }
 };
 TttxMultiselectBox.style = tttxMultiselectBoxCss;
 

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;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 tttxTreeViewCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.tree-view-element{margin-left:-50px}.inline-tree-item{display:flex;align-items:center}.element{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;width:100%}.element-row{min-height:36px;font-family:\"Roboto\", serif;font-size:16px;padding:8px 0px;position:relative}.element-row::before{content:\"\";position:absolute;left:-50%;right:-50%;bottom:0;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);z-index:-1}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:\"\";position:absolute;left:-50%;right:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;z-index:-1;right:0}}";
 
 const TttxTreeView = class {
   constructor(hostRef) {

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],"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-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 → p-359fd780.entry.js}

@@ -1 +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}
+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;right:0;border-bottom:1px solid #d5d5d5}.element-row.rowSelected::before{content:"";position:absolute;left:-50%;right:-50%;top:0;bottom:0;right:0;background-color:rgba(17, 17, 17, 0.1);z-index:-1}li{list-style-type:none}.toggleNode{padding-right:3px}.padding-icon{padding:6px 6px;height:24px;width:24px;display:flex;align-items:center;justify-content:center}.treeNode{font-weight:500}.treeLeaf{font-weight:400}.right-buttons-container{margin-left:auto;display:flex}.borderless:active{outline-style:none}@media (hover: hover){.element-row.rowHover:hover{cursor:pointer}.element-row.rowHover:hover::before{content:"";position:absolute;left:-50%;right:-50%;top:0;bottom:0;background-color:rgba(17, 17, 17, 0.05);opacity:0.5;z-index:-1;right:0}}';export{r as tttx_tree_view}

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

@@ -0,0 +1 @@
+import{r as t,c as o,h as i,H as s,g as e}from"./p-3f1b6013.js";import{p as n,d}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(i){t(this,i),this.selectItemEvent=o(this,"selectItemEvent",7),this.toggleOpen=o(this,"toggleOpen",7),this.changesApplied=o(this,"changesApplied",7),this.bodyOffset={},this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.htmlVisibleValue=void 0,this.visibleValue=void 0,this.open=!1,this.unsavedSelectedItems=void 0,this.searchTerm=""}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}handleOptionsDataChange(){this.unsavedSelectedItems="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData}safelyCloneArray(t){return JSON.parse(JSON.stringify(t))}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.calculateDropdownMenuOffset(),this.toggleOpen.emit(this.open)}onCancel(){this.open=!1,this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData),this.toggleOpen.emit(!1)}applyChanges(){this.open=!1,this.changesApplied.emit(this.safelyCloneArray(this.unsavedSelectedItems))}onItemSelected(t){const o=this.unsavedSelectedItems.findIndex((o=>o.value===t.value));this.unsavedSelectedItems[o]=Object.assign(Object.assign({},t),{selected:!t.selected}),this.unsavedSelectedItems=[...this.unsavedSelectedItems],this.selectItemEvent.emit(t)}dropdownSelectorContent(){if(!this._optionsData.find((t=>t.selected)))return i("div",{class:"placeholder"},this.placeholder);if(this.htmlVisibleValue){const t=n.sanitize(this.visibleValue,d);return i("div",{class:"dropdown-selector-html-content",innerHTML:t})}return i("div",null,this.visibleValue)}optionFoundInSearchTerm(t){return-1===t.label.toLowerCase().indexOf(this.searchTerm.toLowerCase())}dropdownOption(t){const o=this.searchEnabled&&this.optionFoundInSearchTerm(t),s=t.selected?"check_box":"check_box_outline_blank",e=t.selected?"blue":"grey";if(t.html){const r=n.sanitize(t.html,d);return i("div",{class:`dropdown-option ${o?"hidden":""} ${t.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},i("tttx-icon",{icon:s,color:e,class:"checkbox-icon"}),i("div",{innerHTML:r}))}return i("div",{class:`dropdown-option ${o?"hidden":""} ${t.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,t),key:t.label},i("tttx-icon",{icon:s,color:e,class:"checkbox-icon"}),i("div",{class:"plaintext-option"},t.label))}handleSearchInput(t){this.searchTerm=t.target.value}calculateDropdownMenuOffset(){const t=this.el.shadowRoot.querySelector(".dropdown-selector"),o=t.getBoundingClientRect().bottom;let i=Math.min(288,36*this._optionsData.length)+45+8;this.searchEnabled&&(i+=52),this.bodyOffset=o+i>window.innerHeight?{top:window.innerHeight-(i+16)+"px",position:"fixed",width:`${t.offsetWidth}px`}:{}}render(){if(!this.optionsData)return;this._optionsData="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,this.unsavedSelectedItems||(this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData));const t=this.open?"expand_less":"expand_more";return i(s,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent(),i("div",{class:"dropdown-selector-chevron"},i("tttx-icon",{icon:t,color:"black"}))),this.open&&i("div",{class:"dropdown-body-container"},i("div",{class:"dropdown-body",style:Object.assign({},this.bodyOffset)},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this),inline:!0})),i("div",{class:"dropdown-options-list"},this.unsavedSelectedItems.map((t=>this.dropdownOption(t)))),i("div",{class:"footer"},i("tttx-button",{design:"primary",onClick:this.applyChanges.bind(this)},"Apply"),i("tttx-button",{onClick:this.onCancel.bind(this)},"Cancel"))))))}get el(){return e(this)}static get watchers(){return{optionsData:["handleOptionsDataChange"]}}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{display:grid;position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{grid-row:1;align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{grid-row:2;position:relative}.dropdown-body{position:absolute;display:flex;position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}';export{r as tttx_multiselect_box}

package/dist/tttx/tttx.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-3f1b6013.js";export{s as setNonce}from"./p-3f1b6013.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-4a967804",[[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-02da8327",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-a3b446f8",[[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-62115838",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-c714f7c0",[[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"]]]]],["p-9556a164",[[1,"tttx-list",{data:[1025],name:[1],_data:[32]}]]],["p-5290db99",[[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"]]]]],["p-f4594fe2",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-1c3ab606",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-d1ff1456",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-e55a967b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-50cdce65",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-25acdd4c",[[1,"tttx-tag",{text:[1],color:[1]}]]],["p-55831705",[[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-c0c022cd",[[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-e89b053f",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-09b92178",[[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-4ade2866",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
+import{p as e,b as t}from"./p-3f1b6013.js";export{s as setNonce}from"./p-3f1b6013.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((e=>t([["p-c5bb34b7",[[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-02da8327",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-a3b446f8",[[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-359fd780",[[1,"tttx-tree-view",{data:[1040],treeData:[32],selectedId:[32]}]]],["p-c714f7c0",[[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"]]]]],["p-9556a164",[[1,"tttx-list",{data:[1025],name:[1],_data:[32]}]]],["p-5290db99",[[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"]]]]],["p-f4594fe2",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-1c3ab606",[[1,"tttx-form",{formschema:[1025],data:[1032],submit:[64]}]]],["p-d1ff1456",[[1,"tttx-keyvalue-block",{keyvalues:[1],horizontal:[4],spacedout:[4],_elements:[32]}]]],["p-e55a967b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-149f806e",[[2,"tttx-percentage-bar",{percentage:[8],thresholds:[1],color:[1],min:[1],labelid:[1],_percentage:[32],_ranges:[32],_min:[32]}]]],["p-50cdce65",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-25acdd4c",[[1,"tttx-tag",{text:[1],color:[1]}]]],["p-55831705",[[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-c0c022cd",[[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-e89b053f",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-09b92178",[[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-4ade2866",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));

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

@@ -0,0 +1,22 @@
+export type Threshold = {
+  threshold: number;
+  color: string;
+};
+export type Range = {
+  range: number[];
+  color: string;
+};
+export declare class TttxPercentageBar {
+  percentage: string | number;
+  thresholds?: string | Threshold[];
+  color?: string;
+  min: string;
+  labelid?: string;
+  _percentage: number;
+  _ranges: Range[];
+  _min: any;
+  componentWillRender(): void;
+  private getColour;
+  private getWidth;
+  render(): any;
+}

package/dist/types/components/atoms/tttx-percentage-bar/tttx-percentage-bar.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+  title: string;
+  component: string;
+};
+export default _default;
+export declare const PercentageBar: any;
+export declare const PercentageBarWithoutThresholds: any;
+export declare const PercentageBarWithoutMinimum: any;
+export declare const PercentageBarLabeled: any;
+export declare const PercentageBarLabeledInline: any;

package/dist/types/components/molecules/tttx-multiselect-box/tttx-multiselect-box.d.ts

@@ -19,6 +19,7 @@ export declare class TttxMultiselectBox {
   changesApplied: EventEmitter<SelectItem[]>;
   handleCloseSelectBox(): void;
   handleBlur(): void;
+  handleOptionsDataChange(): void;
   /**
    * We want to generally clone instances of optionsData, _optionsData and unsavedSelectedItems
    * This is because they may be assigned from each other, but have different purposes

package/dist/types/components.d.ts

@@ -10,6 +10,7 @@ import { FilterChangeEvent, FilterSettings } from "./components/molecules/tttx-f
 import { KeyBlockValues } from "./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block";
 import { ListItem } from "./components/molecules/tttx-list/interfaces";
 import { SelectItem } from "./components/molecules/tttx-multiselect-box/interfaces";
+import { Threshold } from "./components/atoms/tttx-percentage-bar/tttx-percentage-bar";
 import { SelectItem as SelectItem1 } from "./components/molecules/tttx-select-box/interfaces";
 import { SorterChangeEvent, SorterData } from "./components/molecules/tttx-sorter/interfaces";
 import { MinMaxDates } from "./components/molecules/tttx-standalone-input/tttx-standalone-input";
@@ -71,6 +72,13 @@ export namespace Components {
         "searchEnabled": boolean;
         "visibleValue": string;
     }
+    interface TttxPercentageBar {
+        "color"?: string;
+        "labelid"?: string;
+        "min": string;
+        "percentage": string | number;
+        "thresholds"?: string | Threshold[];
+    }
     interface TttxQrcode {
         "link": string;
         "size": number;
@@ -280,6 +288,12 @@ declare global {
         prototype: HTMLTttxMultiselectBoxElement;
         new (): HTMLTttxMultiselectBoxElement;
     };
+    interface HTMLTttxPercentageBarElement extends Components.TttxPercentageBar, HTMLStencilElement {
+    }
+    var HTMLTttxPercentageBarElement: {
+        prototype: HTMLTttxPercentageBarElement;
+        new (): HTMLTttxPercentageBarElement;
+    };
     interface HTMLTttxQrcodeElement extends Components.TttxQrcode, HTMLStencilElement {
     }
     var HTMLTttxQrcodeElement: {
@@ -344,6 +358,7 @@ declare global {
         "tttx-list": HTMLTttxListElement;
         "tttx-loading-spinner": HTMLTttxLoadingSpinnerElement;
         "tttx-multiselect-box": HTMLTttxMultiselectBoxElement;
+        "tttx-percentage-bar": HTMLTttxPercentageBarElement;
         "tttx-qrcode": HTMLTttxQrcodeElement;
         "tttx-select-box": HTMLTttxSelectBoxElement;
         "tttx-sorter": HTMLTttxSorterElement;
@@ -421,6 +436,13 @@ declare namespace LocalJSX {
         "searchEnabled"?: boolean;
         "visibleValue"?: string;
     }
+    interface TttxPercentageBar {
+        "color"?: string;
+        "labelid"?: string;
+        "min"?: string;
+        "percentage"?: string | number;
+        "thresholds"?: string | Threshold[];
+    }
     interface TttxQrcode {
         "link"?: string;
         "size"?: number;
@@ -559,6 +581,7 @@ declare namespace LocalJSX {
         "tttx-list": TttxList;
         "tttx-loading-spinner": TttxLoadingSpinner;
         "tttx-multiselect-box": TttxMultiselectBox;
+        "tttx-percentage-bar": TttxPercentageBar;
         "tttx-qrcode": TttxQrcode;
         "tttx-select-box": TttxSelectBox;
         "tttx-sorter": TttxSorter;
@@ -583,6 +606,7 @@ declare module "@stencil/core" {
             "tttx-list": LocalJSX.TttxList & JSXBase.HTMLAttributes<HTMLTttxListElement>;
             "tttx-loading-spinner": LocalJSX.TttxLoadingSpinner & JSXBase.HTMLAttributes<HTMLTttxLoadingSpinnerElement>;
             "tttx-multiselect-box": LocalJSX.TttxMultiselectBox & JSXBase.HTMLAttributes<HTMLTttxMultiselectBoxElement>;
+            "tttx-percentage-bar": LocalJSX.TttxPercentageBar & JSXBase.HTMLAttributes<HTMLTttxPercentageBarElement>;
             "tttx-qrcode": LocalJSX.TttxQrcode & JSXBase.HTMLAttributes<HTMLTttxQrcodeElement>;
             "tttx-select-box": LocalJSX.TttxSelectBox & JSXBase.HTMLAttributes<HTMLTttxSelectBoxElement>;
             "tttx-sorter": LocalJSX.TttxSorter & JSXBase.HTMLAttributes<HTMLTttxSorterElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.2.81",
+    "version": "0.2.83",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",

package/dist/tttx/p-4a967804.entry.js

@@ -1 +0,0 @@
-import{r as o,c as t,h as i,H as s,g as e}from"./p-3f1b6013.js";import{p as n,d}from"./p-88ee2406.js";import"./p-112455b1.js";const r=class{constructor(i){o(this,i),this.selectItemEvent=t(this,"selectItemEvent",7),this.toggleOpen=t(this,"toggleOpen",7),this.changesApplied=t(this,"changesApplied",7),this.bodyOffset={},this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.htmlVisibleValue=void 0,this.visibleValue=void 0,this.open=!1,this.unsavedSelectedItems=void 0,this.searchTerm=""}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}safelyCloneArray(o){return JSON.parse(JSON.stringify(o))}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.calculateDropdownMenuOffset(),this.toggleOpen.emit(this.open)}onCancel(){this.open=!1,this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData),this.toggleOpen.emit(!1)}applyChanges(){this.open=!1,this.changesApplied.emit(this.safelyCloneArray(this.unsavedSelectedItems))}onItemSelected(o){const t=this.unsavedSelectedItems.findIndex((t=>t.value===o.value));this.unsavedSelectedItems[t]=Object.assign(Object.assign({},o),{selected:!o.selected}),this.unsavedSelectedItems=[...this.unsavedSelectedItems],this.selectItemEvent.emit(o)}dropdownSelectorContent(){if(!this._optionsData.find((o=>o.selected)))return i("div",{class:"placeholder"},this.placeholder);if(this.htmlVisibleValue){const o=n.sanitize(this.visibleValue,d);return i("div",{class:"dropdown-selector-html-content",innerHTML:o})}return i("div",null,this.visibleValue)}optionFoundInSearchTerm(o){return-1===o.label.toLowerCase().indexOf(this.searchTerm.toLowerCase())}dropdownOption(o){const t=this.searchEnabled&&this.optionFoundInSearchTerm(o),s=o.selected?"check_box":"check_box_outline_blank",e=o.selected?"blue":"grey";if(o.html){const r=n.sanitize(o.html,d);return i("div",{class:`dropdown-option ${t?"hidden":""} ${o.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label},i("tttx-icon",{icon:s,color:e,class:"checkbox-icon"}),i("div",{innerHTML:r}))}return i("div",{class:`dropdown-option ${t?"hidden":""} ${o.selected?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label},i("tttx-icon",{icon:s,color:e,class:"checkbox-icon"}),i("div",{class:"plaintext-option"},o.label))}handleSearchInput(o){this.searchTerm=o.target.value}calculateDropdownMenuOffset(){const o=this.el.shadowRoot.querySelector(".dropdown-selector"),t=o.getBoundingClientRect().bottom;let i=Math.min(288,36*this._optionsData.length)+45+8;this.searchEnabled&&(i+=52),this.bodyOffset=t+i>window.innerHeight?{top:window.innerHeight-(i+16)+"px",position:"fixed",width:`${o.offsetWidth}px`}:{}}render(){if(!this.optionsData)return;this._optionsData="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,this.unsavedSelectedItems||(this.unsavedSelectedItems=this.safelyCloneArray(this._optionsData));const o=this.open?"expand_less":"expand_more";return i(s,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent(),i("div",{class:"dropdown-selector-chevron"},i("tttx-icon",{icon:o,color:"black"}))),this.open&&i("div",{class:"dropdown-body-container"},i("div",{class:"dropdown-body",style:Object.assign({},this.bodyOffset)},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this),inline:!0})),i("div",{class:"dropdown-options-list"},this.unsavedSelectedItems.map((o=>this.dropdownOption(o)))),i("div",{class:"footer"},i("tttx-button",{design:"primary",onClick:this.applyChanges.bind(this)},"Apply"),i("tttx-button",{onClick:this.onCancel.bind(this)},"Cancel"))))))}get el(){return e(this)}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{display:grid;position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{grid-row:1;align-items:center;gap:8px;padding:6px 8px 6px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-selector-html-content{display:flex;gap:8px;flex-wrap:wrap}.dropdown-body-container{grid-row:2;position:relative}.dropdown-body{position:absolute;display:flex;position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;width:100%}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;scrollbar-gutter:stable;max-height:288px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer;display:flex;gap:8px}.dropdown-option .checkbox-icon{height:24px}.dropdown-option .plaintext-option{line-height:24px}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 8px 16px;height:52px;box-sizing:border-box}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}.footer{display:flex;gap:8px;flex-direction:row-reverse;padding:8px 16px 0 16px;border-top:1px solid #d5d5d5}';export{r as tttx_multiselect_box}