@3t-transform/threeteeui 0.1.60 → 0.1.62

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],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["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]}]]],["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-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-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-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"elementSize":[32],"open":[64],"close":[64]},[[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"],"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]}]]],["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-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-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["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-dialog-box.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-43af0e62.js');
 const domsanitiser_options = require('./domsanitiser.options-1dfa7205.js');
 require('./_commonjsHelpers-537d719a.js');
 
-const tttxDialogBoxCss = ".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}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;display:flex;flex-direction:column;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.dialog-box-clickable{cursor:pointer}.dialog-box-padding{padding:8px 16px}.dialog-box-align-right{margin-left:auto;display:flex}.dialog-box-header-box{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;height:36px}.dialog-box-header{display:flex;align-items:center;width:100%}.dialog-box-title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.dialog-box-icon{padding-right:8px;width:24px;height:24px}.dialog-box-icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.dialog-box-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.dialog-box-body{overflow:hidden;text-overflow:ellipsis}.dialog-box-body-box{padding:16px}.dialog-box-footer-box{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}.dialog-box-footer{display:flex;align-items:center;width:100%}.dialog-box-spacing-button{margin-right:8px}.dialog-box-header-box.info{border-bottom:1px solid #1479c6}.dialog-box-header-box.success{border-bottom:1px solid #a2bb31}.dialog-box-header-box.warning{border-bottom:1px solid #f59500}.dialog-box-header-box.critical{border-bottom:1px solid #dc0000}";
+const tttxDialogBoxCss = ".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}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d}dialog::backdrop{background-color:#75757580}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.dialog-box-clickable{cursor:pointer}.dialog-box-padding{padding:8px 16px}.dialog-box-align-right{margin-left:auto;display:flex}.dialog-box-header-box{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;height:36px}.dialog-box-header{display:flex;align-items:center;width:100%}.dialog-box-title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.dialog-box-icon{padding-right:8px;width:24px;height:24px}.dialog-box-icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.dialog-box-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.dialog-box-body{overflow:hidden;text-overflow:ellipsis}.dialog-box-body-box{padding:16px}.dialog-box-footer-box{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}.dialog-box-footer{display:flex;align-items:center;width:100%}.dialog-box-spacing-button{margin-right:8px}.dialog-box-header-box.info{border-bottom:1px solid #1479c6}.dialog-box-header-box.success{border-bottom:1px solid #a2bb31}.dialog-box-header-box.warning{border-bottom:1px solid #f59500}.dialog-box-header-box.critical{border-bottom:1px solid #dc0000}";
 
 const TttxDialogBox = class {
   constructor(hostRef) {
@@ -25,12 +25,26 @@ const TttxDialogBox = class {
       this.elementSize = this.size;
     }
   }
+  async open() {
+    if (!this.dialog())
+      return;
+    this.dialog().showModal();
+  }
+  async close() {
+    if (!this.dialog())
+      return;
+    this.dialog().close();
+  }
   onCloseClickHandler() {
+    this.el.shadowRoot.querySelector('dialog').close();
     this.closeButtonClick.emit({ close: true });
   }
   onButtonClickHandler(index) {
     this.buttonClick.emit({ buttonNumber: index, buttonClicked: true });
   }
+  dialog() {
+    return this.el.shadowRoot.querySelector('dialog');
+  }
   renderHeader(header) {
     const title = header.title;
     const iconName = header.iconName;
@@ -73,8 +87,9 @@ const TttxDialogBox = class {
     else {
       this._data = this.data;
     }
-    return (index.h("div", { class: `dialog-box ${this.elementSize}` }, index.h("div", { class: `dialog-box-padding dialog-box-header-box ${this._data.type || ''}` }, this.renderHeader(this._data.header)), index.h("div", { class: "dialog-box-padding dialog-box-body-box" }, this.renderContent(this._data.body)), index.h("div", { class: "dialog-box-padding dialog-box-footer-box" }, this.renderFooter(this._data.footer))));
+    return (index.h("dialog", { class: `dialog-box ${this.elementSize}` }, index.h("div", { class: `dialog-box-padding dialog-box-header-box ${this._data.type || ''}` }, this.renderHeader(this._data.header)), index.h("div", { class: "dialog-box-padding dialog-box-body-box" }, this.renderContent(this._data.body)), index.h("div", { class: "dialog-box-padding dialog-box-footer-box" }, this.renderFooter(this._data.footer))));
   }
+  get el() { return index.getElement(this); }
 };
 TttxDialogBox.style = tttxDialogBoxCss;
 

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

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-43af0e62.js');
+const domsanitiser_options = require('./domsanitiser.options-1dfa7205.js');
+require('./_commonjsHelpers-537d719a.js');
+
+const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{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:1px solid #d5d5d5;border-radius:4px}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-body{display:flex;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110D}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
+
+const TttxSelectBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectItemEvent = index.createEvent(this, "selectItemEvent", 3);
+    this.toggleOpen = index.createEvent(this, "toggleOpen", 3);
+    this.optionsData = null;
+    this.label = undefined;
+    this.inline = undefined;
+    this.placeholder = '';
+    this.searchEnabled = undefined;
+    this.open = false;
+    this.selectedItem = undefined;
+    this.searchTerm = '';
+  }
+  handleCloseSelectBox() {
+    this.open = false;
+  }
+  handleBlur() {
+    this.open = false;
+    this.toggleOpen.emit(false);
+  }
+  onDropdownClicked() {
+    this.open = !this.open;
+    this.searchTerm = '';
+    this.toggleOpen.emit(this.open);
+  }
+  onItemSelected(option) {
+    this.selectedItem = option;
+    this.selectItemEvent.emit(this.selectedItem);
+    this.el.blur();
+  }
+  dropdownSelectorContent() {
+    if (!this.selectedItem)
+      return index.h("div", { class: "placeholder" }, this.placeholder);
+    return index.h("div", null, this.selectedItem.label);
+  }
+  dropdownOption(option) {
+    /* istanbul ignore next */
+    const hideOption = this.searchEnabled && option.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()) === -1;
+    const selected = this.selectedItem && option.value === this.selectedItem.value;
+    if (option.html) {
+      const sanitisedHTML = domsanitiser_options.purify.sanitize(option.html, domsanitiser_options.domSanitiserOptions);
+      /* istanbul ignore next */
+      return (index.h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label, innerHTML: sanitisedHTML }));
+    }
+    /* istanbul ignore next */
+    return (index.h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label));
+  }
+  /* istanbul ignore next */
+  handleSearchInput(event) {
+    const target = event.target;
+    this.searchTerm = target.value;
+  }
+  render() {
+    if (!this.optionsData)
+      return;
+    const parsedOptionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : 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" }, 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) })), index.h("div", { class: "dropdown-options-list" }, parsedOptionsData.map((option) => {
+      return this.dropdownOption(option);
+    })))))));
+  }
+  get el() { return index.getElement(this); }
+};
+TttxSelectBox.style = tttxSelectBoxCss;
+
+exports.tttx_select_box = TttxSelectBox;

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],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["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]}]]],["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-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-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-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"elementSize":[32],"open":[64],"close":[64]},[[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"],"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]}]]],["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-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-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["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

@@ -10,6 +10,7 @@
     "./components/molecules/tttx-dialog-box/tttx-dialog-box.js",
     "./components/molecules/tttx-form/tttx-form.js",
     "./components/molecules/tttx-list/tttx-list.js",
+    "./components/molecules/tttx-select-box/tttx-select-box.js",
     "./components/molecules/tttx-sorter/tttx-sorter.js",
     "./components/molecules/tttx-toolbar/tttx-toolbar.js",
     "./components/molecules/tttx-tree-view/tttx-tree-view.js"

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

@@ -26,13 +26,15 @@ h3 {
 
 .dialog-box {
   background-color: #ffffff;
-  display: flex;
-  flex-direction: column;
   border: 1px solid #d5d5d5;
   border-radius: 4px;
   box-shadow: 0px 1px 5px #1111114d;
 }
 
+dialog::backdrop {
+  background-color: #75757580;
+}
+
 .dialog-box.small {
   width: 400px;
   min-height: 200px;

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

@@ -16,12 +16,26 @@ export class TttxDialogBox {
       this.elementSize = this.size;
     }
   }
+  async open() {
+    if (!this.dialog())
+      return;
+    this.dialog().showModal();
+  }
+  async close() {
+    if (!this.dialog())
+      return;
+    this.dialog().close();
+  }
   onCloseClickHandler() {
+    this.el.shadowRoot.querySelector('dialog').close();
     this.closeButtonClick.emit({ close: true });
   }
   onButtonClickHandler(index) {
     this.buttonClick.emit({ buttonNumber: index, buttonClicked: true });
   }
+  dialog() {
+    return this.el.shadowRoot.querySelector('dialog');
+  }
   renderHeader(header) {
     const title = header.title;
     const iconName = header.iconName;
@@ -64,7 +78,7 @@ export class TttxDialogBox {
     else {
       this._data = this.data;
     }
-    return (h("div", { class: `dialog-box ${this.elementSize}` }, h("div", { class: `dialog-box-padding dialog-box-header-box ${this._data.type || ''}` }, this.renderHeader(this._data.header)), h("div", { class: "dialog-box-padding dialog-box-body-box" }, this.renderContent(this._data.body)), h("div", { class: "dialog-box-padding dialog-box-footer-box" }, this.renderFooter(this._data.footer))));
+    return (h("dialog", { class: `dialog-box ${this.elementSize}` }, h("div", { class: `dialog-box-padding dialog-box-header-box ${this._data.type || ''}` }, this.renderHeader(this._data.header)), h("div", { class: "dialog-box-padding dialog-box-body-box" }, this.renderContent(this._data.body)), h("div", { class: "dialog-box-padding dialog-box-footer-box" }, this.renderFooter(this._data.footer))));
   }
   static get is() { return "tttx-dialog-box"; }
   static get encapsulation() { return "shadow"; }
@@ -160,6 +174,43 @@ export class TttxDialogBox {
         }
       }];
   }
