@3t-transform/threeteeui 0.2.74 → 0.2.76

package/dist/cjs/tttx-standalone-input.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4cfa8e25.js');
 
-const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{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.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.input-icon.sc-tttx-standalone-input{position:absolute;margin-top:9px;margin-left:4px}.errormsg.sc-tttx-standalone-input{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.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;line-height:19px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center}label.inputInline.sc-tttx-standalone-input .input-container.sc-tttx-standalone-input{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label.sc-tttx-standalone-input{font-weight:500;font-size:16px;line-height:19px;margin-bottom:16px}input.sc-tttx-standalone-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].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}@media (max-width: 600px){input[type=date].sc-tttx-standalone-input{padding-top:6px}}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}.input-icon.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding:0 32px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{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.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){display:none}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000}input.sc-tttx-standalone-input:focus{border-color:#1479c6}input.sc-tttx-standalone-input:focus-visible{outline:none}.secondarylabel.sc-tttx-standalone-input{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.inputBlock.readonly.sc-tttx-standalone-input{pointer-events:none;user-select:none;color:gray}input[readonly].sc-tttx-standalone-input{cursor:default;pointer-events:none;user-select:none;color:gray}.sc-tttx-standalone-input-h{display:block}.input-container.sc-tttx-standalone-input{position:relative}#icon-left.sc-tttx-standalone-input{position:absolute;left:8px;top:10px}#icon-left.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-left:36px}#icon-right.sc-tttx-standalone-input{position:absolute;right:8px;top:10px}#icon-right.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-right:36px}";
+const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label.sc-tttx-standalone-input{font-weight:500;font-size:16px;line-height:19px;color:#212121}label.sc-tttx-standalone-input .optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input{position:relative}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{display:flex;position:absolute;height:24px;gap:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input tttx-icon.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input tttx-icon.sc-tttx-standalone-input{height:24px;width:24px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input{left:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{right:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-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.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-input-icon.sc-tttx-standalone-input{padding-left:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-input-icon.has-left-icon.sc-tttx-standalone-input{padding-left:72px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-left-icon.sc-tttx-standalone-input{padding-left:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-right-icon.sc-tttx-standalone-input{padding-right:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:19px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[readonly].sc-tttx-standalone-input{cursor:default;pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:focus{border-color:#1479c6}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:focus-visible{outline:none}label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input{display:flex;align-items:center;line-height:21px}label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{margin-top:4px}label.sc-tttx-standalone-input .outer-container.inputBlock.readonly.sc-tttx-standalone-input{pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input .outer-container.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center;margin:0}label.sc-tttx-standalone-input .outer-container.inputInline.sc-tttx-standalone-input input.sc-tttx-standalone-input{margin-top:0}label.sc-tttx-standalone-input .secondarylabel.sc-tttx-standalone-input{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input{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.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input:not(.visible){display:none}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded.sc-tttx-standalone-input{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}.sc-tttx-standalone-input-h{display:block}";
 
 const TttxInput = class {
   constructor(hostRef) {
@@ -80,8 +80,13 @@ const TttxInput = class {
     this.rightIconClick.emit();
   }
   render() {
-    const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
-    return (index.h(index.Host, null, index.h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? index.h("span", { class: "optional" }, "\u00A0(optional)") : '', index.h("div", { class: "input-container" }, this.inputicon && (index.h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (index.h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })), this.iconright && (index.h("tttx-icon", { id: "icon-right", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })), index.h("input", { class: classNames, autocapitalize: this.inputautocapitalize, autofocus: this.inputautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.secondarylabel && index.h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (index.h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, index.h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
+    const classNames = [
+      this.showerrormsg ? 'invalid' : '',
+      this.inputicon ? 'has-input-icon' : '',
+      this.iconleft ? 'has-left-icon' : '',
+      this.iconright ? 'has-right-icon' : '',
+    ].join(' ');
+    return (index.h(index.Host, null, index.h("label", null, this.label, !this.required ? index.h("span", { class: "optional" }, "\u00A0(optional)") : '', index.h("div", { class: ['outer-container', this.inline ? 'inputInline' : 'inputBlock'].join(' ') }, index.h("input", { class: classNames, autocapitalize: this.inputautocapitalize, autofocus: this.inputautofocus, enterkeyhint: this.inputkeyhint, tabindex: this.inputindex, title: this.inputtitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), (this.inputicon || this.iconleft) && (index.h("span", { class: "left-icons" }, this.inputicon && (index.h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: this.inputiconcolor, onClick: this.handleInputIconClick.bind(this) })), this.iconleft && (index.h("tttx-icon", { class: "left-icon", icon: this.iconleft, color: this.iconleftcolor, onClick: this.handleLeftIconClick.bind(this) })))), this.iconright && (index.h("span", { class: "right-icons" }, index.h("tttx-icon", { class: "right-icon", icon: this.iconright, color: this.iconrightcolor, onClick: this.handleRightIconClick.bind(this) })))), this.secondarylabel && index.h("span", { class: "secondarylabel" }, this.secondarylabel), this.showerrorbubble && (index.h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, index.h("span", { class: "material-symbols-rounded" }, "warning"), " ", this.errormsg)))));
   }
 };
 TttxInput.style = tttxStandaloneInputCss;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4cfa8e25.js');
 
-const tttxTagCss = ".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}.tag{border-radius:20px;padding:4px;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:400}.tag span{margin-left:4px;margin-right:4px;color:#212121}.icon{height:18px;width:18px;font-weight:400}";
+const tttxTagCss = ".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}.tag{border-radius:20px;padding:4px;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:400}.tag span{margin-left:4px;margin-right:4px;color:#212121}.icon{height:18px;width:18px;font-weight:400}";
 
 const TttxTag = class {
   constructor(hostRef) {

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":[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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,16 +1,17 @@
 {
   "entries": [
     "./components/molecules/tttx-filter/tttx-filter.js",
+    "./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js",
     "./components/molecules/tttx-standalone-input/tttx-standalone-input.js",
     "./components/atoms/tttx-button/tttx-button.js",
     "./components/atoms/tttx-icon/tttx-icon.js",
-    "./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js",
     "./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
     "./components/atoms/tttx-qrcode/tttx-qrcode.js",
     "./components/atoms/tttx-tag/tttx-tag.js",
     "./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/atoms/tttx-button/tttx-button.css

@@ -22,7 +22,7 @@ button {
   justify-content: left;
   align-items: center;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 500;
 }
 
 .button-content {

package/dist/collection/components/atoms/tttx-button/tttx-button.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Host, h } from '@stencil/core';
 export class TttxButton {
   constructor() {
@@ -21,7 +20,7 @@ export class TttxButton {
   }
   render() {
     this._iconcolor = this.iconcolor;
-    return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && h("div", { class: "button-content" }, h("slot", null)), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
+    return (h(Host, null, h("button", { class: `button ${this._design} ${this.icon ? 'withicon' : ''} ${this.icon && this.iconposition ? 'icon' + this.iconposition : ''}  ${this.notext ? 'notext' : ''}` }, this.icon && this.iconposition === 'left' && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))), !this.notext && (h("div", { class: "button-content" }, h("slot", null))), this.icon && this.iconposition === 'right' && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.icon, color: this._iconcolor }))))));
   }
   static get is() { return "tttx-button"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js

@@ -1,6 +1,6 @@
 export default {
   title: 'Atoms/Button',
-  component: 'tttx-button'
+  component: 'tttx-button',
 };
 const PrimaryButtons = () => `
 <h2>Standard</h2>

package/dist/collection/components/atoms/tttx-icon/tttx-icon.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Host, h } from '@stencil/core';
 export class TttxIcon {
   constructor() {

package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.css

@@ -11,11 +11,12 @@ dl {
 
 dt {
   font-weight: 400;
-  line-height: 21px;
   font-size: 16px;
+  margin-bottom: 4px;
 }
 
-dt, dt.subTitle {
+dt,
+dt.subTitle {
   color: #757575;
 }
 
@@ -23,7 +24,8 @@ dt.mainTitle {
   color: #212121;
 }
 
-dt, dd {
+dt,
+dd {
   overflow-wrap: anywhere;
 }
 
@@ -32,16 +34,23 @@ dd {
   font-weight: 400;
   font-size: 16px;
   color: #212121;
-  line-height: 21px;
-  margin-bottom: 18px;
 }
 
+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;
 }

package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js

@@ -1,21 +1,22 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { h, Host } from '@stencil/core';
 export class TttxKeyvalueBlock {
   constructor() {
     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(h("div", { style: { maxWidth: divSize } }, h("dt", null, keys[i]), h("dd", null, values[keys[i]])));
+    for (const element of keys) {
+      if (this.horizontal || this.spacedout) {
+        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null, element), h("dd", null, values[element])));
       }
       else {
-        elements.push(h("dt", null, keys[i]));
-        elements.push(h("dd", null, values[keys[i]]));
+        elements.push(h("dt", null, element));
+        elements.push(h("dd", null, values[element]));
       }
     }
     return elements;
@@ -23,9 +24,9 @@ export class TttxKeyvalueBlock {
   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(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
       }
       else {
@@ -36,7 +37,7 @@ export class TttxKeyvalueBlock {
     }
     return elements;
   }
-  render() {
+  componentWillRender() {
     if (!this.keyvalues) {
       return;
     }
@@ -47,14 +48,15 @@ export class TttxKeyvalueBlock {
     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 (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
+  }
+  render() {
+    return (h(Host, null, h("dl", { class: [this.horizontal ? 'horizontal' : undefined, this.spacedout ? ' spacedout' : undefined].join(' ').trim() }, this._elements)));
   }
   static get is() { return "tttx-keyvalue-block"; }
   static get encapsulation() { return "shadow"; }
@@ -71,12 +73,16 @@ export class TttxKeyvalueBlock {
   static get properties() {
     return {
       "keyvalues": {
-        "type": "any",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "any | any[] | string",
-          "resolved": "any",
-          "references": {}
+          "original": "KeyBlockValues | KeyBlockValues[] | string",
+          "resolved": "KeyBlockValues | KeyBlockValues[] | string",
+          "references": {
+            "KeyBlockValues": {
+              "location": "local"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -103,7 +109,29 @@ export class TttxKeyvalueBlock {
         },
         "attribute": "horizontal",
         "reflect": false
+      },
+      "spacedout": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "spacedout",
+        "reflect": false
       }
     };
   }
+  static get states() {
+    return {
+      "_elements": {}
+    };
+  }
 }

package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.stories.js

@@ -1,38 +1,94 @@
 export default {
   title: 'atoms/Key Value Block',
-  component: 'tttx-keyvalue-block'
+  component: 'tttx-keyvalue-block',
 };
-const keyValues = {
-  'Name': 'John Doe',
-  'Date of birth': '14 Jan 1981',
-  'Start of postcode': 'AB10'
-};
-export const KeyValueBlock = () => {
-  return `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValues)}' />`;
-};
-const keyValueArray = [
-  {
-    title: "Electrical Designer",
-    subTitle: "Satchwell",
-    data: "18 Oct 2021 - Present"
+const TemplateKeyValueBlock = ({ keyValues }) => `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValues)}' />`;
+export const BasicKeyValueBlock = TemplateKeyValueBlock.bind({});
+BasicKeyValueBlock.args = {
+  keyValues: {
+    'Name': 'John Doe',
+    'Date of birth': '14 Jan 1981',
+    'Start of postcode': 'AB10',
   },
-  {
-    title: "Electrical Inspector",
-    subTitle: "Fastned",
-    data: "20 Dec 2016 - 10 Oct 2021"
+};
+const TemplateHorizontalKeyValueBlock = ({ keyValues }) => `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValues)}' />`;
+export const HorizontalKeyValueBlock = TemplateHorizontalKeyValueBlock.bind({});
+HorizontalKeyValueBlock.args = {
+  keyValues: {
+    'Name': 'John Doe',
+    'Date of birth': '14 Jan 1981',
+    'Start of postcode': 'AB10',
   },
-  {
-    title: "Electrical Tech Prof I - Eng",
-    subTitle: "Voltech",
-    data: "20 Dec 2009 - 20 Nov 2016"
+};
+const TemplateSpacedoutKeyValueBlock = ({ keyValues }) => `<tttx-keyvalue-block spacedout='true' keyvalues='${JSON.stringify(keyValues)}' />`;
+export const SpacedoutKeyValueBlock = TemplateSpacedoutKeyValueBlock.bind({});
+SpacedoutKeyValueBlock.args = {
+  keyValues: {
+    'Name': 'John Doe',
+    'Date of birth': '14 Jan 1981',
+    'Start of postcode': 'AB10',
   },
-];
-export const KeyValueSubtitleBlock = () => {
-  return `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`;
 };
-export const HorizontalKeyValueBlock = () => {
-  return `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValues)}' />`;
+const TemplateKeyValueBlockArray = ({ keyValueArray }) => `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`;
+export const BasicKeyValueBlockArray = TemplateKeyValueBlockArray.bind({});
+BasicKeyValueBlockArray.args = {
+  keyValueArray: [
+    {
+      title: 'Electrical Designer',
+      subTitle: 'Satchwell',
+      data: '18 Oct 2021 - Present',
+    },
+    {
+      title: 'Electrical Inspector',
+      subTitle: 'Fastned',
+      data: '20 Dec 2016 - 10 Oct 2021',
+    },
+    {
+      title: 'Electrical Tech Prof I - Eng',
+      subTitle: 'Voltech',
+      data: '20 Dec 2009 - 20 Nov 2016',
+    },
+  ],
+};
+const TemplateHorizontalKeyValueBlockArray = ({ keyValueArray }) => `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValueArray)}' />`;
+export const HorizontalKeyValueBlockArray = TemplateHorizontalKeyValueBlockArray.bind({});
+HorizontalKeyValueBlockArray.args = {
+  keyValueArray: [
+    {
+      title: 'Electrical Designer',
+      subTitle: 'Satchwell',
+      data: '18 Oct 2021 - Present',
+    },
+    {
+      title: 'Electrical Inspector',
+      subTitle: 'Fastned',
+      data: '20 Dec 2016 - 10 Oct 2021',
+    },
+    {
+      title: 'Electrical Tech Prof I - Eng',
+      subTitle: 'Voltech',
+      data: '20 Dec 2009 - 20 Nov 2016',
+    },
+  ],
 };
-export const HorizontalKeyValueSubtitleBlock = () => {
-  return `<tttx-keyvalue-block horizontal='true' keyvalues='${JSON.stringify(keyValueArray)}' />`;
+const TemplateSpacedoutKeyValueBlockArray = ({ keyValueArray }) => `<tttx-keyvalue-block spacedout='true' keyvalues='${JSON.stringify(keyValueArray)}' />`;
+export const SpacedoutKeyValueBlockArray = TemplateSpacedoutKeyValueBlockArray.bind({});
+SpacedoutKeyValueBlockArray.args = {
+  keyValueArray: [
+    {
+      title: 'Electrical Designer',
+      subTitle: 'Satchwell',
+      data: '18 Oct 2021 - Present',
+    },
+    {
+      title: 'Electrical Inspector',
+      subTitle: 'Fastned',
+      data: '20 Dec 2016 - 10 Oct 2021',
+    },
+    {
+      title: 'Electrical Tech Prof I - Eng',
+      subTitle: 'Voltech',
+      data: '20 Dec 2009 - 20 Nov 2016',
+    },
+  ],
 };

package/dist/collection/components/atoms/tttx-tag/tttx-tag.css

@@ -22,7 +22,7 @@ button {
   justify-content: left;
   align-items: center;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 500;
 }
 
 .button-content {

package/dist/collection/components/atoms/tttx-tag/tttx-tag.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Host, h } from '@stencil/core';
 export class TttxTag {
   constructor() {

package/dist/collection/components/atoms/tttx-tag/tttx-tag.stories.js

@@ -9,7 +9,7 @@ export default {
     color: {
       control: { type: 'text' },
       default: '#d5d5d5',
-    }
+    },
   },
 };
 const Template = ({ text, color }) => {

package/dist/collection/components/molecules/tttx-form/lib/setErrorState.js

@@ -4,14 +4,25 @@
  * 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');

package/dist/collection/components/molecules/tttx-form/lib/validityCheck.js

@@ -3,8 +3,8 @@
  * 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;
@@ -13,17 +13,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