@3t-transform/threeteeui 0.1.7 → 0.1.10

package/dist/cjs/{index-451f61dd.js → index-dc6cc829.js}

@@ -76,6 +76,7 @@ const isComplexType = (o) => {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let simple = false;
     let lastSimple = false;
     const vNodeChildren = [];
@@ -103,6 +104,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -120,6 +125,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     return vnode;
 };
 const newVNode = (tag, text) => {
@@ -133,6 +141,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -298,6 +309,33 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
+        else if (memberName === 'key')
+            ;
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -547,6 +585,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -554,6 +594,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // VNode might have been moved left
@@ -620,7 +661,41 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // Here we do some checks to match up old and new nodes based on the
+            // `$key$` attribute, which is set by putting a `key="my-key"` attribute
+            // in the JSX for a DOM element in the implementation of a Stencil
+            // component.
+            //
+            // First we check to see if there are any nodes in the array of old
+            // children which have the same key as the first node in the new
+            // children.
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                // We found a node in the old children which matches up with the first
+                // node in the new children! So let's deal with that
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    // the tag doesn't match so we'll need a new DOM element
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    // invalidate the matching old node so that we won't try to update it
+                    // again later on
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // We either didn't find an element in the old children that matches
                 // the key of the first new child OR the build is not using `key`
                 // attributes at all. In either case we need to create a new element
@@ -668,7 +743,10 @@ const isSameVnode = (leftVNode, rightVNode) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (leftVNode.$tag$ === rightVNode.$tag$) {
-        return true;
+        // this will be set if components in the build have `key` attrs set on them
+        {
+            return leftVNode.$key$ === rightVNode.$key$;
+        }
     }
     return false;
 };
@@ -1200,7 +1278,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$watchers$ = {};
             }
-            const tagName = cmpMeta.$tagName$;
+            const tagName = options.transformTagName
+                ? options.transformTagName(cmpMeta.$tagName$)
+                : cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost
                 constructor(self) {
@@ -1374,6 +1454,7 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;
+exports.getElement = getElement;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;

package/dist/cjs/loader.cjs.js

@@ -2,35 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-11cfdabe.js');
-const appGlobals = require('./app-globals-3a1e7e63.js');
+const index = require('./index-dc6cc829.js');
 
 /*
  Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
-    // NOTE!! This fn cannot use async/await!
-    // @ts-ignore
-    if (index.BUILD.cssVarShim && !(index.CSS && index.CSS.supports && index.CSS.supports('color', 'var(--c)'))) {
-        // @ts-ignore
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-css-shim" */ './css-shim-211819bc.js'); }).then(() => {
-            if ((index.plt.$cssShim$ = index.win.__cssshim)) {
-                return index.plt.$cssShim$.i();
-            }
-            else {
-                // for better minification
-                return 0;
-            }
-        });
-    }
     return index.promiseResolve();
 };
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  appGlobals.globalScripts();
-  return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input.cjs",[[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.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter.cjs",[[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.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input.cjs",[[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.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
   });
 };
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-11cfdabe.js');
+const index = require('./index-dc6cc829.js');
 
