@progressio_resources/gravity-design-system 2.2.0 → 2.2.1

package/fesm2022/progressio_resources-gravity-design-system.mjs

@@ -669,8 +669,6 @@ class GravityTooltipDirective {
             this.destroyTooltip();
         }, this.options['hideDelayAfterClick']);
     }
-    ngOnInit() {
-    }
     ngOnChanges(changes) {
         this.initOptions = this.renameProperties(this.initOptions);
         let changedOptions = this.getProperties(changes);
@@ -1539,7 +1537,6 @@ class GravityTableComponent {
         this.renderer = renderer;
         this.tableDensity = "standard";
         this.tableSizeInput = "auto";
-        this.firstTime = true;
         this.tableElement = null;
         this.tableSize = 'xl';
         let milliseconds = new Date().getTime();
@@ -1549,11 +1546,7 @@ class GravityTableComponent {
     ngAfterViewInit() {
         this.tableElement = this.tableContainer?.nativeElement?.childNodes[0];
         this.renderer.setAttribute(this.tableElement, 'table-id', this.tableId);
-        let tableHeaders = this.getTableHeaders();
-        this.initializeTable(tableHeaders);
-        this.adjustTableDensity(this.tableDensity);
-        this.adjustButtonsSize();
-        this.onResize();
+        this.initializeComponent();
     }
     ngOnChanges(changes) {
         if (this.tableElement) {
@@ -1566,15 +1559,6 @@ class GravityTableComponent {
             }
         }
     }
-    ngAfterContentChecked() {
-        if (this.tableElement) {
-            let tableHeaders = this.getTableHeaders();
-            this.initializeTable(tableHeaders);
-            this.adjustTableDensity(this.tableDensity);
-            this.adjustButtonsSize();
-            this.onResize();
-        }
-    }
     getTableHeaders() {
         let tableHeaderItems = document.querySelectorAll('thead tr th');
         let tableHeaders = [];
@@ -1583,51 +1567,55 @@ class GravityTableComponent {
         });
         return tableHeaders;
     }
+    initializeComponent() {
+        let tableHeaders = this.getTableHeaders();
+        this.initializeTable(tableHeaders);
+        this.adjustTableDensity(this.tableDensity);
+        this.adjustButtonsSize();
+        this.onResize();
+    }
     initializeTable(tableHeaders) {
-        if (this.firstTime) {
-            this.firstTime = false;
-            //Set corresponding tableHeader as an attribute of each td
-            let tableBody = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr td');
-            tableBody.forEach((tableBodyRow, index) => {
-                this.renderer.setAttribute(tableBodyRow, 'header-name', tableHeaders[index % tableHeaders.length]);
-            });
-            //Creates a copy of mobile-menu-trigger element for each tr
-            let tableBodyRows = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr');
-            let closeButtons = document.querySelectorAll('gravity-button[id-reference="close-button"]');
-            tableBodyRows.forEach((tr, index) => {
-                let mobileMenuTrigger = document.createElement('div');
-                this.renderer.addClass(mobileMenuTrigger, 'mobile-menu-trigger');
-                this.renderer.setAttribute(mobileMenuTrigger, 'cloned-node', 'true');
-                let menuToggle = document.createElement('div');
-                this.renderer.addClass(menuToggle, 'menu-toggle');
-                menuToggle.appendChild(document.createElement('span'));
-                menuToggle.appendChild(document.createElement('span'));
-                menuToggle.appendChild(document.createElement('span'));
-                menuToggle.addEventListener("click", () => {
-                    if (menuToggle.classList.contains('open')) {
-                        this.renderer.removeClass(menuToggle, 'open');
-                        this.renderer.removeClass(menuToggle.parentElement.lastElementChild, 'open');
-                    }
-                    else {
-                        this.renderer.addClass(menuToggle, 'open');
-                        this.renderer.addClass(menuToggle.parentElement.lastElementChild, 'open');
-                    }
-                });
-                mobileMenuTrigger.appendChild(menuToggle);
-                let panel = document.createElement('div');
-                this.renderer.addClass(panel, 'panel');
-                let closeButtonFromNodeList = closeButtons.item(index);
-                let closeButtonRemoved = closeButtonFromNodeList.parentNode.removeChild(closeButtonFromNodeList);
-                this.renderer.setAttribute(closeButtonRemoved, 'cloned-button', 'true');
-                closeButtonRemoved.addEventListener("click", () => {
+        //Set corresponding tableHeader as an attribute of each td
+        let tableBody = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr td');
+        tableBody.forEach((tableBodyRow, index) => {
+            this.renderer.setAttribute(tableBodyRow, 'header-name', tableHeaders[index % tableHeaders.length]);
+        });
+        //Creates a copy of mobile-menu-trigger element for each tr
+        let tableBodyRows = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr');
+        let closeButtons = document.querySelectorAll('gravity-button[id-reference="close-button"]');
+        tableBodyRows.forEach((tr, index) => {
+            let mobileMenuTrigger = document.createElement('div');
+            this.renderer.addClass(mobileMenuTrigger, 'mobile-menu-trigger');
+            this.renderer.setAttribute(mobileMenuTrigger, 'cloned-node', 'true');
+            let menuToggle = document.createElement('div');
+            this.renderer.addClass(menuToggle, 'menu-toggle');
+            menuToggle.appendChild(document.createElement('span'));
+            menuToggle.appendChild(document.createElement('span'));
+            menuToggle.appendChild(document.createElement('span'));
+            menuToggle.addEventListener("click", () => {
+                if (menuToggle.classList.contains('open')) {
                     this.renderer.removeClass(menuToggle, 'open');
                     this.renderer.removeClass(menuToggle.parentElement.lastElementChild, 'open');
-                });
-                panel.append(closeButtonRemoved);
-                mobileMenuTrigger.appendChild(panel);
-                tr.insertBefore(mobileMenuTrigger, tr.firstChild);
+                }
+                else {
+                    this.renderer.addClass(menuToggle, 'open');
+                    this.renderer.addClass(menuToggle.parentElement.lastElementChild, 'open');
+                }
             });
-        }
+            mobileMenuTrigger.appendChild(menuToggle);
+            let panel = document.createElement('div');
+            this.renderer.addClass(panel, 'panel');
+            let closeButtonFromNodeList = closeButtons.item(index);
+            let closeButtonRemoved = closeButtonFromNodeList.parentNode.removeChild(closeButtonFromNodeList);
+            this.renderer.setAttribute(closeButtonRemoved, 'cloned-button', 'true');
+            closeButtonRemoved.addEventListener("click", () => {
+                this.renderer.removeClass(menuToggle, 'open');
+                this.renderer.removeClass(menuToggle.parentElement.lastElementChild, 'open');
+            });
+            panel.append(closeButtonRemoved);
+            mobileMenuTrigger.appendChild(panel);
+            tr.insertBefore(mobileMenuTrigger, tr.firstChild);
+        });
     }
     adjustTableDensity(densityValue) {
         this.renderer.removeClass(this.tableElement, 'standard-table');
@@ -1712,7 +1700,7 @@ class GravityTableComponent {
         }
         if (this.tableSize == 'lg' || this.tableSize == 'xl') {
             let nodeListIndex = nodesList.length - 1;
-            while (nodesList.length != 1) {
+            while (nodesList.length > 1) {
                 let item = nodesList.item(nodeListIndex);
                 let closeButtonNode = item.parentNode.querySelectorAll('gravity-button[id-reference="close-button"]').item(0);
                 if (item != closeButtonNode) {
@@ -1725,11 +1713,11 @@ class GravityTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTableComponent, selector: "gravity-table", inputs: { tableDensity: "tableDensity", tableSizeInput: "tableSizeInput" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}.table-container{overflow-x:auto}\n"], dependencies: [{ kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "customState", "iconName", "isLoading", "showContent", "size", "type"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTableComponent, selector: "gravity-table", inputs: { tableDensity: "tableDensity", tableSizeInput: "tableSizeInput" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}.table-container{overflow-x:auto}\n"], dependencies: [{ kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "customState", "iconName", "isLoading", "showContent", "size", "type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-table', template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}.table-container{overflow-x:auto}\n"] }]
+            args: [{ selector: 'gravity-table', template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}.table-container{overflow-x:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { tableDensity: [{
                 type: Input
             }], tableSizeInput: [{
@@ -1751,12 +1739,13 @@ var NodeSelectedState;
 
 class TreeService {
     constructor() {
-        this.filterChangeSubject = new BehaviorSubject('');
+        this.filterValue = '';
         this.selectedItems = [];
+        this.filterChangeSubject = new BehaviorSubject(this.filterValue);
         this.selectedItemsSubject = new BehaviorSubject(this.selectedItems);
         this.selectedStates = [];
         this.filterChangeSubjectSubscription = this.filterChangeSubject.pipe(debounceTime(300), distinctUntilChanged()).subscribe(() => {
-            this.filterTraverse(this.treeState, '');
+            this.filterTraverse(this.treeState, this.filterValue);
         });
     }
     ngOnDestroy() {
@@ -1932,74 +1921,6 @@ class TreeService {
             selected: false
         };
     }
-    deleteById(id) {
-        let result = this.getNodeState(this.treeState, id, TreeService.findById);
-        if (result) {
-            this.deleteByState(result);
-        }
-    }
-    deleteByState(state) {
-        this.delete(state);
-        this.childStateChanged(state);
-        this.filterTraverse(this.treeState, '');
-    }
-    delete(state) {
-        while (state.children.length > 0) {
-            let result = state.children.pop();
-            if (result) {
-                this.delete(result);
-            }
-        }
-        this.removeSelected(state.nodeItem.item);
-        TreeService.remove(state);
-        if (!state.parent) {
-            TreeService.deleteRoot(state, this.treeState, this.nodeItems);
-        }
-    }
-    toggleExpandedTraverse(nodeStates, value) {
-        for (let state of nodeStates) {
-            state.expanded = value;
-            this.toggleExpandedTraverse(state.children, value);
-        }
-    }
-    static deleteRoot(state, nodeStates, nodeItems) {
-        let itemIndex = nodeItems.indexOf(state.nodeItem);
-        if (itemIndex !== -1) {
-            nodeItems.splice(itemIndex, 1);
-        }
-        let index = nodeStates.indexOf(state);
-        if (index !== -1) {
-            nodeStates.splice(index, 1);
-        }
-    }
-    addNewNode(nodeState, parent) {
-        nodeState.parent = parent;
-        parent.children.push(nodeState);
-        if (parent.nodeItem.children) {
-            parent.nodeItem.children.push(nodeState.nodeItem);
-        }
-        this.childStateChanged(parent);
-        this.filterTraverse(this.treeState, '');
-    }
-    static remove(state) {
-        if (state.parent) {
-            state.parent.hasFilteredChildren = false;
-            if (state.parent.nodeItem.children) {
-                let itemIndex = state.parent.nodeItem.children.indexOf(state.nodeItem);
-                if (itemIndex !== -1) {
-                    state.parent.nodeItem.children.splice(itemIndex, 1);
-                }
-            }
-            let index = state.parent.children.indexOf(state);
-            if (index !== -1) {
-                state.parent.children.splice(index, 1);
-            }
-            let filteredIndex = state.parent.filteredChildren.indexOf(state);
-            if (filteredIndex !== -1) {
-                state.parent.filteredChildren.splice(filteredIndex, 1);
-            }
-        }
-    }
     allChildrenSelected(state) {
         if (state.nodeItem.children) {
             return state.children.every(it => it.selectedState === NodeSelectedState.checked) && state.children.length === state.nodeItem.children.length;
@@ -2008,12 +1929,6 @@ class TreeService {
             return state.children.every(it => it.selectedState === NodeSelectedState.checked);
         }
     }
-    toggleExpandedTraverseAsc(nodeState, value) {
-        nodeState.expanded = value;
-        if (nodeState.parent) {
-            this.toggleExpandedTraverseAsc(nodeState.parent, value);
-        }
-    }
     anyActiveSelected(state) {
         let result = state.children.filter(it => !it.disabled && it.selected).length > 0;
         for (const child of state.children) {
@@ -2023,69 +1938,9 @@ class TreeService {
         }
         return result;
     }
-    static findById(state, arg) {
-        return state.nodeItem.id === arg;
-    }
-    getNodeState(nodeStates, arg, compare) {
-        let nodeState = nodeStates.find((it) => compare(it, arg));
-        if (nodeState) {
-            return nodeState;
-        }
-        else {
-            for (let state of nodeStates) {
-                let children = this.getNodeState(state.children, arg, compare);
-                if (children) {
-                    return children;
-                }
-            }
-        }
-    }
-    toggleExpanded(value) {
-        this.toggleExpandedTraverse(this.treeState, value);
-    }
-    addNodeById(nodeState, id) {
-        let result = this.getNodeState(this.treeState, id, TreeService.findById);
-        if (result) {
-            if (!result.children) {
-                result.children = [];
-            }
-            this.addNewNode(nodeState, result);
-            if (result.nodeItem.item) {
-                this.removeSelected(result.nodeItem.item);
-            }
-        }
-    }
-    editItemById(id, item) {
-        const nodeState = this.getNodeState(this.treeState, id, TreeService.findById);
-        if (nodeState && nodeState.nodeItem) {
-            if (this.selectedItems.includes(nodeState.nodeItem.item)) {
-                this.removeSelected(nodeState.nodeItem.item);
-                this.selectedItems.push(item);
-                this.selectedItemsSubject.next(this.selectedItems);
-            }
-            nodeState.nodeItem.item = item;
-        }
-    }
-    expandById(id) {
-        const result = this.getNodeState(this.treeState, id, TreeService.findById);
-        if (result) {
-            this.toggleExpandedTraverseAsc(result, true);
-        }
-    }
-    collapseById(id) {
-        const result = this.getNodeState(this.treeState, id, TreeService.findById);
-        if (result) {
-            result.expanded = false;
-        }
-    }
-    getParentById(id) {
-        const result = this.getNodeState(this.treeState, id, TreeService.findById);
-        if (result) {
-            return result.parent.nodeItem;
-        }
-    }
-    forceFilterTraverse() {
-        this.filterTraverse(this.treeState, '');
+    filterChanged(value) {
+        this.filterValue = value;
+        this.filterChangeSubject.next(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeService }); }
@@ -2140,11 +1995,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class NodeComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "tree-node", inputs: { nodeState: "nodeState" }, ngImport: i0, template: "<div class=\"node-container\">\n  <div class=\"node-content\">\n    <node-toggle [state]=\"nodeState\"></node-toggle>\n    <node-checkbox [state]=\"nodeState\"></node-checkbox>\n    <node-name [state]=\"nodeState\"></node-name>\n  </div>\n  <div class=\"collapsible-wrapper\" *ngIf=\"nodeState.nodeItem.children\"\n       [class.collapsed]=\"!nodeState.expanded && nodeState.nodeItem.children.length > 0 && nodeState.filteredChildren.length > 0\">\n    <div class=\"collapsible\">\n      <tree-node class=\"node-offset\" [nodeState]=\"child\"\n                 *ngFor=\"let child of nodeState.filteredChildren\"></tree-node>\n    </div>\n  </div>\n</div>\n", styles: [".node-container{display:flex;flex:1 1 auto;flex-direction:column}.node-container .node-content{display:inline-flex;padding-bottom:.1rem}.node-container node-toggle,.node-container node-checkbox{display:inline-flex;align-items:center}.node-container .collapsible-wrapper{display:flex;overflow:hidden}.node-container .collapsible-wrapper .collapsible{transition:margin-bottom .3s cubic-bezier(0,0,0,1);margin-bottom:0;max-height:1000000px}.node-container .collapsible-wrapper .collapsible tree-node.node-offset{display:flex;margin-left:1.25rem}.node-container .collapsible-wrapper.collapsed>.collapsible{margin-bottom:-20000px;transition:margin-bottom .3s cubic-bezier(1,0,1,1),visibility 0s .3s,max-height 0s .3s;visibility:hidden;max-height:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NodeComponent, selector: "tree-node", inputs: ["nodeState"] }, { kind: "component", type: NodeToggleComponent, selector: "node-toggle", inputs: ["state"] }, { kind: "component", type: NodeCheckboxComponent, selector: "node-checkbox", inputs: ["state"] }, { kind: "component", type: NodeNameComponent, selector: "node-name", inputs: ["state"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "tree-node", inputs: { nodeState: "nodeState" }, ngImport: i0, template: "<div class=\"node-container\">\n  <div class=\"node-content\">\n    <node-toggle [state]=\"nodeState\"></node-toggle>\n    <node-checkbox [state]=\"nodeState\"></node-checkbox>\n    <node-name [state]=\"nodeState\"></node-name>\n  </div>\n  <div class=\"collapsible-wrapper\" *ngIf=\"nodeState.nodeItem.children\"\n       [class.collapsed]=\"!nodeState.expanded && nodeState.nodeItem.children.length > 0 && nodeState.filteredChildren.length > 0\">\n    <div class=\"collapsible\">\n      <tree-node class=\"node-offset\" [nodeState]=\"child\"\n                 *ngFor=\"let child of nodeState.filteredChildren\"></tree-node>\n    </div>\n  </div>\n</div>\n", styles: [".node-container{display:flex;flex:1 1 auto;flex-direction:column}.node-container .node-content{display:inline-flex;padding-block:.3rem}.node-container node-toggle,.node-container node-checkbox{display:inline-flex;align-items:center}.node-container .collapsible-wrapper{display:flex;overflow:hidden}.node-container .collapsible-wrapper .collapsible{margin-bottom:0;max-height:1000000px}.node-container .collapsible-wrapper .collapsible tree-node.node-offset{display:flex;margin-left:1.25rem}.node-container .collapsible-wrapper.collapsed>.collapsible{margin-bottom:-20000px;visibility:hidden;max-height:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NodeComponent, selector: "tree-node", inputs: ["nodeState"] }, { kind: "component", type: NodeToggleComponent, selector: "node-toggle", inputs: ["state"] }, { kind: "component", type: NodeCheckboxComponent, selector: "node-checkbox", inputs: ["state"] }, { kind: "component", type: NodeNameComponent, selector: "node-name", inputs: ["state"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tree-node', template: "<div class=\"node-container\">\n  <div class=\"node-content\">\n    <node-toggle [state]=\"nodeState\"></node-toggle>\n    <node-checkbox [state]=\"nodeState\"></node-checkbox>\n    <node-name [state]=\"nodeState\"></node-name>\n  </div>\n  <div class=\"collapsible-wrapper\" *ngIf=\"nodeState.nodeItem.children\"\n       [class.collapsed]=\"!nodeState.expanded && nodeState.nodeItem.children.length > 0 && nodeState.filteredChildren.length > 0\">\n    <div class=\"collapsible\">\n      <tree-node class=\"node-offset\" [nodeState]=\"child\"\n                 *ngFor=\"let child of nodeState.filteredChildren\"></tree-node>\n    </div>\n  </div>\n</div>\n", styles: [".node-container{display:flex;flex:1 1 auto;flex-direction:column}.node-container .node-content{display:inline-flex;padding-bottom:.1rem}.node-container node-toggle,.node-container node-checkbox{display:inline-flex;align-items:center}.node-container .collapsible-wrapper{display:flex;overflow:hidden}.node-container .collapsible-wrapper .collapsible{transition:margin-bottom .3s cubic-bezier(0,0,0,1);margin-bottom:0;max-height:1000000px}.node-container .collapsible-wrapper .collapsible tree-node.node-offset{display:flex;margin-left:1.25rem}.node-container .collapsible-wrapper.collapsed>.collapsible{margin-bottom:-20000px;transition:margin-bottom .3s cubic-bezier(1,0,1,1),visibility 0s .3s,max-height 0s .3s;visibility:hidden;max-height:0}\n"] }]
+            args: [{ selector: 'tree-node', template: "<div class=\"node-container\">\n  <div class=\"node-content\">\n    <node-toggle [state]=\"nodeState\"></node-toggle>\n    <node-checkbox [state]=\"nodeState\"></node-checkbox>\n    <node-name [state]=\"nodeState\"></node-name>\n  </div>\n  <div class=\"collapsible-wrapper\" *ngIf=\"nodeState.nodeItem.children\"\n       [class.collapsed]=\"!nodeState.expanded && nodeState.nodeItem.children.length > 0 && nodeState.filteredChildren.length > 0\">\n    <div class=\"collapsible\">\n      <tree-node class=\"node-offset\" [nodeState]=\"child\"\n                 *ngFor=\"let child of nodeState.filteredChildren\"></tree-node>\n    </div>\n  </div>\n</div>\n", styles: [".node-container{display:flex;flex:1 1 auto;flex-direction:column}.node-container .node-content{display:inline-flex;padding-block:.3rem}.node-container node-toggle,.node-container node-checkbox{display:inline-flex;align-items:center}.node-container .collapsible-wrapper{display:flex;overflow:hidden}.node-container .collapsible-wrapper .collapsible{margin-bottom:0;max-height:1000000px}.node-container .collapsible-wrapper .collapsible tree-node.node-offset{display:flex;margin-left:1.25rem}.node-container .collapsible-wrapper.collapsed>.collapsible{margin-bottom:-20000px;visibility:hidden;max-height:0}\n"] }]
         }], propDecorators: { nodeState: [{
                 type: Input
             }] } });
@@ -2152,6 +2007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class GravityTreeViewComponent {
     constructor(treeService) {
         this.treeService = treeService;
+        this.showFilterInput = false;
         this.selectedItems = new EventEmitter();
         this.treeServiceSubscription = treeService.connect().subscribe((items) => {
             const subscription = timer(0).subscribe(() => {
@@ -2190,16 +2046,21 @@ class GravityTreeViewComponent {
         });
         return treeStructure;
     }
+    changeFilter(newValue) {
+        this.treeService.filterChanged(newValue.toLowerCase());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTreeViewComponent, deps: [{ token: TreeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTreeViewComponent, selector: "gravity-tree-view", inputs: { callbacks: "callbacks", nodeItems: "nodeItems" }, outputs: { selectedItems: "selectedItems" }, providers: [TreeService], usesOnChanges: true, ngImport: i0, template: "<tree-node [nodeState]=\"state\" *ngFor=\"let state of treeService.treeState\"></tree-node>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "tree-node", inputs: ["nodeState"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTreeViewComponent, selector: "gravity-tree-view", inputs: { callbacks: "callbacks", nodeItems: "nodeItems", showFilterInput: "showFilterInput" }, outputs: { selectedItems: "selectedItems" }, providers: [TreeService], usesOnChanges: true, ngImport: i0, template: "<gravity-text-field [label]=\"'Change filter'\" *ngIf=\"showFilterInput\"\n                    (response)=\"changeFilter($event)\"></gravity-text-field>\n<tree-node [nodeState]=\"state\" *ngFor=\"let state of treeService.treeState\"></tree-node>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: ["autocomplete", "clickOnIconName", "currentLang", "customPlaceholder", "customInputValue", "cypressTag", "iconColor", "iconNames", "iconsSizes", "iconPlacement", "inputContentType", "label", "placeholderType", "prefix", "required", "state", "supportTextContent", "supportTextType", "textFieldType", "validations"], outputs: ["clickIcon", "response"] }, { kind: "component", type: NodeComponent, selector: "tree-node", inputs: ["nodeState"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-tree-view', providers: [TreeService], template: "<tree-node [nodeState]=\"state\" *ngFor=\"let state of treeService.treeState\"></tree-node>\n" }]
+            args: [{ selector: 'gravity-tree-view', providers: [TreeService], template: "<gravity-text-field [label]=\"'Change filter'\" *ngIf=\"showFilterInput\"\n                    (response)=\"changeFilter($event)\"></gravity-text-field>\n<tree-node [nodeState]=\"state\" *ngFor=\"let state of treeService.treeState\"></tree-node>\n" }]
         }], ctorParameters: function () { return [{ type: TreeService }]; }, propDecorators: { callbacks: [{
                 type: Input
             }], nodeItems: [{
                 type: Input
+            }], showFilterInput: [{
+                type: Input
             }], selectedItems: [{
                 type: Output
             }] } });