@3t-transform/threeteeui 0.2.73 → 0.2.75

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

@@ -0,0 +1,172 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js';
+import { d as defineCustomElement$4 } from './tttx-button2.js';
+import { d as defineCustomElement$3 } from './tttx-icon2.js';
+import { d as defineCustomElement$2 } from './tttx-standalone-input2.js';
+
+const tttxMultiselectBoxCss = ".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}";
+
+const TttxMultiselectBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selectItemEvent = createEvent(this, "selectItemEvent", 7);
+    this.toggleOpen = createEvent(this, "toggleOpen", 7);
+    this.changesApplied = createEvent(this, "changesApplied", 7);
+    this.bodyOffset = {};
+    this.optionsData = null;
+    this.label = undefined;
+    this.inline = undefined;
+    this.placeholder = '';
+    this.searchEnabled = undefined;
+    this.htmlVisibleValue = undefined;
+    this.visibleValue = undefined;
+    this.open = false;
+    this.unsavedSelectedItems = undefined;
+    this.searchTerm = '';
+  }
+  handleCloseSelectBox() {
+    this.open = false;
+  }
+  handleBlur() {
+    this.open = false;
+    this.toggleOpen.emit(false);
+  }
+  /**
+   * 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
+   * If we don't clone them, changing one may propagate to the others
+   * JSON.parse/stringify will deep clone them, so the references of the array elements will also change
+   */
+  safelyCloneArray(arr) {
+    return JSON.parse(JSON.stringify(arr));
+  }
+  onDropdownClicked() {
+    this.open = !this.open;
+    this.searchTerm = '';
+    this.calculateDropdownMenuOffset();
+    this.toggleOpen.emit(this.open);
+  }
+  onCancel() {
+    this.open = false;
+    this.unsavedSelectedItems = this.safelyCloneArray(this._optionsData);
+    this.toggleOpen.emit(false);
+  }
+  applyChanges() {
+    this.open = false;
+    this.changesApplied.emit(this.safelyCloneArray(this.unsavedSelectedItems));
+  }
+  onItemSelected(option) {
+    const optionIndex = this.unsavedSelectedItems.findIndex((item) => item.value === option.value);
+    this.unsavedSelectedItems[optionIndex] = Object.assign(Object.assign({}, option), { selected: !option.selected });
+    this.unsavedSelectedItems = [...this.unsavedSelectedItems];
+    this.selectItemEvent.emit(option);
+  }
+  dropdownSelectorContent() {
+    if (!this._optionsData.find((item) => item.selected))
+      return h("div", { class: "placeholder" }, this.placeholder);
+    if (this.htmlVisibleValue) {
+      const sanitisedHTML = purify.sanitize(this.visibleValue, domSanitiserOptions);
+      return h("div", { class: "dropdown-selector-html-content", innerHTML: sanitisedHTML });
+    }
+    return h("div", null, this.visibleValue);
+  }
+  dropdownOption(option) {
+    // This is tested in e2e tests
+    /* istanbul ignore next */
+    const hideOption = this.searchEnabled && option.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()) === -1;
+    const checkboxIcon = option.selected ? 'check_box' : 'check_box_outline_blank';
+    const checkboxColor = option.selected ? 'blue' : 'grey';
+    if (option.html) {
+      const sanitisedHTML = purify.sanitize(option.html, domSanitiserOptions);
+      // This is tested in e2e tests
+      /* istanbul ignore next */
+      return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), h("div", { innerHTML: sanitisedHTML })));
+    }
+    // This is tested in e2e tests
+    /* istanbul ignore next */
+    return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), h("div", { class: "plaintext-option" }, option.label)));
+  }
+  // This is tested in e2e tests
+  /* istanbul ignore next */
+  handleSearchInput(event) {
+    const target = event.target;
+    this.searchTerm = target.value;
+  }
+  calculateDropdownMenuOffset() {
+    const dropdownSelector = this.el.shadowRoot.querySelector('.dropdown-selector');
+    const bottomPosY = dropdownSelector.getBoundingClientRect().bottom;
+    // (Max list height OR 36px * number of items) + 52px for search bar + 45px for footer + 8px padding at bottom
+    let dropdownMenuMaxHeight = Math.min((288), 36 * this._optionsData.length) + 45 + 8;
+    if (this.searchEnabled)
+      dropdownMenuMaxHeight += 52;
+    if (bottomPosY + dropdownMenuMaxHeight > window.innerHeight) {
+      this.bodyOffset = { bottom: '16px', position: 'fixed', width: `${dropdownSelector.offsetWidth}px` };
+    }
+    else {
+      this.bodyOffset = {};
+    }
+  }
+  render() {
+    if (!this.optionsData)
+      return;
+    this._optionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
+    // initialise, if not already. After initialisation, this will be managed by internal state
+    // Check is performed in render in case initial render did not include optionsData
+    if (!this.unsavedSelectedItems)
+      this.unsavedSelectedItems = this.safelyCloneArray(this._optionsData);
+    const chevronIcon = this.open ? 'expand_less' : 'expand_more';
+    return (h(Host, { class: this.inline ? 'inline' : 'block' }, this.label && h("div", { class: "label" }, this.label), h("div", { tabindex: "0", class: "dropdown-container" }, h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" }))), this.open && (h("div", { class: "dropdown-body-container" }, h("div", { class: "dropdown-body", style: Object.assign({}, this.bodyOffset) }, this.searchEnabled &&
+      /* istanbul ignore next */
+      h("div", { class: "searchbox" }, h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this), inline: true })), h("div", { class: "dropdown-options-list" }, this.unsavedSelectedItems.map((option) => {
+      return this.dropdownOption(option);
+    })), 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 style() { return tttxMultiselectBoxCss; }
+}, [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"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-multiselect-box", "tttx-button", "tttx-icon", "tttx-standalone-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-multiselect-box":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxMultiselectBox$1);
+      }
+      break;
+    case "tttx-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tttx-standalone-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TttxMultiselectBox = TttxMultiselectBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxMultiselectBox, defineCustomElement };