+  static get methods() {
+    return {
+      "open": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "close": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
   static get listeners() {
     return [{
         "name": "resize",

package/dist/collection/components/molecules/tttx-dialog-box/tttx-dialog-box.stories.js

@@ -10,6 +10,7 @@ export default {
   },
 };
 const TttxDialogBoxStory = ({ data }) => `
+  <button onclick="openDialog()">Open</button>
   <tttx-dialog-box
     id='dialogBox'
   ></tttx-dialog-box>
@@ -17,6 +18,12 @@ const TttxDialogBoxStory = ({ data }) => `
     if(!dialogBox) {
       const dialogBox = document.getElementById('dialogBox');
     }
+    if(!openDialog) {
+      function openDialog() {
+        const dialogBox = document.getElementById('dialogBox');
+        dialogBox.open();
+      }
+    }
     dialogBox.data = ${JSON.stringify(data)};
   </script>
 `;
@@ -42,6 +49,7 @@ Default.args = {
   },
 };
 const TttxDialogBoxMobile = ({ data }) => `
+  <button onclick="openDialogMobile()">Open</button>
   <tttx-dialog-box
     id='dialogBoxMobile'
   ></tttx-dialog-box>
@@ -49,6 +57,12 @@ const TttxDialogBoxMobile = ({ data }) => `
     if(!dialogBoxMobile) {
       const dialogBoxMobile = document.getElementById('dialogBoxMobile');
     }
+    if(!openDialogMobile) {
+      function openDialogMobile() {
+        const dialogBox = document.getElementById('dialogBoxMobile');
+        dialogBox.open();
+      }
+    }
     dialogBoxMobile.data = ${JSON.stringify(data)};
     dialogBoxMobile.size = "mobile"
   </script>
@@ -75,6 +89,7 @@ Mobile.args = {
   },
 };
 const TttxDialogBoxSmall = ({ data }) => `
+  <button onclick="openDialogSmall()">Open</button>
   <tttx-dialog-box
     id='dialogBoxSmall'
   ></tttx-dialog-box>
@@ -82,6 +97,12 @@ const TttxDialogBoxSmall = ({ data }) => `
     if(!dialogBoxSmall) {
       const dialogBoxSmall = document.getElementById('dialogBoxSmall');
     }
+    if(!openDialogSmall) {
+      function openDialogSmall() {
+        const dialogBox = document.getElementById('dialogBoxSmall');
+        dialogBox.open();
+      }
+    }
     dialogBoxSmall.data = ${JSON.stringify(data)};
     dialogBoxSmall.size = "small"
   </script>
@@ -108,6 +129,7 @@ Small.args = {
   },
 };
 const TttxDialogBoxLarge = ({ data }) => `
+  <button onclick="openDialogLarge()">Open</button>
   <tttx-dialog-box
     id='dialogBoxLarge'
   ></tttx-dialog-box>
@@ -115,6 +137,12 @@ const TttxDialogBoxLarge = ({ data }) => `
     if(!dialogBoxLarge) {
       const dialogBoxLarge = document.getElementById('dialogBoxLarge');
     }
+    if(!openDialogLarge) {
+      function openDialogLarge() {
+        const dialogBox = document.getElementById('dialogBoxLarge');
+        dialogBox.open();
+      }
+    }
     dialogBoxLarge.data = ${JSON.stringify(data)};
     dialogBoxLarge.size = "large"
   </script>
@@ -141,6 +169,7 @@ Large.args = {
   },
 };
 const TttxDialogBoxWithoutCloseButton = ({ data }) => `
+  <button onclick="openDialogNoClose()">Open</button>
   <tttx-dialog-box
     id='dialogBoxNoClose'
   ></tttx-dialog-box>
@@ -148,6 +177,12 @@ const TttxDialogBoxWithoutCloseButton = ({ data }) => `
     if(!dialogBoxNoClose) {
       const dialogBoxNoClose = document.getElementById('dialogBoxNoClose');
     }
+    if(!openDialogNoClose) {
+      function openDialogNoClose() {
+        const dialogBox = document.getElementById('dialogBoxNoClose');
+        dialogBox.open();
+      }
+    }
     dialogBoxNoClose.data = ${JSON.stringify(data)};
   </script>
 `;
@@ -173,6 +208,7 @@ closeDisabled.args = {
   },
 };
 const TttxDialogBoxWithIcon = ({ data }) => `
+  <button onclick="openDialogIcon()">Open</button>
   <tttx-dialog-box
     id='dialogBoxIcon'
   ></tttx-dialog-box>
@@ -180,6 +216,12 @@ const TttxDialogBoxWithIcon = ({ data }) => `
     if(!dialogBoxIcon) {
       const dialogBoxIcon = document.getElementById('dialogBoxIcon');
     }
+    if(!openDialogIcon) {
+      function openDialogIcon() {
+        const dialogBox = document.getElementById('dialogBoxIcon');
+        dialogBox.open();
+      }
+    }
     dialogBoxIcon.data = ${JSON.stringify(data)};
   </script>
 `;
@@ -207,6 +249,7 @@ Icon.args = {
   },
 };
 const TttxDialogBoxInfo = ({ data }) => `
+  <button onclick="openDialogInfo()">Open</button>
   <tttx-dialog-box
     id='dialogBoxInfo'
   ></tttx-dialog-box>
@@ -214,6 +257,12 @@ const TttxDialogBoxInfo = ({ data }) => `
     if(!dialogBoxInfo) {
       const dialogBoxInfo = document.getElementById('dialogBoxInfo');
     }
+    if(!openDialogInfo) {
+      function openDialogInfo() {
+        const dialogBox = document.getElementById('dialogBoxInfo');
+        dialogBox.open();
+      }
+    }
     dialogBoxInfo.data = ${JSON.stringify(data)};
   </script>
 `;
@@ -242,6 +291,7 @@ Info.args = {
   },
 };
 const TttxDialogBoxSuccess = ({ data }) => `
+  <button onclick="openDialogSuccess()">Open</button>
   <tttx-dialog-box
     id='dialogBoxSuccess'
   ></tttx-dialog-box>
@@ -249,6 +299,12 @@ const TttxDialogBoxSuccess = ({ data }) => `
     if(!dialogBoxSuccess) {
       const dialogBoxSuccess = document.getElementById('dialogBoxSuccess');
     }
+    if(!openDialogSuccess) {
+      function openDialogSuccess() {
+        const dialogBox = document.getElementById('dialogBoxSuccess');
+        dialogBox.open();
+      }
+    }
     dialogBoxSuccess.data = ${JSON.stringify(data)};
   </script>
 `;
@@ -277,6 +333,7 @@ Success.args = {
   },
 };
 const TttxDialogBoxWarning = ({ data }) => `
+  <button onclick="openDialogWarning()">Open</button>
   <tttx-dialog-box
     id='dialogBoxWarning'
   ></tttx-dialog-box>
@@ -284,6 +341,12 @@ const TttxDialogBoxWarning = ({ data }) => `
     if(!dialogBoxWarning) {
       const dialogBoxWarning = document.getElementById('dialogBoxWarning');
     }
+    if(!openDialogWarning) {
+      function openDialogWarning() {
+        const dialogBox = document.getElementById('dialogBoxWarning');
+        dialogBox.open();
+      }
+    }
     dialogBoxWarning.data = ${JSON.stringify(data)};
   </script>
 `;
@@ -312,6 +375,7 @@ Warning.args = {
   },
 };
 const TttxDialogBoxCritical = ({ data }) => `
+  <button onclick="openDialogCritical()">Open</button>
   <tttx-dialog-box
     id='dialogBoxCritical'
   ></tttx-dialog-box>
@@ -319,6 +383,12 @@ const TttxDialogBoxCritical = ({ data }) => `
     if(!dialogBoxCritical) {
       const dialogBoxCritical = document.getElementById('dialogBoxCritical');
     }
+    if(!openDialogCritical) {
+      function openDialogCritical() {
+        const dialogBox = document.getElementById('dialogBoxCritical');
+        dialogBox.open();
+      }
+    }
     dialogBoxCritical.data = ${JSON.stringify(data)};
   </script>
 `;
@@ -347,6 +417,7 @@ Critical.args = {
   },
 };
 const TttxDialogBoxHTML = ({ data }) => `
+  <button onclick="openDialogHTML()">Open</button>
   <tttx-dialog-box
     id='dialogBoxHTML'
   ></tttx-dialog-box>
@@ -354,6 +425,12 @@ const TttxDialogBoxHTML = ({ data }) => `
     if(!dialogBoxHTML) {
       const dialogBoxHTML = document.getElementById('dialogBoxHTML');
     }
+    if(!openDialogHTML) {
+      function openDialogHTML() {
+        const dialogBox = document.getElementById('dialogBoxHTML');
+        dialogBox.open();
+      }
+    }
     dialogBoxHTML.data = ${JSON.stringify(data)};
   </script>
 `;
@@ -379,7 +456,25 @@ CustomHTML.args = {
   },
 };
 const link = 'https://uat.3tplatform.com/U2FsdGVkX18l6CTkVQIEFERL%2FnhogHPK3H4e%2FKrELJcM6Jg2cFG6MDMRpJnhzg%2FnNx0cNFOn5IqC8PchiG%2BIded4%2B%2Foe2u%2BPeGnMmrhU38kPG8y2EHRrAXfHe24dNz0vZYauMC7I88j1SHCI%2F564ZkSDjIeqQJ2KBuVpNRFvNnyjfL0ENeiQqvPTCz%2ByCjexJ9bREgkeHDfvMplRI8CH92m%2B1rwWdoQbD09qb4w1wWiJE7MhLhBuXe6OeP1vNheORIeZObDC1KgAluvtbSDbGuSVGTkBgCZv2%2FD%2BIHbEMOQwjO7V7fHp0hNlb%2BPdc0Qg9RUOn%2BcVQiz4SEWBsRr1PF%2BXRIW736L8udcse%2FJYrkkq15ilKYhSwEmm7RdIxxgTTUyOanmYJBXONn0zbYDlRQ%3D%3D';
