@3t-transform/threeteeui 0.1.66 → 0.1.68

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],"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"],"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],"setAllCheckboxes":[64]}]]],["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);
+  return index.bootstrapLazy([["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"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"],"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],"setAllCheckboxes":[64]}]]],["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-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-tag.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-43af0e62.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 TttxTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.text = undefined;
+    this.color = '#d5d5d5';
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "tag", style: { 'background-color': this.color } }, index.h("span", null, this.text))));
+  }
+};
+TttxTag.style = tttxTagCss;
+
+exports.tttx_tag = TttxTag;

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

@@ -4,15 +4,30 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-43af0e62.js');
 
-const tttxToolbarCss = ":host{height:36px;display:flex;padding:8px 0;gap:8px}:host(.bordered){border-bottom:1px solid #d5d5d5}::slotted([slot=before]){display:flex;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:center;flex:1 1 0px;gap:8px}";
+const tttxToolbarCss = ".container{display:flex;align-items:flex-end;row-gap:8px;padding:8px 0;flex-wrap:wrap}.container.bordered{border-bottom:1px solid #d5d5d5}.desktop ::slotted([slot=before]){flex:1 1 0px}.desktop ::slotted([slot=center]){flex:0 1 fit-content}.desktop ::slotted([slot=after]){flex:1 1 0px}::slotted([slot=before]){display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:flex-end;flex-wrap:wrap;gap:8px}";
 
 const TttxToolbar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.border = true;