package/dist/components/tttx-select-box.js

@@ -3,7 +3,7 @@ import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js
 import { d as defineCustomElement$3 } from './tttx-icon2.js';
 import { d as defineCustomElement$2 } from './tttx-standalone-input2.js';
 
-const tttxSelectBoxCss = ".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{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{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
+const tttxSelectBoxCss = ".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{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{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;z-index:1000}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#757575}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
 
 const TttxSelectBox$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-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"selectedValue":[1,"selected-value"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["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-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]}]]],["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":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["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-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

@@ -0,0 +1,126 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6a372ea6.js';
+import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-97a33389.js';
+import './_commonjsHelpers-9943807e.js';
+
+const tttxMultiselectBoxCss = ".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}";
+
+const TttxMultiselectBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectItemEvent = createEvent(this, "selectItemEvent", 7);
+    this.toggleOpen = createEvent(this, "toggleOpen", 7);
+    this.changesApplied = createEvent(this, "changesApplied", 7);
+    this.bodyOffset = {};
+    this.optionsData = null;
+    this.label = undefined;
+    this.inline = undefined;
+    this.placeholder = '';
+    this.searchEnabled = undefined;
+    this.htmlVisibleValue = undefined;
+    this.visibleValue = undefined;
+    this.open = false;
+    this.unsavedSelectedItems = undefined;
+    this.searchTerm = '';
+  }
+  handleCloseSelectBox() {
+    this.open = false;
+  }
+  handleBlur() {
+    this.open = false;
+    this.toggleOpen.emit(false);
+  }
+  /**
+   * 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
+   * If we don't clone them, changing one may propagate to the others
+   * JSON.parse/stringify will deep clone them, so the references of the array elements will also change
+   */
+  safelyCloneArray(arr) {
+    return JSON.parse(JSON.stringify(arr));
+  }
+  onDropdownClicked() {
+    this.open = !this.open;
+    this.searchTerm = '';
+    this.calculateDropdownMenuOffset();
+    this.toggleOpen.emit(this.open);
+  }
+  onCancel() {
+    this.open = false;
+    this.unsavedSelectedItems = this.safelyCloneArray(this._optionsData);
+    this.toggleOpen.emit(false);
+  }
+  applyChanges() {
+    this.open = false;
+    this.changesApplied.emit(this.safelyCloneArray(this.unsavedSelectedItems));
+  }
+  onItemSelected(option) {
+    const optionIndex = this.unsavedSelectedItems.findIndex((item) => item.value === option.value);
+    this.unsavedSelectedItems[optionIndex] = Object.assign(Object.assign({}, option), { selected: !option.selected });
+    this.unsavedSelectedItems = [...this.unsavedSelectedItems];
+    this.selectItemEvent.emit(option);
+  }
+  dropdownSelectorContent() {
+    if (!this._optionsData.find((item) => item.selected))
+      return h("div", { class: "placeholder" }, this.placeholder);
+    if (this.htmlVisibleValue) {
+      const sanitisedHTML = purify.sanitize(this.visibleValue, domSanitiserOptions);
+      return h("div", { class: "dropdown-selector-html-content", innerHTML: sanitisedHTML });
+    }
+    return h("div", null, this.visibleValue);
+  }
+  dropdownOption(option) {
+    // This is tested in e2e tests
+    /* istanbul ignore next */
+    const hideOption = this.searchEnabled && option.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()) === -1;
+    const checkboxIcon = option.selected ? 'check_box' : 'check_box_outline_blank';
+    const checkboxColor = option.selected ? 'blue' : 'grey';
+    if (option.html) {
+      const sanitisedHTML = purify.sanitize(option.html, domSanitiserOptions);
+      // This is tested in e2e tests
+      /* istanbul ignore next */
+      return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), h("div", { innerHTML: sanitisedHTML })));
+    }
+    // This is tested in e2e tests
+    /* istanbul ignore next */
+    return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), h("div", { class: "plaintext-option" }, option.label)));
+  }
+  // This is tested in e2e tests
+  /* istanbul ignore next */
+  handleSearchInput(event) {
+    const target = event.target;
+    this.searchTerm = target.value;
+  }
+  calculateDropdownMenuOffset() {
+    const dropdownSelector = this.el.shadowRoot.querySelector('.dropdown-selector');
+    const bottomPosY = dropdownSelector.getBoundingClientRect().bottom;
+    // (Max list height OR 36px * number of items) + 52px for search bar + 45px for footer + 8px padding at bottom
+    let dropdownMenuMaxHeight = Math.min((288), 36 * this._optionsData.length) + 45 + 8;
+    if (this.searchEnabled)
+      dropdownMenuMaxHeight += 52;
+    if (bottomPosY + dropdownMenuMaxHeight > window.innerHeight) {
+      this.bodyOffset = { bottom: '16px', position: 'fixed', width: `${dropdownSelector.offsetWidth}px` };
+    }
+    else {
+      this.bodyOffset = {};
+    }
+  }
+  render() {
+    if (!this.optionsData)
+      return;
+    this._optionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
+    // initialise, if not already. After initialisation, this will be managed by internal state
+    // Check is performed in render in case initial render did not include optionsData
+    if (!this.unsavedSelectedItems)
+      this.unsavedSelectedItems = this.safelyCloneArray(this._optionsData);
+    const chevronIcon = this.open ? 'expand_less' : 'expand_more';
+    return (h(Host, { class: this.inline ? 'inline' : 'block' }, this.label && h("div", { class: "label" }, this.label), h("div", { tabindex: "0", class: "dropdown-container" }, h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" }))), this.open && (h("div", { class: "dropdown-body-container" }, h("div", { class: "dropdown-body", style: Object.assign({}, this.bodyOffset) }, this.searchEnabled &&
+      /* istanbul ignore next */
+      h("div", { class: "searchbox" }, h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this), inline: true })), h("div", { class: "dropdown-options-list" }, this.unsavedSelectedItems.map((option) => {
+      return this.dropdownOption(option);
+    })), 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); }
+};
+TttxMultiselectBox.style = tttxMultiselectBoxCss;
+
+export { TttxMultiselectBox as tttx_multiselect_box };

