@progressio_resources/gravity-design-system 2.1.9 → 2.2.1

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

@@ -14,6 +14,8 @@ import * as i2$2 from 'angular-svg-icon-preloader';
 import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
 import * as i2$1 from 'ngx-pretty-checkbox';
 import { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';
+import { BehaviorSubject, timer } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 class GravityIconComponent {
     constructor() {
@@ -667,8 +669,6 @@ class GravityTooltipDirective {
             this.destroyTooltip();
         }, this.options['hideDelayAfterClick']);
     }
-    ngOnInit() {
-    }
     ngOnChanges(changes) {
         this.initOptions = this.renameProperties(this.initOptions);
         let changedOptions = this.getProperties(changes);
@@ -1537,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();
@@ -1547,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) {
@@ -1564,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 = [];
@@ -1581,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');
@@ -1710,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) {
@@ -1723,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: [{
@@ -1740,6 +1730,341 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['window:resize', ['$event']]
             }] } });
 
+var NodeSelectedState;
+(function (NodeSelectedState) {
+    NodeSelectedState[NodeSelectedState["checked"] = 0] = "checked";
+    NodeSelectedState[NodeSelectedState["unChecked"] = 1] = "unChecked";
+    NodeSelectedState[NodeSelectedState["indeterminate"] = 2] = "indeterminate";
+})(NodeSelectedState || (NodeSelectedState = {}));
+
+class TreeService {
+    constructor() {
+        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.filterValue);
+        });
+    }
+    ngOnDestroy() {
+        this.filterChangeSubjectSubscription.unsubscribe();
+    }
+    connect() {
+        return this.selectedItemsSubject.asObservable();
+    }
+    setInitialState() {
+        this.setInitialSelectedState(this.treeState);
+    }
+    setInitialSelectedState(nodeStates) {
+        for (const state of nodeStates) {
+            if (state.nodeItem.selected && (!state.children || state.children.length === 0)) {
+                this.toggleSelectedState(state, true);
+            }
+            this.setInitialSelectedState(state.children);
+        }
+    }
+    clear() {
+        for (let state of this.selectedStates) {
+            state.selected = false;
+            state.selectedState = NodeSelectedState.unChecked;
+        }
+        this.selectedItems.length = 0;
+        this.selectedStates.length = 0;
+    }
+    filterTraverse(states, filter) {
+        let results = [];
+        for (let state of states) {
+            if (state.children.length > 0) {
+                state.hasFilteredChildren = false;
+                state.hasFilteredChildren = this.filterTraverse(state.children, filter);
+                if (this.applyFilter(state, filter)) {
+                    state.hasFilteredChildren = true;
+                }
+                results.push(state.hasFilteredChildren);
+            }
+        }
+        return results.some((item) => item);
+    }
+    applyFilter(state, filter) {
+        state.filteredChildren = this.filter(state.children, filter);
+        return state.filteredChildren.length > 0;
+    }
+    filter(states, value) {
+        return states.filter((nodeState) => nodeState.hasFilteredChildren || value === '' || nodeState.nodeItem.name.toLowerCase().indexOf(value) !== -1);
+    }
+    checkboxClick(state) {
+        this.toggleSelectedState(state, false);
+        if (this.callbacks?.toggle) {
+            this.callbacks.toggle(state.nodeItem);
+        }
+    }
+    toggleSelectedState(state, ignoreDisabled) {
+        if (state.disabled && !ignoreDisabled) {
+            return;
+        }
+        if (state.selectedState === NodeSelectedState.unChecked) {
+            this.setChecked(state, true, ignoreDisabled);
+        }
+        else if (state.selectedState === NodeSelectedState.checked) {
+            this.setUnchecked(state, true, ignoreDisabled);
+        }
+        else {
+            if (this.anyActiveSelected(state) && !state.selected) {
+                this.setUnchecked(state, true, ignoreDisabled);
+            }
+            else {
+                this.setChecked(state, true, ignoreDisabled);
+            }
+        }
+        if (state.parent) {
+            this.childStateChanged(state.parent);
+        }
+    }
+    setChecked(state, propagate, ignoreDisabled) {
+        if (state.disabled && !ignoreDisabled) {
+            return;
+        }
+        state.selectedState = NodeSelectedState.checked;
+        state.selected = true;
+        if (TreeService.hasNoChildren(state)) {
+            this.addSelected(state);
+        }
+        else if (propagate) {
+            for (const child of state.children) {
+                this.setChecked(child, propagate, ignoreDisabled);
+            }
+        }
+    }
+    setUnchecked(state, propagate, ignoreDisabled) {
+        if (state.disabled && !ignoreDisabled) {
+            return;
+        }
+        state.selectedState = NodeSelectedState.unChecked;
+        state.selected = false;
+        if (TreeService.hasNoChildren(state)) {
+            this.removeSelected(state.nodeItem.item);
+            if (this.callbacks?.unSelect) {
+                this.callbacks.unSelect(state.nodeItem);
+            }
+        }
+        else if (propagate) {
+            for (const child of state.children) {
+                this.setUnchecked(child, propagate, ignoreDisabled);
+            }
+        }
+        if (!this.anyChildSelected(state)) {
+            this.removeSelected(state.nodeItem.item);
+        }
+    }
+    removeSelected(item) {
+        let index = this.selectedItems.indexOf(item);
+        if (index !== -1) {
+            this.selectedItems.splice(index, 1);
+        }
+    }
+    static hasNoChildren(state) {
+        return !state.children || state.children.length === 0;
+    }
+    addSelected(state) {
+        this.selectedItems.push(state.nodeItem.item);
+        this.selectedStates.push(state);
+        if (this.callbacks?.select) {
+            this.callbacks.select(state.nodeItem);
+        }
+    }
+    reEvaluateSelectedState(state) {
+        if (!TreeService.hasNoChildren(state)) {
+            this.childStateChanged(state);
+            for (const child of state.children) {
+                this.reEvaluateSelectedState(child);
+            }
+        }
+    }
+    childStateChanged(state) {
+        if (this.anyChildSelected(state)) {
+            if (state.nodeItem.id != '0') {
+                let itemIndex = this.selectedItems.indexOf(state.nodeItem.item);
+                if (itemIndex === -1) {
+                    this.selectedItems.push(state.nodeItem.item);
+                }
+            }
+            if (this.allChildrenSelected(state)) {
+                this.setChecked(state, false);
+            }
+            else {
+                state.selectedState = NodeSelectedState.indeterminate;
+                state.selected = false;
+            }
+        }
+        else {
+            this.setUnchecked(state, false);
+        }
+        if (state.parent) {
+            this.childStateChanged(state.parent);
+        }
+    }
+    anyChildSelected(state) {
+        return state.children.find((item) => item.selectedState === NodeSelectedState.checked || item.selectedState === NodeSelectedState.indeterminate) != null;
+    }
+    static initState(parent, nodeItem) {
+        return {
+            parent: parent,
+            children: [],
+            filteredChildren: [],
+            hasFilteredChildren: false,
+            nodeItem: nodeItem,
+            expanded: nodeItem.expanded !== false,
+            disabled: nodeItem.disabled === true,
+            selectedState: NodeSelectedState.unChecked,
+            selected: false
+        };
+    }
+    allChildrenSelected(state) {
+        if (state.nodeItem.children) {
+            return state.children.every(it => it.selectedState === NodeSelectedState.checked) && state.children.length === state.nodeItem.children.length;
+        }
+        else {
+            return state.children.every(it => it.selectedState === NodeSelectedState.checked);
+        }
+    }
+    anyActiveSelected(state) {
+        let result = state.children.filter(it => !it.disabled && it.selected).length > 0;
+        for (const child of state.children) {
+            if (!TreeService.hasNoChildren(child) && this.anyActiveSelected(child)) {
+                result = true;
+            }
+        }
+        return result;
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class NodeToggleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeToggleComponent, selector: "node-toggle", inputs: { state: "state" }, ngImport: i0, template: "<div class=\"node-toggle-wrapper\" [class.collapsable]=\"state.nodeItem?.children?.length > 0\"\n     (click)=\"state.expanded = !state.expanded\">\n  <gravity-icon [iconName]=\"(state.expanded ? 'arrow_down' : 'arrow_right')\" [size]=\"'sm'\"\n                *ngIf=\"state.nodeItem?.children?.length > 0\"></gravity-icon>\n</div>\n", styles: [".node-toggle-wrapper{align-items:center;display:inline-flex;height:1.25rem;width:1.75rem}.collapsable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'node-toggle', template: "<div class=\"node-toggle-wrapper\" [class.collapsable]=\"state.nodeItem?.children?.length > 0\"\n     (click)=\"state.expanded = !state.expanded\">\n  <gravity-icon [iconName]=\"(state.expanded ? 'arrow_down' : 'arrow_right')\" [size]=\"'sm'\"\n                *ngIf=\"state.nodeItem?.children?.length > 0\"></gravity-icon>\n</div>\n", styles: [".node-toggle-wrapper{align-items:center;display:inline-flex;height:1.25rem;width:1.75rem}.collapsable{cursor:pointer}\n"] }]
+        }], propDecorators: { state: [{
+                type: Input
+            }] } });
+
+class NodeCheckboxComponent {
+    constructor(treeService) {
+        this.treeService = treeService;
+    }
+    clickOnCheckbox() {
+        if (!this.state.disabled) {
+            this.treeService.checkboxClick(this.state);
+            setTimeout(() => {
+                this.treeService.reEvaluateSelectedState(this.state);
+            }, 1);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeCheckboxComponent, deps: [{ token: TreeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeCheckboxComponent, selector: "node-checkbox", inputs: { state: "state" }, ngImport: i0, template: "<gravity-icon class=\"border-radius-sm checkbox-icon\"\n              [class]=\"state.selectedState == 1 ? 'unselect' : 'select'\"\n              [class.disabled]=\"state.disabled\"\n\n              (click)=\"clickOnCheckbox()\"\n\n              [iconName]=\"state.selectedState == 2 ? 'uncheck' : 'success'\"></gravity-icon>\n", styles: [".checkbox-icon{background-color:var(--cta-primary);cursor:pointer;height:1.5rem;--icon-color: var(--surface-secondary);padding:.35rem;width:1.5rem}.checkbox-icon.unselect{opacity:.5}.checkbox-icon.disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'node-checkbox', template: "<gravity-icon class=\"border-radius-sm checkbox-icon\"\n              [class]=\"state.selectedState == 1 ? 'unselect' : 'select'\"\n              [class.disabled]=\"state.disabled\"\n\n              (click)=\"clickOnCheckbox()\"\n\n              [iconName]=\"state.selectedState == 2 ? 'uncheck' : 'success'\"></gravity-icon>\n", styles: [".checkbox-icon{background-color:var(--cta-primary);cursor:pointer;height:1.5rem;--icon-color: var(--surface-secondary);padding:.35rem;width:1.5rem}.checkbox-icon.unselect{opacity:.5}.checkbox-icon.disabled{cursor:not-allowed}\n"] }]
+        }], ctorParameters: function () { return [{ type: TreeService }]; }, propDecorators: { state: [{
+                type: Input
+            }] } });
+
+class NodeNameComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeNameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeNameComponent, selector: "node-name", inputs: { state: "state" }, ngImport: i0, template: "<div [class.disabled]=\"state.disabled\" class=\"node-name\">\n  <span class=\"hr-label md-regular\">{{state.nodeItem.name}}</span>\n</div>\n", styles: [".node-name{display:inline-block;padding:.1325rem 0 .1325rem .4375rem}.node-name.disabled{opacity:.6}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeNameComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'node-name', template: "<div [class.disabled]=\"state.disabled\" class=\"node-name\">\n  <span class=\"hr-label md-regular\">{{state.nodeItem.name}}</span>\n</div>\n", styles: [".node-name{display:inline-block;padding:.1325rem 0 .1325rem .4375rem}.node-name.disabled{opacity:.6}\n"] }]
+        }], propDecorators: { state: [{
+                type: Input
+            }] } });
+
+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-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-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
+            }] } });
+
+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(() => {
+                this.selectedItems.emit(items);
+                subscription.unsubscribe();
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.treeServiceSubscription.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes.callbacks) {
+            this.treeService.callbacks = this.callbacks;
+        }
+        if (changes.nodeItems) {
+            this.initialize();
+        }
+    }
+    initialize() {
+        this.treeService.callbacks = this.callbacks;
+        this.treeService.nodeItems = this.nodeItems;
+        this.treeService.treeState = this.initTreeStructure(null, this.treeService.nodeItems);
+        this.treeService.clear();
+        this.treeService.setInitialState();
+    }
+    initTreeStructure(parent, nodeItems) {
+        const treeStructure = [];
+        nodeItems.forEach((nodeItem) => {
+            const nodeState = TreeService.initState(parent, nodeItem);
+            if (nodeItem.children) {
+                nodeState.children = this.initTreeStructure(nodeState, nodeItem.children);
+                nodeState.filteredChildren = nodeState.children;
+            }
+            treeStructure.push(nodeState);
+        });
+        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", 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: "<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
+            }] } });
+
 class GravityDesignSystemModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityAttachFileComponent,