+    this.viewSize = undefined;
+  }
+  handleResize() {
+    this.setViewSize();
+  }
+  async componentWillLoad() {
+    this.setViewSize();
+  }
+  setViewSize() {
+    if (window.innerWidth < 698) {
+      this.viewSize = 'mobile';
+    }
+    else {
+      this.viewSize = 'desktop';
+    }
   }
   render() {
-    return (index.h(index.Host, { class: this.border ? 'bordered' : '' }, index.h("slot", { name: 'before' }), index.h("slot", { name: 'center' }), index.h("slot", { name: 'after' })));
+    return (index.h(index.Host, null, index.h("div", { class: `container ${this.border ? 'bordered' : ''} ${this.viewSize}` }, index.h("slot", { name: 'before' }), index.h("slot", { name: 'center' }), index.h("slot", { name: 'after' }))));
   }
 };
 TttxToolbar.style = tttxToolbarCss;

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],"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"],"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],"setAllCheckboxes":[64]}]]],["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);
+  return index.bootstrapLazy([["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"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"],"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],"setAllCheckboxes":[64]}]]],["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-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

@@ -7,6 +7,7 @@
     "./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",

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

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

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

@@ -0,0 +1,62 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Host, h } from '@stencil/core';
+export class TttxTag {
+  constructor() {
+    this.text = undefined;
+    this.color = '#d5d5d5';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "tag", style: { 'background-color': this.color } }, h("span", null, this.text))));
+  }
+  static get is() { return "tttx-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-tag.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-tag.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text",
+        "reflect": false
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'#d5d5d5'"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,39 @@
+export default {
+  title: 'Atoms/Tag',
+  component: 'tttx-tag',
+  argTypes: {
+    text: {
+      control: { type: 'text' },
+      default: 'tag',
+    },
+    color: {
+      control: { type: 'text' },
+      default: '#d5d5d5',
+    }
+  },
+};
+const Template = ({ text, color }) => {
+  return `<tttx-tag text="${text}" color="${color}" ></tttx-tag>`;
+};
+export const tag = Template.bind({});
+tag.args = {
+  text: 'tag',
+  color: '#d5d5d5',
+};
+const tagTemplates = () => `
+    <h2>Default</h2>
+    <tttx-tag text="Default" color="#d5d5d5"></tttx-tag>
+    <hr />
+    <h2>Critical</h2>
+    <tttx-tag text="Critical" color="#f2bebe"></tttx-tag>
+    <hr />
+    <h2>Warning</h2>
+    <tttx-tag text="Warning" color="#f9e1be"></tttx-tag>
+    <hr />
+    <h2>Success</h2>
+    <tttx-tag text="Success" color="#e4ebc9"></tttx-tag>
+    <hr />
+    <h2>Info</h2>
+    <tttx-tag text="Info" color="#c2daee"></tttx-tag>
+`;
+export const tags = tagTemplates.bind({});

package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js

@@ -108,9 +108,9 @@ WorkerList.args = {
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span style="font-size: 14px; background-color: #EABFFF; border-radius: 20px; padding: 4px 8px; display: inline-flex; align-items: center;">Driller</span>
-                    <span style="font-size: 14px; background-color: #9BE8D5; border-radius: 20px; padding: 4px 8px; display: inline-flex; align-items: center;">Offshore</span>
-                    <span style="font-size: 14px; background-color: #B9CCF5; border-radius: 20px; padding: 4px 8px; display: inline-flex; align-items: center;">3t Transform</span>
+                    <tttx-tag text="Driller" color="#EABFFF"></tttx-tag>
+                    <tttx-tag text="Offshore" color="#9BE8D5"></tttx-tag>
+                    <tttx-tag text="3t Transform" color="#B9CCF5"></tttx-tag>
                 </span>
             </li>
             <li>
@@ -135,7 +135,7 @@ WorkerList.args = {
 <div style="display: flex; flex-direction: row; align-items: center; gap: 8px;">
     <span><tttx-icon icon="check_circle" color="green" /></span> 
     Qualification row 
-    <span style="font-size: 14px; background-color: #D5D5D5; border-radius: 20px; padding: 4px 8px; display: inline-flex; align-items: center;">Vantage</span>
+    <tttx-tag text="Vantage" color="#D5D5D5"></tttx-tag>
     <span style="color: #757575;">Awarded:</span> <span style="color: #212121;">10 Jan 2022</span>
     <span style="color: #757575;">Expiry:</span> <span style="color: #212121;">10 Jan 2023</span>
 </div>

package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.css

@@ -1,33 +1,43 @@
-:host {
-  height: 36px;
+.container {
   display: flex;
+  align-items: flex-end;
+  row-gap: 8px;
   padding: 8px 0;
-  gap: 8px;
+  flex-wrap: wrap;
 }
-
-:host(.bordered) {
+.container.bordered {
   border-bottom: 1px solid #d5d5d5;
 }
 
+.desktop ::slotted([slot=before]) {
+  flex: 1 1 0px;
+}
+.desktop ::slotted([slot=center]) {
+  flex: 0 1 fit-content;
+}
+.desktop ::slotted([slot=after]) {
+  flex: 1 1 0px;
+}
+
 ::slotted([slot=before]) {
   display: flex;
-  align-items: center;
-  flex: 1 1 0px;
+  align-items: flex-end;
+  flex-wrap: wrap;
   gap: 8px;
 }
 
 ::slotted([slot=center]) {
   display: flex;
   justify-content: center;
-  align-items: center;
-  flex: 1 1 0px;
+  align-items: flex-end;
+  flex-wrap: wrap;
   gap: 8px;
 }
 
 ::slotted([slot=after]) {
   display: flex;
   justify-content: end;
-  align-items: center;
-  flex: 1 1 0px;
+  align-items: flex-end;
+  flex-wrap: wrap;
   gap: 8px;
 }

package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.js

@@ -3,9 +3,24 @@ import { h, Host } from '@stencil/core';
 export class TttxToolbar {
   constructor() {
     this.border = true;
+    this.viewSize = undefined;
+  }
+  handleResize() {
+    this.setViewSize();
+  }
+  async componentWillLoad() {
+    this.setViewSize();
+  }
+  setViewSize() {
+    if (window.innerWidth < 698) {
+      this.viewSize = 'mobile';
+    }
+    else {
+      this.viewSize = 'desktop';
+    }
   }
   render() {
-    return (h(Host, { class: this.border ? 'bordered' : '' }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' })));
+    return (h(Host, null, h("div", { class: `container ${this.border ? 'bordered' : ''} ${this.viewSize}` }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' }))));
   }
   static get is() { return "tttx-toolbar"; }
   static get encapsulation() { return "shadow"; }
@@ -41,4 +56,18 @@ export class TttxToolbar {
       }
     };
   }
+  static get states() {
+    return {
+      "viewSize": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }

package/dist/collection/components/molecules/tttx-toolbar/tttx-toolbar.stories.js

@@ -9,12 +9,114 @@ export default {
 };
 const Default = ({ border }) => `
     <tttx-toolbar border="${border ? 'true' : 'false'}">
-      <span slot="before"><tttx-button design="primary">Before</tttx-button></span>
-      <span slot="center"><div style="position: relative; top: -4px;"><tttx-standalone-input placeholder="center" inline required showerrorbubble="false" inputicon="search" /></div></span>
-      <span slot="after"><tttx-keyvalue-block horizontal keyvalues='{"Position":"after"}' /></span>
+      <span slot="before"><tttx-button design="primary">Before</tttx-button><tttx-button design="primary">Button Two</tttx-button></span>
+      <span slot="center"><tttx-button design="primary">Center</tttx-button></span>
+      <span slot="after"><tttx-button design="primary">After</tttx-button></span>
     </tttx-toolbar>
 `;
-export const BasicStringList = Default.bind({});
-BasicStringList.args = {
+export const DefaultToolbar = Default.bind({});
+DefaultToolbar.args = {
+  border: true
+};
+const TallElements = ({ border }) => `
+  <tttx-toolbar border="${border ? 'true' : 'false'}">
+    <span slot="before"><tttx-button design="primary">Before</tttx-button><div style="position: relative; top: 18px;"><tttx-standalone-input placeholder="before" label="search" required showerrorbubble="false" inputicon="search" /></div></span>
+    <span slot="center"><div style="position: relative; top: 17px;"><tttx-standalone-input placeholder="center" inline required showerrorbubble="false" inputicon="search" /></div></span>
+    <span slot="after"><div style="position: relative; top: 22px;"><tttx-keyvalue-block horizontal keyvalues='{"Position":"after"}' /></div></span>
+  </tttx-toolbar>
+`;
+export const TallElementsToolbar = TallElements.bind({});
+TallElementsToolbar.args = {
+  border: true
+};
+const WrapElements = ({ border }) => `
+  <tttx-toolbar border="${border ? 'true' : 'false'}">
+    <span slot="before"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button design="primary">Button One</tttx-button><tttx-button design="primary">Button Two</tttx-button><tttx-button design="primary">Button Three</tttx-button></div></span>
+    <span slot="center"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button design="primary">Button One</tttx-button><tttx-button design="primary">Button Two</tttx-button><tttx-button design="primary">Button Three</tttx-button></div></span>
+    <span slot="after"><div style="width: 125px;display: flex;gap: 8px;flex-wrap: wrap;"><tttx-button design="primary">Button One</tttx-button><tttx-button design="primary">Button Two</tttx-button><tttx-button design="primary">Button Three</tttx-button></div></span>
+  </tttx-toolbar>
+`;
+export const WrapElementsToolbar = WrapElements.bind({});
+WrapElementsToolbar.args = {
+  border: true
+};
+const LeftToolbar = ({ border }) => `
+  <tttx-toolbar border="${border ? 'true' : 'false'}">
+    <span slot="before"><tttx-button design="primary">Before</tttx-button><tttx-button design="primary">Button Two</tttx-button></span>
+  </tttx-toolbar>
+`;
+export const LeftToolbarOnly = LeftToolbar.bind({});
+LeftToolbarOnly.args = {
+  border: true
+};
+const CenterToolbar = ({ border }) => `
+  <tttx-toolbar border="${border ? 'true' : 'false'}">
+    <span slot='before'></span>
+    <span slot="center"><tttx-button design="primary">Before</tttx-button><tttx-button design="primary">Button Two</tttx-button></span>
+    <span slot='after'></span>
+    </tttx-toolbar>
+`;
+export const CenterToolbarOnly = CenterToolbar.bind({});
+CenterToolbarOnly.args = {
+  border: true
+};
+const TwoColumn = ({ border }) => `
+  <tttx-toolbar border="${border ? 'true' : 'false'}">
+    <span slot="before"><tttx-button design="primary">Before</tttx-button><tttx-button design="primary">Button Two</tttx-button></span>
+    <span slot='after'><tttx-button design="primary">After</tttx-button><tttx-button design="primary">Button Two</tttx-button></span>
+  </tttx-toolbar>
+`;
+export const TwoColumnToolbar = TwoColumn.bind({});
+TwoColumnToolbar.args = {
+  border: true
+};
+const selectOptions = JSON.stringify([
+  { value: 'Bonnie', label: 'Steuber' },
+  { value: 'Priscilla', label: 'Lowe' },
+  { value: 'Terence', label: 'Hyatt' },
+  { value: 'Ruben', label: 'Toy' },
+  { value: 'Rhiannon', label: 'Hills' },
+  { value: 'Trent', label: 'Mueller' },
+  { value: 'Penelope', label: 'Mann' },
+  { value: 'Oswaldo', label: 'Klocko' },
+  { value: 'Jorge', label: 'Lockman' },
+  { value: 'Conner', label: 'Feeney' },
+  { value: 'Dorian', label: 'Fay' },
+  { value: 'Estrella', label: 'Predovic' },
+  { value: 'Heidi', label: 'McClure' },
+  { value: 'Ronaldo', label: 'Mann' },
+]);
+const LongItems = ({ border }) => `
+  <tttx-toolbar border="${border ? 'true' : 'false'}">
+    <span slot="before">
+      <div style="width: 350px">
+        <tttx-select-box
+          id="htmlSelectBox"
+          options-data='${selectOptions}'
+          placeholder='Select a name'
+          label=''
+          inline='true'
+        ></tttx-select-box>
+      </div>
+      <tttx-button>
+        This is a very long button
+      </tttx-button>
+      <tttx-button>
+        This is a very long button
+      </tttx-button>
+      <tttx-button>
+        This is a very long button
+      </tttx-button>
+    </span>
+    <span slot="center">
+      <tttx-button>
+        This is a very long button in the middle
+      </tttx-button>
+    </span>
+    <span slot="after"></span>
+  </tttx-toolbar>
+`;
+export const LongItemsToolbar = LongItems.bind({});
+LongItemsToolbar.args = {
   border: true
 };

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ export { TttxQrCode as TttxQrcode } from '../types/components/atoms/tttx-qrcode/
 export { TttxSelectBox as TttxSelectBox } from '../types/components/molecules/tttx-select-box/tttx-select-box';
 export { TttxSorter as TttxSorter } from '../types/components/molecules/tttx-sorter/tttx-sorter';
 export { TttxInput as TttxStandaloneInput } from '../types/components/molecules/tttx-standalone-input/tttx-standalone-input';
+export { TttxTag as TttxTag } from '../types/components/atoms/tttx-tag/tttx-tag';
 export { TttxToolbar as TttxToolbar } from '../types/components/molecules/tttx-toolbar/tttx-toolbar';
 export { TttxTreeView as TttxTreeView } from '../types/components/molecules/tttx-tree-view/tttx-tree-view';
 

package/dist/components/index.js

@@ -11,5 +11,6 @@ export { TttxQrcode, defineCustomElement as defineCustomElementTttxQrcode } from
 export { TttxSelectBox, defineCustomElement as defineCustomElementTttxSelectBox } from './tttx-select-box.js';
 export { TttxSorter, defineCustomElement as defineCustomElementTttxSorter } from './tttx-sorter.js';
 export { TttxStandaloneInput, defineCustomElement as defineCustomElementTttxStandaloneInput } from './tttx-standalone-input.js';
+export { TttxTag, defineCustomElement as defineCustomElementTttxTag } from './tttx-tag.js';
 export { TttxToolbar, defineCustomElement as defineCustomElementTttxToolbar } from './tttx-toolbar.js';
 export { TttxTreeView, defineCustomElement as defineCustomElementTttxTreeView } from './tttx-tree-view.js';

package/dist/components/tttx-tag.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxTag extends Components.TttxTag, HTMLElement {}
+export const TttxTag: {
+  prototype: TttxTag;
+  new (): TttxTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/tttx-tag.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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 TttxTag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.text = undefined;
+    this.color = '#d5d5d5';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "tag", style: { 'background-color': this.color } }, h("span", null, this.text))));
+  }
+  static get style() { return tttxTagCss; }
+}, [1, "tttx-tag", {
+    "text": [1],
+    "color": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-tag"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-tag":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxTag$1);
+      }
+      break;
+  } });
+}
+
+const TttxTag = TttxTag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxTag, defineCustomElement };

package/dist/components/tttx-toolbar.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const tttxToolbarCss = ":host{height:36px;display:flex;padding:8px 0;gap:8px}:host(.bordered){border-bottom:1px solid #d5d5d5}::slotted([slot=before]){display:flex;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:center;flex:1 1 0px;gap:8px}";
+const tttxToolbarCss = ".container{display:flex;align-items:flex-end;row-gap:8px;padding:8px 0;flex-wrap:wrap}.container.bordered{border-bottom:1px solid #d5d5d5}.desktop ::slotted([slot=before]){flex:1 1 0px}.desktop ::slotted([slot=center]){flex:0 1 fit-content}.desktop ::slotted([slot=after]){flex:1 1 0px}::slotted([slot=before]){display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:flex-end;flex-wrap:wrap;gap:8px}";
 
 const TttxToolbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -8,14 +8,30 @@ const TttxToolbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__registerHost();
     this.__attachShadow();
     this.border = true;
+    this.viewSize = undefined;
+  }
+  handleResize() {
+    this.setViewSize();
+  }
+  async componentWillLoad() {
+    this.setViewSize();
+  }
+  setViewSize() {
+    if (window.innerWidth < 698) {
+      this.viewSize = 'mobile';
+    }
+    else {
+      this.viewSize = 'desktop';
+    }
   }
   render() {
-    return (h(Host, { class: this.border ? 'bordered' : '' }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' })));
+    return (h(Host, null, h("div", { class: `container ${this.border ? 'bordered' : ''} ${this.viewSize}` }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' }))));
   }
   static get style() { return tttxToolbarCss; }
 }, [1, "tttx-toolbar", {
-    "border": [4]
-  }]);
+    "border": [4],
+    "viewSize": [32]
+  }, [[9, "resize", "handleResize"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32],"setAllCheckboxes":[64]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32],"setAllCheckboxes":[64]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
   });
 };
 

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

