@3t-transform/threeteeui 0.1.21 → 0.1.22

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

@@ -1,17 +1,17 @@
-import { r as registerInstance, h, H as Host } from './index-e888a5f4.js';
+import { r as registerInstance, h, H as Host } from './index-86faeaab.js';
 
 const tttxIconCss = ".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}:host{display:inline-block;cursor:default;user-select:none}.icon-size{width:24px;height:24px}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#dc0000}.darkred{color:#A20000}.orange{color:#f59500}.blue{color:#1479c6}.green{color:#a2bb31}.gray{color:#757575}.black{color:#212121}.white{color:white}";
 
-const TttxIcon = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.icon = undefined;
-    this.color = 'grey';
-  }
-  render() {
-    return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
-  }
-};
+const TttxIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.icon = undefined;
+    this.color = 'grey';
+  }
+  render() {
+    return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
+  }
+};
 TttxIcon.style = tttxIconCss;
 
 export { TttxIcon as tttx_icon };

package/dist/esm/tttx-keyvalue-block.entry.js

@@ -1,65 +1,65 @@
-import { r as registerInstance, h, H as Host } from './index-e888a5f4.js';
+import { r as registerInstance, h, H as Host } from './index-86faeaab.js';
 
 const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dt,dd{overflow-wrap:anywhere}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}dl.horizontal{display:flex;flex-direction:row;width:100%}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%;max-width:50% !important}}@media (max-width: 600px){dl.horizontal div{width:100%;max-width:100% !important}}";
 
-const TttxKeyvalueBlock = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.keyvalues = undefined;
-    this.horizontal = undefined;
-  }
-  renderSingleElements(values) {
-    const keys = Object.keys(values);
-    const elements = [];
-    const divSize = (100 / keys.length).toString() + '%';
-    for (let i = 0; i < keys.length; i++) {
-      if (this.horizontal) {
-        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null, keys[i]), h("dd", null, values[keys[i]])));
-      }
-      else {
-        elements.push(h("dt", null, keys[i]));
-        elements.push(h("dd", null, values[keys[i]]));
-      }
-    }
-    return elements;
-  }
-  renderArrayElements(values) {
-    const elements = [];
-    const divSize = (100 / values.length).toString() + '%';
-    for (let i = 0; i < values.length; i++) {
-      const value = values[i];
-      if (this.horizontal) {
-        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
-      }
-      else {
-        elements.push(h("dt", { class: 'mainTitle' }, value.title));
-        elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
-        elements.push(h("dd", null, value.data));
-      }
-    }
-    return elements;
-  }
-  render() {
-    if (!this.keyvalues) {
-      return;
-    }
-    let values;
-    if (typeof this.keyvalues === 'string') {
-      values = JSON.parse(this.keyvalues);
-    }
-    else {
-      values = this.keyvalues;
-    }
-    let elements;
-    if (Array.isArray(values)) {
-      elements = this.renderArrayElements(values);
-    }
-    else {
-      elements = this.renderSingleElements(values);
-    }
-    return (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
-  }
-};
+const TttxKeyvalueBlock = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.keyvalues = undefined;
+    this.horizontal = undefined;
+  }
+  renderSingleElements(values) {
+    const keys = Object.keys(values);
+    const elements = [];
+    const divSize = (100 / keys.length).toString() + '%';
+    for (let i = 0; i < keys.length; i++) {
+      if (this.horizontal) {
+        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", null, keys[i]), h("dd", null, values[keys[i]])));
+      }
+      else {
+        elements.push(h("dt", null, keys[i]));
+        elements.push(h("dd", null, values[keys[i]]));
+      }
+    }
+    return elements;
+  }
+  renderArrayElements(values) {
+    const elements = [];
+    const divSize = (100 / values.length).toString() + '%';
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i];
+      if (this.horizontal) {
+        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
+      }
+      else {
+        elements.push(h("dt", { class: 'mainTitle' }, value.title));
+        elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
+        elements.push(h("dd", null, value.data));
+      }
+    }
+    return elements;
+  }
+  render() {
+    if (!this.keyvalues) {
+      return;
+    }
+    let values;
+    if (typeof this.keyvalues === 'string') {
+      values = JSON.parse(this.keyvalues);
+    }
+    else {
+      values = this.keyvalues;
+    }
+    let elements;
+    if (Array.isArray(values)) {
+      elements = this.renderArrayElements(values);
+    }
+    else {
+      elements = this.renderSingleElements(values);
+    }
+    return (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
+  }
+};
 TttxKeyvalueBlock.style = tttxKeyvalueBlockCss;
 
 export { TttxKeyvalueBlock as tttx_keyvalue_block };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-e888a5f4.js';