package/dist/esm/tttx-select-box.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-97a33389.js';
 import './_commonjsHelpers-9943807e.js';
 
-const tttxSelectBoxCss = ".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{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{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
+const tttxSelectBoxCss = ".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{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{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;z-index:1000}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#757575}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
 
 const TttxSelectBox = class {
   constructor(hostRef) {

package/dist/esm/tttx.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"selectedValue":[1,"selected-value"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["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-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]}]]],["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":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["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-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-77fed2a6.entry.js

@@ -0,0 +1 @@
+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-5ed38d61.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)}dropdownOption(o){const t=this.searchEnabled&&-1===o.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()),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?{bottom:"16px",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}

package/dist/tttx/{p-d9444b12.entry.js → p-887f56cb.entry.js}

@@ -1 +1 @@
-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-5ed38d61.js";import"./p-112455b1.js";const r=class{constructor(i){o(this,i),this.selectItemEvent=t(this,"selectItemEvent",3),this.toggleOpen=t(this,"toggleOpen",3),this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.selectedValue=void 0,this.open=!1,this.selectedItem=void 0,this.searchTerm=""}async componentWillLoad(){if(this.optionsData){const o=("string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData).filter((o=>o.value==this.selectedValue));this.selectedItem=o.length>0?o[0]:void 0}}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.toggleOpen.emit(this.open)}onItemSelected(o){this.selectedItem=o,this.selectItemEvent.emit(this.selectedItem),this.el.blur()}dropdownSelectorContent(){return this.selectedItem?this.selectedItem.html?i("div",{innerHTML:this.selectedItem.html}):i("div",null,this.selectedItem.label):i("div",{class:"placeholder"},this.placeholder)}dropdownOption(o){const t=this.searchEnabled&&-1===o.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()),s=this.selectedItem&&o.value===this.selectedItem.value;if(o.html){const e=n.sanitize(o.html,d);return i("div",{class:`dropdown-option ${t?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label,innerHTML:e})}return i("div",{class:`dropdown-option ${t?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label},o.label)}handleSearchInput(o){this.searchTerm=o.target.value}render(){if(!this.optionsData)return;const o="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,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",style:{width:`${this.el.offsetWidth}px`}},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this)})),i("div",{class:"dropdown-options-list"},o.map((o=>this.dropdownOption(o)))))))}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{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{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}';export{r as tttx_select_box}
+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-5ed38d61.js";import"./p-112455b1.js";const r=class{constructor(i){o(this,i),this.selectItemEvent=t(this,"selectItemEvent",3),this.toggleOpen=t(this,"toggleOpen",3),this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.selectedValue=void 0,this.open=!1,this.selectedItem=void 0,this.searchTerm=""}async componentWillLoad(){if(this.optionsData){const o=("string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData).filter((o=>o.value==this.selectedValue));this.selectedItem=o.length>0?o[0]:void 0}}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.toggleOpen.emit(this.open)}onItemSelected(o){this.selectedItem=o,this.selectItemEvent.emit(this.selectedItem),this.el.blur()}dropdownSelectorContent(){return this.selectedItem?this.selectedItem.html?i("div",{innerHTML:this.selectedItem.html}):i("div",null,this.selectedItem.label):i("div",{class:"placeholder"},this.placeholder)}dropdownOption(o){const t=this.searchEnabled&&-1===o.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()),s=this.selectedItem&&o.value===this.selectedItem.value;if(o.html){const e=n.sanitize(o.html,d);return i("div",{class:`dropdown-option ${t?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label,innerHTML:e})}return i("div",{class:`dropdown-option ${t?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label},o.label)}handleSearchInput(o){this.searchTerm=o.target.value}render(){if(!this.optionsData)return;const o="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,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",style:{width:`${this.el.offsetWidth}px`}},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this)})),i("div",{class:"dropdown-options-list"},o.map((o=>this.dropdownOption(o)))))))}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{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{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5;z-index:1000}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#757575}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}';export{r as tttx_select_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-f34bface",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-d9444b12",[[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-75c31e23",[[1,"tttx-tree-view",{data:[1040],treeData:[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-750cf31b",[[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-67c342d7",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-895526aa",[[1,"tttx-form",{formschema:[1032],data:[1032],submit:[64]}]]],["p-6fe0af4e",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-e55a967b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-50cdce65",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-a6582ab0",[[1,"tttx-tag",{text:[1],color:[1]}]]],["p-c0c022cd",[[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-e89b053f",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-818574fe",[[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-5b7b8539",[[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,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-77fed2a6",[[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-f34bface",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-887f56cb",[[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-75c31e23",[[1,"tttx-tree-view",{data:[1040],treeData:[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-750cf31b",[[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-67c342d7",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-895526aa",[[1,"tttx-form",{formschema:[1032],data:[1032],submit:[64]}]]],["p-6fe0af4e",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-e55a967b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-50cdce65",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-a6582ab0",[[1,"tttx-tag",{text:[1],color:[1]}]]],["p-c0c022cd",[[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-e89b053f",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-818574fe",[[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-5b7b8539",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));

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

@@ -0,0 +1,6 @@
+export interface SelectItem {
+  value: string;
+  label: string;
+  html?: string;
+  selected: boolean;
+}

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

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SelectItem } from './interfaces';
+export declare class TttxMultiselectBox {
+  optionsData: string | SelectItem[];
+  label: string;
+  inline: boolean;
+  placeholder: string;
+  searchEnabled: boolean;
+  htmlVisibleValue: boolean;
+  visibleValue: string;
+  open: boolean;
+  unsavedSelectedItems: SelectItem[];
+  searchTerm: string;
+  private _optionsData;
+  private bodyOffset;
+  el: any;
+  selectItemEvent: EventEmitter<SelectItem>;
+  toggleOpen: EventEmitter<boolean>;
+  changesApplied: EventEmitter<SelectItem[]>;
+  handleCloseSelectBox(): void;
+  handleBlur(): 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
+   * If we don't clone them, changing one may propagate to the others
+   * JSON.parse/stringify will deep clone them, so the references of the array elements will also change
+   */
+  safelyCloneArray(arr: Array<any>): any;
+  onDropdownClicked(): void;
+  onCancel(): void;
+  applyChanges(): void;
+  onItemSelected(option: SelectItem): void;
+  dropdownSelectorContent(): any;
+  dropdownOption(option: SelectItem): any;
+  handleSearchInput(event: InputEvent): void;
+  calculateDropdownMenuOffset(): void;
+  render(): any;
+}

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