@@ -0,0 +1,17 @@
+import { r as registerInstance, h, H as Host } from './index-1c711ead.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 TttxTag = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.text = undefined;
+    this.color = '#d5d5d5';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "tag", style: { 'background-color': this.color } }, h("span", null, this.text))));
+  }
+};
+TttxTag.style = tttxTagCss;
+
+export { TttxTag as tttx_tag };

package/dist/esm/tttx-toolbar.entry.js

@@ -1,14 +1,29 @@
 import { r as registerInstance, h, H as Host } from './index-1c711ead.js';
 
-const tttxToolbarCss = ":host{height:36px;display:flex;padding:8px 0;gap:8px}:host(.bordered){border-bottom:1px solid #d5d5d5}::slotted([slot=before]){display:flex;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:center;flex:1 1 0px;gap:8px}";
+const tttxToolbarCss = ".container{display:flex;align-items:flex-end;row-gap:8px;padding:8px 0;flex-wrap:wrap}.container.bordered{border-bottom:1px solid #d5d5d5}.desktop ::slotted([slot=before]){flex:1 1 0px}.desktop ::slotted([slot=center]){flex:0 1 fit-content}.desktop ::slotted([slot=after]){flex:1 1 0px}::slotted([slot=before]){display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:flex-end;flex-wrap:wrap;gap:8px}";
 
 const TttxToolbar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.border = true;
