@3t-transform/threeteeui 0.1.67 → 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-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["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-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-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["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/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/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-tag",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["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-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-tag",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["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-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-68680d65",[[1,"tttx-tag",{text:[1],color:[1]}]]],["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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.1.67",
+    "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}