@progressio_resources/gravity-design-system 2.1.9 → 2.2.0

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() {
@@ -1740,6 +1742,468 @@ 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.filterChangeSubject = new BehaviorSubject('');
+        this.selectedItems = [];
+        this.selectedItemsSubject = new BehaviorSubject(this.selectedItems);
+        this.selectedStates = [];
+        this.filterChangeSubjectSubscription = this.filterChangeSubject.pipe(debounceTime(300), distinctUntilChanged()).subscribe(() => {
+            this.filterTraverse(this.treeState, '');
+        });
+    }
+    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
+        };
+    }
+    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;
+        }
+        else {
+            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) {
+            if (!TreeService.hasNoChildren(child) && this.anyActiveSelected(child)) {
+                result = true;
+            }
+        }
+        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, '');
+    }
+    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-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"] }] }); }
+}
+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"] }]
+        }], propDecorators: { nodeState: [{
+                type: Input
+            }] } });
+
+class GravityTreeViewComponent {
+    constructor(treeService) {
+        this.treeService = treeService;
+        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;
+    }
+    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"] }] }); }
+}
+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" }]
+        }], ctorParameters: function () { return [{ type: TreeService }]; }, propDecorators: { callbacks: [{
+                type: Input
+            }], nodeItems: [{
+                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 +2219,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 +2242,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 +2275,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 +2310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravitySwitchComponent,
                         GravityTableComponent,
                         GravityTextFieldComponent,
-                        GravityTooltipModule
+                        GravityTooltipModule,
+                        GravityTreeViewComponent
                     ]
                 }]
         }] });
@@ -1889,5 +2365,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