+    this.viewSize = undefined;
+  }
+  handleResize() {
+    this.setViewSize();
+  }
+  async componentWillLoad() {
+    this.setViewSize();
+  }
+  setViewSize() {
+    if (window.innerWidth < 698) {
+      this.viewSize = 'mobile';
+    }
+    else {
+      this.viewSize = 'desktop';
+    }
   }
   render() {
-    return (h(Host, { class: this.border ? 'bordered' : '' }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' })));
+    return (h(Host, null, h("div", { class: `container ${this.border ? 'bordered' : ''} ${this.viewSize}` }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' }))));
   }
 };
 TttxToolbar.style = tttxToolbarCss;

package/dist/esm/tttx.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32],"setAllCheckboxes":[64]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32],"setAllCheckboxes":[64]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
 });

package/dist/tttx/p-68680d65.entry.js

@@ -0,0 +1 @@
+import{r,h as o,H as e}from"./p-c544551b.js";const n=class{constructor(o){r(this,o),this.text=void 0,this.color="#d5d5d5"}render(){return o(e,null,o("div",{class:"tag",style:{"background-color":this.color}},o("span",null,this.text)))}};n.style='.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}';export{n as tttx_tag}

package/dist/tttx/p-6a40d3cc.entry.js

@@ -0,0 +1 @@
+import{r as e,h as t,H as s}from"./p-c544551b.js";const o=class{constructor(t){e(this,t),this.border=!0,this.viewSize=void 0}handleResize(){this.setViewSize()}async componentWillLoad(){this.setViewSize()}setViewSize(){this.viewSize=window.innerWidth<698?"mobile":"desktop"}render(){return t(s,null,t("div",{class:`container ${this.border?"bordered":""} ${this.viewSize}`},t("slot",{name:"before"}),t("slot",{name:"center"}),t("slot",{name:"after"})))}};o.style=".container{display:flex;align-items:flex-end;row-gap:8px;padding:8px 0;flex-wrap:wrap}.container.bordered{border-bottom:1px solid #d5d5d5}.desktop ::slotted([slot=before]){flex:1 1 0px}.desktop ::slotted([slot=center]){flex:0 1 fit-content}.desktop ::slotted([slot=after]){flex:1 1 0px}::slotted([slot=before]){display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:flex-end;flex-wrap:wrap;gap:8px}";export{o as tttx_toolbar}

