@3t-transform/threeteeui 0.2.74 → 0.2.75

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

@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4cfa8e25.js');
+const domsanitiser_options = require('./domsanitiser.options-1dfa7205.js');
+require('./_commonjsHelpers-537d719a.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) {
+    index.registerInstance(this, hostRef);
+    this.selectItemEvent = index.createEvent(this, "selectItemEvent", 7);
+    this.toggleOpen = index.createEvent(this, "toggleOpen", 7);
+    this.changesApplied = index.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 index.h("div", { class: "placeholder" }, this.placeholder);
+    if (this.htmlVisibleValue) {
+      const sanitisedHTML = domsanitiser_options.purify.sanitize(this.visibleValue, domsanitiser_options.domSanitiserOptions);
+      return index.h("div", { class: "dropdown-selector-html-content", innerHTML: sanitisedHTML });
+    }
+    return index.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 = domsanitiser_options.purify.sanitize(option.html, domsanitiser_options.domSanitiserOptions);
+      // This is tested in e2e tests
+      /* istanbul ignore next */
+      return (index.h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, index.h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), index.h("div", { innerHTML: sanitisedHTML })));
+    }
+    // This is tested in e2e tests
+    /* istanbul ignore next */
+    return (index.h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, index.h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), index.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 (index.h(index.Host, { class: this.inline ? 'inline' : 'block' }, this.label && index.h("div", { class: "label" }, this.label), index.h("div", { tabindex: "0", class: "dropdown-container" }, index.h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), index.h("div", { class: "dropdown-selector-chevron" }, index.h("tttx-icon", { icon: chevronIcon, color: "black" }))), this.open && (index.h("div", { class: "dropdown-body-container" }, index.h("div", { class: "dropdown-body", style: Object.assign({}, this.bodyOffset) }, this.searchEnabled &&
+      /* istanbul ignore next */
+      index.h("div", { class: "searchbox" }, index.h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this), inline: true })), index.h("div", { class: "dropdown-options-list" }, this.unsavedSelectedItems.map((option) => {
+      return this.dropdownOption(option);
+    })), 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); }
+};
+TttxMultiselectBox.style = tttxMultiselectBoxCss;
+
+exports.tttx_multiselect_box = TttxMultiselectBox;

package/dist/cjs/tttx.cjs.js

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

@@ -11,6 +11,7 @@
     "./components/molecules/tttx-dialog-box/tttx-dialog-box.js",
     "./components/molecules/tttx-form/tttx-form.js",
     "./components/molecules/tttx-list/tttx-list.js",
+    "./components/molecules/tttx-multiselect-box/tttx-multiselect-box.js",
     "./components/molecules/tttx-select-box/tttx-select-box.js",
     "./components/molecules/tttx-sorter/tttx-sorter.js",
     "./components/molecules/tttx-tabs/tttx-tabs.js",

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

@@ -0,0 +1,135 @@
+.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;
+}

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

@@ -0,0 +1,339 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, Host } from '@stencil/core';
+import * as DOMPurify from 'dompurify';
+import domSanitiserOptions from '../../../shared/domsanitiser.options';
+export class TttxMultiselectBox {
+  constructor() {
+    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 = DOMPurify.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 = DOMPurify.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"))))))));
+  }
+  static get is() { return "tttx-multiselect-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-multiselect-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-multiselect-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "optionsData": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | SelectItem[]",
+          "resolved": "SelectItem[] | string",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "options-data",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "searchEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search-enabled",
+        "reflect": false
+      },
+      "htmlVisibleValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "html-visible-value",
+        "reflect": false
+      },
+      "visibleValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "visible-value",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "unsavedSelectedItems": {},
+      "searchTerm": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectItemEvent",
+        "name": "selectItemEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SelectItem",
+          "resolved": "SelectItem",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }, {
+        "method": "toggleOpen",
+        "name": "toggleOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "changesApplied",
+        "name": "changesApplied",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SelectItem[]",
+          "resolved": "SelectItem[]",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "closeSelectBox",
+        "method": "handleCloseSelectBox",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "blur",
+        "method": "handleBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}