@3t-transform/threeteeui 0.2.71 → 0.2.73

package/dist/esm/tttx-dialog-box.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './i
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-97a33389.js';
 import './_commonjsHelpers-9943807e.js';
 
-const tttxDialogBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}dialog::backdrop{background-color:#75757580}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.dialog-box-clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.dialog-box-padding{padding:8px 16px}.dialog-box-align-right{margin-left:auto;display:flex}.dialog-box-header-box{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;height:36px}.dialog-box-header{display:flex;align-items:center;width:100%}.dialog-box-title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.dialog-box-icon{padding-right:8px;width:24px;height:24px}.dialog-box-icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.dialog-box-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.dialog-box-body{overflow:hidden;text-overflow:ellipsis}.dialog-box-body-box{padding:16px}.dialog-box-footer-box{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}.dialog-box-footer{display:flex;align-items:center;width:100%}.dialog-box-spacing-button{margin-right:8px}.dialog-box-header-box.info{border-bottom:1px solid #1479c6}.dialog-box-header-box.success{border-bottom:1px solid #a2bb31}.dialog-box-header-box.warning{border-bottom:1px solid #f59500}.dialog-box-header-box.critical{border-bottom:1px solid #dc0000}";
+const tttxDialogBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.dialog-box-clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.dialog-box-padding{padding:8px 16px}.dialog-box-align-right{margin-left:auto;display:flex}.dialog-box-header-box{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;height:36px}.dialog-box-header{display:flex;align-items:center;width:100%}.dialog-box-title{font-size:18;font-weight:500;font-family:\"Roboto\", serif}.dialog-box-icon{padding-right:8px;width:24px;height:24px}.dialog-box-icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.dialog-box-content{font-size:16;font-weight:400;font-family:\"Roboto\", serif}.dialog-box-body{text-overflow:ellipsis}.dialog-box-body-box{padding:16px}.dialog-box-footer-box{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}.dialog-box-footer{display:flex;align-items:center;width:100%}.dialog-box-spacing-button{margin-right:8px}.dialog-box-header-box.info{border-bottom:1px solid #1479c6}.dialog-box-header-box.success{border-bottom:1px solid #a2bb31}.dialog-box-header-box.warning{border-bottom:1px solid #f59500}.dialog-box-header-box.critical{border-bottom:1px solid #dc0000}";
 
 const TttxDialogBox = class {
   constructor(hostRef) {
@@ -12,6 +12,7 @@ const TttxDialogBox = class {
     this.data = undefined;
     this.size = 'regular';
     this.open = false;
+    this.allowOverflow = false;
     this.elementSize = undefined;
   }
   handleResize() {
@@ -54,10 +55,10 @@ const TttxDialogBox = class {
   renderContent(content) {
     if (content.isCustomHtml) {
       const cleanHTML = purify.sanitize(content.customHtml, domSanitiserOptions);
-      return (h("div", { class: "dialog-box-body" }, h("div", { innerHTML: cleanHTML })));
+      return (h("div", { class: `dialog-box-body ${!this.allowOverflow ? 'overflow-hidden' : ''}` }, h("div", { innerHTML: cleanHTML })));
     }
     else {
-      return (h("div", { class: "dialog-box-body" }, h("span", { class: "dialog-box-content" }, content.contentText)));
+      return (h("div", { class: `dialog-box-body ${!this.allowOverflow ? 'overflow-hidden' : ''}` }, h("span", { class: "dialog-box-content" }, content.contentText)));
     }
   }
   renderFooter(footer) {
@@ -85,7 +86,7 @@ const TttxDialogBox = class {
     else {
       this._data = this.data;
     }
-    return (h("dialog", { class: `dialog-box ${this.elementSize}` }, h("div", { class: "contents" }, h("div", { class: `dialog-box-padding dialog-box-header-box ${this._data.type || ''}` }, this.renderHeader(this._data.header)), h("div", { class: "dialog-box-padding dialog-box-body-box" }, this.renderContent(this._data.body)), h("div", { class: "dialog-box-padding dialog-box-footer-box" }, this.renderFooter(this._data.footer)))));
+    return (h("dialog", { class: `dialog-box ${this.allowOverflow ? 'overflow-visible' : ''} ${this.elementSize}` }, h("div", { class: "contents" }, h("div", { class: `dialog-box-padding dialog-box-header-box ${this._data.type || ''}` }, this.renderHeader(this._data.header)), h("div", { class: "dialog-box-padding dialog-box-body-box" }, this.renderContent(this._data.body)), h("div", { class: "dialog-box-padding dialog-box-footer-box" }, this.renderFooter(this._data.footer)))));
   }
   get el() { return getElement(this); }
 };

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-97a33389.js';
 import './_commonjsHelpers-9943807e.js';
 
-const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-body{display:flex;position:fixed;z-index:1000;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
+const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
 
 const TttxSelectBox = class {
   constructor(hostRef) {
@@ -34,11 +34,10 @@ const TttxSelectBox = class {
     this.open = false;
     this.toggleOpen.emit(false);
   }
-  onDropdownClicked(event) {
+  onDropdownClicked() {
     this.open = !this.open;
     this.searchTerm = '';
     this.toggleOpen.emit(this.open);
-    this.dropDownWidth = event.target.offsetWidth;
   }
   onItemSelected(option) {
     this.selectedItem = option;
@@ -72,7 +71,7 @@ const TttxSelectBox = class {
       return;
     const parsedOptionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
     const chevronIcon = this.open ? 'expand_less' : 'expand_more';
-    return (h(Host, { class: this.inline ? 'inline' : 'block' }, this.label && h("div", { class: "label" }, this.label), h("div", { tabindex: "0", class: "dropdown-container" }, h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" }))), this.open && (h("div", { class: "dropdown-body", style: { 'width': `${this.dropDownWidth}px` } }, this.searchEnabled &&
+    return (h(Host, { class: this.inline ? 'inline' : 'block' }, this.label && h("div", { class: "label" }, this.label), h("div", { tabindex: "0", class: "dropdown-container" }, h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" }))), this.open && (h("div", { class: "dropdown-body", style: { 'width': `${this.el.offsetWidth}px` } }, this.searchEnabled &&
       /* istanbul ignore next */
       h("div", { class: "searchbox" }, h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this) })), h("div", { class: "dropdown-options-list" }, parsedOptionsData.map((option) => {
       return this.dropdownOption(option);

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

@@ -0,0 +1,93 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-6a372ea6.js';
+import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-97a33389.js';
+import './_commonjsHelpers-9943807e.js';
+
+const tttxTabsCss = ".material-symbols-rounded.sc-tttx-tabs{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sc-tttx-tabs-h{display:block}.tab-bar.sc-tttx-tabs{display:flex;height:52px}.tab-bar.sc-tttx-tabs>.left-navigation.sc-tttx-tabs,.tab-bar.sc-tttx-tabs>.right-navigation.sc-tttx-tabs{padding:14px 8px;cursor:pointer}.tab-bar.sc-tttx-tabs>.left-navigation.sc-tttx-tabs>*.sc-tttx-tabs,.tab-bar.sc-tttx-tabs>.right-navigation.sc-tttx-tabs>*.sc-tttx-tabs{height:24px;width:24px;cursor:pointer}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs{display:flex;border-bottom:1px solid #d5d5d5}.tab-bar.sc-tttx-tabs>.tabs-container.wide.sc-tttx-tabs{flex-grow:1}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs>*[role=tab].sc-tttx-tabs{padding:18px 16px;line-height:16px;font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;color:#757575;cursor:pointer}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs>*[role=tab].sc-tttx-tabs:hover{background-color:rgba(17, 17, 17, 0.05)}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs>*[role=tab][aria-selected].sc-tttx-tabs{color:#212121;cursor:default;border-bottom:3px solid #1579c6}";
+
+const TttxTabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabClick = createEvent(this, "tabClick", 7);
+    this.leftNavigation = createEvent(this, "leftNavigation", 7);
+    this.rightNavigation = createEvent(this, "rightNavigation", 7);
+    this.tabFocus = 0;
+    this.tabsName = undefined;
+    this.navigation = undefined;
+    this.wide = undefined;
+    this.tabs = undefined;
+    this._tabs = undefined;
+  }
+  onDataChange() {
+    if (!this.tabs) {
+      return;
+    }
+    if (typeof this.tabs === 'string') {
+      this._tabs = JSON.parse(this.tabs);
+    }
+    else {
+      this._tabs = [...this.tabs];
+    }
+    this.tabFocus = this._tabs.findIndex(tab => tab.tabIndex !== -1);
+  }
+  componentWillLoad() {
+    // dynamic constructor: any props can be added later
+    this.onDataChange();
+  }
+  handleTabClick(tab) {
+    this.tabClick.emit({ tabId: tab.id });
+  }
+  handleLeftNavigation() {
+    this.leftNavigation.emit();
+  }
+  handleRightNavigation() {
+    this.rightNavigation.emit();
+  }
+  handleKeyDown(event) {
+    const orientation = this.tabList.getAttribute('aria-orientation'); // horizontal by default
+    const previous = orientation && orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+    const next = orientation && orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+    if (event.key === previous || event.key === next) {
+      // Make the previous tab deselectable
+      this._tabs[this.tabFocus].tabIndex = -1;
+      if (event.key === previous) {
+        this.tabFocus--;
+        // If we're at the start, move to the end
+        if (this.tabFocus < 0) {
+          this.tabFocus = this._tabs.length - 1;
+        }
+      }
+      else if (event.key === next) {
+        this.tabFocus++;
+        // If we're at the end, go to the start
+        if (this.tabFocus >= this._tabs.length) {
+          this.tabFocus = 0;
+        }
+      }
+      // Make the next tab selectable
+      this._tabs[this.tabFocus].tabIndex = 0;
+      this.tabList.querySelectorAll('[role="tab"]')[this.tabFocus].focus();
+      this._tabs = [...this._tabs];
+    }
+    else if (event.code === 'Space' || event.code === 'Enter') {
+      this.tabClick.emit({ tabId: this._tabs[this.tabFocus].id });
+    }
+  }
+  render() {
+    if (!this.tabs || this.tabs.length == 0) {
+      return;
+    }
+    return (h(Host, null, h("div", null, h("div", { class: "tab-bar", role: "tablist", "aria-label": this.tabsName, ref: el => (this.tabList = el) }, this.navigation && (h("div", { class: "left-navigation", tabindex: "0", onClick: this.handleLeftNavigation.bind(this) }, h("tttx-icon", { icon: "navigate_before", color: "black" }))), h("div", { class: 'tabs-container' + (this.wide ? ' wide' : '') }, this._tabs.map(tab => {
+      return (h("a", { key: tab.id, id: tab.id, role: "tab", "aria-controls": tab.controls, tabindex: tab.tabIndex, "aria-selected": tab.selected, onClick: () => {
+          this.handleTabClick(tab);
+        } }, tab.tabName));
+    })), this.navigation && (h("div", { class: "right-navigation", tabindex: "0", onClick: this.handleRightNavigation.bind(this) }, h("tttx-icon", { icon: "navigate_next", color: "black" })))), this._tabs.map(tab => {
+      return (h("article", { key: tab.id, id: tab.controls, role: "tabpanel", tabindex: "0", "aria-labelledby": tab.id, "aria-expanded": tab.selected, innerHTML: purify.sanitize(tab.pageContent, domSanitiserOptions), hidden: !tab.selected }));
+    }))));
+  }
+  static get watchers() { return {
+    "tabs": ["onDataChange"]
+  }; }
+};
+TttxTabs.style = tttxTabsCss;
+
+export { TttxTabs as tttx_tabs };

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"],"selectedValue":[1,"selected-value"],"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]}]]],["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);
+  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"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"],"selectedValue":[1,"selected-value"],"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]}]]],["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-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["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-67c342d7.entry.js

@@ -0,0 +1 @@
+import{r as t,c as s,h as a,H as i}from"./p-3f1b6013.js";import{p as o,d as r}from"./p-5ed38d61.js";import"./p-112455b1.js";const e=class{constructor(a){t(this,a),this.tabClick=s(this,"tabClick",7),this.leftNavigation=s(this,"leftNavigation",7),this.rightNavigation=s(this,"rightNavigation",7),this.tabFocus=0,this.tabsName=void 0,this.navigation=void 0,this.wide=void 0,this.tabs=void 0,this._tabs=void 0}onDataChange(){this.tabs&&(this._tabs="string"==typeof this.tabs?JSON.parse(this.tabs):[...this.tabs],this.tabFocus=this._tabs.findIndex((t=>-1!==t.tabIndex)))}componentWillLoad(){this.onDataChange()}handleTabClick(t){this.tabClick.emit({tabId:t.id})}handleLeftNavigation(){this.leftNavigation.emit()}handleRightNavigation(){this.rightNavigation.emit()}handleKeyDown(t){const s=this.tabList.getAttribute("aria-orientation"),a=s&&"vertical"===s?"ArrowUp":"ArrowLeft",i=s&&"vertical"===s?"ArrowDown":"ArrowRight";t.key===a||t.key===i?(this._tabs[this.tabFocus].tabIndex=-1,t.key===a?(this.tabFocus--,this.tabFocus<0&&(this.tabFocus=this._tabs.length-1)):t.key===i&&(this.tabFocus++,this.tabFocus>=this._tabs.length&&(this.tabFocus=0)),this._tabs[this.tabFocus].tabIndex=0,this.tabList.querySelectorAll('[role="tab"]')[this.tabFocus].focus(),this._tabs=[...this._tabs]):"Space"!==t.code&&"Enter"!==t.code||this.tabClick.emit({tabId:this._tabs[this.tabFocus].id})}render(){if(this.tabs&&0!=this.tabs.length)return a(i,null,a("div",null,a("div",{class:"tab-bar",role:"tablist","aria-label":this.tabsName,ref:t=>this.tabList=t},this.navigation&&a("div",{class:"left-navigation",tabindex:"0",onClick:this.handleLeftNavigation.bind(this)},a("tttx-icon",{icon:"navigate_before",color:"black"})),a("div",{class:"tabs-container"+(this.wide?" wide":"")},this._tabs.map((t=>a("a",{key:t.id,id:t.id,role:"tab","aria-controls":t.controls,tabindex:t.tabIndex,"aria-selected":t.selected,onClick:()=>{this.handleTabClick(t)}},t.tabName)))),this.navigation&&a("div",{class:"right-navigation",tabindex:"0",onClick:this.handleRightNavigation.bind(this)},a("tttx-icon",{icon:"navigate_next",color:"black"}))),this._tabs.map((t=>a("article",{key:t.id,id:t.controls,role:"tabpanel",tabindex:"0","aria-labelledby":t.id,"aria-expanded":t.selected,innerHTML:o.sanitize(t.pageContent,r),hidden:!t.selected})))))}static get watchers(){return{tabs:["onDataChange"]}}};e.style='.material-symbols-rounded.sc-tttx-tabs{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.sc-tttx-tabs-h{display:block}.tab-bar.sc-tttx-tabs{display:flex;height:52px}.tab-bar.sc-tttx-tabs>.left-navigation.sc-tttx-tabs,.tab-bar.sc-tttx-tabs>.right-navigation.sc-tttx-tabs{padding:14px 8px;cursor:pointer}.tab-bar.sc-tttx-tabs>.left-navigation.sc-tttx-tabs>*.sc-tttx-tabs,.tab-bar.sc-tttx-tabs>.right-navigation.sc-tttx-tabs>*.sc-tttx-tabs{height:24px;width:24px;cursor:pointer}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs{display:flex;border-bottom:1px solid #d5d5d5}.tab-bar.sc-tttx-tabs>.tabs-container.wide.sc-tttx-tabs{flex-grow:1}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs>*[role=tab].sc-tttx-tabs{padding:18px 16px;line-height:16px;font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;color:#757575;cursor:pointer}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs>*[role=tab].sc-tttx-tabs:hover{background-color:rgba(17, 17, 17, 0.05)}.tab-bar.sc-tttx-tabs>.tabs-container.sc-tttx-tabs>*[role=tab][aria-selected].sc-tttx-tabs{color:#212121;cursor:default;border-bottom:3px solid #1579c6}';export{e as tttx_tabs}

package/dist/tttx/p-d9444b12.entry.js

@@ -0,0 +1 @@
+import{r as o,c as t,h as i,H as s,g as e}from"./p-3f1b6013.js";import{p as n,d}from"./p-5ed38d61.js";import"./p-112455b1.js";const r=class{constructor(i){o(this,i),this.selectItemEvent=t(this,"selectItemEvent",3),this.toggleOpen=t(this,"toggleOpen",3),this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.selectedValue=void 0,this.open=!1,this.selectedItem=void 0,this.searchTerm=""}async componentWillLoad(){if(this.optionsData){const o=("string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData).filter((o=>o.value==this.selectedValue));this.selectedItem=o.length>0?o[0]:void 0}}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}onDropdownClicked(){this.open=!this.open,this.searchTerm="",this.toggleOpen.emit(this.open)}onItemSelected(o){this.selectedItem=o,this.selectItemEvent.emit(this.selectedItem),this.el.blur()}dropdownSelectorContent(){return this.selectedItem?this.selectedItem.html?i("div",{innerHTML:this.selectedItem.html}):i("div",null,this.selectedItem.label):i("div",{class:"placeholder"},this.placeholder)}dropdownOption(o){const t=this.searchEnabled&&-1===o.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()),s=this.selectedItem&&o.value===this.selectedItem.value;if(o.html){const e=n.sanitize(o.html,d);return i("div",{class:`dropdown-option ${t?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label,innerHTML:e})}return i("div",{class:`dropdown-option ${t?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label},o.label)}handleSearchInput(o){this.searchTerm=o.target.value}render(){if(!this.optionsData)return;const o="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,t=this.open?"expand_less":"expand_more";return i(s,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent(),i("div",{class:"dropdown-selector-chevron"},i("tttx-icon",{icon:t,color:"black"}))),this.open&&i("div",{class:"dropdown-body",style:{width:`${this.el.offsetWidth}px`}},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this)})),i("div",{class:"dropdown-options-list"},o.map((o=>this.dropdownOption(o)))))))}get el(){return e(this)}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body{display:flex;position:absolute;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}';export{r as tttx_select_box}

package/dist/tttx/p-f34bface.entry.js

@@ -0,0 +1 @@
+import{r as o,c as i,h as t,g as d}from"./p-3f1b6013.js";import{p as e,d as l}from"./p-5ed38d61.js";import"./p-112455b1.js";const s=class{constructor(t){o(this,t),this.closeButtonClick=i(this,"closeButtonClick",6),this.buttonClick=i(this,"buttonClick",7),this.data=void 0,this.size="regular",this.open=!1,this.allowOverflow=!1,this.elementSize=void 0}handleResize(){this.elementSize=window.innerWidth<698?"mobile":this.size}componentDidRender(){this.dialog()&&(this.open?this.dialog().open||this.dialog().showModal():this.dialog().close())}onCloseClickHandler(){this.open=!1,this.closeButtonClick.emit({close:!0})}onButtonClickHandler(o){this.buttonClick.emit({buttonNumber:o,buttonClicked:!0})}dialog(){return this.el.shadowRoot.querySelector("dialog")}renderHeader(o){const i=o.title,d=!!o.hasClose;return t("div",{class:"dialog-box-header"},!!o.hasIcon&&t("tttx-icon",{class:"dialog-box-icon",icon:o.iconName,color:o.iconColor}),t("h3",{class:"dialog-box-title"},i),d&&t("div",{class:"dialog-box-align-right close-button",onClick:()=>this.onCloseClickHandler()},t("tttx-icon",{class:"dialog-box-icon-close dialog-box-clickable",icon:"close",color:"black"})))}renderContent(o){if(o.isCustomHtml){const i=e.sanitize(o.customHtml,l);return t("div",{class:"dialog-box-body "+(this.allowOverflow?"":"overflow-hidden")},t("div",{innerHTML:i}))}return t("div",{class:"dialog-box-body "+(this.allowOverflow?"":"overflow-hidden")},t("span",{class:"dialog-box-content"},o.contentText))}renderFooter(o){const i=o.buttons,d=i.length>0,e=i.length>1,l="mobile"===this.elementSize;return t("div",{class:"dialog-box-footer"},t("div",{class:"dialog-box-align-right"},3==i.length&&t("tttx-button",{class:"dialog-box-spacing-button",onClick:()=>this.onButtonClickHandler(3),design:i[2].type,notext:l,icon:i[2].icon},!l&&i[2].name),e&&t("tttx-button",{class:"dialog-box-spacing-button",onClick:()=>this.onButtonClickHandler(2),design:i[1].type,icon:i[1].icon},i[1].name),d&&t("tttx-button",{onClick:()=>this.onButtonClickHandler(1),design:i[0].type,icon:i[0].icon},i[0].name)))}componentWillLoad(){this.elementSize=window.innerWidth<698?"mobile":this.size}render(){if(this.data)return this._data="string"==typeof this.data?JSON.parse(this.data):this.data,t("dialog",{class:`dialog-box ${this.allowOverflow?"overflow-visible":""} ${this.elementSize}`},t("div",{class:"contents"},t("div",{class:`dialog-box-padding dialog-box-header-box ${this._data.type||""}`},this.renderHeader(this._data.header)),t("div",{class:"dialog-box-padding dialog-box-body-box"},this.renderContent(this._data.body)),t("div",{class:"dialog-box-padding dialog-box-footer-box"},this.renderFooter(this._data.footer))))}get el(){return d(this)}};s.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}dialog::backdrop{background-color:#75757580}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.dialog-box-clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.dialog-box-padding{padding:8px 16px}.dialog-box-align-right{margin-left:auto;display:flex}.dialog-box-header-box{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;height:36px}.dialog-box-header{display:flex;align-items:center;width:100%}.dialog-box-title{font-size:18;font-weight:500;font-family:"Roboto", serif}.dialog-box-icon{padding-right:8px;width:24px;height:24px}.dialog-box-icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.dialog-box-content{font-size:16;font-weight:400;font-family:"Roboto", serif}.dialog-box-body{text-overflow:ellipsis}.dialog-box-body-box{padding:16px}.dialog-box-footer-box{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}.dialog-box-footer{display:flex;align-items:center;width:100%}.dialog-box-spacing-button{margin-right:8px}.dialog-box-header-box.info{border-bottom:1px solid #1479c6}.dialog-box-header-box.success{border-bottom:1px solid #a2bb31}.dialog-box-header-box.warning{border-bottom:1px solid #f59500}.dialog-box-header-box.critical{border-bottom:1px solid #dc0000}';export{s as tttx_dialog_box}

package/dist/tttx/tttx.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-3f1b6013.js";export{s as setNonce}from"./p-3f1b6013.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-d77e74fd",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-27bc0666",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-75c31e23",[[1,"tttx-tree-view",{data:[1040],treeData:[32]}]]],["p-c714f7c0",[[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-750cf31b",[[1,"tttx-list",{data:[1025],name:[1],_data:[32]}]]],["p-5290db99",[[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-895526aa",[[1,"tttx-form",{formschema:[1032],data:[1032],submit:[64]}]]],["p-6fe0af4e",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-e55a967b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-50cdce65",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-a6582ab0",[[1,"tttx-tag",{text:[1],color:[1]}]]],["p-c0c022cd",[[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-e89b053f",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-818574fe",[[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-5b7b8539",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
+import{p as e,b as t}from"./p-3f1b6013.js";export{s as setNonce}from"./p-3f1b6013.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-f34bface",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],allowOverflow:[4,"allow-overflow"],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-d9444b12",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],selectedValue:[1,"selected-value"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-75c31e23",[[1,"tttx-tree-view",{data:[1040],treeData:[32]}]]],["p-c714f7c0",[[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-750cf31b",[[1,"tttx-list",{data:[1025],name:[1],_data:[32]}]]],["p-5290db99",[[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-67c342d7",[[2,"tttx-tabs",{tabsName:[1,"tabs-name"],navigation:[4],wide:[4],tabs:[1],_tabs:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-895526aa",[[1,"tttx-form",{formschema:[1032],data:[1032],submit:[64]}]]],["p-6fe0af4e",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-e55a967b",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-50cdce65",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-a6582ab0",[[1,"tttx-tag",{text:[1],color:[1]}]]],["p-c0c022cd",[[1,"tttx-toolbar",{border:[4],viewSize:[32]},[[9,"resize","handleResize"]]]]],["p-e89b053f",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-818574fe",[[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-5b7b8539",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));

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

@@ -3,6 +3,6 @@ export declare class TttxQrCode {
   size: number;
   hostElement: HTMLElement;
   componentDidLoad(): void;
-  setShadowCanvas(id: string, options: any): void;
+  setShadowCanvas(id: string, options: unknown): void;
   render(): any;
 }

package/dist/types/components/molecules/tttx-dialog-box/tttx-dialog-box.d.ts

@@ -4,6 +4,7 @@ export declare class TttxDialogBox {
   data: string | DialogItems;
   size: 'regular' | 'mobile' | 'large' | 'small';
   open: boolean;
+  allowOverflow: boolean;
   elementSize: 'regular' | 'mobile' | 'large' | 'small';
   el: any;
   private _data;

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ChangeEvent } from 'react';
 export declare class TttxForm {
   private form;
   private fieldset;
@@ -23,7 +22,7 @@ export declare class TttxForm {
    * @param {ChangeEvent} event - The focus event triggered by the field.
    * @return {void}
    */
-  fieldChanged(event: ChangeEvent): void;
+  fieldChanged(event: any): void;
   submit(): Promise<void>;
   /**
    * Submits the form data to the server.

package/dist/types/components/molecules/tttx-select-box/tttx-select-box.d.ts

@@ -16,8 +16,7 @@ export declare class TttxSelectBox {
   toggleOpen: EventEmitter<boolean>;
   handleCloseSelectBox(): void;
   handleBlur(): void;
-  dropDownWidth: any;
-  onDropdownClicked(event: Event): void;
+  onDropdownClicked(): void;
   onItemSelected(option: SelectItem): void;
   dropdownSelectorContent(): any;
   dropdownOption(option: SelectItem): any;

package/dist/types/components/molecules/tttx-tabs/interfaces.d.ts

@@ -0,0 +1,8 @@
+export interface Tab {
+    id: string;
+    tabName: string;
+    controls: string;
+    selected: boolean;
+    tabIndex: number;
+    pageContent: string;
+}

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

@@ -0,0 +1,23 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { Tab } from './interfaces';
+export declare class TttxTabs {
+  tabsName: string;
+  navigation: boolean;
+  wide: boolean;
+  tabs: string | Tab[];
+  _tabs: Tab[];
+  private tabList;
+  private tabFocus;
+  onDataChange(): void;
+  componentWillLoad(): void;
+  tabClick: EventEmitter<{
+    tabId: string;
+  }>;
+  handleTabClick(tab: Tab): void;
+  leftNavigation: EventEmitter;
+  handleLeftNavigation(): void;
+  rightNavigation: EventEmitter;
+  handleRightNavigation(): void;
+  handleKeyDown(event: KeyboardEvent): void;
+  render(): any;
+}

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

@@ -0,0 +1,13 @@
+declare const _default: {
+  title: string;
+  component: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+  decorators: (<T extends import("@storybook/types").Renderer>(storyFn: import("@storybook/types").PartialStoryFn<T, import("@storybook/types").Args>) => T["storyResult"])[];
+};
+export default _default;
+export declare const DefaultTabs: any;
+export declare const NavigationTabs: any;

package/dist/types/components/molecules/tttx-tree-view/helper/helper.d.ts

@@ -1,8 +1,8 @@
 export interface TreeViewItem {
   id: number;
   title: string;
-  hasIcon: boolean;
-  hasCheckbox: boolean;
+  hasIcon?: boolean;
+  hasCheckbox?: boolean;
   menuActive?: boolean;
   chevronActive?: boolean;
   html?: string;

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

@@ -18,3 +18,5 @@ export declare const HTML: any;
 export declare const Checkbox: any;
 export declare const Icons: any;
 export declare const CheckBoxAndIcons: any;
+export declare const RequirementsList1: any;
+export declare const RequirementsList2: any;

package/dist/types/components.d.ts

@@ -11,6 +11,7 @@ import { ListItem } from "./components/molecules/tttx-list/interfaces";
 import { SelectItem } from "./components/molecules/tttx-select-box/interfaces";
 import { SorterChangeEvent, SorterData } from "./components/molecules/tttx-sorter/interfaces";
 import { MinMaxDates } from "./components/molecules/tttx-standalone-input/tttx-standalone-input";
+import { Tab } from "./components/molecules/tttx-tabs/interfaces";
 import { TreeViewItem } from "./components/molecules/tttx-tree-view/helper/helper";
 export namespace Components {
     interface TttxButton {
@@ -21,6 +22,7 @@ export namespace Components {
         "notext": boolean;
     }
     interface TttxDialogBox {
+        "allowOverflow": boolean;
         "data": string | DialogItems;
         "open": boolean;
         "size": 'regular' | 'mobile' | 'large' | 'small';
@@ -120,6 +122,12 @@ export namespace Components {
         "type": string;
         "value": string | number;
     }
+    interface TttxTabs {
+        "navigation": boolean;
+        "tabs": string | Tab[];
+        "tabsName": string;
+        "wide": boolean;
+    }
     interface TttxTag {
         "color": string;
         "text": string;
@@ -159,6 +167,10 @@ export interface TttxStandaloneInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxStandaloneInputElement;
 }
+export interface TttxTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxTabsElement;
+}
 export interface TttxTreeViewCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxTreeViewElement;
@@ -236,6 +248,12 @@ declare global {
         prototype: HTMLTttxStandaloneInputElement;
         new (): HTMLTttxStandaloneInputElement;
     };
+    interface HTMLTttxTabsElement extends Components.TttxTabs, HTMLStencilElement {
+    }
+    var HTMLTttxTabsElement: {
+        prototype: HTMLTttxTabsElement;
+        new (): HTMLTttxTabsElement;
+    };
     interface HTMLTttxTagElement extends Components.TttxTag, HTMLStencilElement {
     }
     var HTMLTttxTagElement: {
@@ -267,6 +285,7 @@ declare global {
         "tttx-select-box": HTMLTttxSelectBoxElement;
         "tttx-sorter": HTMLTttxSorterElement;
         "tttx-standalone-input": HTMLTttxStandaloneInputElement;
+        "tttx-tabs": HTMLTttxTabsElement;
         "tttx-tag": HTMLTttxTagElement;
         "tttx-toolbar": HTMLTttxToolbarElement;
         "tttx-tree-view": HTMLTttxTreeViewElement;
@@ -281,6 +300,7 @@ declare namespace LocalJSX {
         "notext"?: boolean;
     }
     interface TttxDialogBox {
+        "allowOverflow"?: boolean;
         "data"?: string | DialogItems;
         "onButtonClick"?: (event: TttxDialogBoxCustomEvent<any>) => void;
         "onCloseButtonClick"?: (event: TttxDialogBoxCustomEvent<any>) => void;
@@ -398,6 +418,15 @@ declare namespace LocalJSX {
         "type"?: string;
         "value"?: string | number;
     }
+    interface TttxTabs {
+        "navigation"?: boolean;
+        "onLeftNavigation"?: (event: TttxTabsCustomEvent<any>) => void;
+        "onRightNavigation"?: (event: TttxTabsCustomEvent<any>) => void;
+        "onTabClick"?: (event: TttxTabsCustomEvent<{ tabId: string }>) => void;
+        "tabs"?: string | Tab[];
+        "tabsName"?: string;
+        "wide"?: boolean;
+    }
     interface TttxTag {
         "color"?: string;
         "text"?: string;
@@ -422,6 +451,7 @@ declare namespace LocalJSX {
         "tttx-select-box": TttxSelectBox;
         "tttx-sorter": TttxSorter;
         "tttx-standalone-input": TttxStandaloneInput;
+        "tttx-tabs": TttxTabs;
         "tttx-tag": TttxTag;
         "tttx-toolbar": TttxToolbar;
         "tttx-tree-view": TttxTreeView;
@@ -443,6 +473,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-tabs": LocalJSX.TttxTabs & JSXBase.HTMLAttributes<HTMLTttxTabsElement>;
             "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.2.71",
+    "version": "0.2.73",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
@@ -30,29 +30,33 @@
     },
     "resolutions": {
         "@types/babel__traverse": "7.0.6",
-        "file-system-cache": "2.3.0"
+        "file-system-cache": "2.3.0",
+        "@types/react": "17.0.30",
+        "@types/react-dom": "^18.0.5",
+        "@types/react-redux": "^7.1.24",
+        "@types/react-router-dom": "^5.3.3"
     },
     "devDependencies": {
         "@babel/core": "^7.18.10",
         "@babel/preset-env": "^7.21.4",
-        "@mdx-js/react": "^2.1.5",
         "@rollup/plugin-commonjs": "^23.0.3",
         "@stencil/core": "^2.20.0",
         "@stencil/sass": "^1.5.2",
-        "@storybook/addon-actions": "^7.0.6",
-        "@storybook/addon-essentials": "^7.0.6",
-        "@storybook/addon-interactions": "^7.0.6",
-        "@storybook/addon-links": "^7.0.6",
-        "@storybook/addon-mdx-gfm": "^7.0.6",
-        "@storybook/html": "^7.0.6",
-        "@storybook/html-webpack5": "^7.0.6",
-        "@storybook/testing-library": "^0.1.0",
-        "@storybook/web-components": "^7.0.6",
+        "@storybook/addon-actions": "^7.4.0",
+        "@storybook/addon-essentials": "^7.4.0",
+        "@storybook/addon-interactions": "^7.4.0",
+        "@storybook/addon-links": "^7.4.0",
+        "@storybook/addon-mdx-gfm": "^7.4.0",
+        "@storybook/html": "^7.4.0",
+        "@storybook/html-webpack5": "^7.4.0",
+        "@storybook/testing-library": "^0.2.0",
+        "@storybook/web-components": "^7.4.0",
         "@types/jest": "^27.0.3",
         "@typescript-eslint/eslint-plugin": "^5.59.1",
         "@typescript-eslint/parser": "^5.59.1",
         "chromatic": "^6.7.4",
         "eslint": "^8.38.0",
+        "eslint-plugin-storybook": "^0.6.13",
         "jest": "^27.4.5",
         "jest-cli": "^27.4.5",
         "less": "^4.1.3",
@@ -68,9 +72,8 @@
     "readme": "ERROR: No README data found!",
     "dependencies": {
         "@popperjs/core": "^2.11.7",
-        "@types/react": "^18.2.6",
         "dompurify": "^3.0.3",
-        "storybook": "^7.0.6",
+        "storybook": "^7.4.0",
         "ts-qrcode": "^0.0.4"
     }
 }

package/dist/collection/docs/gettingstarted-developer.stories.js

@@ -1,9 +0,0 @@
-export default {
-  title: 'Getting Started/Developer',
-};
-const Template = () => `
-<tttx-typography>
-    <p>Quick start guide for developers</p>
-</tttx-typography>
-`;
-export const Default = Template.bind({});

package/dist/tttx/p-27bc0666.entry.js

@@ -1 +0,0 @@
-import{r as o,c as t,h as i,H as s,g as e}from"./p-3f1b6013.js";import{p as n,d}from"./p-5ed38d61.js";import"./p-112455b1.js";const r=class{constructor(i){o(this,i),this.selectItemEvent=t(this,"selectItemEvent",3),this.toggleOpen=t(this,"toggleOpen",3),this.optionsData=null,this.label=void 0,this.inline=void 0,this.placeholder="",this.searchEnabled=void 0,this.selectedValue=void 0,this.open=!1,this.selectedItem=void 0,this.searchTerm=""}async componentWillLoad(){if(this.optionsData){const o=("string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData).filter((o=>o.value==this.selectedValue));this.selectedItem=o.length>0?o[0]:void 0}}handleCloseSelectBox(){this.open=!1}handleBlur(){this.open=!1,this.toggleOpen.emit(!1)}onDropdownClicked(o){this.open=!this.open,this.searchTerm="",this.toggleOpen.emit(this.open),this.dropDownWidth=o.target.offsetWidth}onItemSelected(o){this.selectedItem=o,this.selectItemEvent.emit(this.selectedItem),this.el.blur()}dropdownSelectorContent(){return this.selectedItem?this.selectedItem.html?i("div",{innerHTML:this.selectedItem.html}):i("div",null,this.selectedItem.label):i("div",{class:"placeholder"},this.placeholder)}dropdownOption(o){const t=this.searchEnabled&&-1===o.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()),s=this.selectedItem&&o.value===this.selectedItem.value;if(o.html){const e=n.sanitize(o.html,d);return i("div",{class:`dropdown-option ${t?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label,innerHTML:e})}return i("div",{class:`dropdown-option ${t?"hidden":""} ${s?"selected":""}`,onClick:this.onItemSelected.bind(this,o),key:o.label},o.label)}handleSearchInput(o){this.searchTerm=o.target.value}render(){if(!this.optionsData)return;const o="string"==typeof this.optionsData?JSON.parse(this.optionsData):this.optionsData,t=this.open?"expand_less":"expand_more";return i(s,{class:this.inline?"inline":"block"},this.label&&i("div",{class:"label"},this.label),i("div",{tabindex:"0",class:"dropdown-container"},i("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},this.dropdownSelectorContent(),i("div",{class:"dropdown-selector-chevron"},i("tttx-icon",{icon:t,color:"black"}))),this.open&&i("div",{class:"dropdown-body",style:{width:`${this.dropDownWidth}px`}},this.searchEnabled&&i("div",{class:"searchbox"},i("tttx-standalone-input",{type:"text",label:"",required:!0,showerrorbubble:!1,iconleft:"search",onInput:this.handleSearchInput.bind(this)})),i("div",{class:"dropdown-options-list"},o.map((o=>this.dropdownOption(o)))))))}get el(){return e(this)}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-style:normal;font-weight:500;line-height:normal}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{align-items:center;gap:8px;padding:8px 8px 8px 16px;cursor:pointer;border:1px solid #d5d5d5}.dropdown-selector-chevron{margin-left:auto;height:24px}.dropdown-body{display:flex;position:fixed;z-index:1000;flex-direction:column;top:inherit;margin-top:45px;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-body.search{max-height:410px}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:8px 8px 8px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e}.searchbox{padding:8px 16px 0 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}';export{r as tttx_select_box}

package/dist/tttx/p-d77e74fd.entry.js

@@ -1 +0,0 @@
-import{r as o,c as i,h as t,g as d}from"./p-3f1b6013.js";import{p as l,d as e}from"./p-5ed38d61.js";import"./p-112455b1.js";const a=class{constructor(t){o(this,t),this.closeButtonClick=i(this,"closeButtonClick",6),this.buttonClick=i(this,"buttonClick",7),this.data=void 0,this.size="regular",this.open=!1,this.elementSize=void 0}handleResize(){this.elementSize=window.innerWidth<698?"mobile":this.size}componentDidRender(){this.dialog()&&(this.open?this.dialog().open||this.dialog().showModal():this.dialog().close())}onCloseClickHandler(){this.open=!1,this.closeButtonClick.emit({close:!0})}onButtonClickHandler(o){this.buttonClick.emit({buttonNumber:o,buttonClicked:!0})}dialog(){return this.el.shadowRoot.querySelector("dialog")}renderHeader(o){const i=o.title,d=!!o.hasClose;return t("div",{class:"dialog-box-header"},!!o.hasIcon&&t("tttx-icon",{class:"dialog-box-icon",icon:o.iconName,color:o.iconColor}),t("h3",{class:"dialog-box-title"},i),d&&t("div",{class:"dialog-box-align-right close-button",onClick:()=>this.onCloseClickHandler()},t("tttx-icon",{class:"dialog-box-icon-close dialog-box-clickable",icon:"close",color:"black"})))}renderContent(o){if(o.isCustomHtml){const i=l.sanitize(o.customHtml,e);return t("div",{class:"dialog-box-body"},t("div",{innerHTML:i}))}return t("div",{class:"dialog-box-body"},t("span",{class:"dialog-box-content"},o.contentText))}renderFooter(o){const i=o.buttons,d=i.length>0,l=i.length>1,e="mobile"===this.elementSize;return t("div",{class:"dialog-box-footer"},t("div",{class:"dialog-box-align-right"},3==i.length&&t("tttx-button",{class:"dialog-box-spacing-button",onClick:()=>this.onButtonClickHandler(3),design:i[2].type,notext:e,icon:i[2].icon},!e&&i[2].name),l&&t("tttx-button",{class:"dialog-box-spacing-button",onClick:()=>this.onButtonClickHandler(2),design:i[1].type,icon:i[1].icon},i[1].name),d&&t("tttx-button",{onClick:()=>this.onButtonClickHandler(1),design:i[0].type,icon:i[0].icon},i[0].name)))}componentWillLoad(){this.elementSize=window.innerWidth<698?"mobile":this.size}render(){if(this.data)return this._data="string"==typeof this.data?JSON.parse(this.data):this.data,t("dialog",{class:`dialog-box ${this.elementSize}`},t("div",{class:"contents"},t("div",{class:`dialog-box-padding dialog-box-header-box ${this._data.type||""}`},this.renderHeader(this._data.header)),t("div",{class:"dialog-box-padding dialog-box-body-box"},this.renderContent(this._data.body)),t("div",{class:"dialog-box-padding dialog-box-footer-box"},this.renderFooter(this._data.footer))))}get el(){return d(this)}};a.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}h3{margin-block-start:0em;margin-block-end:0em}.dialog-box{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:4px;box-shadow:0px 1px 5px #1111114d;padding:0}dialog::backdrop{background-color:#75757580}.dialog-box.small{width:400px;min-height:200px}.dialog-box.regular{width:600px;min-height:200px}.dialog-box.large{width:900px;min-height:200px}.dialog-box.mobile{max-width:424px;width:calc(100vw - 20px)}.dialog-box-clickable{cursor:pointer}.contents{display:flex;flex-direction:column;min-height:inherit}.dialog-box-padding{padding:8px 16px}.dialog-box-align-right{margin-left:auto;display:flex}.dialog-box-header-box{border-bottom:1px solid #d5d5d5;display:flex;flex-direction:row;height:36px}.dialog-box-header{display:flex;align-items:center;width:100%}.dialog-box-title{font-size:18;font-weight:500;font-family:"Roboto", serif}.dialog-box-icon{padding-right:8px;width:24px;height:24px}.dialog-box-icon-close{margin-left:auto;padding-top:3px;width:24px;height:24px}.dialog-box-content{font-size:16;font-weight:400;font-family:"Roboto", serif}.dialog-box-body{overflow:hidden;text-overflow:ellipsis}.dialog-box-body-box{padding:16px}.dialog-box-footer-box{display:flex;flex-direction:row;margin-top:auto;border-top:1px solid #d5d5d5;height:36px}.dialog-box-footer{display:flex;align-items:center;width:100%}.dialog-box-spacing-button{margin-right:8px}.dialog-box-header-box.info{border-bottom:1px solid #1479c6}.dialog-box-header-box.success{border-bottom:1px solid #a2bb31}.dialog-box-header-box.warning{border-bottom:1px solid #f59500}.dialog-box-header-box.critical{border-bottom:1px solid #dc0000}';export{a as tttx_dialog_box}

package/dist/types/docs/gettingstarted-developer.stories.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-  title: string;
-};
-export default _default;
-export declare const Default: any;