+import { r as registerInstance, c as createEvent, h } from './index-86faeaab.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1649,52 +1649,52 @@ var purify = createCommonjsModule(function (module, exports) {
 //# sourceMappingURL=purify.js.map
 });
 
-function tagRegXp(tagName) {
-  return RegExp(/^tttx-/).exec(tagName);
-}
-function attributeNameCheck() {
-  return true;
-}
-const domSanitiserOptions = {
-  CUSTOM_ELEMENT_HANDLING: {
-    tagNameCheck: tagRegXp,
-    attributeNameCheck: attributeNameCheck,
-    allowCustomizedBuiltInElements: false, // customized built-ins are not allowed
-  }
+function tagRegXp(tagName) {
+  return RegExp(/^tttx-/).exec(tagName);
+}
+function attributeNameCheck() {
+  return true;
+}
+const domSanitiserOptions = {
+  CUSTOM_ELEMENT_HANDLING: {
+    tagNameCheck: tagRegXp,
+    attributeNameCheck: attributeNameCheck,
+    allowCustomizedBuiltInElements: false, // customized built-ins are not allowed
+  }
 };
 
 const tttxListCss = ".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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px;display:flex;align-items:center}.item:first-of-type{border-top:1px solid #d5d5d5}.item.clickable:hover{cursor:pointer}.item.clickable:active{background-color:#e6e6e6}.align-right{margin-left:auto}.item-content{display:flex;align-items:center}";
 
-const TttxList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.rowClick = createEvent(this, "listRowClick", 7);
-    this.data = undefined;
-    this.name = undefined;
-  }
-  onRowClickHandler(item) {
-    if (!item.clickable || !item.rowData)
-      return;
-    this.rowClick.emit({ name: this.name, data: item.rowData });
-  }
-  renderListItem(item) {
-    const cleanHTML = purify.sanitize(item.element, domSanitiserOptions);
-    return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
-        this.onRowClickHandler(item);
-      } }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
-  }
-  render() {
-    if (!this.data)
-      return;
-    if (typeof this.data === 'string') {
-      this._data = JSON.parse(this.data);
-    }
-    else {
-      this._data = this.data;
-    }
-    return h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
-  }
-};
+const TttxList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.rowClick = createEvent(this, "listRowClick", 7);
+    this.data = undefined;
+    this.name = undefined;
+  }
+  onRowClickHandler(item) {
+    if (!item.clickable || !item.rowData)
+      return;
+    this.rowClick.emit({ name: this.name, data: item.rowData });
+  }
+  renderListItem(item) {
+    const cleanHTML = purify.sanitize(item.element, domSanitiserOptions);
+    return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
+        this.onRowClickHandler(item);
+      } }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
+  }
+  render() {
+    if (!this.data)
+      return;
+    if (typeof this.data === 'string') {
+      this._data = JSON.parse(this.data);
+    }
+    else {
+      this._data = this.data;
+    }
+    return h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
+  }
+};
 TttxList.style = tttxListCss;
 
 export { TttxList as tttx_list };

package/dist/esm/tttx-loading-spinner.entry.js