@@ -0,0 +1,15 @@
+declare const _default: {
+  title: string;
+  component: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+  decorators: (<T extends import("@storybook/types").Renderer>(storyFn: import("@storybook/types").PartialStoryFn<T, import("@storybook/types").Args>) => T["storyResult"])[];
+};
+export default _default;
+export declare const BasicMultiselectBox: any;
+export declare const HtmlVisibleValueWrap: any;
+export declare const HtmlVisibleValue: any;
+export declare const DialogBoxWithDropdown: any;

package/dist/types/components.d.ts

@@ -8,7 +8,8 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { DialogItems } from "./components/molecules/tttx-dialog-box/interfaces";
 import { FilterChangeEvent, FilterSettings } from "./components/molecules/tttx-filter/tttx-filter";
 import { ListItem } from "./components/molecules/tttx-list/interfaces";
-import { SelectItem } from "./components/molecules/tttx-select-box/interfaces";
+import { SelectItem } from "./components/molecules/tttx-multiselect-box/interfaces";
+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";
 import { Tab } from "./components/molecules/tttx-tabs/interfaces";
@@ -59,6 +60,15 @@ export namespace Components {
         "loadingMessage": boolean;
         "size": 'small' | 'large';
     }
+    interface TttxMultiselectBox {
+        "htmlVisibleValue": boolean;
+        "inline": boolean;
+        "label": string;
+        "optionsData": string | SelectItem[];
+        "placeholder": string;
+        "searchEnabled": boolean;
+        "visibleValue": string;
+    }
     interface TttxQrcode {
         "link": string;
         "size": number;
@@ -66,7 +76,7 @@ export namespace Components {
     interface TttxSelectBox {
         "inline": boolean;
         "label": string;
-        "optionsData": string | SelectItem[];
+        "optionsData": string | SelectItem1[];
         "placeholder": string;
         "searchEnabled": boolean;
         "selectedValue": string;
@@ -155,6 +165,10 @@ export interface TttxListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxListElement;
 }
+export interface TttxMultiselectBoxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxMultiselectBoxElement;
+}
 export interface TttxSelectBoxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxSelectBoxElement;
@@ -224,6 +238,12 @@ declare global {
         prototype: HTMLTttxLoadingSpinnerElement;
         new (): HTMLTttxLoadingSpinnerElement;
     };
+    interface HTMLTttxMultiselectBoxElement extends Components.TttxMultiselectBox, HTMLStencilElement {
+    }
+    var HTMLTttxMultiselectBoxElement: {
+        prototype: HTMLTttxMultiselectBoxElement;
+        new (): HTMLTttxMultiselectBoxElement;
+    };
     interface HTMLTttxQrcodeElement extends Components.TttxQrcode, HTMLStencilElement {
     }
     var HTMLTttxQrcodeElement: {
@@ -281,6 +301,7 @@ declare global {
         "tttx-keyvalue-block": HTMLTttxKeyvalueBlockElement;
         "tttx-list": HTMLTttxListElement;
         "tttx-loading-spinner": HTMLTttxLoadingSpinnerElement;
+        "tttx-multiselect-box": HTMLTttxMultiselectBoxElement;
         "tttx-qrcode": HTMLTttxQrcodeElement;
         "tttx-select-box": HTMLTttxSelectBoxElement;
         "tttx-sorter": HTMLTttxSorterElement;
@@ -344,6 +365,18 @@ declare namespace LocalJSX {
         "loadingMessage"?: boolean;
         "size"?: 'small' | 'large';
     }
+    interface TttxMultiselectBox {
+        "htmlVisibleValue"?: boolean;
+        "inline"?: boolean;
+        "label"?: string;
+        "onChangesApplied"?: (event: TttxMultiselectBoxCustomEvent<SelectItem[]>) => void;
+        "onSelectItemEvent"?: (event: TttxMultiselectBoxCustomEvent<SelectItem>) => void;
+        "onToggleOpen"?: (event: TttxMultiselectBoxCustomEvent<boolean>) => void;
+        "optionsData"?: string | SelectItem[];
+        "placeholder"?: string;
+        "searchEnabled"?: boolean;
+        "visibleValue"?: string;
+    }
     interface TttxQrcode {
         "link"?: string;
         "size"?: number;
@@ -351,9 +384,9 @@ declare namespace LocalJSX {
     interface TttxSelectBox {
         "inline"?: boolean;
         "label"?: string;
-        "onSelectItemEvent"?: (event: TttxSelectBoxCustomEvent<SelectItem>) => void;
+        "onSelectItemEvent"?: (event: TttxSelectBoxCustomEvent<SelectItem1>) => void;
         "onToggleOpen"?: (event: TttxSelectBoxCustomEvent<boolean>) => void;
-        "optionsData"?: string | SelectItem[];
+        "optionsData"?: string | SelectItem1[];
         "placeholder"?: string;
         "searchEnabled"?: boolean;
         "selectedValue"?: string;
@@ -447,6 +480,7 @@ declare namespace LocalJSX {
         "tttx-keyvalue-block": TttxKeyvalueBlock;
         "tttx-list": TttxList;
         "tttx-loading-spinner": TttxLoadingSpinner;
+        "tttx-multiselect-box": TttxMultiselectBox;
         "tttx-qrcode": TttxQrcode;
         "tttx-select-box": TttxSelectBox;
         "tttx-sorter": TttxSorter;
@@ -469,6 +503,7 @@ declare module "@stencil/core" {
             "tttx-keyvalue-block": LocalJSX.TttxKeyvalueBlock & JSXBase.HTMLAttributes<HTMLTttxKeyvalueBlockElement>;
             "tttx-list": LocalJSX.TttxList & JSXBase.HTMLAttributes<HTMLTttxListElement>;
             "tttx-loading-spinner": LocalJSX.TttxLoadingSpinner & JSXBase.HTMLAttributes<HTMLTttxLoadingSpinnerElement>;
+            "tttx-multiselect-box": LocalJSX.TttxMultiselectBox & JSXBase.HTMLAttributes<HTMLTttxMultiselectBoxElement>;
             "tttx-qrcode": LocalJSX.TttxQrcode & JSXBase.HTMLAttributes<HTMLTttxQrcodeElement>;
             "tttx-select-box": LocalJSX.TttxSelectBox & JSXBase.HTMLAttributes<HTMLTttxSelectBoxElement>;
             "tttx-sorter": LocalJSX.TttxSorter & JSXBase.HTMLAttributes<HTMLTttxSorterElement>;