package/dist/tttx/tttx.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-c544551b.js";export{s as setNonce}from"./p-c544551b.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-64479f02",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-ff38d9f3",[[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"]]]]],["p-2f066b53",[[1,"tttx-tree-view",{data:[1040],treeData:[32]}]]],["p-a658e1ac",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["p-40c66a2e",[[1,"tttx-list",{data:[1025],name:[1],_data:[32],setAllCheckboxes:[64]}]]],["p-225e6fa6",[[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["p-57621fdb",[[1,"tttx-form",{formschema:[1032],data:[1032],submit:[64]}]]],["p-f80ab1d8",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-3467c62e",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-cff962bf",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-4879a614",[[1,"tttx-toolbar",{border:[4]}]]],["p-53fa8b4d",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-e6bbdae3",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-3c7e11d9",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
+import{p as e,b as t}from"./p-c544551b.js";export{s as setNonce}from"./p-c544551b.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-64479f02",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-ff38d9f3",[[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"]]]]],["p-2f066b53",[[1,"tttx-tree-view",{data:[1040],treeData:[32]}]]],["p-a658e1ac",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["p-40c66a2e",[[1,"tttx-list",{data:[1025],name:[1],_data:[32],setAllCheckboxes:[64]}]]],["p-225e6fa6",[[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["p-57621fdb",[[1,"tttx-form",{formschema:[1032],data:[1032],submit:[64]}]]],["p-f80ab1d8",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-3467c62e",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-cff962bf",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-68680d65",[[1,"tttx-tag",{text:[1],color:[1]}]]],["p-6a40d3cc",[[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-53fa8b4d",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-e6bbdae3",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-3c7e11d9",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));

package/dist/types/components/atoms/tttx-tag/tttx-tag.d.ts

@@ -0,0 +1,5 @@
+export declare class TttxTag {
+  text: string;
+  color: string;
+  render(): any;
+}

package/dist/types/components/atoms/tttx-tag/tttx-tag.stories.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    text: {
+      control: {
+        type: string;
+      };
+      default: string;
+    };
+    color: {
+      control: {
+        type: string;
+      };
+      default: string;
+    };
+  };
+};
+export default _default;
+export declare const tag: any;
+export declare const tags: any;

package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts

@@ -1,4 +1,8 @@
 export declare class TttxToolbar {
   border: boolean;
+  viewSize: 'desktop' | 'mobile';
+  handleResize(): void;
+  componentWillLoad(): Promise<void>;
+  setViewSize(): void;
   render(): any;
 }

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

@@ -10,4 +10,10 @@ declare const _default: {
   };
 };
 export default _default;
