@3t-transform/threeteeui 0.2.74 → 0.2.76

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":[1025],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["tttx-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-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4cfa8e25.js');
 
-const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:inline-block}tttx-icon{cursor:inherit}.spacingleft{margin-left:8px}";
+const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:500}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:inline-block}tttx-icon{cursor:inherit}.spacingleft{margin-left:8px}";
 
 const TttxButton = class {
   constructor(hostRef) {
@@ -28,7 +28,7 @@ const TttxButton = class {
   }
   render() {
     this._iconcolor = this.iconcolor;
-    return (index.h(index.Host, null, index.h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && index.h("div", { class: "button-content" }, index.h("slot", null)), this.icon && this.iconposition === 'right' && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
+    return (index.h(index.Host, null, index.h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && (index.h("div", { class: "button-content" }, index.h("slot", null))), this.icon && this.iconposition === 'right' && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
   }
 };
 TttxButton.style = tttxButtonCss;

package/dist/cjs/tttx-form.cjs.entry.js

@@ -11,8 +11,8 @@ require('./_commonjsHelpers-537d719a.js');
  * sets an error message if there's an issue, and emits a "dataChanged" event to
  * the parent component with the field name and its new value.
  *
- * @param {Event} event - The focusout event triggered by the input field.
- * @return {void}
+ * @param {Event | FocusEvent} event - The focusout event triggered by the input field.
+ * @return {{ target: FormField; hasError: boolean; errorMessage: string; }}
  */
 function validityCheck(event) {
   var _a, _b, _c, _d;
@@ -21,17 +21,19 @@ function validityCheck(event) {
   let hasError = true;
   let errorMessage = '';
   // validity object on HTML5 inputs has the following options
-  // badInput
-  // customError
-  // patternMismatch
-  // rangeOverflow
-  // rangeUnderflow
-  // stepMismatch
-  // tooLong
-  // tooShort
-  // typeMismatch
-  // valid
-  // valueMissing
+  /*
+      badInput
+      customError
+      patternMismatch
+      rangeOverflow
+      rangeUnderflow
+      stepMismatch
+      tooLong
+      tooShort
+      typeMismatch
+      valid
+      valueMissing
+  */
   // customErrors can be set with
   // target.setCustomValidity('custom error!');
   // and cleared with
@@ -73,14 +75,25 @@ function validityCheck(event) {
  * displays the error message in an error bubble. If no error was detected,
  * it removes the "invalid" class from the input field and clears the error bubble.
  *
- * @param {HTMLInputElement} target - The input field to update.
+ * @param {FormField} target - The input field to update.
  * @param {boolean} hasError - Whether an error was detected in the field.
  * @param {string} errorMessage - The error message to display (if any).
  * @return {void}
  */
-function setErrorState(target, hasError, errorMessage) {
+function setErrorState(target, hasError, errorMessage, parent = undefined) {
   // Find the error bubble element for the input field
-  const errorBubble = target.parentElement.querySelector('.errorBubble');
+  let errorBubble;
+  if (parent !== undefined) {
+    errorBubble = parent.querySelector('.errorBubble');
+  }
+  else {
+    if (target.parentElement.nodeName.toLowerCase() === 'label') {
+      errorBubble = target.parentElement.querySelector('.errorBubble');
+    }
+    else {
+      errorBubble = target.parentElement.parentElement.querySelector('.errorBubble');
+    }
+  }
   // If an error was detected, set the input field's class to "invalid" and display the error message in the error bubble
   if (hasError) {
     target.classList.add('invalid');
@@ -104,7 +117,7 @@ function setErrorState(target, hasError, errorMessage) {
   }
 }
 
-const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.input-icon{position:absolute;margin-top:9px;margin-left:4px}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;line-height:16px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;line-height:19px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label.inputInline{display:flex;white-space:nowrap;align-items:center}label.inputInline .input-container{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label{font-weight:500;font-size:16px;line-height:19px;margin-bottom:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;line-height:19px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}@media (max-width: 600px){input[type=date]{padding-top:6px}}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}.input-icon~input{padding:0 32px}input~.errorBubble{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}input~.errorBubble:not(.visible){display:none}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000}input:focus{border-color:#1479c6}input:focus-visible{outline:none}.secondarylabel{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.inputBlock.readonly{pointer-events:none;user-select:none;color:gray}input[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:block}fieldset{margin:0;padding:0;border:none}label.inputBlock.inlineBlock{display:inline-block}.inlineLabel{font-weight:400;display:inline-block;vertical-align:top;padding-top:4px}input[type=checkbox]{width:18px;height:18px}input~label{font-weight:400}select{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}.placeholder{color:#9e9e9e}.placeholder option{color:initial}select.invalid:invalid{border:1px solid #dc0000}select~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}select~.errorBubble:not(.visible){visibility:hidden}select~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}select.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}select:focus{border-color:#1479c6}select:focus-visible{outline:none}.button{padding:0 16px}.footer{display:flex;gap:16px;flex-direction:row-reverse}";
+const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label{font-weight:500;font-size:16px;line-height:19px;color:#212121}label .optional{color:#757575;font-weight:normal}label .outer-container{position:relative}label .outer-container .left-icons,label .outer-container .right-icons{display:flex;position:absolute;height:24px;gap:8px}label .outer-container .left-icons tttx-icon,label .outer-container .right-icons tttx-icon{height:24px;width:24px}label .outer-container .left-icons{left:8px}label .outer-container .right-icons{right:8px}label .outer-container input{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;padding:0;padding-left:16px;padding-right:16px;margin-top:4px;}label .outer-container input.has-input-icon{padding-left:40px}label .outer-container input.has-input-icon.has-left-icon{padding-left:72px}label .outer-container input.has-left-icon{padding-left:40px}label .outer-container input.has-right-icon{padding-right:40px}label .outer-container input.invalid{border:1px solid #dc0000}label .outer-container input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:19px}label .outer-container input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label .outer-container input[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}label .outer-container input:focus{border-color:#1479c6}label .outer-container input:focus-visible{outline:none}label .outer-container.inputBlock{display:flex;align-items:center;line-height:21px}label .outer-container.inputBlock .left-icons,label .outer-container.inputBlock .right-icons{margin-top:4px}label .outer-container.inputBlock.readonly{pointer-events:none;user-select:none;color:gray}label .outer-container.inputInline{display:flex;white-space:nowrap;align-items:center;margin:0}label .outer-container.inputInline input{margin-top:0}label .secondarylabel{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label .errorBubble{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label .errorBubble:not(.visible){display:none}label .errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:500}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:block}fieldset{margin:0;padding:0;border:none}label{display:block;position:relative;margin-bottom:16px}.inlineLabel{font-weight:400;display:inline-block;vertical-align:top;padding-top:4px}input[type=checkbox]{width:18px;height:18px}input~label{font-weight:400}select{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}.placeholder{color:#9e9e9e}.placeholder option{color:initial}select.invalid:invalid{border:1px solid #dc0000}select~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}select~.errorBubble:not(.visible){visibility:hidden}select~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}select.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}select:focus{border-color:#1479c6}select:focus-visible{outline:none}.button{padding:0 16px}.footer{display:flex;gap:16px;flex-direction:row-reverse}";
 
 const TttxForm = class {
   constructor(hostRef) {
@@ -121,11 +134,8 @@ const TttxForm = class {
     // If the formSchema changes and the form data is uncontrolled, store the data since the fields will be removed to avoid form duplication
     if (!this.data && this.form && this._formSchema) {
       const formData = new FormData(this.form);
-      this._data = Object.fromEntries(Object.keys(this._formSchema.properties).map((formKey) => {
-        return [
-          formKey,
-          formData.get(formKey)
-        ];
+      this._data = Object.fromEntries(Object.keys(this._formSchema.properties).map(formKey => {
+        return [formKey, formData.get(formKey)];
       }));
     }
     // Check if the new value is a string, indicating that it needs to be parsed
@@ -150,7 +160,7 @@ const TttxForm = class {
    * Handles the focus event for a form field and emits a "dataChanged" event
    * to the parent component with the field name and its new value.
    *
-   * @param {ChangeEvent} event - The focus event triggered by the field.
+   * @param {KeyboardEvent | Event} event - The focus event triggered by the field.
    * @return {void}
    */
   fieldChanged(event) {
@@ -202,20 +212,22 @@ const TttxForm = class {
    * Creates a new HTMLSelectElement with a set of options.
    *
    * @param {string} formKey - The name of the dropdown field, as specified in the form schema.
-   * @param {Object} formProperties - An object containing additional properties, such as the field type and options properties.
+   * @param {object} formProperties - An object containing additional properties, such as the field type and options properties.
    * @param {'select'} formProperties.type - The type of form field. In this case, it will always be "select".
-   * @param {Object} formProperties.validation - A set of validation rules for the field.
-   * @param {Object[]} formProperties.options - A list of properties to pass to the select options.
-   * @param {string} formProperties.options.label - The visible value of the option.
-   * @param {string} formProperties.options.value - The actual value of the option.
+   * @param {object} formProperties.validation - A set of validation rules for the field.
+   * @param {Array<{label:string, value:string, placeholder?:boolean}>} formProperties.options - A list of properties to pass to the select options.
+   * @param {string} formProperties.options[].label - The visible value of the option.
+   * @param {string} formProperties.options[].value - The actual value of the option.
+   * @param {boolean} [formProperties.options[].placeholder]
    */
   createSelect(formKey, formProperties) {
+    var _a;
     const select = document.createElement('select');
     select.setAttribute('name', formKey);
     formProperties.options.forEach(optionProperties => {
       this.appendOption(select, optionProperties);
     });
-    if (this._data && this._data[formKey])
+    if ((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey])
       select.classList.remove('placeholder');
     return select;
   }
@@ -223,8 +235,10 @@ const TttxForm = class {
    * Appends an option to a select element
    *
    * @param {HTMLSelectElement} select - The select elements to attach the option to.
-   * @param {value} value - The value of the option.
-   * @param {label} label - The label which will be displayed on the form for the option.
+   * @param {Object} optionProperties
+   * @param {string} optionProperties.value - The value of the option.
+   * @param {string} optionProperties.label - The label which will be displayed on the form for the option.
+   * @param {boolean} [optionProperties.placeholder]
    */
   appendOption(select, optionProperties) {
     const option = document.createElement('option');
@@ -244,7 +258,7 @@ const TttxForm = class {
    * and sets its autocomplete and autocapitalization properties to off.
    *
    * @param {string} formKey - The name of the input field, as specified in the form schema.
-   * @param {Object} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
+   * @param {Record<string, any>} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
    * @param {string} formProperties.type - The type of the input field (e.g., "text", "email", "number", etc.).
    * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
    * @return {HTMLInputElement} - The new input element.
@@ -272,12 +286,19 @@ const TttxForm = class {
    * the input element (e.g., "required" will set the "required" and "data-required" attributes,
    * "pattern" will set the "pattern" and "data-pattern" attributes, etc.).
    *
-   * @param {HTMLInputElement} input - The input element to apply validation attributes to.
-   * @param {Object} validation - An object containing the validation rules for the input field.
-   * @param {Object} [validation.required] - An object containing a "message" property to display if the field is required.
-   * @param {Object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
-   * @param {Object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
-   * @param {Object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
+   * @param {FormField} input - The input element to apply validation attributes to.
+   * @param {object} validation - An object containing the validation rules for the input field.
+   * @param {object} [validation.required] - An object containing a "message" property to display if the field is required.
+   * @param {string} [validation.required.message]
+   * @param {object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
+   * @param {string} [validation.pattern.pattern]
+   * @param {string} [validation.pattern.message]
+   * @param {object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
+   * @param {string} [validation.badInput.message]
+   * @param {object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
+   * @param {string} [validation.minmax.min]
+   * @param {string} [validation.minmax.max]
+   * @param {string} [validation.minmax.message]
    * @param {string} [validation.maxlength] - The maximum length of the input field.
    * @return {void}
    */
@@ -320,6 +341,13 @@ const TttxForm = class {
     // Return the error bubble element
     return errorBubble;
   }
+  /**
+   *
+   * @param {Record<string, any>} formProperties
+   * @param {HTMLInputElement | HTMLSelectElement} input
+   * @param {HTMLLabelElement} label
+   * @returns {void}
+   */
   appendCheckboxInput(formProperties, input, label) {
     if (formProperties.label) {
       const lineBreak = document.createElement('br');
@@ -339,15 +367,16 @@ const TttxForm = class {
    * and appends the input element and error bubble element to it. If the form property has
    * no validation object, it adds an "optional" span element to the label.
    *
-   * @param {Object} formProperties - An object containing properties for the form field, including its label text and validation rules.
-   * @param {HTMLInputElement} input - The input element to associate with the label.
+   * @param {Record<string, any>} formProperties - An object containing properties for the form field, including its label text and validation rules.
+   * @param {HTMLInputElement | HTMLSelectElement} input - The input element to associate with the label.
    * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
    * @return {HTMLLabelElement} - The new label element.
    */
   createLabel(formProperties, input, errorBubble) {
+    const outerContainer = document.createElement('div');
+    outerContainer.className = 'outer-container inputBlock';
     // Create a new <label> element with the "inputBlock" class and the specified text
     const label = document.createElement('label');
-    label.className = 'inputBlock';
     label.innerText = formProperties.label;
     // If the form property has no validation object, add an "optional" span element to the label
     if (!formProperties.validation) {
@@ -360,12 +389,14 @@ const TttxForm = class {
       label.classList.add('readonly');
     }
     if (formProperties.type === 'checkbox') {
-      label.className += ' inlineBlock';
       this.appendCheckboxInput(formProperties, input, label);
     }
     else {
-      // Append the input element and error bubble element to the label
-      label.appendChild(input);
+      // Append the input element and error bubble element to the outerContainer
+      outerContainer.appendChild(input);
+    }
+    if (formProperties.type !== 'checkbox') {
+      label.appendChild(outerContainer);
     }
     label.appendChild(errorBubble);
     // Return the label element
@@ -422,18 +453,18 @@ const TttxForm = class {
     const properties = this._formSchema.properties;
     const propertyKeys = Object.keys(properties);
     propertyKeys.forEach(formKey => {
-      var _a;
+      var _a, _b;
       const formInput = formItems.querySelector(`[name=${formKey}]`);
       // Bind events to form input elements
       formInput.oninvalid = this.validityCheckWrapper.bind(this);
       formInput.onblur = this.validityCheckWrapper.bind(this);
       formInput.onkeyup = this.fieldChanged.bind(this);
       formInput.onchange = this.fieldChanged.bind(this);
-      if (this._data && this._data[formKey] !== undefined && this._data[formKey] !== null) {
+      if (((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey]) !== undefined && this._data[formKey] !== null) {
         formInput.value = this._data[formKey];
       }
       // If explicitly setting input as invalid, set invalid state and error message on render
-      if ((_a = properties[formKey].form.validation) === null || _a === void 0 ? void 0 : _a.invalid) {
+      if ((_b = properties[formKey].form.validation) === null || _b === void 0 ? void 0 : _b.invalid) {
         const errorMessage = properties[formKey].form.validation.invalid.message;
         formInput.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
         setErrorState(formInput, true, errorMessage);
@@ -457,8 +488,6 @@ const TttxForm = class {
    * and emits a "dataSubmitted" event with the form data. The fieldset element is assigned
    * to the "fieldset" instance variable using a ref, so it can be populated with form elements
    * later on.
-   *
-   * @return {JSX.Element} - The rendered form template as a JSX element.
    */
   render() {
     return (index.h(index.Host, null, index.h("form", { ref: el => (this.form = el), onSubmit: this.doSubmit.bind(this) }, index.h("fieldset", { ref: el => (this.fieldset = el) }), index.h("input", { type: "submit", ref: el => (this.submitButton = el), style: { display: 'none' } }))));

package/dist/cjs/tttx-keyvalue-block.cjs.entry.js

@@ -4,25 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4cfa8e25.js');
 
-const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dt,dd{overflow-wrap:anywhere}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}dl.horizontal{display:flex;flex-direction:row;width:100%}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%;max-width:50% !important}}@media (max-width: 600px){dl.horizontal div{width:100%;max-width:100% !important}}";
+const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;font-size:16px;margin-bottom:4px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dt,dd{overflow-wrap:anywhere}dd{margin:0;font-weight:400;font-size:16px;color:#212121}dd:not(:last-child){margin-bottom:16px}dl.spacedout,dl.horizontal{display:flex;flex-direction:row;width:100%}dl.spacedout{justify-content:space-between}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%;max-width:50% !important}}@media (max-width: 600px){dl.horizontal div{width:100%;max-width:100% !important}}";
 
 const TttxKeyvalueBlock = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.keyvalues = undefined;
     this.horizontal = undefined;
+    this.spacedout = undefined;
+    this._elements = undefined;
   }
   renderSingleElements(values) {
     const keys = Object.keys(values);
     const elements = [];
     const divSize = (100 / keys.length).toString() + '%';
-    for (let i = 0; i < keys.length; i++) {
-      if (this.horizontal) {
-        elements.push(index.h("div", { style: { maxWidth: divSize } }, index.h("dt", null, keys[i]), index.h("dd", null, values[keys[i]])));
+    for (const element of keys) {
+      if (this.horizontal || this.spacedout) {
+        elements.push(index.h("div", { style: { maxWidth: divSize } }, index.h("dt", null, element), index.h("dd", null, values[element])));
       }
       else {
-        elements.push(index.h("dt", null, keys[i]));
-        elements.push(index.h("dd", null, values[keys[i]]));
+        elements.push(index.h("dt", null, element));
+        elements.push(index.h("dd", null, values[element]));
       }
     }
     return elements;
@@ -30,9 +32,9 @@ const TttxKeyvalueBlock = class {
   renderArrayElements(values) {
     const elements = [];
     const divSize = (100 / values.length).toString() + '%';
-    for (let i = 0; i < values.length; i++) {
-      const value = values[i];
-      if (this.horizontal) {
+    for (const element of values) {
+      const value = element;
+      if (this.horizontal || this.spacedout) {
         elements.push(index.h("div", { style: { maxWidth: divSize } }, index.h("dt", { class: 'mainTitle' }, value.title), index.h("dt", { class: 'subTitle' }, value.subTitle), index.h("dd", null, value.data)));
       }
       else {
@@ -43,7 +45,7 @@ const TttxKeyvalueBlock = class {
     }
     return elements;
   }
-  render() {
+  componentWillRender() {
     if (!this.keyvalues) {
       return;
     }
@@ -54,14 +56,15 @@ const TttxKeyvalueBlock = class {
     else {
       values = this.keyvalues;
     }
-    let elements;
     if (Array.isArray(values)) {
-      elements = this.renderArrayElements(values);
+      this._elements = this.renderArrayElements(values);
     }
     else {
-      elements = this.renderSingleElements(values);
+      this._elements = this.renderSingleElements(values);
     }
-    return (index.h(index.Host, null, index.h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("dl", { class: [this.horizontal ? 'horizontal' : undefined, this.spacedout ? ' spacedout' : undefined].join(' ').trim() }, this._elements)));
   }
 };
 TttxKeyvalueBlock.style = tttxKeyvalueBlockCss;

package/dist/cjs/tttx-list.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-4cfa8e25.js');
 const domsanitiser_options = require('./domsanitiser.options-1dfa7205.js');
 require('./_commonjsHelpers-537d719a.js');
 
-const tttxListCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.toggleable:hover{cursor:pointer}li.item.active{background-color:rgba(17, 17, 17, 0.1)}li.item.active:hover{background-color:rgba(17, 17, 17, 0.15)}li.item.selected{background-color:#ebfbfc}li.item.selected:hover{background-color:#e0f8f9}li.item.selected.active{background-color:#ccf3f6}li.item.selected.active:hover{background-color:#bff0f3}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li:hover{background-color:rgba(17, 17, 17, 0.05)}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}";
+const tttxListCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.toggleable:hover{cursor:pointer}li.item.active{background-color:rgba(17, 17, 17, 0.1)}li.item.active:hover{background-color:rgba(17, 17, 17, 0.15)}li.item.selected{background-color:#ebfbfc}li.item.selected:hover{background-color:#e0f8f9}li.item.selected.active{background-color:#ccf3f6}li.item.selected.active:hover{background-color:#bff0f3}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li.item:hover{background-color:rgba(17, 17, 17, 0.05)}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}";
 
 const TttxList = class {
   constructor(hostRef) {

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;