-export const OverflowingText = TttxDialogBoxStory.bind({});
+const TttxDialogBoxOverflow = ({ data }) => `
+  <button onclick="openDialogOverflow()">Open</button>
+  <tttx-dialog-box
+    id='dialogBoxOverflow'
+  ></tttx-dialog-box>
+  <script>
+    if(!dialogBoxOverflow) {
+      const dialogBoxOverflow = document.getElementById('dialogBoxOverflow');
+    }
+    if(!openDialogOverflow) {
+      function openDialogOverflow() {
+        const dialogBox = document.getElementById('dialogBoxOverflow');
+        dialogBox.open();
+      }
+    }
+    dialogBoxOverflow.data = ${JSON.stringify(data)};
+  </script>
+`;
+export const OverflowingText = TttxDialogBoxOverflow.bind({});
 OverflowingText.args = {
   data: {
     header: {

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

@@ -0,0 +1,89 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+:host {
+  display: flex;
+  gap: 4px;
+}
+
+:host(.inline) .label {
+  padding-top: 8px;
+}
+
+:host(.block) {
+  flex-direction: column;
+}
+
+.dropdown-container {
+  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: 1px solid #d5d5d5;
+  border-radius: 4px;
+}
+
+.dropdown-selector {
+  align-items: center;
+  gap: 8px;
+  padding: 8px 8px 8px 16px;
+  cursor: pointer;
+}
+
+.dropdown-selector-chevron {
+  margin-left: auto;
+  height: 24px;
+}
+
+.dropdown-body {
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 1px 5px #1111114D;
+  padding-bottom: 8px;
+}
+.dropdown-body.search {
+  max-height: 410px;
+}
+
+.dropdown-options-list {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: 368px;
+}
+
+.dropdown-option {
+  padding: 8px 8px 8px 16px;
+  cursor: pointer;
+}
+.dropdown-option:hover {
+  background-color: #1111110D;
+}
+.dropdown-option:active, .dropdown-option.selected {
+  background-color: #ebfbfc;
+}
+
+.placeholder {
+  color: #9e9e9e;
+}
+
+.searchbox {
+  padding: 8px 16px 0 16px;
+}
+.searchbox tttx-standalone-input {
+  margin-top: -4px;
+}
+
+.hidden {
+  display: none;
+}