-export declare const BasicStringList: any;
+export declare const DefaultToolbar: any;
+export declare const TallElementsToolbar: any;
+export declare const WrapElementsToolbar: any;
+export declare const LeftToolbarOnly: any;
+export declare const CenterToolbarOnly: any;
+export declare const TwoColumnToolbar: any;
+export declare const LongItemsToolbar: any;

package/dist/types/components.d.ts

@@ -120,6 +120,10 @@ export namespace Components {
         "type": string;
         "value": string | number;
     }
+    interface TttxTag {
+        "color": string;
+        "text": string;
+    }
     interface TttxToolbar {
         "border": boolean;
     }
@@ -232,6 +236,12 @@ declare global {
         prototype: HTMLTttxStandaloneInputElement;
         new (): HTMLTttxStandaloneInputElement;
     };
+    interface HTMLTttxTagElement extends Components.TttxTag, HTMLStencilElement {
+    }
+    var HTMLTttxTagElement: {
+        prototype: HTMLTttxTagElement;
+        new (): HTMLTttxTagElement;
+    };
     interface HTMLTttxToolbarElement extends Components.TttxToolbar, HTMLStencilElement {
     }
     var HTMLTttxToolbarElement: {
@@ -257,6 +267,7 @@ declare global {
         "tttx-select-box": HTMLTttxSelectBoxElement;
         "tttx-sorter": HTMLTttxSorterElement;
         "tttx-standalone-input": HTMLTttxStandaloneInputElement;
+        "tttx-tag": HTMLTttxTagElement;
         "tttx-toolbar": HTMLTttxToolbarElement;
         "tttx-tree-view": HTMLTttxTreeViewElement;
     }
@@ -386,6 +397,10 @@ declare namespace LocalJSX {
         "type"?: string;
         "value"?: string | number;
     }
+    interface TttxTag {
+        "color"?: string;
+        "text"?: string;
+    }
     interface TttxToolbar {
         "border"?: boolean;
     }
@@ -406,6 +421,7 @@ declare namespace LocalJSX {
         "tttx-select-box": TttxSelectBox;
         "tttx-sorter": TttxSorter;
         "tttx-standalone-input": TttxStandaloneInput;
+        "tttx-tag": TttxTag;
         "tttx-toolbar": TttxToolbar;
         "tttx-tree-view": TttxTreeView;
     }
@@ -426,6 +442,7 @@ declare module "@stencil/core" {
             "tttx-select-box": LocalJSX.TttxSelectBox & JSXBase.HTMLAttributes<HTMLTttxSelectBoxElement>;
             "tttx-sorter": LocalJSX.TttxSorter & JSXBase.HTMLAttributes<HTMLTttxSorterElement>;
             "tttx-standalone-input": LocalJSX.TttxStandaloneInput & JSXBase.HTMLAttributes<HTMLTttxStandaloneInputElement>;
+            "tttx-tag": LocalJSX.TttxTag & JSXBase.HTMLAttributes<HTMLTttxTagElement>;
             "tttx-toolbar": LocalJSX.TttxToolbar & JSXBase.HTMLAttributes<HTMLTttxToolbarElement>;
             "tttx-tree-view": LocalJSX.TttxTreeView & JSXBase.HTMLAttributes<HTMLTttxTreeViewElement>;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.1.66",
+    "version": "0.1.68",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",

package/dist/tttx/p-4879a614.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t,H as s}from"./p-c544551b.js";const o=class{constructor(t){e(this,t),this.border=!0}render(){return t(s,{class:this.border?"bordered":""},t("slot",{name:"before"}),t("slot",{name:"center"}),t("slot",{name:"after"}))}};o.style=":host{height:36px;display:flex;padding:8px 0;gap:8px}:host(.bordered){border-bottom:1px solid #d5d5d5}::slotted([slot=before]){display:flex;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=center]){display:flex;justify-content:center;align-items:center;flex:1 1 0px;gap:8px}::slotted([slot=after]){display:flex;justify-content:end;align-items:center;flex:1 1 0px;gap:8px}";export{o as tttx_toolbar}