-const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}.spacingleft{margin-left:8px}";
+const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}button{cursor:pointer}tttx-icon{cursor:inherit}.spacingleft{margin-left:8px}";
 
 const TttxButton = class {
   constructor(hostRef) {

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

@@ -0,0 +1,162 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-dc6cc829.js');
+
+const tttxFilterCss = ".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}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:\"Roboto\", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:block;width:196px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:\"Roboto\", serif;padding-left:16px;padding-top:12px;padding-bottom:12px;margin:0}.filter-container .filter-popover-container .popover-divider{border:none;width:164px;display:flex;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:8px;height:1px;background-color:#d5d5d5}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;height:36px;padding-left:22px;padding-bottom:4px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-option:first-child{margin-top:8px}.filter-container .filter-popover-container .filter-option:last-child{margin-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center;padding-bottom:8px}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;margin-right:16px;font-size:14px;font-weight:400;font-family:\"Roboto\", serif}.filter-container .filter-popover-container.--with-search-field{width:252px}.filter-container .filter-popover-container.--with-search-field .popover-divider{width:220px}.filter-container .filter-popover-container.--with-search-field .popover-divider:first-child{top:44px}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;width:220px;height:36px;padding:0 16px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:50%;padding-left:8px;padding-bottom:9.2px;height:17px;width:17px;transform:translateY(-50%)}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;width:220px;font-size:16px;font-family:\"Roboto\", serif;font-weight:500;color:#9e9e9e;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:\"Roboto\", serif;font-weight:500}.filter-container .filter-popover-container.--with-search-field .search-field-container .popover-divider{margin-top:8px}.filter-container .filter-popover-container.--with-search-field .filter-option:first-child{padding-top:8px}";
+
+const TttxFilter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.filterChangeEvent = index.createEvent(this, "filterChangeEvent", 7);
+    this.filterKey = undefined;
+    this.filterOptions = [
+      { optionIcon: 'cancel', optionIconColor: 'darkred', optionText: 'Expired' },
+      { optionIcon: 'warning', optionIconColor: 'orange', optionText: 'Expiring soon' },
+      { optionIcon: 'check_circle', optionIconColor: 'green', optionText: 'Active' },
+    ];
+    this.showSelectAll = true;
+    this.showSearchField = false;
+    this.showOptionIcons = true;
+    this.filterButtonStyle = 'list filter';
+    this.filterHeader = 'Qualification status';
+    this.showPopover = false;
+    this.selectedFilters = this.filterOptions.map((filterOption) => filterOption.optionText);
+    this.filterSearchTerm = '';
+    this.displayedFilterSettings = this.filterOptions;
+    this.allSelected = true;
+  }
+  emitFilterEvent() {
+    this.filterChangeEvent.emit({
+      selectedFilters: this.selectedFilters,
+      filterKey: this.filterKey,
+      allSelected: this.allSelected,
+    });
+  }
+  onFilterButtonClick() {
+    this.togglePopover();
+  }
+  onCloseButtonClick() {
+    this.togglePopover();
+  }
+  onApplyFilterButtonClick() {
+    this.emitFilterEvent();
+    this.togglePopover();
+  }
+  onFilterOptionSelected(selectedOption) {
+    this.allSelected = false;
+    if (this.selectedFilters.includes(selectedOption)) {
+      this.selectedFilters = this.selectedFilters.filter((filter) => filter != selectedOption);
+    }
+    else {
+      this.selectedFilters = [...this.selectedFilters, selectedOption];
+    }
+  }
+  togglePopover() {
+    this.showPopover = !this.showPopover;
+    //     if(!this.showPopover) {
+    //         // this._focussedElementIndex = -1;
+    //     }
+  }
+  // Commented out keyboard interaction for now
+  // @Listen('keyup')
+  // handleKeyUp(event: KeyboardEvent) {
+  //     const keyboardEventValue = event.key;
+  //     if (document.activeElement.id != `filter__${this.filterKey}`) return;
+  //     if (event.key == " " || event.code == "Space" || event.keyCode == 32) {
+  //         if (this._focussedElementIndex == 0) {
+  //             this.onSelectAllClick()
+  //         } else {
+  //             const options = this.el.shadowRoot.querySelectorAll('.filter-option') as HTMLElement[];
+  //             this.onFilterOptionSelected(options[this._focussedElementIndex].textContent)
+  //         }
+  //         return;
+  //     }
+  //     switch (keyboardEventValue) {
+  //         case 'Enter':
+  //         if(!this.showPopover) {
+  //             this.showPopover=true
+  //         } else {
+  //             this.emitFilterEvent()
+  //         }
+  //             break;
+  //         case 'Escape':
+  //             this.showPopover = false;
+  //             this._focussedElementIndex = -1;
+  //             break;
+  //         case 'ArrowDown':
+  //             this.showPopover = true;
+  //             if (this._focussedElementIndex == -1) {
+  //                 this._focussedElementIndex = 0;
+  //             } else {
+  //                 const options = this.el.shadowRoot.querySelectorAll('.filter-option') as HTMLElement[];
+  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
+  //                 currentOption.blur();
+  //                 // options[this._focussedElementIndex].focus();
+  //                 this._focussedElementIndex + 1 < options.length ? this._focussedElementIndex++ : (this._focussedElementIndex = 0);
+  //             }
+  //             break;
+  //         case 'ArrowUp':
+  //             if (this._focussedElementIndex == -1) {
+  //                 this.showPopover = true;
+  //                 this._focussedElementIndex = 0;
+  //             } else {
+  //                 const options = this.el.shadowRoot.querySelectorAll('.filter-option') as HTMLElement[];
+  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
+  //                 currentOption.blur();
+  //                 // options[this._focussedElementIndex].focus();
+  //                 this._focussedElementIndex > 0 ? this._focussedElementIndex-- : (this._focussedElementIndex = options.length - 1);
+  //             }
+  //             break;
+  //     }
+  // }
+  handleFilterChange(event) {
+    const target = event.target;
+    this.filterSearchTerm = target.value;
+    const filteredResults = this.filterOptions.filter((filterOption) => {
+      const lowercaseOption = filterOption.optionText.toLowerCase();
+      const filterTerm = this.filterSearchTerm.toLowerCase();
+      return lowercaseOption.includes(filterTerm);
+    });
+    this.displayedFilterSettings = filteredResults;
+  }
+  onSelectAllClick() {
+    this.allSelected = !this.allSelected;
+    if (this.allSelected) {
+      this.displayedFilterSettings.forEach((filterSetting) => { this.selectedFilters = [...this.selectedFilters, filterSetting.optionText]; });
+    }
+    else {
+      this.selectedFilters = [];
+    }
+  }
+  getFilterButtonClassName(buttonStyle) {
+    switch (buttonStyle) {
+      case 'table icon': {
+        return '--table-icon';
+      }
+      case 'list icon': {
+        return '--list-icon';
+      }
+      default: {
+        return '';
+      }
+    }
+  }
+  render() {
+    const filterPopoverContainerClassNameModifier = this.showSearchField ? '--with-search-field' : '';
+    const selectAllCheckboxIcon = this.allSelected ? 'check_box' : 'check_box_outline_blank';
+    const selectAllCheckboxColor = this.allSelected ? 'blue' : 'grey';
+    const buttonStyleClassNameModifier = this.getFilterButtonClassName(this.filterButtonStyle);
+    const filterKey = `filter__${this.filterKey}`;
+    return (index.h(index.Host, { id: filterKey }, index.h("div", { class: 'filter-container' }, index.h("button", { class: `filter-button ${buttonStyleClassNameModifier}`, type: 'button', onClick: this.onFilterButtonClick.bind(this) }, index.h("tttx-icon", { icon: 'filter_list', class: 'filter-icon', color: 'black' }), "Filter"), this.showPopover && (index.h("div", { class: `filter-popover-container ${filterPopoverContainerClassNameModifier}` }, index.h("h4", { class: 'filter-header' }, this.filterHeader), index.h("hr", { class: 'popover-divider' }), this.showSearchField ? (index.h("div", { class: 'search-field-container' }, index.h("tttx-icon", { icon: 'search', class: 'search-icon' }), index.h("input", { type: 'text', class: 'search-input', placeholder: 'Search', value: this.filterSearchTerm, onInput: this.handleFilterChange.bind(this) }), index.h("hr", { class: 'popover-divider' }))) : (''), index.h("div", { class: 'filter-options-container' }, this.showSelectAll ? (index.h("div", { class: 'filter-option', tabIndex: -1, onClick: this.onSelectAllClick.bind(this) }, index.h("tttx-icon", { icon: selectAllCheckboxIcon, color: selectAllCheckboxColor, class: 'select-all-icon' }), index.h("label", { class: 'filter-label' }, "Select all"))) : (''), this.displayedFilterSettings.map((option) => {
+      const checkboxIcon = this.selectedFilters.includes(option.optionText) ? 'check_box' : 'check_box_outline_blank';
+      const checkboxColor = this.selectedFilters.includes(option.optionText) ? 'blue' : 'grey';
+      return index.h("div", { class: 'filter-option', tabIndex: -1, onClick: () => this.onFilterOptionSelected(option.optionText), key: option.optionText }, index.h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), this.showOptionIcons && index.h("tttx-icon", { icon: option.optionIcon, color: option.optionIconColor }), index.h("label", { class: 'filter-label' }, option.optionText));
+    })), index.h("hr", { class: 'popover-divider' }), index.h("div", { class: 'filter-popover-button-container' }, index.h("button", { type: 'button', class: 'close-button', onClick: this.onCloseButtonClick.bind(this) }, "Close"), index.h("button", { type: 'button', class: 'apply-button', onClick: this.onApplyFilterButtonClick.bind(this) }, "Apply")))))));
+  }
+  get el() { return index.getElement(this); }
+};
+TttxFilter.style = tttxFilterCss;
+
+exports.tttx_filter = TttxFilter;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-11cfdabe.js');
+const index = require('./index-dc6cc829.js');
 
 /**
  * Validates the input field on focusout event by checking its validity state,

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-11cfdabe.js');
+const index = require('./index-dc6cc829.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}";
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-11cfdabe.js');
+const index = require('./index-dc6cc829.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}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%}}@media (max-width: 600px){dl.horizontal div{width:100%}}";
+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%}}@media (max-width: 600px){dl.horizontal div{width:100%}}";
 
 const TttxKeyvalueBlock = class {
   constructor(hostRef) {
@@ -28,10 +28,11 @@ const TttxKeyvalueBlock = class {
   }
   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(index.h("div", null, index.h("dt", { class: 'mainTitle' }, value.title), index.h("dt", { class: 'subTitle' }, value.subTitle), index.h("dd", null, value.data)));
+        elements.push(index.h("div", { style: { maxWidth: divSize } }, index.h("dt", { class: 'mainTitle' }, value.title), index.h("dt", { class: 'subTitle' }, value.subTitle), index.h("dd", null, value.data)));
       }
       else {
         elements.push(index.h("dt", { class: 'mainTitle' }, value.title));

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

@@ -2,47 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-11cfdabe.js');
+const index = require('./index-dc6cc829.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
 		path: basedir,
 		exports: {},
 		require: function (path, base) {
-			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+			return commonjsRequire();
 		}
 	}, fn(module, module.exports), module.exports;
 }
 
-function getDefaultExportFromNamespaceIfPresent (n) {
-	return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n['default'] : n;
-}
-
-function getDefaultExportFromNamespaceIfNotNamed (n) {
-	return n && Object.prototype.hasOwnProperty.call(n, 'default') && Object.keys(n).length === 1 ? n['default'] : n;
-}
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
 function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
@@ -51,11 +24,8 @@ var purify = createCommonjsModule(function (module, exports) {
 /*! @license DOMPurify 3.0.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.3/LICENSE */
 
 (function (global, factory) {
-  'object' === 'object' && 'object' !== 'undefined' ? module.exports = factory() :
-  typeof undefined === 'function' && undefined.amd ? undefined(factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DOMPurify = factory());
-})(commonjsGlobal, (function () { 'use strict';
-
+  module.exports = factory() ;
+})(commonjsGlobal, (function () {
   const {
     entries,
     setPrototypeOf,

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-11cfdabe.js');
+const index = require('./index-dc6cc829.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)}}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-11cfdabe.js');
+const index = require('./index-dc6cc829.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}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-11cfdabe.js');
+const index = require('./index-dc6cc829.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}";