@progressio_resources/gravity-design-system 2.1.8 → 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() {
@@ -1392,11 +1394,11 @@ class GravityDialogComponent {
         this.ngbActiveModal.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDialogComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDialogComponent, selector: "ng-component", inputs: { dialogContent: "dialogContent" }, ngImport: i0, template: "<div class=\"dialog-header\">\n  <div class=\"hr-title lg-bold title\">\n    <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n                  [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"\n                  [size]=\"'sm'\"></gravity-icon>\n    {{dialogContent.title}}\n  </div>\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'unsuccess'\" *ngIf=\"dialogContent.showCloseIcon\"\n                [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n    <ng-container\n        *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n  </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n    <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n  </ng-container>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDialogComponent, selector: "ng-component", inputs: { dialogContent: "dialogContent" }, ngImport: i0, template: "<div class=\"dialog-header\">\n  <div class=\"hr-title lg-bold title\">\n    <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n                  [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"></gravity-icon>\n    {{dialogContent.title}}\n  </div>\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'unsuccess'\" *ngIf=\"dialogContent.showCloseIcon\"\n                [size]=\"'sm'\" [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n    <ng-container\n        *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n  </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n    <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n  </ng-container>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: GravityDialogComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dialog-header\">\n  <div class=\"hr-title lg-bold title\">\n    <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n                  [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"\n                  [size]=\"'sm'\"></gravity-icon>\n    {{dialogContent.title}}\n  </div>\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'unsuccess'\" *ngIf=\"dialogContent.showCloseIcon\"\n                [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n    <ng-container\n        *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n  </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n    <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n  </ng-container>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"] }]
+            args: [{ template: "<div class=\"dialog-header\">\n  <div class=\"hr-title lg-bold title\">\n    <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n                  [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"></gravity-icon>\n    {{dialogContent.title}}\n  </div>\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'unsuccess'\" *ngIf=\"dialogContent.showCloseIcon\"\n                [size]=\"'sm'\" [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n    <ng-container\n        *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n  </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n    <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n  </ng-container>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.NgbActiveModal }]; }, propDecorators: { dialogContent: [{
                 type: Input
             }] } });
@@ -1445,11 +1447,11 @@ class GravityNotificationInstantContainerComponent {
         this.delay = 5000;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationInstantContainerComponent, deps: [{ token: GravityInstantNotificationsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationInstantContainerComponent, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "<ngb-toast [autohide]=\"true\"\n           [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}:host{padding:1rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$2.NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationInstantContainerComponent, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "<ngb-toast [autohide]=\"true\"\n           [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [size]=\"'sm'\"\n                  [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}:host{padding:1rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$2.NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }, { 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: GravityNotificationInstantContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-notification-instant-container', template: "<ngb-toast [autohide]=\"true\"\n           [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}:host{padding:1rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"] }]
+            args: [{ selector: 'gravity-notification-instant-container', template: "<ngb-toast [autohide]=\"true\"\n           [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [size]=\"'sm'\"\n                  [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}:host{padding:1rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"] }]
         }], ctorParameters: function () { return [{ type: GravityInstantNotificationsService }]; }, propDecorators: { delay: [{
                 type: Input
             }] } });
@@ -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