@@ -1,22 +1,22 @@
-import { r as registerInstance, h } from './index-e888a5f4.js';
+import { r as registerInstance, h } from './index-86faeaab.js';
 
 const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.spinner-container{position:absolute}.loading-box{display:flex;align-items:center;justify-content:center}.loading-text{font-size:16px;font-weight:400;padding-top:10px;text-align:center}.spinner{border:solid #1479c6;border-bottom-color:#d5d5d5;border-radius:50%;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite}.spinner.small{height:20px;width:20px;border-width:4px}.spinner.large{height:60px;width:60px;border-width:8px}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 
-const TttxLoadingSpinner = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.loadingMessage = undefined;
-    this.size = 'large';
-  }
-  renderLoadingMessage() {
-    if (!this.loadingMessage)
-      return '';
-    return h("div", { class: "loading-text" }, "Loading, please wait...");
-  }
-  render() {
-    return (h("div", { class: "spinner-container" }, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
-  }
-};
+const TttxLoadingSpinner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.loadingMessage = undefined;
+    this.size = 'large';
+  }
+  renderLoadingMessage() {
+    if (!this.loadingMessage)
+      return '';
+    return h("div", { class: "loading-text" }, "Loading, please wait...");
+  }
+  render() {
+    return (h("div", { class: "spinner-container" }, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
+  }
+};
 TttxLoadingSpinner.style = tttxLoadingSpinnerCss;
 
 export { TttxLoadingSpinner as tttx_loading_spinner };

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

@@ -0,0 +1,108 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-86faeaab.js';
+
+const tttxSorterCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.sorter-container{display:inline-flex;flex-direction:row;position:relative;height:36px;border:1px solid #d5d5d5;border-radius:4px;font-family:\"Roboto\", serif;font-weight:400}@media (max-width: 475px){.sorter-container{width:68px}}.sorter-container .arrow-toggle-button{display:inline-flex;justify-content:center;align-items:center;flex-direction:column;height:36px;background-color:white;font-size:16px;border:none;border-bottom-left-radius:4px;border-top-left-radius:4px}.sorter-container .arrow-toggle-button .hydrated{display:flex;justify-content:center;align-items:center}.sorter-container .arrow-toggle-button span{display:block;margin:auto;line-height:16px}.sorter-container .arrow-toggle-button .material-symbols-rounded{color:#212121}.sorter-container .dropdown-selector{display:inline-flex;position:relative;height:36px;flex-grow:1}.sorter-container .dropdown-selector .dropdown-selector-button{display:inline-flex;flex-direction:row;gap:4px;padding-right:4px;align-items:center;height:36px;font-size:16px;line-height:21px;color:#212121;box-sizing:border-box;width:100%}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-button .dropdown-selector-text{display:none}}.sorter-container .dropdown-selector .dropdown-selector-chevron{display:inline-flex;right:0;top:0;flex-direction:row;align-items:center;align-self:flex-end;height:36px}.sorter-container .dropdown-selector .dropdown-selector-chevron .hydrated{height:24px}.sorter-container .dropdown-options-list{position:absolute;top:36px;left:0;z-index:1;width:100%;line-height:21px;font-size:16px;border-radius:4px;padding-top:8px;padding-bottom:7px;box-shadow:0px 1px 5px #1111114D;box-sizing:border-box}@media (max-width: 475px){.sorter-container .dropdown-options-list{width:220px;padding-top:8px}}.sorter-container .dropdown-options-list .dropdown-option{padding:8px 16px;font-size:16px;line-height:21px}.sorter-container .dropdown-options-list .dropdown-option:hover,.sorter-container .dropdown-options-list .dropdown-option:focus{background-color:#e7f1f9}.sorter-container.--expanded{border-color:#1579c6}@media (max-width: 475px){.sorter-container.--expanded{border:none}}";
+
+const TttxSorter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sorterChangeEvent = createEvent(this, "sorterChangeEvent", 7);
+    this.sorterKey = undefined;
+    this.defaultSortDirection = 'descending';
+    this.fieldOptionsData = null;
+    this.defaultOption = '';
+    this.selectedField = this.defaultOption;
+    this.sortDirection = this.defaultSortDirection;
+    this.dropdownExpand = false;
+    this.dropdownOptions = undefined;
+  }
+  emitSortEvent() {
+    this.sorterChangeEvent.emit({
+      sorterDirection: this.sortDirection,
+      sorterKey: this.sorterKey,
+      sortField: this.selectedField,
+    });
+  }
+  onSortToggleClick(event) {
+    event.preventDefault();
+    if (this.sortDirection == 'ascending') {
+      this.sortDirection = 'descending';
+    }
+    else {
+      this.sortDirection = 'ascending';
+    }
+    this.emitSortEvent();
+  }
+  onDropdownClicked() {
+    this.dropdownExpand = !this.dropdownExpand;
+  }
+  onDropdownSelected(event) {
+    this.dropdownExpand = false;
+    const target = event.target;
+    this.selectedField = target.innerHTML;
+    this.emitSortEvent();
+  }
+  // getOptionsList() {
+  //     return this.el.shadowRoot.querySelectorAll('.dropdown-option');
+  // }
+  // /* istanbul ignore next */
+  // @Listen('keyup')
+  // handleKeyDown(ev: KeyboardEvent) {
+  //     const keyboardEventValue = ev.key;
+  //     if (document.activeElement.id != `sorter__${this.sorterKey}`) return;
+  //     switch (keyboardEventValue) {
+  //         case 'Enter':
+  //             if (this._focussedElementIndex > -1) {
+  //                 const options = this.el.shadowRoot.querySelectorAll('.dropdown-option');
+  //                 this.selectedField = options[this._focussedElementIndex].innerHTML;
+  //                 this.emitSortEvent();
+  //             }
+  //             this.dropdownExpand = false;
+  //             break;
+  //         case 'Escape':
+  //             this.dropdownExpand = false;
+  //             break;
+  //         case 'ArrowDown':
+  //             this.dropdownExpand = true;
+  //             if (this._focussedElementIndex > -1) {
+  //                 const options = this.getOptionsList();
+  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
+  //                 currentOption.blur();
+  //                 options[this._focussedElementIndex].focus();
+  //                 this._focussedElementIndex + 1 < options.length ? this._focussedElementIndex++ : (this._focussedElementIndex = 0);
+  //             } else {
+  //                 this._focussedElementIndex++;
+  //             }
+  //             break;
+  //         case 'ArrowUp':
+  //             this.dropdownExpand = true;
+  //             if (this._focussedElementIndex == -1) {
+  //                 const options = this.getOptionsList();
+  //                 this._focussedElementIndex = options.length - 1;
+  //             } else {
+  //                 const options = this.getOptionsList();
+  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
+  //                 currentOption.blur();
+  //                 this._focussedElementIndex > 0 ? this._focussedElementIndex-- : (this._focussedElementIndex = options.length - 1);
+  //                 options[this._focussedElementIndex].focus();
+  //             }
+  //             break;
+  //     }
+  // }
+  render() {
+    const parsedFieldOptionsData = typeof this.fieldOptionsData === 'string' ? JSON.parse(this.fieldOptionsData) : this.fieldOptionsData;
+    if (!this.fieldOptionsData)
+      return;
+    const arrowIcon = this.sortDirection == 'ascending' ? 'arrow_upward' : 'arrow_downward';
+    const chevronIcon = this.dropdownExpand ? 'expand_less' : 'expand_more';
+    const selectedOption = this.selectedField;
+    const dropdownSelectorClassNameModifier = this.dropdownExpand ? '--expanded' : '';
+    const sorterKey = `sorter__${this.sorterKey}`;
+    return (h(Host, { id: sorterKey }, h("div", { tabindex: 0, class: `sorter-container ${dropdownSelectorClassNameModifier}` }, h("button", { class: "arrow-toggle-button", type: "button", onClick: this.onSortToggleClick.bind(this) }, h("tttx-icon", { icon: arrowIcon, color: "black" })), h("div", { class: "dropdown-selector", onClick: this.onDropdownClicked.bind(this) }, h("div", { class: "dropdown-selector-button" }, h("div", { class: "dropdown-selector-text" }, selectedOption), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon", { icon: chevronIcon, color: "black" })))), this.dropdownExpand && (h("div", { class: "dropdown-options-list" }, parsedFieldOptionsData.sorterOptions.map(option => {
+      return (h("div", { class: "dropdown-option", tabIndex: -1, onClick: this.onDropdownSelected.bind(this), key: option.optionLabel }, option.optionLabel));
+    }))))));
+  }
+  get el() { return getElement(this); }
+};
+TttxSorter.style = tttxSorterCss;
+
+export { TttxSorter as tttx_sorter };

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