@@ -1755,7 +2080,12 @@ class GravityDesignSystemModule {
             GravityRadioButtonComponent,
             GravitySwitchComponent,
             GravityTableComponent,
-            GravityTextFieldComponent], imports: [i1.AngularSvgIconModule, i2$2.AngularSvgIconPreloaderModule, CommonModule,
+            GravityTextFieldComponent,
+            GravityTreeViewComponent,
+            NodeComponent,
+            NodeToggleComponent,
+            NodeCheckboxComponent,
+            NodeNameComponent], imports: [i1.AngularSvgIconModule, i2$2.AngularSvgIconPreloaderModule, CommonModule,
             FormsModule, GravityTooltipModule, NgbDatepickerModule,
             NgbProgressbarModule,
             NgbToastModule,
@@ -1773,7 +2103,8 @@ class GravityDesignSystemModule {
             GravitySwitchComponent,
             GravityTableComponent,
             GravityTextFieldComponent,
-            GravityTooltipModule] }); }
+            GravityTooltipModule,
+            GravityTreeViewComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, imports: [AngularSvgIconModule.forRoot(),
             AngularSvgIconPreloaderModule.forRoot({
                 configUrl: './assets/gravity/json/icons.json',
@@ -1805,7 +2136,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravityRadioButtonComponent,
                         GravitySwitchComponent,
                         GravityTableComponent,
-                        GravityTextFieldComponent
+                        GravityTextFieldComponent,
+                        GravityTreeViewComponent,
+                        NodeComponent,
+                        NodeToggleComponent,
+                        NodeCheckboxComponent,
+                        NodeNameComponent
                     ],
                     imports: [
                         AngularSvgIconModule.forRoot(),
@@ -1835,7 +2171,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravitySwitchComponent,
                         GravityTableComponent,
                         GravityTextFieldComponent,
-                        GravityTooltipModule
+                        GravityTooltipModule,
+                        GravityTreeViewComponent
                     ]
                 }]
         }] });
@@ -1889,5 +2226,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityRadioButtonComponent, GravitySwitchComponent, GravityTableComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule };
+export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityRadioButtonComponent, GravitySwitchComponent, GravityTableComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent };
 //# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map