@@ -1,66 +1,66 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-e888a5f4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-86faeaab.js';
 
 const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-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}.icon-left.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.input-icon.sc-tttx-standalone-input{position:absolute;margin-top:9px;margin-left:4px}.errormsg.sc-tttx-standalone-input{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center}label.inputInline.sc-tttx-standalone-input .input-container.sc-tttx-standalone-input{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}@media (max-width: 600px){input[type=date].sc-tttx-standalone-input{padding-top:6px}}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}.input-icon.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding:0 32px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}input.sc-tttx-standalone-input:focus-visible{outline:none}.sc-tttx-standalone-input-h{display:block}.input-container.sc-tttx-standalone-input{position:relative}#icon-left.sc-tttx-standalone-input{position:absolute;left:8px;top:10px}#icon-left.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-left:36px}#icon-right.sc-tttx-standalone-input{position:absolute;right:8px;top:10px}#icon-right.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-right:36px}";
 
-const TttxInput = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.valueChanged = createEvent(this, "valueChanged", 7);
-    this.focusChanged = createEvent(this, "focusChanged", 7);
-    this.blurChanged = createEvent(this, "blurChanged", 7);
-    this.invalidChanged = createEvent(this, "invalidChanged", 7);
-    this.label = undefined;
-    this.showerrormsg = undefined;
-    this.showerrorbubble = true;
-    this.errormsg = undefined;
-    this.iconleft = undefined;
-    this.iconright = undefined;
-    this.inputicon = undefined;
-    this.inline = undefined;
-    this.inputAutocapitalize = undefined;
-    this.inputAutofocus = undefined;
-    this.inputKeyhint = undefined;
-    this.inputIndex = undefined;
-    this.inputTitle = undefined;
-    this.autocomplete = undefined;
-    this.checked = undefined;
-    this.disabled = undefined;
-    this.max = undefined;
-    this.maxlength = undefined;
-    this.min = undefined;
-    this.minlength = undefined;
-    this.name = undefined;
-    this.pattern = undefined;
-    this.placeholder = undefined;
-    this.readonly = undefined;
-    this.required = undefined;
-    this.step = undefined;
-    this.type = 'text';
-    this.value = undefined;
-  }
-  handleChange(event) {
-    const target = event.target;
-    this.value = target.value;
-    this.valueChanged.emit(target.value);
-  }
-  handleFocus(event) {
-    const target = event.target;
-    this.focusChanged.emit(target.value);
-  }
-  handleBlur(event) {
-    const target = event.target;
-    this.blurChanged.emit(target.value);
-  }
-  handleInvalid(event) {
-    event.preventDefault();
-    const target = event.target;
-    this.invalidChanged.emit(target.value);
-  }
-  render() {
-    const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
-    return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: "input-container" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: "grey" })), this.iconleft && (h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: "grey" })), this.iconright && (h("tttx-icon", { id: "icon-right", icon: this.iconright, color: "grey" })), h("input", { class: classNames, autocapitalize: this.inputAutocapitalize, autofocus: this.inputAutofocus, enterkeyhint: this.inputKeyhint, tabindex: this.inputIndex, title: this.inputTitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
-  }
-};
+const TttxInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.focusChanged = createEvent(this, "focusChanged", 7);
+    this.blurChanged = createEvent(this, "blurChanged", 7);
+    this.invalidChanged = createEvent(this, "invalidChanged", 7);
+    this.label = undefined;
+    this.showerrormsg = undefined;
+    this.showerrorbubble = true;
+    this.errormsg = undefined;
+    this.iconleft = undefined;
+    this.iconright = undefined;
+    this.inputicon = undefined;
+    this.inline = undefined;
+    this.inputAutocapitalize = undefined;
+    this.inputAutofocus = undefined;
+    this.inputKeyhint = undefined;
+    this.inputIndex = undefined;
+    this.inputTitle = undefined;
+    this.autocomplete = undefined;
+    this.checked = undefined;
+    this.disabled = undefined;
+    this.max = undefined;
+    this.maxlength = undefined;
+    this.min = undefined;
+    this.minlength = undefined;
+    this.name = undefined;
+    this.pattern = undefined;
+    this.placeholder = undefined;
+    this.readonly = undefined;
+    this.required = undefined;
+    this.step = undefined;
+    this.type = 'text';
+    this.value = undefined;
+  }
+  handleChange(event) {
+    const target = event.target;
+    this.value = target.value;
+    this.valueChanged.emit(target.value);
+  }
+  handleFocus(event) {
+    const target = event.target;
+    this.focusChanged.emit(target.value);
+  }
+  handleBlur(event) {
+    const target = event.target;
+    this.blurChanged.emit(target.value);
+  }
+  handleInvalid(event) {
+    event.preventDefault();
+    const target = event.target;
+    this.invalidChanged.emit(target.value);
+  }
+  render() {
+    const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
+    return (h(Host, null, h("label", { class: this.inline ? 'inputInline' : 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', h("div", { class: "input-container" }, this.inputicon && (h("tttx-icon", { class: "input-icon", icon: this.inputicon, color: "grey" })), this.iconleft && (h("tttx-icon", { id: "icon-left", icon: this.iconleft, color: "grey" })), this.iconright && (h("tttx-icon", { id: "icon-right", icon: this.iconright, color: "grey" })), h("input", { class: classNames, autocapitalize: this.inputAutocapitalize, autofocus: this.inputAutofocus, enterkeyhint: this.inputKeyhint, tabindex: this.inputIndex, title: this.inputTitle, autocomplete: this.autocomplete, checked: this.checked, disabled: this.disabled, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this), onInvalid: this.handleInvalid.bind(this) }), this.showerrorbubble && (h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))))));
+  }
+};
 TttxInput.style = tttxStandaloneInputCss;
 
 export { TttxInput as tttx_standalone_input };

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

@@ -1,16 +1,16 @@
-import { r as registerInstance, h, H as Host } from './index-e888a5f4.js';
+import { r as registerInstance, h, H as Host } from './index-86faeaab.js';
 
 const tttxToolbarCss = ":host{height:36px;display:flex;padding:8px 0;gap:8px}:host(.bordered){border-bottom:1px solid #d5d5d5}slot[name=before]{display:flex;flex:1 1 0px;gap:8px}slot[name=center]{display:flex;justify-content:center;flex:1 1 0px;gap:8px}slot[name=after]{display:flex;justify-content:end;flex:1 1 0px;gap:8px}";
 
-const TttxToolbar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.border = true;
-  }
-  render() {
-    return (h(Host, { class: this.border ? 'bordered' : '' }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' })));
-  }
-};
+const TttxToolbar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.border = true;
+  }
+  render() {
+    return (h(Host, { class: this.border ? 'bordered' : '' }, h("slot", { name: 'before' }), h("slot", { name: 'center' }), h("slot", { name: 'after' })));
+  }
+};
 TttxToolbar.style = tttxToolbarCss;
 
 export { TttxToolbar as tttx_toolbar };

package/dist/esm/tttx.js

@@ -1,8 +1,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-e888a5f4.js';
-export { s as setNonce } from './index-e888a5f4.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-86faeaab.js';
 
 /*
- Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;
@@ -14,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[16],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"selectedFilters":[32],"filterSearchTerm":[32],"displayedFilterSettings":[32],"allSelected":[32]}]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["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-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
+  return bootstrapLazy([["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[16],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"selectedFilters":[32],"filterSearchTerm":[32],"displayedFilterSettings":[32],"allSelected":[32]}]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["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]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["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-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]]], options);
 });