@openziti/ziti-console-lib 0.4.6 → 0.4.7

package/fesm2022/openziti-ziti-console-lib.mjs

@@ -1078,6 +1078,8 @@ class ExtensionsNoopService {
         this.closeAfterSave = true;
         this.moreActions = [];
     }
+    extendOnInit() {
+    }
     extendAfterViewInits(extentionPoints) {
     }
     updateFormData(data) {
@@ -2301,7 +2303,7 @@ class DataTableFilterService {
         this.pageChanged = new BehaviorSubject(this.currentPage);
     }
     updateFilter(filterObj) {
-        if (isEmpty(filterObj.value) && isNaN(filterObj.value))
+        if (isEmpty(filterObj.value) && (isNaN(filterObj.value) || filterObj.value === ''))
             this.removeFilter(filterObj);
         else {
             let isFound = false;
@@ -2589,11 +2591,12 @@ ListPageServiceClass = __decorate([
 ], ListPageServiceClass);
 
 class ListPageComponent {
-    constructor(filterService, svc, consoleEvents, dialogForm) {
+    constructor(filterService, svc, consoleEvents, dialogForm, extensionService) {
         this.filterService = filterService;
         this.svc = svc;
         this.consoleEvents = consoleEvents;
         this.dialogForm = dialogForm;
+        this.extensionService = extensionService;
         this.startCount = '-';
         this.endCount = '-';
         this.totalCount = '-';
@@ -2612,6 +2615,7 @@ class ListPageComponent {
         this.svc.refreshData = this.refreshData.bind(this);
         this.columnDefs = this.svc.initTableColumns();
         this.filterService.clearFilters();
+        this.extensionService?.extendOnInit();
         this.subscription.add(this.filterService.filtersChanged.subscribe(filters => {
             this.filterApplied = filters && filters.length > 0;
             this.refreshData();
@@ -2716,12 +2720,12 @@ class ListPageComponent {
             this.gridObj?.api?.refreshCells(params);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListPageComponent, deps: [{ token: DataTableFilterService }, { token: ListPageServiceClass }, { token: ConsoleEventsService }, { token: i3$2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListPageComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListPageComponent }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListPageComponent, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DataTableFilterService }, { type: ListPageServiceClass }, { type: ConsoleEventsService }, { type: i3$2.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: DataTableFilterService }, { type: ListPageServiceClass }, { type: ConsoleEventsService }, { type: i3$2.MatDialog }, { type: undefined }]; } });
 
 /*
     Copyright NetFoundry Inc.
@@ -4330,6 +4334,7 @@ class ConfigurationsPageService extends ListPageServiceClass {
                 throw new Error('no schema definition selected');
             }
         };
+        this.getConfigTypes();
     }
     initTableColumns() {
         const typeRenderer = (row) => {
@@ -5258,6 +5263,15 @@ class IdentitiesPageService extends ListPageServiceClass {
             ],
             columnFilters,
         };
+        const isAdminHeaderComponentParams = {
+            filterType: 'SELECT',
+            enableSorting: true,
+            filterOptions: [
+                { label: 'All', value: '' },
+                { label: 'Admins', value: true },
+                { label: 'Non-Admins', value: false },
+            ]
+        };
         return [
             {
                 colId: 'name',
@@ -5338,6 +5352,7 @@ class IdentitiesPageService extends ListPageServiceClass {
                 field: 'isAdmin',
                 headerName: 'Is Admin',
                 headerComponent: TableColumnDefaultComponent,
+                headerComponentParams: isAdminHeaderComponentParams,
                 resizable: true,
                 sortable: true,
                 sortColumn: this.sort.bind(this),
@@ -6416,7 +6431,9 @@ class FilterBarComponent {
         this.filterString = '';
         this.inputChangedDebounced = debounce(this.inputChanged.bind(this), 400);
         this.filterService.filtersChanged.subscribe(filters => {
-            this._filters = [...filters];
+            this._filters = filters.filter((filter) => {
+                return filter.hidden !== true;
+            });
             let tmp = '';
             for (let idx = 0; idx < filters.length; idx++) {
                 if (filters[idx].columnId === 'name') {
@@ -6490,11 +6507,11 @@ class HiddenColumnsBarComponent {
         this.columnVisibilityChanged.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenColumnsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HiddenColumnsBarComponent, selector: "lib-table-hidden-columns-bar", inputs: { hiddenColumns: "hiddenColumns" }, outputs: { columnVisibilityChanged: "columnVisibilityChanged" }, ngImport: i0, template: "<div class=\"hidden-columns-list\" id=\"ColumnVisibilityHeader\">\n    <div\n            (click)=\"setColumnVisibilityColumn(col, true)\"\n            *ngFor=\"let col of hiddenColumns\"\n            class=\"hidden-column-item ag-dnd-ghost ag-unselectable ag-theme-alpine\"\n            id=\"ColumnVisibility_{{ col.headerName }}\"\n            title=\"Show column\"\n    >\n        <span class=\"ag-dnd-ghost-icon\">\n            <span class=\"ag-icon ag-icon-eye-slash\"></span>\n        </span>\n        <div class=\"ag-dnd-ghost-label\">{{ col.headerName }}</div>\n    </div>\n</div>", styles: [".hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:7px;min-height:30px;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:14px}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:2px solid var(--background);border-radius:12px;cursor:pointer;color:var(--inputBorder);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:25px!important;margin-left:10px;margin-top:5px;padding:2px 10px 2px 5px;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:2px solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial;color:var(--text)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HiddenColumnsBarComponent, selector: "lib-table-hidden-columns-bar", inputs: { hiddenColumns: "hiddenColumns" }, outputs: { columnVisibilityChanged: "columnVisibilityChanged" }, ngImport: i0, template: "<div class=\"hidden-columns-bar-container\">\n    <div class=\"hidden-columns-list\" id=\"ColumnVisibilityHeader\">\n        <div\n                (click)=\"setColumnVisibilityColumn(col, true)\"\n                *ngFor=\"let col of hiddenColumns\"\n                class=\"hidden-column-item ag-dnd-ghost ag-unselectable ag-theme-alpine\"\n                id=\"ColumnVisibility_{{ col.headerName }}\"\n                title=\"Show column\"\n        >\n        <span class=\"ag-dnd-ghost-icon\">\n            <span class=\"ag-icon ag-icon-eye-slash\"></span>\n        </span>\n            <div class=\"ag-dnd-ghost-label\">{{ col.headerName }}</div>\n        </div>\n    </div>\n</div>", styles: [".hidden-columns-bar-container{display:flex;align-items:center;justify-content:space-between;flex-direction:row;width:100%}.hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:7px;min-height:30px;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:14px}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:2px solid var(--background);border-radius:12px;cursor:pointer;color:var(--inputBorder);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:25px!important;margin-left:10px;margin-top:5px;padding:2px 10px 2px 5px;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:2px solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial;color:var(--text)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HiddenColumnsBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-hidden-columns-bar', template: "<div class=\"hidden-columns-list\" id=\"ColumnVisibilityHeader\">\n    <div\n            (click)=\"setColumnVisibilityColumn(col, true)\"\n            *ngFor=\"let col of hiddenColumns\"\n            class=\"hidden-column-item ag-dnd-ghost ag-unselectable ag-theme-alpine\"\n            id=\"ColumnVisibility_{{ col.headerName }}\"\n            title=\"Show column\"\n    >\n        <span class=\"ag-dnd-ghost-icon\">\n            <span class=\"ag-icon ag-icon-eye-slash\"></span>\n        </span>\n        <div class=\"ag-dnd-ghost-label\">{{ col.headerName }}</div>\n    </div>\n</div>", styles: [".hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:7px;min-height:30px;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:14px}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:2px solid var(--background);border-radius:12px;cursor:pointer;color:var(--inputBorder);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:25px!important;margin-left:10px;margin-top:5px;padding:2px 10px 2px 5px;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:2px solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial;color:var(--text)}\n"] }]
+            args: [{ selector: 'lib-table-hidden-columns-bar', template: "<div class=\"hidden-columns-bar-container\">\n    <div class=\"hidden-columns-list\" id=\"ColumnVisibilityHeader\">\n        <div\n                (click)=\"setColumnVisibilityColumn(col, true)\"\n                *ngFor=\"let col of hiddenColumns\"\n                class=\"hidden-column-item ag-dnd-ghost ag-unselectable ag-theme-alpine\"\n                id=\"ColumnVisibility_{{ col.headerName }}\"\n                title=\"Show column\"\n        >\n        <span class=\"ag-dnd-ghost-icon\">\n            <span class=\"ag-icon ag-icon-eye-slash\"></span>\n        </span>\n            <div class=\"ag-dnd-ghost-label\">{{ col.headerName }}</div>\n        </div>\n    </div>\n</div>", styles: [".hidden-columns-bar-container{display:flex;align-items:center;justify-content:space-between;flex-direction:row;width:100%}.hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:7px;min-height:30px;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:14px}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:2px solid var(--background);border-radius:12px;cursor:pointer;color:var(--inputBorder);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:25px!important;margin-left:10px;margin-top:5px;padding:2px 10px 2px 5px;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:2px solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial;color:var(--text)}\n"] }]
         }], propDecorators: { hiddenColumns: [{
                 type: Input
             }], columnVisibilityChanged: [{
@@ -8467,13 +8484,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [JsonEditorComponent, { static: false }]
             }] } });
 
-class Config {
+let Config$1 = class Config {
     constructor() {
         this.name = '';
         this.data = {};
         this.configTypeId = '';
     }
-}
+};
 ;
 
 class ConfigurationService {
@@ -8586,7 +8603,7 @@ class ConfigurationService {
         });
     }
     getConfigDataModel(formData, isUpdate) {
-        const saveModel = new Config();
+        const saveModel = new Config$1();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
             switch (prop) {
@@ -8841,7 +8858,7 @@ class ConfigurationFormComponent extends ProjectableForm {
         this.settings = {};
         this.selectedConfigTypeId = '';
         this.entityType = 'configs';
-        this.entityClass = Config;
+        this.entityClass = Config$1;
         this._apiData = {};
     }
     ngOnInit() {
@@ -8936,6 +8953,8 @@ class ConfigurationFormComponent extends ProjectableForm {
             this.isLoading = false;
         });
         if (configId) {
+            this.initData = this.formData;
+            this._dataChange = false;
             if (this.isModal) {
                 this.closeModal(true, true);
             }
@@ -10368,7 +10387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 */
 class IdentitiesPageComponent extends ListPageComponent {
     constructor(svc, filterService, dialogForm, tabNames, zacWrapperService, router, consoleEvents, extService) {
-        super(filterService, svc, consoleEvents, dialogForm);
+        super(filterService, svc, consoleEvents, dialogForm, extService);
         this.svc = svc;
         this.tabNames = tabNames;
         this.zacWrapperService = zacWrapperService;
@@ -10547,11 +10566,11 @@ class IdentitiesPageComponent extends ListPageComponent {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentitiesPageComponent, deps: [{ token: IdentitiesPageService }, { token: DataTableFilterService }, { token: i3$2.MatDialog }, { token: TabNameService }, { token: ZAC_WRAPPER_SERVICE }, { token: i3.Router }, { token: ConsoleEventsService }, { token: IDENTITY_EXTENSION_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IdentitiesPageComponent, selector: "lib-identities", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-identities-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [showAdd]=\"!itemsSelected\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n\n    <lib-data-table [tableId]=\"'identities'\"\n                    [rowData]=\"rowData\"\n                    [isLoading]=\"isLoading\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [currentPage]=\"currentPage\"\n                    [emptyMsg]=\"'No Identities defined, Click the plus to add an Identity.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [menuItems]=\"svc.menuItems\"\n                    [headerActions]=\"svc.tableHeaderActions\"\n                    [noItemsImage]=\"'No_Clients'\"\n                    (gridReady)=\"gridReady($event)\"\n    >\n    </lib-data-table>\n</div>\n<lib-side-modal [(open)]=\"svc.sideModalOpen\" [showClose]=\"false\">\n    <lib-overrides\n            *ngIf=\"svc.modalType === 'overrides' && svc.sideModalOpen\"\n            [identity]=\"svc.selectedIdentity\"\n            (close)=\"closeModal($event)\"\n    ></lib-overrides>\n</lib-side-modal>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".ziti-page-container .action{line-height:60px;top:25px;right:25px;z-index:999}.ziti-identities-container ::ng-deep .zac-wrapper-container{height:0px;left:-999999px;position:fixed}.ziti-identities-container ::ng-deep .zac-wrapper-container .action{display:none}.ziti-ag-grid{height:100%;position:relative;width:100%}.ziti-ag-grid .ziti-ag-grid-table{height:100%;width:100%}.ziti-ag-grid .ziti-ag-grid-table .ag-root-wrapper{border-bottom-style:none}.ziti-ag-grid .ziti-ag-grid-table .ag-cell{align-items:center;display:flex}.system-policies-toggle,.hidden-results-container{position:relative;right:0;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;margin-top:10px;padding:0 0 0 20px;border-radius:7px;flex-wrap:nowrap;flex:1 0 auto}.system-policies-toggle .toggle-text,.hidden-results-container .toggle-text{font-weight:600;font-size:12px}.system-policies-toggle .toggle-text a,.hidden-results-container .toggle-text a{cursor:pointer}.system-policies-toggle .toggle,.hidden-results-container .toggle{width:75px;margin-left:10px}.system-policies-toggle .toggle.on .switch,.hidden-results-container .toggle.on .switch{left:52px}.system-policies-toggle .spinner,.hidden-results-container .spinner{display:inline-block;width:10px;height:10px;border-radius:50%;background:transparent;border-top:2px solid var(--tableText);border-right:2px solid var(--tableText);border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear;margin-left:5px}.hidden-results-container.loading-results{opacity:.7}.nf-cell-vert-align,.ag-row .ag-cell{align-items:center;display:flex}.hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:7px;min-height:30px;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:14px}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:2px solid var(--background);border-radius:12px;cursor:pointer;color:var(----stroke);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:25px!important;margin-left:10px;margin-top:5px;padding:2px 10px 2px 5px;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:2px solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial}::ng-deep .darkmode .ag-dnd-ghost-icon .ag-icon-eye-slash{color:#fff!important}.tMenu{transition-property:opacity;z-index:99999999999;height:-moz-fit-content;height:fit-content}.tMenu.action-menu{position:fixed;width:175px}.tMenu .tActionRow{transition-property:opacity}.tMenu .tActionRow.has-icon{display:flex;flex-direction:row;align-items:center}.tMenu .tActionRow .v7Offline{background-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline{width:14px;height:14px;border-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline:hover{border-color:var(--placeholder)}.hidden-items-container{display:flex;flex-direction:row;width:100%;flex-wrap:nowrap;justify-content:space-between}.os-icon{width:23px;height:23px;background-size:23px 23px;display:inline-flex;margin-right:8px;margin-top:5px;margin-bottom:5px}::ng-deep .date-time-container{position:fixed}::ng-deep .date-time-container .p-calendar .p-inputtext{height:1px;width:1px;padding:0}::ng-deep .date-time-container .filter-button-container{height:50px;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .date-time-container .filter-button-container .toggleButton{padding-left:5px;padding-right:5px;width:unset}::ng-deep .date-time-container .p-calendar{height:30px}::ng-deep .date-time-container .p-calendar .p-inputtext{height:30px;border-top-left-radius:20px;border-bottom-left-radius:20px;text-indent:5px}::ng-deep .date-time-container .p-calendar .p-button-icon-only{border-top-right-radius:20px;border-bottom-right-radius:20px}#TimeSearch{position:relative;float:left;display:inline-block;margin-left:10px;width:50px;height:40px;background-color:var(--primary)}#TimeSearch #TimeSearchList{width:44px;height:0;position:absolute;top:0;left:-2px;overflow:hidden;transition:var(--transition);background-color:var(--menu);border-radius:8px;z-index:30}#TimeSearch #TimeSearchList .time{width:40px;background-color:var(--background);padding-left:8px;padding-right:8px;border-radius:8px;line-height:26px;font-size:12px;font-weight:700;text-align:center;margin-top:2px;margin-left:2px;left:-2px;top:-51px;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSearchList.open{top:-51px;width:44px;height:226px}#TimeSearch #TimeSelectButton{width:40px;background-color:var(--background);padding-left:8px;padding-right:8px;border-radius:8px;line-height:26px;text-align:center;font-size:12px;font-weight:700;margin-top:7px;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSelectButton:hover,#TimeSearch #TimeSearchList .time:hover{background-color:var(--primaryColor);color:var(--white)}::ng-deep p-togglebutton .p-togglebutton.p-button{border-radius:7px!important;box-shadow:0 5px 20px #0000000d!important;margin-top:-2px!important}::ng-deep p-togglebutton .p-togglebutton.p-button:hover{filter:brightness(99%)!important;box-shadow:0 5px 20px #0000000d!important;transition:all .3s ease}::ng-deep p-togglebutton .p-togglebutton.p-button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(1px)!important;transition:all .3s ease}#TimeSearch #TimeSelectButton{margin-top:4px!important}::ng-deep .p-calendar .p-inputtext{height:37px}::ng-deep .p-inputtext{border-radius:7px}.calendar{display:inline-block;padding-left:5px;float:left;padding-right:10px;margin-top:-2px}::ng-deep .p-datepicker:not(.p-datepicker-inline){background:var(--table);border:0 none;box-shadow:#091e4226 0 20px 32px -8px;border-radius:12px}::ng-deep .p-button.p-button-text{background-color:transparent;color:var(--primaryColor);border-color:transparent}::ng-deep .p-button.p-button-text:enabled:hover{background:var(--primaryColorShadowLight);color:var(--primaryColor);border-color:transparent}::ng-deep .p-datepicker table td>span.p-highlight{color:var(--tableText);background:var(--primaryColorShadowLight)}::ng-deep .p-inputtext:enabled:hover{border-color:var(--primaryColor)}::ng-deep .p-datepicker{padding:.5rem;padding-bottom:0;background:var(--table);color:var(--tableText);border:1px solid var(--inputBorder);border-radius:3px}::ng-deep .p-inputtext:enabled:focus{outline:0 none;outline-offset:0;box-shadow:0 0 0 1 var(--primaryColorShadowLight);border-color:var(--primaryColor)}::ng-deep .p-inputtext{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:1rem;color:var(--tableText);background:var(--table);padding:.5rem;border:1px solid var(--inputBorder);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;appearance:none;border-radius:7px}::ng-deep .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header{background:var(--table)}::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--tableText);background:var(--table);font-weight:600;margin:0;border-bottom:1px solid var(--inputBorder);border-top-right-radius:12px;border-top-left-radius:12px}::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#e9ecef;color:var(--table)}::ng-deep .p-datepicker .p-timepicker{border-top:1px solid var(--background);padding:.5rem}::ng-deep .p-togglebutton.p-button{background:var(--background);border:1px solid var(--inputBorder);color:var(--tableText);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:1rem 0;border-top:1px solid var(--inputBorder)}::ng-deep .p-button{color:#fff;background:var(--primaryColor);border:1px solid var(--primaryColor);padding:.495rem 1rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:7px}::ng-deep .p-togglebutton.p-button.p-highlight{background:var(--primaryColor);border:1px solid var(--primaryColor);color:var(--background)}::ng-deep .p-togglebutton.p-button.p-highlight:hover{background:var(--primaryColor);border:1px solid var(--primaryColor);color:var(--background)}app-zac-wrapper{z-index:999999}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListPageHeaderComponent, selector: "lib-list-page-header", inputs: ["title", "tabs", "showAdd", "hideAction"], outputs: ["actionClicked"] }, { kind: "component", type: DataTableComponent, selector: "lib-data-table", inputs: ["rowData", "expandRowData", "collapseRowData", "rowValidation", "isTimeSearchAvailable", "isLoading", "tableId", "options", "validateService", "rowsToggled", "tableRefreshCount", "view", "serverSideDataSource", "allowDownload", "startCount", "endCount", "totalCount", "emptyMsg", "filterApplied", "menuItems", "headerActions", "noItemsClass", "entityTypeName", "showNoItemsAdd", "currentPage", "noItemsImage", "columnDefinitions", "refreshCount"], outputs: ["actionRequested", "gridReady", "dragStart", "dragLeave", "pageChanged"] }, { kind: "component", type: SideModalComponent, selector: "lib-side-modal", inputs: ["showClose", "open"], outputs: ["openChange"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: OverridesComponent, selector: "lib-overrides", inputs: ["identity"], outputs: ["close"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IdentitiesPageComponent, selector: "lib-identities", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-identities-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [showAdd]=\"!itemsSelected\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n    <ng-content select=\"[slot=list-page-subheader]\"></ng-content>\n    <lib-data-table [tableId]=\"'identities'\"\n                    [rowData]=\"rowData\"\n                    [isLoading]=\"isLoading\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [currentPage]=\"currentPage\"\n                    [emptyMsg]=\"'No Identities defined, Click the plus to add an Identity.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [menuItems]=\"svc.menuItems\"\n                    [headerActions]=\"svc.tableHeaderActions\"\n                    [noItemsImage]=\"'No_Clients'\"\n                    (gridReady)=\"gridReady($event)\"\n    >\n    </lib-data-table>\n</div>\n<lib-side-modal [(open)]=\"svc.sideModalOpen\" [showClose]=\"false\">\n    <lib-overrides\n            *ngIf=\"svc.modalType === 'overrides' && svc.sideModalOpen\"\n            [identity]=\"svc.selectedIdentity\"\n            (close)=\"closeModal($event)\"\n    ></lib-overrides>\n</lib-side-modal>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".ziti-page-container .action{line-height:60px;top:25px;right:25px;z-index:999}.ziti-identities-container ::ng-deep .zac-wrapper-container{height:0px;left:-999999px;position:fixed}.ziti-identities-container ::ng-deep .zac-wrapper-container .action{display:none}.ziti-ag-grid{height:100%;position:relative;width:100%}.ziti-ag-grid .ziti-ag-grid-table{height:100%;width:100%}.ziti-ag-grid .ziti-ag-grid-table .ag-root-wrapper{border-bottom-style:none}.ziti-ag-grid .ziti-ag-grid-table .ag-cell{align-items:center;display:flex}.system-policies-toggle,.hidden-results-container{position:relative;right:0;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;margin-top:10px;padding:0 0 0 20px;border-radius:7px;flex-wrap:nowrap;flex:1 0 auto}.system-policies-toggle .toggle-text,.hidden-results-container .toggle-text{font-weight:600;font-size:12px}.system-policies-toggle .toggle-text a,.hidden-results-container .toggle-text a{cursor:pointer}.system-policies-toggle .toggle,.hidden-results-container .toggle{width:75px;margin-left:10px}.system-policies-toggle .toggle.on .switch,.hidden-results-container .toggle.on .switch{left:52px}.system-policies-toggle .spinner,.hidden-results-container .spinner{display:inline-block;width:10px;height:10px;border-radius:50%;background:transparent;border-top:2px solid var(--tableText);border-right:2px solid var(--tableText);border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear;margin-left:5px}.hidden-results-container.loading-results{opacity:.7}.nf-cell-vert-align,.ag-row .ag-cell{align-items:center;display:flex}.hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:7px;min-height:30px;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:14px}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:2px solid var(--background);border-radius:12px;cursor:pointer;color:var(----stroke);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:25px!important;margin-left:10px;margin-top:5px;padding:2px 10px 2px 5px;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:2px solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial}::ng-deep .darkmode .ag-dnd-ghost-icon .ag-icon-eye-slash{color:#fff!important}.tMenu{transition-property:opacity;z-index:99999999999;height:-moz-fit-content;height:fit-content}.tMenu.action-menu{position:fixed;width:175px}.tMenu .tActionRow{transition-property:opacity}.tMenu .tActionRow.has-icon{display:flex;flex-direction:row;align-items:center}.tMenu .tActionRow .v7Offline{background-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline{width:14px;height:14px;border-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline:hover{border-color:var(--placeholder)}.hidden-items-container{display:flex;flex-direction:row;width:100%;flex-wrap:nowrap;justify-content:space-between}.os-icon{width:23px;height:23px;background-size:23px 23px;display:inline-flex;margin-right:8px;margin-top:5px;margin-bottom:5px}::ng-deep .date-time-container{position:fixed}::ng-deep .date-time-container .p-calendar .p-inputtext{height:1px;width:1px;padding:0}::ng-deep .date-time-container .filter-button-container{height:50px;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .date-time-container .filter-button-container .toggleButton{padding-left:5px;padding-right:5px;width:unset}::ng-deep .date-time-container .p-calendar{height:30px}::ng-deep .date-time-container .p-calendar .p-inputtext{height:30px;border-top-left-radius:20px;border-bottom-left-radius:20px;text-indent:5px}::ng-deep .date-time-container .p-calendar .p-button-icon-only{border-top-right-radius:20px;border-bottom-right-radius:20px}#TimeSearch{position:relative;float:left;display:inline-block;margin-left:10px;width:50px;height:40px;background-color:var(--primary)}#TimeSearch #TimeSearchList{width:44px;height:0;position:absolute;top:0;left:-2px;overflow:hidden;transition:var(--transition);background-color:var(--menu);border-radius:8px;z-index:30}#TimeSearch #TimeSearchList .time{width:40px;background-color:var(--background);padding-left:8px;padding-right:8px;border-radius:8px;line-height:26px;font-size:12px;font-weight:700;text-align:center;margin-top:2px;margin-left:2px;left:-2px;top:-51px;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSearchList.open{top:-51px;width:44px;height:226px}#TimeSearch #TimeSelectButton{width:40px;background-color:var(--background);padding-left:8px;padding-right:8px;border-radius:8px;line-height:26px;text-align:center;font-size:12px;font-weight:700;margin-top:7px;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSelectButton:hover,#TimeSearch #TimeSearchList .time:hover{background-color:var(--primaryColor);color:var(--white)}::ng-deep p-togglebutton .p-togglebutton.p-button{border-radius:7px!important;box-shadow:0 5px 20px #0000000d!important;margin-top:-2px!important}::ng-deep p-togglebutton .p-togglebutton.p-button:hover{filter:brightness(99%)!important;box-shadow:0 5px 20px #0000000d!important;transition:all .3s ease}::ng-deep p-togglebutton .p-togglebutton.p-button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(1px)!important;transition:all .3s ease}#TimeSearch #TimeSelectButton{margin-top:4px!important}::ng-deep .p-calendar .p-inputtext{height:37px}::ng-deep .p-inputtext{border-radius:7px}.calendar{display:inline-block;padding-left:5px;float:left;padding-right:10px;margin-top:-2px}::ng-deep .p-datepicker:not(.p-datepicker-inline){background:var(--table);border:0 none;box-shadow:#091e4226 0 20px 32px -8px;border-radius:12px}::ng-deep .p-button.p-button-text{background-color:transparent;color:var(--primaryColor);border-color:transparent}::ng-deep .p-button.p-button-text:enabled:hover{background:var(--primaryColorShadowLight);color:var(--primaryColor);border-color:transparent}::ng-deep .p-datepicker table td>span.p-highlight{color:var(--tableText);background:var(--primaryColorShadowLight)}::ng-deep .p-inputtext:enabled:hover{border-color:var(--primaryColor)}::ng-deep .p-datepicker{padding:.5rem;padding-bottom:0;background:var(--table);color:var(--tableText);border:1px solid var(--inputBorder);border-radius:3px}::ng-deep .p-inputtext:enabled:focus{outline:0 none;outline-offset:0;box-shadow:0 0 0 1 var(--primaryColorShadowLight);border-color:var(--primaryColor)}::ng-deep .p-inputtext{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:1rem;color:var(--tableText);background:var(--table);padding:.5rem;border:1px solid var(--inputBorder);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;appearance:none;border-radius:7px}::ng-deep .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header{background:var(--table)}::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--tableText);background:var(--table);font-weight:600;margin:0;border-bottom:1px solid var(--inputBorder);border-top-right-radius:12px;border-top-left-radius:12px}::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#e9ecef;color:var(--table)}::ng-deep .p-datepicker .p-timepicker{border-top:1px solid var(--background);padding:.5rem}::ng-deep .p-togglebutton.p-button{background:var(--background);border:1px solid var(--inputBorder);color:var(--tableText);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:1rem 0;border-top:1px solid var(--inputBorder)}::ng-deep .p-button{color:#fff;background:var(--primaryColor);border:1px solid var(--primaryColor);padding:.495rem 1rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:7px}::ng-deep .p-togglebutton.p-button.p-highlight{background:var(--primaryColor);border:1px solid var(--primaryColor);color:var(--background)}::ng-deep .p-togglebutton.p-button.p-highlight:hover{background:var(--primaryColor);border:1px solid var(--primaryColor);color:var(--background)}app-zac-wrapper{z-index:999999}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListPageHeaderComponent, selector: "lib-list-page-header", inputs: ["title", "tabs", "showAdd", "hideAction"], outputs: ["actionClicked"] }, { kind: "component", type: DataTableComponent, selector: "lib-data-table", inputs: ["rowData", "expandRowData", "collapseRowData", "rowValidation", "isTimeSearchAvailable", "isLoading", "tableId", "options", "validateService", "rowsToggled", "tableRefreshCount", "view", "serverSideDataSource", "allowDownload", "startCount", "endCount", "totalCount", "emptyMsg", "filterApplied", "menuItems", "headerActions", "noItemsClass", "entityTypeName", "showNoItemsAdd", "currentPage", "noItemsImage", "columnDefinitions", "refreshCount"], outputs: ["actionRequested", "gridReady", "dragStart", "dragLeave", "pageChanged"] }, { kind: "component", type: SideModalComponent, selector: "lib-side-modal", inputs: ["showClose", "open"], outputs: ["openChange"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: OverridesComponent, selector: "lib-overrides", inputs: ["identity"], outputs: ["close"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentitiesPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-identities', template: "<div class=\"ziti-page-container ziti-identities-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [showAdd]=\"!itemsSelected\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n\n    <lib-data-table [tableId]=\"'identities'\"\n                    [rowData]=\"rowData\"\n                    [isLoading]=\"isLoading\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [currentPage]=\"currentPage\"\n                    [emptyMsg]=\"'No Identities defined, Click the plus to add an Identity.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [menuItems]=\"svc.menuItems\"\n                    [headerActions]=\"svc.tableHeaderActions\"\n                    [noItemsImage]=\"'No_Clients'\"\n                    (gridReady)=\"gridReady($event)\"\n    >\n    </lib-data-table>\n</div>\n<lib-side-modal [(open)]=\"svc.sideModalOpen\" [showClose]=\"false\">\n    <lib-overrides\n            *ngIf=\"svc.modalType === 'overrides' && svc.sideModalOpen\"\n            [identity]=\"svc.selectedIdentity\"\n            (close)=\"closeModal($event)\"\n    ></lib-overrides>\n</lib-side-modal>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".ziti-page-container .action{line-height:60px;top:25px;right:25px;z-index:999}.ziti-identities-container ::ng-deep .zac-wrapper-container{height:0px;left:-999999px;position:fixed}.ziti-identities-container ::ng-deep .zac-wrapper-container .action{display:none}.ziti-ag-grid{height:100%;position:relative;width:100%}.ziti-ag-grid .ziti-ag-grid-table{height:100%;width:100%}.ziti-ag-grid .ziti-ag-grid-table .ag-root-wrapper{border-bottom-style:none}.ziti-ag-grid .ziti-ag-grid-table .ag-cell{align-items:center;display:flex}.system-policies-toggle,.hidden-results-container{position:relative;right:0;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;margin-top:10px;padding:0 0 0 20px;border-radius:7px;flex-wrap:nowrap;flex:1 0 auto}.system-policies-toggle .toggle-text,.hidden-results-container .toggle-text{font-weight:600;font-size:12px}.system-policies-toggle .toggle-text a,.hidden-results-container .toggle-text a{cursor:pointer}.system-policies-toggle .toggle,.hidden-results-container .toggle{width:75px;margin-left:10px}.system-policies-toggle .toggle.on .switch,.hidden-results-container .toggle.on .switch{left:52px}.system-policies-toggle .spinner,.hidden-results-container .spinner{display:inline-block;width:10px;height:10px;border-radius:50%;background:transparent;border-top:2px solid var(--tableText);border-right:2px solid var(--tableText);border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear;margin-left:5px}.hidden-results-container.loading-results{opacity:.7}.nf-cell-vert-align,.ag-row .ag-cell{align-items:center;display:flex}.hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:7px;min-height:30px;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:14px}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:2px solid var(--background);border-radius:12px;cursor:pointer;color:var(----stroke);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:25px!important;margin-left:10px;margin-top:5px;padding:2px 10px 2px 5px;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:2px solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial}::ng-deep .darkmode .ag-dnd-ghost-icon .ag-icon-eye-slash{color:#fff!important}.tMenu{transition-property:opacity;z-index:99999999999;height:-moz-fit-content;height:fit-content}.tMenu.action-menu{position:fixed;width:175px}.tMenu .tActionRow{transition-property:opacity}.tMenu .tActionRow.has-icon{display:flex;flex-direction:row;align-items:center}.tMenu .tActionRow .v7Offline{background-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline{width:14px;height:14px;border-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline:hover{border-color:var(--placeholder)}.hidden-items-container{display:flex;flex-direction:row;width:100%;flex-wrap:nowrap;justify-content:space-between}.os-icon{width:23px;height:23px;background-size:23px 23px;display:inline-flex;margin-right:8px;margin-top:5px;margin-bottom:5px}::ng-deep .date-time-container{position:fixed}::ng-deep .date-time-container .p-calendar .p-inputtext{height:1px;width:1px;padding:0}::ng-deep .date-time-container .filter-button-container{height:50px;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .date-time-container .filter-button-container .toggleButton{padding-left:5px;padding-right:5px;width:unset}::ng-deep .date-time-container .p-calendar{height:30px}::ng-deep .date-time-container .p-calendar .p-inputtext{height:30px;border-top-left-radius:20px;border-bottom-left-radius:20px;text-indent:5px}::ng-deep .date-time-container .p-calendar .p-button-icon-only{border-top-right-radius:20px;border-bottom-right-radius:20px}#TimeSearch{position:relative;float:left;display:inline-block;margin-left:10px;width:50px;height:40px;background-color:var(--primary)}#TimeSearch #TimeSearchList{width:44px;height:0;position:absolute;top:0;left:-2px;overflow:hidden;transition:var(--transition);background-color:var(--menu);border-radius:8px;z-index:30}#TimeSearch #TimeSearchList .time{width:40px;background-color:var(--background);padding-left:8px;padding-right:8px;border-radius:8px;line-height:26px;font-size:12px;font-weight:700;text-align:center;margin-top:2px;margin-left:2px;left:-2px;top:-51px;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSearchList.open{top:-51px;width:44px;height:226px}#TimeSearch #TimeSelectButton{width:40px;background-color:var(--background);padding-left:8px;padding-right:8px;border-radius:8px;line-height:26px;text-align:center;font-size:12px;font-weight:700;margin-top:7px;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSelectButton:hover,#TimeSearch #TimeSearchList .time:hover{background-color:var(--primaryColor);color:var(--white)}::ng-deep p-togglebutton .p-togglebutton.p-button{border-radius:7px!important;box-shadow:0 5px 20px #0000000d!important;margin-top:-2px!important}::ng-deep p-togglebutton .p-togglebutton.p-button:hover{filter:brightness(99%)!important;box-shadow:0 5px 20px #0000000d!important;transition:all .3s ease}::ng-deep p-togglebutton .p-togglebutton.p-button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(1px)!important;transition:all .3s ease}#TimeSearch #TimeSelectButton{margin-top:4px!important}::ng-deep .p-calendar .p-inputtext{height:37px}::ng-deep .p-inputtext{border-radius:7px}.calendar{display:inline-block;padding-left:5px;float:left;padding-right:10px;margin-top:-2px}::ng-deep .p-datepicker:not(.p-datepicker-inline){background:var(--table);border:0 none;box-shadow:#091e4226 0 20px 32px -8px;border-radius:12px}::ng-deep .p-button.p-button-text{background-color:transparent;color:var(--primaryColor);border-color:transparent}::ng-deep .p-button.p-button-text:enabled:hover{background:var(--primaryColorShadowLight);color:var(--primaryColor);border-color:transparent}::ng-deep .p-datepicker table td>span.p-highlight{color:var(--tableText);background:var(--primaryColorShadowLight)}::ng-deep .p-inputtext:enabled:hover{border-color:var(--primaryColor)}::ng-deep .p-datepicker{padding:.5rem;padding-bottom:0;background:var(--table);color:var(--tableText);border:1px solid var(--inputBorder);border-radius:3px}::ng-deep .p-inputtext:enabled:focus{outline:0 none;outline-offset:0;box-shadow:0 0 0 1 var(--primaryColorShadowLight);border-color:var(--primaryColor)}::ng-deep .p-inputtext{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:1rem;color:var(--tableText);background:var(--table);padding:.5rem;border:1px solid var(--inputBorder);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;appearance:none;border-radius:7px}::ng-deep .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header{background:var(--table)}::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--tableText);background:var(--table);font-weight:600;margin:0;border-bottom:1px solid var(--inputBorder);border-top-right-radius:12px;border-top-left-radius:12px}::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#e9ecef;color:var(--table)}::ng-deep .p-datepicker .p-timepicker{border-top:1px solid var(--background);padding:.5rem}::ng-deep .p-togglebutton.p-button{background:var(--background);border:1px solid var(--inputBorder);color:var(--tableText);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:1rem 0;border-top:1px solid var(--inputBorder)}::ng-deep .p-button{color:#fff;background:var(--primaryColor);border:1px solid var(--primaryColor);padding:.495rem 1rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:7px}::ng-deep .p-togglebutton.p-button.p-highlight{background:var(--primaryColor);border:1px solid var(--primaryColor);color:var(--background)}::ng-deep .p-togglebutton.p-button.p-highlight:hover{background:var(--primaryColor);border:1px solid var(--primaryColor);color:var(--background)}app-zac-wrapper{z-index:999999}\n"] }]
+            args: [{ selector: 'lib-identities', template: "<div class=\"ziti-page-container ziti-identities-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [showAdd]=\"!itemsSelected\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n    <ng-content select=\"[slot=list-page-subheader]\"></ng-content>\n    <lib-data-table [tableId]=\"'identities'\"\n                    [rowData]=\"rowData\"\n                    [isLoading]=\"isLoading\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [currentPage]=\"currentPage\"\n                    [emptyMsg]=\"'No Identities defined, Click the plus to add an Identity.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [menuItems]=\"svc.menuItems\"\n                    [headerActions]=\"svc.tableHeaderActions\"\n                    [noItemsImage]=\"'No_Clients'\"\n                    (gridReady)=\"gridReady($event)\"\n    >\n    </lib-data-table>\n</div>\n<lib-side-modal [(open)]=\"svc.sideModalOpen\" [showClose]=\"false\">\n    <lib-overrides\n            *ngIf=\"svc.modalType === 'overrides' && svc.sideModalOpen\"\n            [identity]=\"svc.selectedIdentity\"\n            (close)=\"closeModal($event)\"\n    ></lib-overrides>\n</lib-side-modal>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".ziti-page-container .action{line-height:60px;top:25px;right:25px;z-index:999}.ziti-identities-container ::ng-deep .zac-wrapper-container{height:0px;left:-999999px;position:fixed}.ziti-identities-container ::ng-deep .zac-wrapper-container .action{display:none}.ziti-ag-grid{height:100%;position:relative;width:100%}.ziti-ag-grid .ziti-ag-grid-table{height:100%;width:100%}.ziti-ag-grid .ziti-ag-grid-table .ag-root-wrapper{border-bottom-style:none}.ziti-ag-grid .ziti-ag-grid-table .ag-cell{align-items:center;display:flex}.system-policies-toggle,.hidden-results-container{position:relative;right:0;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;margin-top:10px;padding:0 0 0 20px;border-radius:7px;flex-wrap:nowrap;flex:1 0 auto}.system-policies-toggle .toggle-text,.hidden-results-container .toggle-text{font-weight:600;font-size:12px}.system-policies-toggle .toggle-text a,.hidden-results-container .toggle-text a{cursor:pointer}.system-policies-toggle .toggle,.hidden-results-container .toggle{width:75px;margin-left:10px}.system-policies-toggle .toggle.on .switch,.hidden-results-container .toggle.on .switch{left:52px}.system-policies-toggle .spinner,.hidden-results-container .spinner{display:inline-block;width:10px;height:10px;border-radius:50%;background:transparent;border-top:2px solid var(--tableText);border-right:2px solid var(--tableText);border-bottom:2px solid transparent;border-left:2px solid transparent;animation:loading .5s infinite linear;margin-left:5px}.hidden-results-container.loading-results{opacity:.7}.nf-cell-vert-align,.ag-row .ag-cell{align-items:center;display:flex}.hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:7px;min-height:30px;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:14px}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:2px solid var(--background);border-radius:12px;cursor:pointer;color:var(----stroke);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:25px!important;margin-left:10px;margin-top:5px;padding:2px 10px 2px 5px;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:2px solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial}::ng-deep .darkmode .ag-dnd-ghost-icon .ag-icon-eye-slash{color:#fff!important}.tMenu{transition-property:opacity;z-index:99999999999;height:-moz-fit-content;height:fit-content}.tMenu.action-menu{position:fixed;width:175px}.tMenu .tActionRow{transition-property:opacity}.tMenu .tActionRow.has-icon{display:flex;flex-direction:row;align-items:center}.tMenu .tActionRow .v7Offline{background-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline{width:14px;height:14px;border-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline:hover{border-color:var(--placeholder)}.hidden-items-container{display:flex;flex-direction:row;width:100%;flex-wrap:nowrap;justify-content:space-between}.os-icon{width:23px;height:23px;background-size:23px 23px;display:inline-flex;margin-right:8px;margin-top:5px;margin-bottom:5px}::ng-deep .date-time-container{position:fixed}::ng-deep .date-time-container .p-calendar .p-inputtext{height:1px;width:1px;padding:0}::ng-deep .date-time-container .filter-button-container{height:50px;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .date-time-container .filter-button-container .toggleButton{padding-left:5px;padding-right:5px;width:unset}::ng-deep .date-time-container .p-calendar{height:30px}::ng-deep .date-time-container .p-calendar .p-inputtext{height:30px;border-top-left-radius:20px;border-bottom-left-radius:20px;text-indent:5px}::ng-deep .date-time-container .p-calendar .p-button-icon-only{border-top-right-radius:20px;border-bottom-right-radius:20px}#TimeSearch{position:relative;float:left;display:inline-block;margin-left:10px;width:50px;height:40px;background-color:var(--primary)}#TimeSearch #TimeSearchList{width:44px;height:0;position:absolute;top:0;left:-2px;overflow:hidden;transition:var(--transition);background-color:var(--menu);border-radius:8px;z-index:30}#TimeSearch #TimeSearchList .time{width:40px;background-color:var(--background);padding-left:8px;padding-right:8px;border-radius:8px;line-height:26px;font-size:12px;font-weight:700;text-align:center;margin-top:2px;margin-left:2px;left:-2px;top:-51px;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSearchList.open{top:-51px;width:44px;height:226px}#TimeSearch #TimeSelectButton{width:40px;background-color:var(--background);padding-left:8px;padding-right:8px;border-radius:8px;line-height:26px;text-align:center;font-size:12px;font-weight:700;margin-top:7px;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSelectButton:hover,#TimeSearch #TimeSearchList .time:hover{background-color:var(--primaryColor);color:var(--white)}::ng-deep p-togglebutton .p-togglebutton.p-button{border-radius:7px!important;box-shadow:0 5px 20px #0000000d!important;margin-top:-2px!important}::ng-deep p-togglebutton .p-togglebutton.p-button:hover{filter:brightness(99%)!important;box-shadow:0 5px 20px #0000000d!important;transition:all .3s ease}::ng-deep p-togglebutton .p-togglebutton.p-button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(1px)!important;transition:all .3s ease}#TimeSearch #TimeSelectButton{margin-top:4px!important}::ng-deep .p-calendar .p-inputtext{height:37px}::ng-deep .p-inputtext{border-radius:7px}.calendar{display:inline-block;padding-left:5px;float:left;padding-right:10px;margin-top:-2px}::ng-deep .p-datepicker:not(.p-datepicker-inline){background:var(--table);border:0 none;box-shadow:#091e4226 0 20px 32px -8px;border-radius:12px}::ng-deep .p-button.p-button-text{background-color:transparent;color:var(--primaryColor);border-color:transparent}::ng-deep .p-button.p-button-text:enabled:hover{background:var(--primaryColorShadowLight);color:var(--primaryColor);border-color:transparent}::ng-deep .p-datepicker table td>span.p-highlight{color:var(--tableText);background:var(--primaryColorShadowLight)}::ng-deep .p-inputtext:enabled:hover{border-color:var(--primaryColor)}::ng-deep .p-datepicker{padding:.5rem;padding-bottom:0;background:var(--table);color:var(--tableText);border:1px solid var(--inputBorder);border-radius:3px}::ng-deep .p-inputtext:enabled:focus{outline:0 none;outline-offset:0;box-shadow:0 0 0 1 var(--primaryColorShadowLight);border-color:var(--primaryColor)}::ng-deep .p-inputtext{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:1rem;color:var(--tableText);background:var(--table);padding:.5rem;border:1px solid var(--inputBorder);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;appearance:none;border-radius:7px}::ng-deep .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header{background:var(--table)}::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--tableText);background:var(--table);font-weight:600;margin:0;border-bottom:1px solid var(--inputBorder);border-top-right-radius:12px;border-top-left-radius:12px}::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#e9ecef;color:var(--table)}::ng-deep .p-datepicker .p-timepicker{border-top:1px solid var(--background);padding:.5rem}::ng-deep .p-togglebutton.p-button{background:var(--background);border:1px solid var(--inputBorder);color:var(--tableText);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:1rem 0;border-top:1px solid var(--inputBorder)}::ng-deep .p-button{color:#fff;background:var(--primaryColor);border:1px solid var(--primaryColor);padding:.495rem 1rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:7px}::ng-deep .p-togglebutton.p-button.p-highlight{background:var(--primaryColor);border:1px solid var(--primaryColor);color:var(--background)}::ng-deep .p-togglebutton.p-button.p-highlight:hover{background:var(--primaryColor);border:1px solid var(--primaryColor);color:var(--background)}app-zac-wrapper{z-index:999999}\n"] }]
         }], ctorParameters: function () { return [{ type: IdentitiesPageService }, { type: DataTableFilterService }, { type: i3$2.MatDialog }, { type: TabNameService }, { type: ZacWrapperServiceClass, decorators: [{
                     type: Inject,
                     args: [ZAC_WRAPPER_SERVICE]
@@ -11705,6 +11724,13 @@ class Service {
         this.contextMenu = 'Yes';
     }
 }
+class Config {
+    constructor() {
+        this.rootNode = 'No';
+        this.children = [];
+        this.contextMenu = 'Yes';
+    }
+}
 class Group {
     constructor(idv, s, g) {
         this.id = idv;
@@ -11749,16 +11775,118 @@ class ERouter {
 }
 class Children {
     constructor() {
+        this.rootNode = 'No';
+        this.firstChild = 'No';
         this.type = 'Children';
         this.children = [];
     }
 }
 class NetworkVisualizerHelper {
-    getResourceTreeObj(networkName, networkStatus, services, endpoints, appwans, edgerouters, edgeRouterPolicies, serviceEdgeRouterPolicies, 
+    constructor() {
+        this.uniqIId = 0;
+    }
+    createUniqId() {
+        return ++this.uniqIId;
+    }
+    createEdgeRouterNode(er, isRootNode = 'Yes') {
+        const erOb = new ERouter();
+        // erOb.id = createId();
+        erOb.uuid = er.id;
+        erOb.name = er.name;
+        erOb.verified = er.isVerified ? 'Yes' : 'No';
+        //erOb.version = er.productVersion;
+        erOb.online = er.isOnline ? 'Yes' : 'No';
+        erOb.disabled = er.disabled ? 'Yes' : 'No';
+        erOb.type = 'Edge Router';
+        erOb.rootNode = isRootNode;
+        erOb.tunnelerEnabled = er.tunnelerEnabled ? er.tunnelerEnabled : 'No';
+        erOb.syncStatus = er.syncStatus ? er.syncStatus : 'No';
+        erOb.createdAt = er.createdAt;
+        erOb.updatedAt = er.updatedAt;
+        return erOb;
+    }
+    createServiceEdgeRouterPolicyNode(rawObj, isRootNode = 'Yes') {
+        const serviceerpolicy = new ServiceERPolicy();
+        // serviceerpolicy.id = createId();
+        serviceerpolicy.uuid = rawObj.id;
+        serviceerpolicy.name = rawObj.name;
+        serviceerpolicy.type = 'Service Router Policy';
+        serviceerpolicy.rootNode = isRootNode;
+        return serviceerpolicy;
+    }
+    createEdgeRouterPolicyNode(rawObj, isRootNode = 'Yes') {
+        const erpolicy = new ERPolicy();
+        // erpolicy.id = createId();
+        erpolicy.uuid = rawObj.id;
+        erpolicy.name = rawObj.name;
+        erpolicy.type = 'Router Policy';
+        erpolicy.rootNode = isRootNode;
+        erpolicy.isSystem = rawObj.isSystem;
+        erpolicy.semantic = rawObj.semantic;
+        return erpolicy;
+    }
+    createServicePolicyNode(rawObj, isRootNode = 'Yes') {
+        const bindGrp = new Group(43423, 'Bind-Policies', 'Bind Service Policy');
+        const dialGrp = new Group(43545, 'Dial-Policies', 'Dial Service Policy');
+        const spolicy = new ServicePolicy$1();
+        // spolicy.id = createId();
+        spolicy.id = 87956;
+        spolicy.uuid = rawObj.id;
+        spolicy.name = rawObj.name;
+        spolicy.type = 'Service Policy';
+        spolicy.rootNode = isRootNode;
+        spolicy.clickProcess = "Not Yet";
+        if (rawObj.type === 'Bind') {
+            bindGrp.children.push(spolicy);
+            return bindGrp;
+        }
+        else {
+            dialGrp.children.push(spolicy);
+            return dialGrp;
+        }
+    }
+    createIdentityNode(rawObj, isRootNode = 'Yes') {
+        const endpoint = new Identity();
+        endpoint.rootNode = isRootNode;
+        // endpoint.id = createId();
+        endpoint.id = 5432;
+        endpoint.uuid = rawObj.id;
+        endpoint.name = rawObj.name;
+        endpoint.online = rawObj.hasApiSession === true ? 'Yes' : 'No';
+        endpoint.type = 'Identity';
+        endpoint.createdAt = rawObj.createdAt;
+        endpoint.updatedAt = rawObj.updatedAt;
+        endpoint.status = rawObj.sdkInfo !== null ? 'Registered' : 'Not Registered';
+        if (rawObj.sdkInfo) {
+            endpoint.os = rawObj.sdkInfo.type ? rawObj.sdkInfo.type : rawObj.sdkInfo.appId;
+            endpoint.osVersion = rawObj.sdkInfo.version;
+        }
+        if (rawObj.authPolicy && rawObj.authPolicy.name.includes("BrowZer")) {
+            endpoint.type = 'BrowZer Identity';
+        }
+        return endpoint;
+    }
+    createServiceNode(rawObj, isRootNode = 'Yes') {
+        const serviceobj = new Service();
+        // serviceobj.id = createId();
+        serviceobj.name = rawObj.name;
+        serviceobj.uuid = rawObj.id;
+        serviceobj.type = 'Service';
+        serviceobj.rootNode = isRootNode;
+        const attributeswithName = [];
+        //   attributeswithName.push('@' + rawObj.name);
+        rawObj && rawObj.roleAttributes && rawObj.roleAttributes.find((srattr) => {
+            attributeswithName.push(srattr);
+        });
+        return serviceobj;
+    }
+    getResourceTreeObj(networkName, networkStatus, services, identities, servicePolicies, edgerouters, edgeRouterPolicies, serviceEdgeRouterPolicies, 
     // networkProductVersion,
-    uniqId, logger) {
+    services_totalCount, identities_totalCount, edgerouters_totalCount, service_policies_totalCount, edge_router_policies_totalCount, service_router_policies_totalCount, uniqId, logger, ...args) {
+        this.uniqIId = uniqId;
         function createId() {
             ++uniqId;
+            //  ++this.uniqIId;
             return uniqId;
         }
         class RootJson {
@@ -11768,13 +11896,16 @@ class NetworkVisualizerHelper {
                 this.children = [];
                 this.contextMenu = 'Yes';
                 this.type = 'Network';
+                this.rootNode = 'No';
             }
         }
         const rootJson = new RootJson();
         rootJson.name = 'Network';
         rootJson.status = 'Provisioned';
-        function processIdentitiesForTree(identitiesChildren, edgerouters, endpoints, appwans, services, edgeRouterPolicies, nx, ny) {
-            identitiesChildren.name = identitiesChildren.name + ' (' + ny + ')';
+        function processIdentitiesForTree(identitiesChildren, identities, nx, ny) {
+            if (args[2] === false)
+                return identitiesChildren;
+            // identitiesChildren.name = identitiesChildren.name + ' (' + ny + ')';
             const unregisteredGrp = new Group(createId(), 'Identities[Unregistered]', 'Identities that are not registered');
             const abcdGrp = new Group(createId(), 'Identities [A-D]', 'Identity name starts with A to D');
             const efghGrp = new Group(createId(), 'Identities [E-H]', 'Identity name starts with E to H');
@@ -11789,16 +11920,20 @@ class NetworkVisualizerHelper {
                 const endpoint = new Identity();
                 endpoint.rootNode = 'Yes';
                 endpoint.id = createId();
-                endpoint.uuid = endpoints[j].id;
-                endpoint.name = endpoints[j].name;
-                endpoint.online = endpoints[j].hasApiSession === true ? 'Yes' : 'No';
+                endpoint.uuid = identities[j].id;
+                endpoint.name = identities[j].name;
+                endpoint.online = identities[j].hasApiSession === true ? 'Yes' : 'No';
                 endpoint.type = 'Identity';
-                endpoint.status = endpoints[j].osRelease !== null ? 'Registered' : 'Not Registered';
-                if (endpoints[j].osRelease === null && endpoints[j].type && endpoints[j].type.includes('browzer')) {
-                    endpoint.status = 'Registered';
-                    // endpoint.type = 'Browzer Endpoint';
+                endpoint.createdAt = identities[j].createdAt;
+                endpoint.updatedAt = identities[j].updatedAt;
+                endpoint.status = identities[j].sdkInfo !== null ? 'Registered' : 'Not Registered';
+                if (identities[j].sdkInfo) {
+                    endpoint.os = identities[j].sdkInfo.type ? identities[j].sdkInfo.type : identities[j].sdkInfo.appId;
+                    endpoint.osVersion = identities[j].sdkInfo.version;
+                }
+                if (identities[j].authPolicy && identities[j].authPolicy.name.includes("BrowZer")) {
+                    endpoint.type = 'BrowZer Identity';
                 }
-                endpoint.os = endpoints[j].os;
                 const cha = endpoint.name.charAt(0).toLowerCase();
                 if (endpoint.status === 'Not Registered') {
                     unregisteredGrp.children.push(endpoint);
@@ -11925,22 +12060,24 @@ class NetworkVisualizerHelper {
                     for (let j = i; j < lastElement; j++) {
                         chld.children.push(oneTo9Grp.children[j]);
                     }
-                    chld.name = chld.name + ' (' + chld.children.length + ')';
+                    // chld.name = chld.name + ' (' + chld.children.length + ')';
                     identitiesChildren.children.push(chld);
                     i = i + 80;
                 }
             }
             return identitiesChildren;
         }
-        function processServicePoliciesForTree(servicePolicyChildren, edgerouters, identities, servicePolicies, services, edgeRouterPolicies, nx, ny) {
-            const bindGrp = new Group(createId(), 'BindPolicies', 'Bind Service Policy');
-            const dialGrp = new Group(createId(), 'DialPolicies', 'Dial Service Policy');
+        function processServicePoliciesForTree(servicePolicyChildren, servicePolicies, nx, ny) {
+            if (args[0] === false)
+                return servicePolicyChildren;
+            const bindGrp = new Group(createId(), 'Bind-Policies', 'Bind Service Policy');
+            const dialGrp = new Group(createId(), 'Dial-Policies', 'Dial Service Policy');
             servicePolicies.forEach((sp) => {
                 const spolicy = new ServicePolicy$1();
                 spolicy.id = createId();
                 spolicy.uuid = sp.id;
                 spolicy.name = sp.name;
-                spolicy.type = 'ServicePolicy';
+                spolicy.type = 'Service Policy';
                 spolicy.rootNode = 'Yes';
                 if (sp.type === 'Bind') {
                     bindGrp.children.push(spolicy);
@@ -11953,7 +12090,6 @@ class NetworkVisualizerHelper {
             servicePolicyChildren.children.push(bindGrp);
             dialGrp.name = dialGrp.name + '(' + dialGrp.children.length + ')';
             servicePolicyChildren.children.push(dialGrp);
-            servicePolicyChildren.name = servicePolicyChildren.name + ' (' + (bindGrp.children.length + dialGrp.children.length) + ')';
             return servicePolicyChildren;
         }
         function serviceGrouping(servicesChildren, servicestree) {
@@ -12110,10 +12246,12 @@ class NetworkVisualizerHelper {
                 oneTo9Grp.name = oneTo9Grp.name + '(' + oneTo9Grp.children.length + ')';
                 servicesChildren.children.push(oneTo9Grp);
             }
-            servicesChildren.name = servicesChildren.name + '(' + servicestree.length + ')';
+            //  servicesChildren.name = servicesChildren.name + '(' + servicestree.length + ')';
             return servicesChildren;
         }
-        function processServicesForTree(servicesChildren, edgerouters, endpoints, appwans, services, edgeRouterPolicies, nx, ny) {
+        function processServicesForTree(servicesChildren, services, nx, ny) {
+            if (args[1] === false)
+                return servicesChildren;
             const servicestree = [];
             for (let i = nx; i < ny; i++) {
                 const serviceobj = new Service();
@@ -12158,7 +12296,9 @@ class NetworkVisualizerHelper {
             } // end for loop
             return serviceGrouping(servicesChildren, servicestree);
         } // end of processServicesForTree
-        function processEdgeRouterPoliciesForTree(edgeRouterPoliciesChildren, edgerouters, endpoints, appwans, services, edgeRouterPolicies, nx, ny) {
+        function processEdgeRouterPoliciesForTree(edgeRouterPoliciesChildren, edgeRouterPolicies, nx, ny) {
+            if (args[4] === false)
+                return edgeRouterPoliciesChildren;
             for (let i = nx; i < ny; i++) {
                 const erpolicy = new ERPolicy();
                 erpolicy.id = createId();
@@ -12166,11 +12306,15 @@ class NetworkVisualizerHelper {
                 erpolicy.name = edgeRouterPolicies[i].name;
                 erpolicy.type = 'Router Policy';
                 erpolicy.rootNode = 'Yes';
+                erpolicy.isSystem = edgeRouterPolicies[i].isSystem;
+                erpolicy.semantic = edgeRouterPolicies[i].semantic;
                 edgeRouterPoliciesChildren.children.push(erpolicy);
             } // end of main for loop
             return edgeRouterPoliciesChildren;
         } // end
-        function processServiceEdgeRouterPoliciesForTree(serviceEdgeRouterPoliciesChildren, edgerouters, endpoints, appwans, services, edgeRouterPolicies, serviceEdgeRouterPolicies, nx, ny) {
+        function processServiceEdgeRouterPoliciesForTree(serviceEdgeRouterPoliciesChildren, serviceEdgeRouterPolicies, nx, ny) {
+            if (args[5] === false)
+                return serviceEdgeRouterPoliciesChildren;
             for (let i = nx; i < ny; i++) {
                 const serviceerpolicy = new ServiceERPolicy();
                 serviceerpolicy.id = createId();
@@ -12182,7 +12326,9 @@ class NetworkVisualizerHelper {
             } // end of main for loop
             return serviceEdgeRouterPoliciesChildren;
         } // end
-        function processEdgeroutersForTree(edgerouterChildren, edgerouters, endpoints, appwans, services, edgeRouterPolicies, nx, ny) {
+        function processEdgeroutersForTree(edgerouterChildren, edgerouters, nx, ny) {
+            if (args[3] === false)
+                return edgerouterChildren;
             for (let i = nx; i < ny; i++) {
                 const erOb = new ERouter();
                 erOb.id = createId();
@@ -12196,60 +12342,50 @@ class NetworkVisualizerHelper {
                     erOb.disabled = er.disabled ? 'Yes' : 'No';
                     erOb.type = 'Edge Router';
                     erOb.rootNode = 'Yes';
-                    if (er.hostId !== null) {
-                        // erOb.provider = findProviderNameForHostId(er.hostId);
-                    }
-                    else if (er.status === 'ERROR') {
-                        erOb.provider = 'N/A';
-                    }
-                    else {
-                        erOb.provider = 'Private DC';
-                    }
+                    erOb.tunnelerEnabled = er.tunnelerEnabled ? er.tunnelerEnabled : 'No';
+                    erOb.syncStatus = er.syncStatus ? er.syncStatus : 'No';
+                    erOb.createdAt = er.createdAt;
+                    erOb.updatedAt = er.updatedAt;
                     edgerouterChildren.children.push(erOb);
                 }
             } // end main for loop
             return edgerouterChildren;
         }
         // createId() generates node Id 1,2,3,4,5 for the following five nodes. this id is used to search capability.
-        let appwansChildren = new Children();
-        appwansChildren.id = createId();
-        appwansChildren.name = 'Service Policies';
+        let servicPoliciesChildren = new Children();
+        servicPoliciesChildren.id = createId();
+        servicPoliciesChildren.firstChild = 'Yes';
+        servicPoliciesChildren.name = 'Service Policies(' + service_policies_totalCount + ')';
         let servicesChildren = new Children();
         servicesChildren.id = createId();
-        servicesChildren.name = 'Services';
-        let endpointsChildren = new Children();
-        endpointsChildren.id = createId();
-        endpointsChildren.name = 'Identities';
+        servicesChildren.firstChild = 'Yes';
+        servicesChildren.name = 'Services(' + services_totalCount + ')';
+        let identitiesChildren = new Children();
+        identitiesChildren.id = createId();
+        identitiesChildren.firstChild = 'Yes';
+        identitiesChildren.name = 'Identities(' + identities_totalCount + ')';
         let edgerouterChildren = new Children();
         edgerouterChildren.id = createId();
-        edgerouterChildren.name = 'Edge Routers';
+        edgerouterChildren.firstChild = 'Yes';
+        edgerouterChildren.name = 'Edge Routers(' + edgerouters_totalCount + ')';
         let edgeRouterPoliciesChildren = new Children();
         edgeRouterPoliciesChildren.id = createId();
-        edgeRouterPoliciesChildren.name = 'Edge Router Policies';
+        edgeRouterPoliciesChildren.firstChild = 'Yes';
+        edgeRouterPoliciesChildren.name = 'Edge Router Policies(' + edge_router_policies_totalCount + ')';
         let serviceEdgeRouterPolicesChildren = new Children();
         serviceEdgeRouterPolicesChildren.id = createId();
-        serviceEdgeRouterPolicesChildren.name = 'Service Edge Router Policies';
-        servicesChildren = processServicesForTree(servicesChildren, edgerouters, endpoints, appwans, services, edgeRouterPolicies, 0, services.length);
-        edgerouterChildren = processEdgeroutersForTree(edgerouterChildren, edgerouters, endpoints, appwans, services, edgeRouterPolicies, 0, edgerouters.length);
-        if (edgerouterChildren) {
-            edgerouterChildren.name = edgerouterChildren.name + ' (' + edgerouterChildren.children.length + ')';
-        }
-        appwansChildren = processServicePoliciesForTree(appwansChildren, edgerouters, endpoints, appwans, services, edgeRouterPolicies, 0, appwans.length);
-        edgeRouterPoliciesChildren = processEdgeRouterPoliciesForTree(edgeRouterPoliciesChildren, edgerouters, endpoints, appwans, services, edgeRouterPolicies, 0, edgeRouterPolicies.length);
-        if (edgeRouterPoliciesChildren) {
-            edgeRouterPoliciesChildren.name =
-                'Edge Router Policies (' + edgeRouterPoliciesChildren.children.length + ')';
-        }
-        endpointsChildren = processIdentitiesForTree(endpointsChildren, edgerouters, endpoints, appwans, services, edgeRouterPolicies, 0, endpoints.length);
-        //serviceEdgeRouterPolicies
-        serviceEdgeRouterPolicesChildren = processServiceEdgeRouterPoliciesForTree(serviceEdgeRouterPolicesChildren, edgerouters, endpoints, appwans, services, edgeRouterPolicies, serviceEdgeRouterPolicies, 0, serviceEdgeRouterPolicies.length);
-        if (edgeRouterPoliciesChildren) {
-            serviceEdgeRouterPolicesChildren.name =
-                'Service Edge Router Policies (' + serviceEdgeRouterPolicesChildren.children.length + ')';
-        }
-        rootJson.children.push(appwansChildren);
+        serviceEdgeRouterPolicesChildren.firstChild = 'Yes';
+        serviceEdgeRouterPolicesChildren.name = 'Service Edge Router Policies(' + service_router_policies_totalCount + ')';
+        servicesChildren = processServicesForTree(servicesChildren, services, 0, services.length);
+        edgerouterChildren = processEdgeroutersForTree(edgerouterChildren, edgerouters, 0, edgerouters.length);
+        servicPoliciesChildren = processServicePoliciesForTree(servicPoliciesChildren, servicePolicies, 0, servicePolicies.length);
+        edgeRouterPoliciesChildren = processEdgeRouterPoliciesForTree(edgeRouterPoliciesChildren, edgeRouterPolicies, 0, edgeRouterPolicies.length);
+        identitiesChildren = processIdentitiesForTree(identitiesChildren, identities, 0, identities.length);
+        //serviceRouterPolicies
+        serviceEdgeRouterPolicesChildren = processServiceEdgeRouterPoliciesForTree(serviceEdgeRouterPolicesChildren, serviceEdgeRouterPolicies, 0, serviceEdgeRouterPolicies.length);
+        rootJson.children.push(servicPoliciesChildren);
         rootJson.children.push(servicesChildren);
-        rootJson.children.push(endpointsChildren);
+        rootJson.children.push(identitiesChildren);
         rootJson.children.push(edgerouterChildren);
         rootJson.children.push(edgeRouterPoliciesChildren);
         rootJson.children.push(serviceEdgeRouterPolicesChildren);
@@ -12292,7 +12428,6 @@ class TreeNodeProcessor {
                 rawEpAttributes = rawEp.roleAttributes;
             }
             ;
-            rawEpAttributes.push('@' + rawEp.name);
             for (let i = 0; i < rawEpAttributes.length; i++) {
                 const attribute = new Attribute();
                 attribute.id = this.createId();
@@ -12305,67 +12440,60 @@ class TreeNodeProcessor {
             bindServices.id = this.createId();
             dialServices.id = this.createId();
             let identityServicePolicies = [];
-            const services_url = this.getLinkForResource(rawEp, 'service-policies').replace('./', '');
             const pagesize = 500;
-            const services_paging = this.getPagingObject(pagesize);
+            // fetch associated routers
+            const url = this.getLinkForResource(rawEp, 'edge-routers').replace('./', '');
+            let associatedRouters = [];
+            const paging = this.getPagingObject(pagesize);
+            const erChailds = new Children();
+            erChailds.id = this.createId();
+            erChailds.name = 'Associated Routers';
+            erChailds.type = 'Associated Routers';
+            const associatedRoutersPromise = await zitiService.get(url, paging, [])
+                .then((result) => {
+                result.data.forEach((re) => {
+                    const tmp = new ERouter();
+                    tmp.id = this.createId();
+                    tmp.name = re.name;
+                    tmp.type = 'Router';
+                    erChailds.children.push(tmp);
+                });
+            });
+            const policies_url = this.getLinkForResource(rawEp, 'service-policies').replace('./', '');
+            const policies_paging = this.getPagingObject(pagesize);
             const firstPromise = await zitiService
-                .get(services_url, services_paging, [])
-                .then(async (result) => {
+                .get(policies_url, policies_paging, [])
+                .then((result) => {
                 identityServicePolicies = result.data;
-                const pages = Math.ceil(result.meta.pagination.totalCount / pagesize);
-                const promises = [];
-                for (let page = 2; page <= pages; page++) {
-                    services_paging.page = page;
-                    const tmp_promise = await zitiService
-                        .get(services_url, services_paging, [])
-                        .then((pageResult) => {
-                        pageResult.data.forEach((serv) => {
-                            identityServicePolicies.push(serv);
-                        });
-                    });
-                    promises.push(tmp_promise);
-                    wait_promises.push(tmp_promise);
-                }
-                Promise.all(promises).then(() => {
-                    const sub_promises = [];
-                    identityServicePolicies.find(async (isp) => {
-                        const pagingOb = this.getPagingObject(pagesize);
-                        const ser_url = this.getLinkForResource(isp, 'services').replace('./', '');
-                        const tmpPromise = await zitiService
-                            .get(ser_url, pagingOb, [])
-                            .then((result) => {
-                            const tmp_services = [];
-                            result.data.find((re) => {
-                                const serv = new Service();
-                                serv.id = this.createId();
-                                serv.name = re.name;
-                                serv.type = 'Service';
-                                //  tmp_services.push(serv);
-                                if (isp.type === 'Dial') {
-                                    dialServices.children.push(serv);
-                                }
-                                else {
-                                    bindServices.children.push(serv);
-                                }
-                            });
-                        });
-                        sub_promises.push(tmpPromise);
-                        wait_promises.push(tmpPromise);
-                    }); // loop
-                    Promise.all(sub_promises).then(() => {
-                        if (bindServices.children.length > 0) {
-                            bindServices.name = 'Bind-Services(' + bindServices.children.length + ')';
-                            identityNode.data.children.push(bindServices);
-                        }
-                        if (dialServices.children.length > 0) {
-                            dialServices.name = 'Dial-Services(' + dialServices.children.length + ')';
-                            identityNode.data.children.push(dialServices);
-                        }
-                    });
+            });
+            const promises = [];
+            identityServicePolicies.forEach((sp) => {
+                const nodeArray = this.getServicesForAServicePolicy(sp, zitiService, 500);
+                promises.push(nodeArray);
+            });
+            await Promise.all(promises).then((nodeArray) => {
+                nodeArray.forEach((arOb) => {
+                    if (arOb[0] === 'Bind') {
+                        bindServices.children = this.arrayObjectCopyRightToLeft(bindServices.children, arOb[1]);
+                    }
+                    else {
+                        dialServices.children = this.arrayObjectCopyRightToLeft(dialServices.children, arOb[1]);
+                    }
                 });
             });
-            wait_promises.push(firstPromise);
             Promise.all(wait_promises).then(() => {
+                if (erChailds.children.length > 0) {
+                    erChailds.name = erChailds.name + '(' + erChailds.children.length + ')';
+                    identityNode.data.children.push(erChailds);
+                }
+                if (bindServices.children.length > 0) {
+                    bindServices.name = 'Bind-Services(' + bindServices.children.length + ')';
+                    identityNode.data.children.push(bindServices);
+                }
+                if (dialServices.children.length > 0) {
+                    dialServices.name = 'Dial-Services(' + dialServices.children.length + ')';
+                    identityNode.data.children.push(dialServices);
+                }
                 resolve('this is a promise');
             });
         });
@@ -12386,24 +12514,46 @@ class TreeNodeProcessor {
         serviceOb.type = 'Service';
         return serviceOb;
     }
-    addItemToArray(bindIdnetities, ob) {
-        if (!bindIdnetities.find((item) => item.uuid === ob.id)) {
-            const epOb = new Identity();
-            epOb.id = this.createId();
-            epOb.uuid = ob.id;
-            epOb.name = ob.name;
-            epOb.online = ob.hasApiSession === true ? 'Yes' : 'No';
-            epOb.type = 'Identity';
-            epOb.status = ob.os !== null ? 'Registered' : 'Not Registered';
-            epOb.os = ob.os;
-            bindIdnetities.push(epOb);
+    arrayObjectCopyRightToLeft(leftArr, rightArr) {
+        const leftArrIds = [];
+        leftArr.forEach((ob) => {
+            leftArrIds.push(ob.id);
+        });
+        rightArr.forEach((ob) => {
+            if (!leftArr.includes(ob.id)) {
+                leftArr.push(ob);
+            }
+        });
+        return leftArr;
+    }
+    addItemToArray(Idnetities, ob) {
+        if (ob.name && !Idnetities.find((item) => item.uuid === ob.id)) {
+            Idnetities.push(this.createIdentity(ob));
         }
-        return bindIdnetities;
+        return Idnetities;
+    }
+    createIdentity(ob) {
+        const endpoint = new Identity();
+        endpoint.id = this.createId();
+        endpoint.uuid = ob.id;
+        endpoint.name = ob.name;
+        endpoint.online = ob.hasApiSession === true ? 'Yes' : 'No';
+        endpoint.type = 'Identity';
+        endpoint.status = ob.sdkInfo !== null ? 'Registered' : 'Not Registered';
+        if (ob.sdkInfo) {
+            endpoint.os = ob.sdkInfo.type ? ob.sdkInfo.type : ob.sdkInfo.appId;
+            endpoint.osVersion = ob.sdkInfo.version;
+        }
+        if (ob.authPolicy && ob.authPolicy.name.includes("BrowZer")) {
+            endpoint.type = 'BrowZer Identity';
+        }
+        endpoint.createdAt = ob.createdAt;
+        endpoint.updatedAt = ob.updatedAt;
+        return endpoint;
     }
     getLinkForResource(ob, resource) {
         return ob['_links'][resource]['href'];
     }
-    //Bind Dial Services
     findServicesHostedOnEndpoint(rawEp, services, servicePolicies, zitiService) {
         const servicesArr = [];
         const childrenNoGroups = [];
@@ -12495,28 +12645,55 @@ class TreeNodeProcessor {
     findRawEndpoint(epName, endpoints) {
         return endpoints.find((ep) => ep.name === epName);
     }
+    serviceConfigAlias(configs) {
+        let intercept = [];
+        _.isArray(configs) && configs.forEach((conf) => {
+            let addresses = '';
+            let ports = '';
+            if (conf.data.addresses) {
+                addresses = conf.data.addresses.toString();
+            }
+            else {
+                addresses = conf.data.address;
+            }
+            if (_.isArray(conf.data.portRanges)) {
+                conf.data.portRanges.forEach((portsJson) => {
+                    for (const key in portsJson) {
+                        ports = ports + key + ':' + portsJson[key] + ' ';
+                    }
+                    ports = ports + ';';
+                });
+            }
+            else {
+                ports = conf.data.port;
+            }
+            intercept.push(addresses);
+            intercept.push(ports);
+        });
+        return intercept;
+    }
     async processServicesForNodeClick(serviceNode, networkGraph, services, uniqId, zitiService) {
         const myPromise = await new Promise(async (resolve, reject) => {
             const wait_promises = [];
             this.uniqId = uniqId;
             const rawServiceObj = services.find((s) => s.name === serviceNode.data.name);
             const attributeswithName = [];
-            attributeswithName.push('@' + rawServiceObj.name);
             rawServiceObj.roleAttributes && rawServiceObj.roleAttributes.find((srattr) => {
                 attributeswithName.push(srattr);
             });
             const serviceAttributes = new Children();
-            serviceAttributes.type = 'ServiceAttributes';
+            serviceAttributes.name = 'Attributes';
+            serviceAttributes.type = 'Attributes';
             serviceAttributes.id = this.createId();
             for (let k = 0; k < attributeswithName.length; k++) {
                 const attrOb = new Attribute();
                 attrOb.id = this.createId();
                 attrOb.name = attributeswithName[k];
-                attrOb.type = 'Service Attribute';
+                attrOb.type = 'Attribute';
                 serviceAttributes.children.push(attrOb);
             } // end inner for loop
             if (serviceAttributes.children.length > 0) {
-                serviceAttributes.name = 'Service Attributes(' + serviceAttributes.children.length + ')';
+                serviceAttributes.name = serviceAttributes.name + '(' + serviceAttributes.children.length + ')';
                 serviceNode.data.children.push(serviceAttributes);
             }
             let service_configs = [];
@@ -12527,48 +12704,118 @@ class TreeNodeProcessor {
                 .get(configs_url, pagingOb, [])
                 .then((configs) => {
                 service_configs = configs && configs.data ? configs.data : [];
+                const childs = new Children();
+                childs.id = this.createId();
+                childs.name = 'Service Configs';
+                childs.type = 'Service Configs';
+                const service_configs_Arr = [];
+                service_configs.forEach((cfg) => {
+                    const obj = new Config();
+                    obj.id = this.createId();
+                    obj.name = cfg.name;
+                    obj.uuid = cfg.uuid;
+                    obj.data = JSON.stringify(cfg.data);
+                    service_configs_Arr.push(obj);
+                });
+                if (service_configs_Arr.length > 0) {
+                    childs.children = service_configs_Arr;
+                    childs.name = childs.name + '(' + childs.children.length + ')';
+                    serviceNode.data.children.push(childs);
+                    serviceNode.data.intercept = this.serviceConfigAlias(service_configs);
+                }
             });
             wait_promises.push(configPromise);
             const service_edge_router_policies_url = this.getLinkForResource(rawServiceObj, 'service-edge-router-policies');
+            let service_routers_urls = [];
+            const ser_promse = await zitiService
+                .get(service_edge_router_policies_url.replace('./', ''), pagingOb, [])
+                .then((result) => {
+                result.data.forEach((serp) => {
+                    service_routers_urls.push(this.getLinkForResource(serp, 'edge-routers'));
+                });
+                ;
+            });
+            wait_promises.push(ser_promse);
+            let serp_page_Promises = [];
+            service_routers_urls.forEach((er_url) => {
+                const promse = zitiService
+                    .get(er_url.replace('./', ''), pagingOb, []);
+                // .then(result => [policy.type, result]);
+                serp_page_Promises.push(promse);
+            });
+            let associatedRouters = [];
+            await Promise.all(serp_page_Promises).then((values) => {
+                values && values.forEach((res) => {
+                    if (res && res.data.length > 0) {
+                        res.data.forEach((er) => {
+                            const erOb = new ERouter();
+                            erOb.id = this.createId();
+                            erOb.name = er.name;
+                            er.type = 'Router';
+                            associatedRouters.push(erOb);
+                        });
+                    }
+                });
+                const tmp = new Children();
+                tmp.name = "Associated Routers(" + associatedRouters.length + ')';
+                tmp.type = "Routers";
+                tmp.children = associatedRouters;
+                tmp.id = this.createId();
+                serviceNode.data.children.push(tmp);
+            });
             const service_policies_url = this.getLinkForResource(rawServiceObj, 'service-policies').replace('./', ''); // dial, Bind info
             let bindPolicies = [];
             let bindIdnetities = [];
+            let dialIdnetities = [];
             const promise2 = await zitiService
                 .get(service_policies_url, pagingOb, [])
                 .then((policies) => {
-                const identityPromises = [];
-                policies.data.forEach(async (policy) => {
-                    if (policy.type === 'Bind') {
-                        const bindIdentitiesUrl = this.getLinkForResource(policy, 'identities');
-                        const promse = await zitiService
-                            .get(bindIdentitiesUrl.replace('./', ''), pagingOb, [])
-                            .then((res) => {
-                            if (res && res.data.length > 0) {
-                                res.data.forEach((rs) => {
-                                    this.addItemToArray(bindIdnetities, rs);
-                                });
+                bindPolicies = policies.data;
+            });
+            const pagePromises = [];
+            bindPolicies.forEach((policy) => {
+                const bindIdentitiesUrl = this.getLinkForResource(policy, 'identities');
+                const promse = zitiService
+                    .get(bindIdentitiesUrl.replace('./', ''), pagingOb, [])
+                    .then(result => [policy.type, result]);
+                pagePromises.push(promse);
+            });
+            await Promise.all(pagePromises).then((values) => {
+                values && values.forEach((res) => {
+                    if (res && res[1].data.length > 0) {
+                        res[1].data.forEach((rs) => {
+                            if (res[0] === 'Bind') {
+                                bindIdnetities = this.addItemToArray(bindIdnetities, rs);
                             }
-                            else {
-                                this.addItemToArray(bindIdnetities, res.data);
+                            else if (res[0] === 'Dial') {
+                                dialIdnetities = this.addItemToArray(dialIdnetities, rs);
                             }
                         });
-                        identityPromises.push(promse);
-                        wait_promises.push(promse);
+                    }
+                    else {
+                        if (res[0] === 'Bind') {
+                            bindIdnetities = this.addItemToArray(bindIdnetities, res[1].data);
+                        }
+                        else if (res[0] === 'Dial') {
+                            dialIdnetities = this.addItemToArray(dialIdnetities, res[1].data);
+                        }
                     }
                 });
-                Promise.all(identityPromises).then(() => {
-                    const tmp = new Children();
-                    tmp.name = "Bind Identities(" + bindIdnetities.length + ')';
-                    tmp.type = "Identities";
-                    tmp.children = bindIdnetities;
-                    tmp.id = this.createId();
-                    serviceNode.data.children.push(tmp);
-                });
-            });
-            wait_promises.push(promise2);
-            Promise.all(wait_promises).then(() => {
+                const tmp = new Children();
+                tmp.name = "Bind Identities(" + bindIdnetities.length + ')';
+                tmp.type = "Identities";
+                tmp.children = bindIdnetities;
+                tmp.id = this.createId();
+                serviceNode.data.children.push(tmp);
+                const tmpDial = new Children();
+                tmpDial.name = "Dial Identities(" + dialIdnetities.length + ')';
+                tmpDial.type = "Identities";
+                tmpDial.children = dialIdnetities;
+                tmpDial.id = this.createId();
+                serviceNode.data.children.push(tmpDial);
                 resolve('this is a promise');
             });
+            Promise.all(wait_promises).then(() => { });
         }); // end of mypromise
         networkGraph = d3.hierarchy(networkGraph.data, function (nd) {
             return nd.children;
@@ -12580,25 +12827,59 @@ class TreeNodeProcessor {
             const wait_promises = [];
             this.uniqId = uniqId;
             const rawSPolicy = servicePolicies.find((s) => s.name === policyNode.data.name);
+            const childs = new Children();
+            childs.name = "Attributes";
+            childs.id = this.createId();
+            rawSPolicy.serviceRoles && rawSPolicy.serviceRoles.forEach((ob) => {
+                const attr = new Attribute();
+                attr.name = ob;
+                attr.id = this.createId();
+                attr.type = "Service Attribute";
+                childs.children.push(attr);
+            });
+            rawSPolicy.identityRoles && rawSPolicy.identityRoles.forEach((ob) => {
+                const attr = new Attribute();
+                attr.name = ob;
+                attr.id = this.createId();
+                attr.type = "Identity Attribute";
+                childs.children.push(attr);
+            });
+            childs.name = childs.name + '(' + childs.children.length + ')';
+            policyNode.data.children.push(childs);
             const pagesize = 500;
-            const services_paging = this.getPagingObject(pagesize);
+            const identities_paging = this.getPagingObject(pagesize);
             const bindIdentitiesUrl = this.getLinkForResource(rawSPolicy, 'identities');
-            const sp_promise = await zitiService.get(bindIdentitiesUrl, services_paging, [])
+            // this.logger.info('bindIdentitiesUrl',bindIdentitiesUrl);
+            const sp_promise = await zitiService.get(bindIdentitiesUrl, identities_paging, [])
                 .then((ids) => {
                 const childs = new Children();
-                childs.name = rawSPolicy.type + 'Identities';
+                childs.name = rawSPolicy.type + '-Identities';
                 childs.id = this.createId();
                 ids.data.forEach((idOb) => {
-                    const ep = new Identity();
-                    ep.id = idOb.id;
-                    ep.name = idOb.name;
-                    ep.type = 'Identity';
-                    childs.children.push(ep);
+                    childs.children.push(this.createIdentity(idOb));
                 });
                 childs.name = childs.name + '(' + childs.children.length + ')';
                 policyNode.data.children.push(childs);
             });
             wait_promises.push(sp_promise);
+            const services_paging = this.getPagingObject(pagesize);
+            const bindServicesUrl = this.getLinkForResource(rawSPolicy, 'services'); // pull services
+            const _promise = await zitiService.get(bindServicesUrl, services_paging, [])
+                .then((result) => {
+                const childs = new Children();
+                childs.name = rawSPolicy.type + '-Services';
+                childs.id = this.createId();
+                result.data.forEach((idOb) => {
+                    const sp = new Service();
+                    sp.id = idOb.id;
+                    sp.name = idOb.name;
+                    sp.type = 'Service';
+                    childs.children.push(sp);
+                });
+                childs.name = childs.name + '(' + childs.children.length + ')';
+                policyNode.data.children.push(childs);
+            });
+            wait_promises.push(_promise);
             Promise.all(wait_promises).then(() => {
                 resolve('resolve.');
             });
@@ -12608,6 +12889,23 @@ class TreeNodeProcessor {
         });
         return [networkGraph, this.uniqId];
     }
+    async getServicesForAServicePolicy(policyObject, zitiService, pagesize = 500) {
+        const childs = [];
+        const services_paging = this.getPagingObject(pagesize);
+        const bindServicesUrl = this.getLinkForResource(policyObject, 'services');
+        const _promise = await zitiService.get(bindServicesUrl, services_paging, [])
+            .then((result) => {
+            result.data.forEach((idOb) => {
+                const sp = new Service();
+                sp.id = this.createId();
+                sp.uuid = idOb.id;
+                sp.name = idOb.name;
+                sp.type = 'Service';
+                childs.push(sp);
+            });
+        });
+        return [policyObject.type, childs];
+    }
     async processEdgeroutersForNodeClick(edgerouterNode, networkGraph, edgerouters, uniqId, zitiService) {
         const mainPromise = await new Promise(async (resolve, reject) => {
             const wait_promises = [];
@@ -12649,6 +12947,9 @@ class TreeNodeProcessor {
                         policy.uuid = pol.id;
                         policy.name = pol.name;
                         policy.type = 'Router Policy';
+                        policy.isSystem = pol.isSystem;
+                        policy.semantic = pol.semantic;
+                        policy.rootNode = 'No';
                         erpolChilds.children.push(policy);
                     });
                     erpolChilds.name = "Edge Router Policies(" + erpolChilds.children.length + ')';
@@ -12815,11 +13116,39 @@ class TreeNodeProcessor {
         return servicesChildren;
     }
     async processEdgeRouterPoliciesForNodeClick(erPolicyNode, networkGraph, edgeRouterPolicies, uniqId, zitiService) {
-        const myPromise = await new Promise((resolve, reject) => {
+        const myPromise = await new Promise(async (resolve, reject) => {
             const wait_promises = [];
             this.uniqId = uniqId;
             const rawERPolicy = edgeRouterPolicies.find((s) => s.name === erPolicyNode.data.name);
             const pagesize = 500;
+            const er_url = this.getLinkForResource(rawERPolicy, 'edge-routers').replace('./', '');
+            let associatedRouters = [];
+            const paging = this.getPagingObject(pagesize);
+            const erChailds = new Children();
+            erChailds.name = 'Associated Routers';
+            erChailds.type = 'Associated Routers';
+            erChailds.id = this.createId();
+            const associatedRoutersPromise = await zitiService.get(er_url, paging, [])
+                .then((result) => {
+                result.data.forEach((er) => {
+                    const tmp = new ERouter();
+                    tmp.id = this.createId();
+                    tmp.name = er.name;
+                    tmp.type = 'Router';
+                    tmp.verified = er.isVerified ? 'Yes' : 'No';
+                    tmp.online = er.isOnline ? 'Yes' : 'No';
+                    tmp.disabled = er.disabled ? 'Yes' : 'No';
+                    tmp.rootNode = 'Yes';
+                    tmp.tunnelerEnabled = er.tunnelerEnabled ? er.tunnelerEnabled : 'No';
+                    tmp.syncStatus = er.syncStatus ? er.syncStatus : 'No';
+                    tmp.createdAt = er.createdAt;
+                    tmp.updatedAt = er.updatedAt;
+                    erChailds.children.push(tmp);
+                });
+                erChailds.name = erChailds.name + '(' + erChailds.children.length + ')';
+                erPolicyNode.data.children.push(erChailds);
+            });
+            wait_promises.push(associatedRoutersPromise);
             const services_paging = this.getPagingObject(pagesize);
             const url = this.getLinkForResource(rawERPolicy, 'identities');
             let ids = [];
@@ -12841,13 +13170,8 @@ class TreeNodeProcessor {
                 Promise.all(promises).then(() => {
                     const idChilds = new Children();
                     idChilds.id = this.createId();
-                    ids.forEach((er) => {
-                        const idOb = new Identity();
-                        idOb.id = this.createId();
-                        idOb.uuid = er.id;
-                        idOb.name = er.name;
-                        idOb.type = 'Identity';
-                        idChilds.children.push(idOb);
+                    ids.forEach((idOb) => {
+                        idChilds.children.push(this.createIdentity(idOb));
                     });
                     idChilds.name = "Accessible Identities(" + idChilds.children.length + ')';
                     erPolicyNode.data.children.push(idChilds);
@@ -12938,7 +13262,7 @@ class TreeNodeProcessor {
             });
             wait_promises.push(serpromise);
             Promise.all(wait_promises).then(() => {
-                resolve('this is a promise');
+                resolve('Done');
             });
         });
         networkGraph = d3.hierarchy(networkGraph.data, function (nd) {
@@ -12969,9 +13293,30 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         // export class NetworkVisualizerComponent  implements OnInit {
         this.title = 'Network Visualizer';
         this.uniqId = 0;
+        this.maxObjectsPerNode = 1001;
         this.fullScreen = false;
         this.isLoading = true;
-        this.noSearchResults = false;
+        this.noSearchResults = true;
+        this.services = [];
+        this.services_totalCount = 0;
+        this.all_services_fetched = false;
+        this.identities = [];
+        this.identities_totalCount = 0;
+        this.all_identities_fetched = false;
+        this.edgerouters = [];
+        this.edgerouters_totalCount = 0;
+        this.all_edgerouters_fetched = false;
+        this.service_policies = [];
+        this.service_policies_totalCount = 0;
+        this.all_service_policies_fetched = false;
+        this.edge_router_policies = [];
+        this.edge_router_policies_totalCount = 0;
+        this.all_edge_router_policies_fetched = false;
+        this.service_router_policies = [];
+        this.service_router_policies_totalCount = 0;
+        this.all_service_router_policies_fetched = false;
+        this.configs = [];
+        this.filerResponseMessage = 'search filter..';
         this.servicePoliciesTreeNodes = [];
         this.servicesTreeNodes = [];
         this.identitiesTreeNodes = [];
@@ -12980,6 +13325,7 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         this.serviceEdgeRouterPolicyTreeNodes = [];
         this.resourceTypeError = false;
         this.filterText = '';
+        this.searchWord = '';
         this.resourceType = '';
         this.openNodes = [];
         this.contextmenuNodeType = [];
@@ -12989,16 +13335,15 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         this.getNetworkObjects();
     }
     getPagingObject(pagesize) {
-        const paging = {
-            searchOn: 'name',
-            noSearch: false,
-            filter: '',
-            total: pagesize,
+        return cloneDeep({
+            filter: "",
+            noSearch: true,
+            order: "asc",
             page: 1,
-            sort: 'name',
-            order: 'asc',
-        };
-        return paging;
+            searchOn: "name",
+            sort: "name",
+            total: pagesize
+        });
     }
     async getNetworkObjects() {
         this.isLoading = true;
@@ -13010,12 +13355,14 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         return await this.zitiService
             .get(`identities`, identities_paging, [])
             .then(async (result) => {
-            this.identities = result.data;
+            this.identities = result.data ? result.data : [];
+            this.identities_totalCount = result.meta && result.meta.pagination ? result.meta.pagination.totalCount : 0;
             if (!this.identities || this.identities.length === 0) {
                 this.identities = [];
                 this.isLoading = false;
             }
-            else {
+            else if (this.identities_totalCount < this.maxObjectsPerNode) {
+                this.all_identities_fetched = true;
                 const pages = Math.ceil(result.meta.pagination.totalCount / pagesize);
                 const promises = [];
                 for (let page = 2; page <= pages; page++) {
@@ -13028,7 +13375,9 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                     });
                     promises.push(tmp_promise);
                 }
-                Promise.all(promises).then(() => { });
+                Promise.all(promises).then(() => {
+                    // this.identities_totalCount = this.identities.length;
+                });
             }
         }).catch(error => {
             this.logger.error('Error in fetching Identities', error.message);
@@ -13039,12 +13388,14 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         return await this.zitiService
             .get(`services`, services_paging, [])
             .then(async (result) => {
-            this.services = result.data;
+            this.services = result.data ? result.data : [];
+            this.services_totalCount = result.meta && result.meta.pagination ? result.meta.pagination.totalCount : 0;
             if (!this.services || this.services.length === 0) {
                 this.services = [];
                 this.isLoading = false;
             }
-            else {
+            else if (this.services_totalCount < this.maxObjectsPerNode) {
+                this.all_services_fetched = true;
                 const pages = Math.ceil(result.meta.pagination.totalCount / pagesize);
                 const s_promises = [];
                 for (let page = 2; page <= pages; page++) {
@@ -13058,7 +13409,9 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                     });
                     s_promises.push(tmp_promise);
                 }
-                Promise.all(s_promises).then(() => { });
+                Promise.all(s_promises).then(() => {
+                    // this.services_totalCount = this.services.length;
+                });
             }
         }).catch(error => {
             this.logger.error('Error in fetching services', error.message);
@@ -13069,12 +13422,14 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         return await this.zitiService
             .get(`service-policies`, servicesPolicies_paging, [])
             .then(async (result) => {
-            this.service_policies = result.data;
+            this.service_policies = result.data ? result.data : [];
+            this.service_policies_totalCount = result.meta && result.meta.pagination ? result.meta.pagination.totalCount : 0;
             if (!this.service_policies || this.service_policies.length === 0) {
                 this.service_policies = [];
                 this.isLoading = false;
             }
-            else {
+            else if (this.service_policies_totalCount < this.maxObjectsPerNode) {
+                this.all_service_policies_fetched = true;
                 const pages = Math.ceil(result.meta.pagination.totalCount / pagesize);
                 const sp_promises = [];
                 for (let page = 2; page <= pages; page++) {
@@ -13082,13 +13437,15 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                     const tmp_promise = await this.zitiService
                         .get(`service-policies`, servicesPolicies_paging, [])
                         .then((pageResult) => {
-                        pageResult.data.forEach((serv) => {
+                        pageResult.data && pageResult.data.forEach((serv) => {
                             this.service_policies.push(serv);
                         });
                     });
                     sp_promises.push(tmp_promise);
                 }
-                Promise.all(sp_promises).then(() => { });
+                Promise.all(sp_promises).then(() => {
+                    // this.service_policies_totalCount = this.service_policies.length;
+                });
             }
         }).catch(error => {
             this.logger.error('Error in fetching service-policies', error.message);
@@ -13099,12 +13456,14 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         return await this.zitiService
             .get(`edge-routers`, routers_paging, [])
             .then(async (result) => {
-            this.edgerouters = result.data;
+            this.edgerouters = result.data ? result.data : [];
+            this.edgerouters_totalCount = result.meta && result.meta.pagination ? result.meta.pagination.totalCount : 0;
             if (!this.edgerouters || this.edgerouters.length === 0) {
                 this.edgerouters = [];
                 this.isLoading = false;
             }
-            else {
+            else if (this.edgerouters_totalCount < this.maxObjectsPerNode) {
+                this.all_edgerouters_fetched = true;
                 const pages = Math.ceil(result.meta.pagination.totalCount / pagesize);
                 const r_promises = [];
                 for (let page = 2; page <= pages; page++) {
@@ -13118,23 +13477,27 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                     });
                     r_promises.push(tmp_promise);
                 }
-                Promise.all(r_promises).then(() => { });
+                Promise.all(r_promises).then(() => {
+                    // this.edgerouters_totalCount = this.edgerouters.length;
+                });
             }
         }).catch(error => {
             this.logger.error('Error in fetching edge-routers', error.message);
         });
     }
     async findEdgeRouterPolicies(pagesize) {
-        this.router_policies = [];
+        this.edge_router_policies = [];
         const erpolicies_paging = this.getPagingObject(pagesize);
         return await this.zitiService
             .get(`edge-router-policies`, erpolicies_paging, [])
             .then(async (result) => {
-            this.router_policies = result.data;
-            if (!this.router_policies || this.router_policies.length === 0) {
+            this.edge_router_policies = result.data ? result.data : [];
+            this.edge_router_policies_totalCount = result.meta && result.meta.pagination ? result.meta.pagination.totalCount : 0;
+            if (!this.edge_router_policies || this.edge_router_policies.length === 0) {
                 this.isLoading = false;
             }
-            else {
+            else if (this.edge_router_policies_totalCount < this.maxObjectsPerNode) {
+                this.all_edge_router_policies_fetched = true;
                 const pages = Math.ceil(result.meta.pagination.totalCount / pagesize);
                 const r_promises = [];
                 for (let page = 2; page <= pages; page++) {
@@ -13143,12 +13506,14 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                         .get(`edge-router-policies`, erpolicies_paging, [])
                         .then((pageResult) => {
                         pageResult.data.forEach((serv) => {
-                            this.router_policies.push(serv);
+                            this.edge_router_policies.push(serv);
                         });
                     });
                     r_promises.push(tmp_promise);
                 }
-                Promise.all(r_promises).then(() => { });
+                Promise.all(r_promises).then(() => {
+                    // this.edge_router_policies_totalCount = this.edge_router_policies.length;
+                });
             }
         }).catch(error => {
             this.logger.error('Error in fetching edge-router-policies', error);
@@ -13160,11 +13525,13 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         return await this.zitiService
             .get(`service-edge-router-policies`, serp_paging, [])
             .then(async (result) => {
-            this.service_router_policies = result.data;
+            this.service_router_policies = result.data ? result.data : [];
+            this.service_router_policies_totalCount = result.meta && result.meta.pagination ? result.meta.pagination.totalCount : 0;
             if (!this.service_router_policies || this.service_router_policies.length === 0) {
                 this.isLoading = false;
             }
-            else {
+            else if (this.service_router_policies_totalCount < this.maxObjectsPerNode) {
+                this.all_service_router_policies_fetched = false;
                 const pages = Math.ceil(result.meta.pagination.totalCount / pagesize);
                 const r_promises = [];
                 for (let page = 2; page <= pages; page++) {
@@ -13178,7 +13545,9 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                     });
                     r_promises.push(tmp_promise);
                 }
-                Promise.all(r_promises).then(() => { });
+                Promise.all(r_promises).then(() => {
+                    // this.service_router_policies_totalCount = this.service_router_policies.length;
+                });
             }
         }).catch(error => {
             this.logger.error('Error in fetching service-edge-router-policies', error);
@@ -13190,11 +13559,12 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         return await this.zitiService
             .get(`configs`, configs_paging, [])
             .then(async (result) => {
-            this.configs = result.data;
+            this.configs = result.data ? result.data : [];
+            const configs_totalCount = result.meta && result.meta.pagination ? result.meta.pagination.totalCount : 0;
             if (!this.configs || this.configs.length === 0) {
                 this.configs = [];
             }
-            else {
+            else if (configs_totalCount < this.maxObjectsPerNode) {
                 const pages = Math.ceil(result.meta.pagination.totalCount / pagesize);
                 const r_promises = [];
                 for (let page = 2; page <= pages; page++) {
@@ -13208,7 +13578,9 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                     });
                     r_promises.push(tmp_promise);
                 }
-                Promise.all(r_promises).then(() => { });
+                Promise.all(r_promises).then(() => {
+                    const configs_totalCount = this.configs.length;
+                });
             }
         }).catch(error => {
             this.logger.error('Error in fetching configs', error);
@@ -13232,56 +13604,59 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
     }
     processFirstNetworkGraph() {
         try {
-            const treeObj = this.topologyHelper.getResourceTreeObj('this.currentNetwork.name', 'this.currentNetwork.status', this.services, this.identities, this.service_policies, this.edgerouters, this.router_policies, this.service_router_policies, this.uniqId, this.logger);
+            const treeObj = this.topologyHelper.getResourceTreeObj('this.currentNetwork.name', 'this.currentNetwork.status', this.services, this.identities, this.service_policies, this.edgerouters, this.edge_router_policies, this.service_router_policies, this.services_totalCount, this.identities_totalCount, this.edgerouters_totalCount, this.service_policies_totalCount, this.edge_router_policies_totalCount, this.service_router_policies_totalCount, this.uniqId, this.logger, this.all_service_policies_fetched, this.all_services_fetched, this.all_identities_fetched, this.all_edgerouters_fetched, this.all_edge_router_policies_fetched, this.all_service_router_policies_fetched);
             this.uniqId = treeObj.lastId;
             this.networkGraph = d3.hierarchy(treeObj, function (d) {
                 return d.children;
             });
-            this.baseNetworkGraph = this.networkGraph;
+            // this.baseNetworkGraph = _.cloneDeep(this.networkGraph);
             this.servicePoliciesTreeNodes = [];
             this.servicesTreeNodes = [];
             this.identitiesTreeNodes = [];
             this.edgeroutersTreeNodes = [];
             this.erPoliciesTreeNodes = [];
             this.serviceEdgeRouterPolicyTreeNodes = [];
-            this.servicePoliciesTreeNodes = this.fillAutoCompleteTreeNodes(this.networkGraph.children[0], this.servicePoliciesTreeNodes, 'ServicePolicy');
-            this.servicesTreeNodes = this.fillAutoCompleteTreeNodes(this.networkGraph.children[1], this.servicesTreeNodes, 'Service');
-            this.identitiesTreeNodes = this.fillAutoCompleteTreeNodes(this.networkGraph.children[2], this.identitiesTreeNodes, 'Identity');
-            this.edgeroutersTreeNodes = this.fillAutoCompleteTreeNodes(this.networkGraph.children[3], this.edgeroutersTreeNodes, 'Edge Router');
-            this.erPoliciesTreeNodes = this.fillAutoCompleteTreeNodes(this.networkGraph.children[4], this.erPoliciesTreeNodes, 'Router Policy');
-            this.serviceEdgeRouterPolicyTreeNodes = this.fillAutoCompleteTreeNodes(this.networkGraph.children[5], this.serviceEdgeRouterPolicyTreeNodes, 'Service Router Policy');
+            this.servicePoliciesTreeNodes = this.fillAutoCompleteTreeNodes(this.service_policies, this.servicePoliciesTreeNodes, 'ServicePolicy');
+            this.servicesTreeNodes = this.fillAutoCompleteTreeNodes(this.services, this.servicesTreeNodes, 'Service');
+            this.identitiesTreeNodes = this.fillAutoCompleteTreeNodes(this.identities, this.identitiesTreeNodes, 'Identity');
+            this.edgeroutersTreeNodes = this.fillAutoCompleteTreeNodes(this.edgerouters, this.edgeroutersTreeNodes, 'Router');
+            this.erPoliciesTreeNodes = this.fillAutoCompleteTreeNodes(this.edge_router_policies, this.erPoliciesTreeNodes, 'Router Policy');
+            this.serviceEdgeRouterPolicyTreeNodes = this.fillAutoCompleteTreeNodes(this.service_router_policies, this.serviceEdgeRouterPolicyTreeNodes, 'Service Router Policy');
             this.initTopoView();
+            this.baseNetworkGraph = _.cloneDeep(this.networkGraph);
         }
         catch (err) {
             this.logger.error(err.message);
         }
         this.isLoading = false;
     }
-    fillAutoCompleteTreeNodes(nodeObj, arr, typeName) {
-        const name = nodeObj.data.name;
-        // const id = nodeObj.data.id;
-        if (!name) {
-            return;
-        }
-        if (typeof nodeObj.data.type === 'undefined') {
-            //      //
-        }
-        else {
-            if (arr.indexOf(name) < 0 && nodeObj.data.type === typeName) {
-                arr.push(name);
-            }
-        }
-        const childNodes = nodeObj.children ? nodeObj.children : nodeObj._children;
-        for (let i = 0; childNodes && i < childNodes.length; i++) {
-            this.fillAutoCompleteTreeNodes(childNodes[i], arr, typeName);
-        }
+    fillAutoCompleteTreeNodes(resourcesArray, arr, typeName) {
+        resourcesArray && resourcesArray.forEach((ob) => {
+            arr.push(ob.name);
+        });
         return arr;
     }
+    debounce(func, timeout = 150) {
+        let timer;
+        return (...args) => {
+            this.autocompleteOptions = [];
+            clearTimeout(timer);
+            timer = setTimeout(() => { func.apply(this, args); }, timeout);
+        };
+    }
+    nwSearchChange(event) {
+        if (this.filterText.length > 1 && event.key !== 'Escape' && event.key !== 'ArrowRight' && event.key !== 'ArrowLeft' && event.key !== 'Enter') {
+            this.filerResponseMessage = 'search filter..';
+            this.debounce(this.filterSearchArray());
+        }
+    }
     autocompleteSearch(event) {
         const str = event ? event.option.value : '';
         this.searchResourceConditionCheck(str);
     }
     resourceTypeChanged() {
+        this.filerResponseMessage = 'search filter..';
+        this.searchCache = [];
         this.resetSearchNode();
         this.clearSearchLinkColors();
         if (_.isEmpty(this.resourceType)) {
@@ -13292,22 +13667,23 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         }
         this.filterText = '';
         this.resourceTypeError = false;
-        if (this.resourceType === 'service-policies') {
+        this.autocompleteOptions = [];
+        if (this.resourceType === 'service-policies' && this.all_service_policies_fetched) {
             this.autocompleteOptions = this.servicePoliciesTreeNodes;
         }
-        else if (this.resourceType === 'services') {
+        else if (this.resourceType === 'services' && this.all_services_fetched) {
             this.autocompleteOptions = this.servicesTreeNodes;
         }
-        else if (this.resourceType === 'identities') {
+        else if (this.resourceType === 'identities' && this.all_identities_fetched) {
             this.autocompleteOptions = this.identitiesTreeNodes;
         }
-        else if (this.resourceType === 'edge-routers') {
+        else if (this.resourceType === 'edge-routers' && this.all_edgerouters_fetched) {
             this.autocompleteOptions = this.edgeroutersTreeNodes;
         }
-        else if (this.resourceType === 'edge-router-policies') {
+        else if (this.resourceType === 'edge-router-policies' && this.all_edge_router_policies_fetched) {
             this.autocompleteOptions = this.erPoliciesTreeNodes;
         }
-        else if (this.resourceType === 'service-edge-router-policies') {
+        else if (this.resourceType === 'service-edge-router-policies' && this.all_service_router_policies_fetched) {
             this.autocompleteOptions = this.serviceEdgeRouterPolicyTreeNodes;
         }
         if (!_.isEmpty(this.filterText)) {
@@ -13316,7 +13692,6 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
     }
     searchResourceConditionCheck(searchTxt) {
         if (this.resourceType === '' && searchTxt !== '') {
-            // if (searchTxt !== '') {
             this.resourceTypeError = true;
             return;
         }
@@ -13325,7 +13700,6 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         }
     }
     searchResourceInTree(searchTxt) {
-        //  this.closeTable();
         this.noSearchResults = false;
         this.resourceTypeError = false;
         this.resetTree(null);
@@ -13338,32 +13712,152 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
             let paths = [];
             let targetNodes = [];
             const nodeIds = [];
-            if (this.resourceType === 'service-policies') {
-                targetNodes = this.processSearchInPreorder(this.nodes[1], searchTxt, paths, targetNodes);
+            if (this.resourceType === 'service-policies' && !this.all_service_policies_fetched) {
+                const rawOb = this.searchCache.find((item) => item.name === searchTxt);
+                const id = this.topologyHelper.createServicePolicyNode(rawOb);
+                // id.clickProcess = "Not Yet";
+                if (!this.isNodeExists(this.nodes[1], id)) {
+                    this.nodes[1].data.children.push(id);
+                }
+                this.networkGraph = d3.hierarchy(this.networkGraph.data, function (nd) {
+                    return nd.children;
+                });
+                this.networkGraph.children.forEach((nd, i) => {
+                    if (i !== 0) {
+                        this.graphCollapse(nd);
+                    }
+                });
+                this.service_policies = [];
+                this.service_policies[0] = rawOb;
+                this.updateTree(this.nodes[1]);
+                targetNodes = this.processSearchInPreorder(this.nodes[1], searchTxt, targetNodes);
+            }
+            else if (this.resourceType === 'service-policies' && this.all_service_policies_fetched) {
+                targetNodes = this.processSearchInPreorder(this.nodes[1], searchTxt, targetNodes);
+            }
+            else if (this.resourceType === 'edge-routers' && !this.all_edgerouters_fetched) {
+                const rawOb = this.searchCache.find((item) => item.name === searchTxt);
+                const id = this.topologyHelper.createEdgeRouterNode(rawOb);
+                // id.clickProcess = "Not Yet";
+                if (!this.isNodeExists(this.nodes[4], id)) {
+                    this.nodes[4].data.children.push(id);
+                }
+                this.networkGraph = d3.hierarchy(this.networkGraph.data, function (nd) {
+                    return nd.children;
+                });
+                this.networkGraph.children.forEach((nd, i) => {
+                    if (i !== 3) {
+                        this.graphCollapse(nd);
+                    }
+                });
+                this.edgerouters = [];
+                this.edgerouters[0] = rawOb;
+                this.updateTree(this.nodes[4]);
+                targetNodes = this.processSearchInPreorder(this.nodes[4], searchTxt, targetNodes);
+            }
+            else if (this.resourceType === 'edge-routers' && this.all_edgerouters_fetched) {
+                targetNodes = this.processSearchInPreorder(this.nodes[4], searchTxt, targetNodes);
+            }
+            else if (this.resourceType === 'services' && !this.all_services_fetched) {
+                const rawOb = this.searchCache.find((item) => item.name === searchTxt);
+                const id = this.topologyHelper.createServiceNode(rawOb);
+                id.clickProcess = "Not Yet";
+                if (!this.isNodeExists(this.nodes[2], id)) {
+                    this.nodes[2].data.children.push(id);
+                }
+                this.networkGraph = d3.hierarchy(this.networkGraph.data, function (nd) {
+                    return nd.children;
+                });
+                this.services = [];
+                this.services[0] = rawOb;
+                this.updateTree(this.nodes[2]);
+                targetNodes = this.processSearchInPreorder(this.nodes[2], searchTxt, targetNodes);
+                this.networkGraph.children.forEach((nd, i) => {
+                    if (i !== 1) {
+                        this.graphCollapse(nd);
+                    }
+                });
             }
-            else if (this.resourceType === 'edge-routers') {
-                targetNodes = this.processSearchInPreorder(this.nodes[4], searchTxt, paths, targetNodes);
+            else if (this.resourceType === 'services' && this.all_services_fetched) {
+                targetNodes = this.processSearchInPreorder(this.nodes[2], searchTxt, targetNodes);
             }
-            else if (this.resourceType === 'services') {
-                targetNodes = this.processSearchInPreorder(this.nodes[2], searchTxt, paths, targetNodes);
+            else if (this.resourceType === 'identities' && !this.all_identities_fetched) {
+                const rawOb = this.searchCache.find((item) => item.name === searchTxt);
+                const id = this.topologyHelper.createIdentityNode(rawOb);
+                id.clickProcess = "Not Yet";
+                if (!this.isNodeExists(this.nodes[3], id)) {
+                    this.nodes[3].data.children.push(id);
+                }
+                this.networkGraph = d3.hierarchy(this.networkGraph.data, function (nd) {
+                    return nd.children;
+                });
+                this.identities[0] = [];
+                this.identities[0] = rawOb;
+                this.updateTree(this.nodes[3]);
+                targetNodes = this.processSearchInPreorder(this.nodes[3], searchTxt, targetNodes);
+                this.networkGraph.children.forEach((nd, i) => {
+                    if (i !== 2) {
+                        this.graphCollapse(nd);
+                    }
+                });
             }
-            else if (this.resourceType === 'identities') {
-                targetNodes = this.processSearchInPreorder(this.nodes[3], searchTxt, paths, targetNodes);
+            else if (this.resourceType === 'identities' && this.all_identities_fetched) {
+                targetNodes = this.processSearchInPreorder(this.nodes[3], searchTxt, targetNodes);
             }
-            else if (this.resourceType === 'edge-router-policies') {
-                targetNodes = this.processSearchInPreorder(this.nodes[5], searchTxt, paths, targetNodes);
+            else if (this.resourceType === 'edge-router-policies' && !this.all_edge_router_policies_fetched) {
+                const rawOb = this.searchCache.find((item) => item.name === searchTxt);
+                const id = this.topologyHelper.createEdgeRouterPolicyNode(rawOb);
+                id.clickProcess = "Not Yet";
+                if (!this.isNodeExists(this.nodes[5], id)) {
+                    this.nodes[5].data.children.push(id);
+                }
+                this.networkGraph = d3.hierarchy(this.networkGraph.data, function (nd) {
+                    return nd.children;
+                });
+                this.networkGraph.children.forEach((nd, i) => {
+                    if (i !== 4) {
+                        this.graphCollapse(nd);
+                    }
+                });
+                this.networkGraph.children.forEach(nd => this.graphCollapse(nd));
+                this.edge_router_policies = [];
+                this.edge_router_policies[0] = rawOb;
+                this.updateTree(this.nodes[5]);
+                targetNodes = this.processSearchInPreorder(this.nodes[5], searchTxt, targetNodes);
+            }
+            else if (this.resourceType === 'edge-router-policies' && this.all_edge_router_policies_fetched) {
+                targetNodes = this.processSearchInPreorder(this.nodes[5], searchTxt, targetNodes);
+            }
+            else if (this.resourceType === 'service-edge-router-policies' && !this.all_service_router_policies_fetched) {
+                const rawOb = this.searchCache.find((item) => item.name === searchTxt);
+                const id = this.topologyHelper.createServiceEdgeRouterPolicyNode(rawOb);
+                id.clickProcess = "Not Yet";
+                if (!this.isNodeExists(this.nodes[6], id)) {
+                    this.nodes[6].data.children.push(id);
+                }
+                this.networkGraph = d3.hierarchy(this.networkGraph.data, function (nd) {
+                    return nd.children;
+                });
+                this.networkGraph.children.forEach((nd, i) => {
+                    if (i !== 5) {
+                        this.graphCollapse(nd);
+                    }
+                });
+                this.service_router_policies = [];
+                this.service_router_policies[0] = rawOb;
+                this.updateTree(this.nodes[6]);
+                targetNodes = this.processSearchInPreorder(this.nodes[6], searchTxt, targetNodes);
             }
-            else if (this.resourceType === 'service-edge-router-policies') {
-                targetNodes = this.processSearchInPreorder(this.nodes[6], searchTxt, paths, targetNodes);
+            else if (this.resourceType === 'service-edge-router-policies' && this.all_service_router_policies_fetched) {
+                targetNodes = this.processSearchInPreorder(this.nodes[6], searchTxt, targetNodes);
             }
+            // this.networkGraph.children.forEach(nd => this.graphCollapse(nd));
             paths = this.explorePathsForSearchedNodes(targetNodes, paths, nodeIds);
             if (targetNodes && targetNodes.length <= 0) {
                 this.noSearchResults = true;
                 this.clearSearchLinkColors();
-                // return false;
             }
             else {
-                //if (targetNodes) {
                 this.openPaths(paths, true);
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
@@ -13372,16 +13866,15 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                     // const dataId = _.get(d, 'data.id', '');
                     const nodeName = _.get(targetNodes[0], 'data.name', '');
                     if (dataName.toLowerCase() === searchTxt.toLowerCase() && nodeName === dataName) {
-                        d3.select(this).style('fill', 'red');
+                        d3.select(this).style('fill', '#a60303'); //#004447, 470000
                     }
                 });
             }
-            // else {
-            //   this.noSearchResults = true;
-            //  this.clearSearchLinkColors();
-            // }
         }
     }
+    isNodeExists(rootNode, id) {
+        return rootNode.data.children.find((nd) => nd.uuid === id.uuid);
+    }
     explorePathsForSearchedNodes(targetNodes, paths, nodeIds) {
         for (let i = 0; targetNodes && i < targetNodes.length; i++) {
             let nd = targetNodes[i];
@@ -13397,7 +13890,7 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         }
         return paths;
     }
-    processSearchInPreorder(nodeObj, searchTxt, paths, targetNodes) {
+    processSearchInPreorder(nodeObj, searchTxt, targetNodes) {
         const name = _.get(nodeObj, 'data.name');
         // const nodeId = _.get(nodeObj, 'data.id');
         const isRootNode = _.get(nodeObj, 'data.rootNode');
@@ -13409,7 +13902,7 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         }
         const childNodes = nodeObj.children ? nodeObj.children : nodeObj._children;
         for (let i = 0; childNodes && i < childNodes.length; i++) {
-            this.processSearchInPreorder(childNodes[i], searchTxt, paths, targetNodes);
+            this.processSearchInPreorder(childNodes[i], searchTxt, targetNodes);
         }
         return targetNodes;
     }
@@ -13547,7 +14040,7 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
     resetSearchNode() {
         if (this.searchRootNode) {
             this.networkGraph = _.cloneDeep(this.baseNetworkGraph);
-            this.updateTree(this.networkGraph);
+            this.updateTree(this.networkGraph, true);
         }
     }
     resetTree(clearSearch) {
@@ -13593,6 +14086,35 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
             }
         }
     }
+    findModelName() {
+        return this.resourceType;
+    }
+    async searchObjectsUsingApi() {
+        this.isLoading = true;
+        const model_name = this.findModelName();
+        this.searchWord = _.clone(this.filterText);
+        const str = `${this.resourceType}?filter=%20name%20contains%20%22${this.searchWord}%22&limit=5&offset=0&sort=name%20%20asc`;
+        return await this.zitiService
+            .call(str)
+            .then((result) => {
+            this.isLoading = false;
+            this.autocompleteOptions = [];
+            this.searchCache = result.data;
+            result.data.forEach((res) => {
+                /* const obj: { [key: string]: string } = {
+                   id: res.id,
+                   name: res.name,
+                 }; */
+                this.autocompleteOptions.push(res.name);
+            });
+            this.noSearchResults = true;
+            const countA = result.data?.length > 0 ? result.data.length : 0;
+            this.filerResponseMessage = "search word:'" + this.searchWord + "',  result: top " + countA + " of  " + result.meta.pagination.totalCount + " records";
+        }).catch((error) => {
+            this.isLoading = false;
+            this.logger.error(error.message);
+        });
+    }
     filterSearchArray() {
         if (_.isEmpty(this.resourceType)) {
             this.autocompleteOptions = [];
@@ -13600,37 +14122,96 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
             return;
         }
         this.autocompleteOptions = [];
-        if (this.resourceType === 'service-policies') {
+        if (this.resourceType === 'service-policies' && this.all_service_policies_fetched) {
             this.autocompleteOptions = this.servicePoliciesTreeNodes.filter((option) => option.toLowerCase().includes(this.filterText.toLowerCase()));
         }
-        else if (this.resourceType === 'services') {
+        else if (this.resourceType === 'service-policies' && !this.all_service_policies_fetched) {
+            this.searchObjectsUsingApi();
+        }
+        else if (this.resourceType === 'services' && this.all_services_fetched) {
             this.autocompleteOptions = this.servicesTreeNodes.filter((option) => option.toLowerCase().includes(this.filterText.toLowerCase()));
         }
-        else if (this.resourceType === 'identities') {
+        else if (this.resourceType === 'services' && !this.all_services_fetched) {
+            this.searchObjectsUsingApi();
+        }
+        else if (this.resourceType === 'identities' && this.all_identities_fetched) {
             this.autocompleteOptions = this.identitiesTreeNodes.filter((option) => option.toLowerCase().includes(this.filterText.toLowerCase()));
         }
-        else if (this.resourceType === 'edge-routers') {
+        else if (this.resourceType === 'identities' && !this.all_identities_fetched) {
+            this.searchObjectsUsingApi();
+        }
+        else if (this.resourceType === 'edge-routers' && this.all_edgerouters_fetched) {
             this.autocompleteOptions = this.edgeroutersTreeNodes.filter((option) => option.toLowerCase().includes(this.filterText.toLowerCase()));
         }
-        else if (this.resourceType === 'edge-router-policies') {
+        else if (this.resourceType === 'edge-routers' && !this.all_edgerouters_fetched) {
+            this.searchObjectsUsingApi();
+        }
+        else if (this.resourceType === 'edge-router-policies' && this.all_edge_router_policies_fetched) {
             this.autocompleteOptions = this.erPoliciesTreeNodes.filter((option) => option.toLowerCase().includes(this.filterText.toLowerCase()));
         }
-        else if (this.resourceType === 'service-edge-router-policies') {
+        else if (this.resourceType === 'edge-router-policies' && !this.all_edge_router_policies_fetched) {
+            this.searchObjectsUsingApi();
+        }
+        else if (this.resourceType === 'service-edge-router-policies' && this.all_service_router_policies_fetched) {
             this.autocompleteOptions = this.serviceEdgeRouterPolicyTreeNodes.filter((option) => option.toLowerCase().includes(this.filterText.toLowerCase()));
         }
+        else if (this.resourceType === 'service-edge-router-policies' && !this.all_service_router_policies_fetched) {
+            this.searchObjectsUsingApi();
+        }
     }
     zoomIn() {
     }
     zoomOut() {
     }
     clearSearchFilter() {
-        this.resourceTypeError = false;
         this.filterText = '';
-        this.filterSearchArray();
+        this.resetAutoCompleteOptions();
+        this.resourceTypeError = false;
+        // this.filterSearchArray();
         this.resetSearchNode();
         this.collapse();
         this.clearSearchLinkColors();
     }
+    resetAutoCompleteOptions() {
+        this.searchCache = [];
+        this.filerResponseMessage = 'search filter..';
+        if (this.resourceType === 'service-policies' && this.all_service_policies_fetched) {
+            this.autocompleteOptions = this.servicePoliciesTreeNodes.filter((option) => this.filterText === '' || option.toLowerCase().includes(this.filterText.toLowerCase()));
+        }
+        else if (this.resourceType === 'service-policies' && !this.all_service_policies_fetched) {
+            this.autocompleteOptions = [];
+        }
+        else if (this.resourceType === 'services' && this.all_services_fetched) {
+            this.autocompleteOptions = this.servicesTreeNodes.filter((option) => this.filterText === '' || option.toLowerCase().includes(this.filterText.toLowerCase()));
+        }
+        else if (this.resourceType === 'services' && !this.all_services_fetched) {
+            this.autocompleteOptions = [];
+        }
+        else if (this.resourceType === 'identities' && this.all_identities_fetched) {
+            this.autocompleteOptions = this.identitiesTreeNodes.filter((option) => this.filterText === '' || option.toLowerCase().includes(this.filterText.toLowerCase()));
+        }
+        else if (this.resourceType === 'identities' && !this.all_identities_fetched) {
+            this.autocompleteOptions = [];
+        }
+        else if (this.resourceType === 'edge-routers' && this.all_edgerouters_fetched) {
+            this.autocompleteOptions = this.edgeroutersTreeNodes.filter((option) => this.filterText === '' || option.toLowerCase().includes(this.filterText.toLowerCase()));
+        }
+        else if (this.resourceType === 'edge-routers' && !this.all_edgerouters_fetched) {
+            this.autocompleteOptions = [];
+        }
+        else if (this.resourceType === 'edge-router-policies' && this.all_edge_router_policies_fetched) {
+            this.autocompleteOptions = this.erPoliciesTreeNodes.filter((option) => this.filterText === '' || option.toLowerCase().includes(this.filterText.toLowerCase()));
+        }
+        else if (this.resourceType === 'edge-router-policies' && !this.all_edge_router_policies_fetched) {
+            this.autocompleteOptions = [];
+        }
+        else if (this.resourceType === 'service-edge-router-policies' && this.all_service_router_policies_fetched) {
+            this.autocompleteOptions = this.serviceEdgeRouterPolicyTreeNodes.filter((option) => this.filterText === '' || option.toLowerCase().includes(this.filterText.toLowerCase()));
+        }
+        else if (this.resourceType === 'service-edge-router-policies' && !this.all_service_router_policies_fetched) {
+            this.autocompleteOptions = [];
+        }
+    }
     clearSearchType() {
         this.resourceType = '';
         this.autocompleteOptions = [];
@@ -13641,12 +14222,21 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         transform.k = 1;
         this.svg.attr('transform', transform);
     }
+    graphCollapse(d) {
+        if (d.data.rootNode === 'Yes') {
+            d.data.clickProcess = 'Not Yet';
+            d._children = null;
+        }
+        if (d.children) {
+            d._children = d.children;
+            d._children && d._children?.find(nd => this.graphCollapse);
+            d.children = null;
+        }
+    }
     initTopoView() {
         this.autocompleteOptions = [];
         const margin = { top: 20, right: 190, bottom: 30, left: 0 };
-        // const width = 1600 - margin.left - margin.right;
         const width = window.innerWidth - margin.right;
-        // const height = 1600 - margin.top - margin.bottom;
         const height = window.innerHeight - margin.bottom;
         this.treetooltip = d3.select('#tooltip');
         this.resourceTypeError = false;
@@ -13668,10 +14258,11 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
             d3.select('#topocontextmenu').style('display', 'none');
         });
         d3.selectAll('g > *').remove();
-        this.treemap = d3.tree().nodeSize([100, 20]);
+        this.treemap = d3.tree().nodeSize([85, 5]);
         this.networkGraph.x = 100; // height / 4;
         this.networkGraph.y = 100;
         this.networkGraph.children.forEach(collapse);
+        // this.networkGraph.children.forEach( (nd:any) =>  this.graphCollapse(nd) );
         this.updateTree(this.networkGraph);
         _.delay(() => {
             this.transform = d3.zoomIdentity;
@@ -13728,7 +14319,7 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
             if (_.startsWith(d.data.name, 'Edge Routers') || _.includes(d.data.type, 'Edge Router')) {
                 className = 'edge-router';
             }
-            if (_.includes(d.data.name, 'Identities') || _.includes(d.data.type, 'Identity')) {
+            if (_.includes(d.data.name, 'Identities') || _.includes(d.data.name, 'Associated Identities') || _.includes(d.data.type, 'Identity') || _.includes(d.data.type, 'BrowZer Identity')) {
                 className = 'endpoint';
             }
             if (_.startsWith(d.data.name, 'Services') || _.startsWith(d.data.type, 'Service')) {
@@ -13737,10 +14328,10 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
             if (_.startsWith(d.data.name, 'Bind-Services') || _.startsWith(d.data.name, 'Dial-Services')) {
                 className = 'service';
             }
-            if (_.startsWith(d.data.name, 'BindPolicies') || _.startsWith(d.data.name, 'DialPolicies') || _.startsWith(d.data.name, 'BindPolicy')) {
+            if (_.startsWith(d.data.name, 'Bind-Policies') || _.startsWith(d.data.name, 'Dial-Policies') || _.startsWith(d.data.name, 'Bind Policy')) {
                 className = 'service-policy';
             }
-            if (_.includes(d.data.name, 'Service Policies') || _.includes(d.data.type, 'ServicePolicy')) {
+            if (_.includes(d.data.name, 'Service Policies') || _.includes(d.data.type, 'Service Policy')) {
                 className = 'service-policy';
             }
             if (_.startsWith(d.data.name, 'Edge Router Policies') || _.startsWith(d.data.type, 'Router Policy')) {
@@ -13768,7 +14359,7 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
             const rawEdgerouters = this.edgerouters;
             const rawEndpoints = this.identities;
             const rawAppwans = this.service_policies;
-            const edgeRouterPolicies = this.router_policies;
+            const edgeRouterPolicies = this.edge_router_policies;
             if (d && d.data && d.data.contextMenu === 'Yes') {
                 d3.select('#topocontextmenu')
                     .style('position', 'absolute')
@@ -13780,7 +14371,7 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                 return;
             }
             let obj = null;
-            if (d && d.data && d.data.type === 'Identity') {
+            if (d && d.data && (d.data.type === 'Identity' || d.data.type === 'BrowZer Identity')) {
                 if (d.data.status === "Registered") {
                     enableLi('#liSingleUT');
                     enableLi('#liFLSingleRouter');
@@ -13802,14 +14393,6 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                 disableLi('#liSingleLT');
                 disableLi('#liCL');
                 disableLi('#liLT');
-                /*
-                obj = new Identity();
-                for (let i = 0; i < rawEndpoints.length; i++) {
-                    if (rawEndpoints[i].id === d.data.uuid) {
-                        obj = rawEndpoints[i];
-                    }
-                }
-                */
                 this.contextmenuNodeType = 'identity';
             }
             else if (d && d.data && d.data.type === 'Edge Router') {
@@ -13833,14 +14416,6 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                 disableLi('#liCL');
                 disableLi('#liLT');
                 this.contextmenuNodeType = 'edge-router';
-                /*
-                obj = new EdgeRouterV2();
-                for (let i = 0; i < rawEdgerouters.length; i++) {
-                    if (rawEdgerouters[i].id === d.data.uuid) {
-                        obj = rawEdgerouters[i];
-                    }
-                }
-                */
             }
             else if (d && d.data && d.data.type === 'Service') {
                 enableLi('#liMet');
@@ -13856,16 +14431,8 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                 disableLi('#liLT');
                 enableLi('#liSingleUT');
                 this.contextmenuNodeType = 'service';
-                /*
-                obj = new PlatformService();
-                for (let i = 0; i < this.services.length; i++) {
-                    if (this.services[i].id === d.data.uuid) {
-                        obj = this.services[i];
-                    }
-                }
-                */
             }
-            else if (d && d.data && d.data.type === 'AppWAN') {
+            else if (d && d.data && d.data.type === 'Service Policy') {
                 disableLi('#liMet');
                 enableLi('#liVC');
                 disableLi('#liIns');
@@ -13878,15 +14445,7 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                 disableLi('#liCL');
                 disableLi('#liLT');
                 disableLi('#liSingleUT');
-                /*
-                obj = new ServicePolicy();
-                for (let i = 0; i < rawAppwans.length; i++) {
-                    if (rawAppwans[i].id === d.data.uuid) {
-                        obj = rawAppwans[i];
-                    }
-                }
-                */
-                this.contextmenuNodeType = 'appwan';
+                this.contextmenuNodeType = 'service-policy';
             }
             else if (d && d.data && d.data.type === 'Router Policy') {
                 disableLi('#liMet');
@@ -13902,14 +14461,6 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                 disableLi('#liLT');
                 disableLi('#liSingleUT');
                 this.contextmenuNodeType = 'router-policy';
-                /*
-                 obj = new EdgeRouterPolicyV2();
-                   for (let i = 0; i < edgeRouterPolicies.length; i++) {
-                       if (edgeRouterPolicies[i].id === d.data.uuid) {
-                           obj = edgeRouterPolicies[i];
-                       }
-                   }
-                 */
             }
             else if (d && d.data && d.data.type === 'Network') {
                 enableLi('#liMet');
@@ -13941,14 +14492,6 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                 disableLi('#liLT');
                 disableLi('#liSingleUT');
                 this.contextmenuNodeType = 'service-router-policy';
-                /*
-                 obj = new ServiceEdgeRouterPolicy();
-                 for (let i = 0; i < this.service_router_policies.length; i++) {
-                     if (this.service_router_policies[i].id === d.data.uuid) {
-                         obj = this.service_router_policies[i];
-                     }
-                 }
-                 */
             }
             this.contextmenuNode = obj;
             d3.select('#tooltip').style('display', 'none');
@@ -13960,14 +14503,31 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
             .style('fill', function (d) {
             return d._children ? 'var(--tableText)' : '#fff';
         })
-            .on('mousemove', (event, source) => {
-            this.drawTreeTooltip(event, source);
+            .on('mousemove', (event, d) => {
+            this.drawTreeTooltip(event, d);
         })
             .on('mouseout', this.removeTreeTooltip)
             .on('contextmenu', (event) => {
             event.preventDefault();
         })
             .on('click', async (event, d) => {
+            if (d.data.rootNode && d.data.rootNode === 'Yes' && d.data.clickProcess === 'Not Yet') {
+                d3.select(event.currentTarget).transition()
+                    .duration(600)
+                    .style("stroke-width", "10")
+                    .transition()
+                    .duration(600)
+                    .style("stroke-width", "6")
+                    .transition()
+                    .duration(600)
+                    .style("stroke-width", "3")
+                    .transition()
+                    .duration(600)
+                    .style("stroke-width", "9")
+                    .transition()
+                    .duration(600)
+                    .style("stroke-width", "12");
+            }
             if (d && d.data && d.data.contextMenu === 'Yes') {
                 d3.select('#topocontextmenu').style('display', 'none');
             }
@@ -13989,13 +14549,14 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                     if (d.data &&
                         d.data.rootNode &&
                         d.data.rootNode === 'Yes' &&
-                        d.data.type === 'Identity' &&
+                        (d.data.type === 'Identity' ||
+                            d.data.type === 'BrowZer Identity') &&
                         !d.children &&
                         !d._children) {
+                        d.data.clickProcess = 'Completed';
                         const arr = await this.treeNodeProcessor.processIdentitiesForNodeClick(d, this.networkGraph, this.identities, this.uniqId, this.zitiService, this.configs);
                         this.uniqId = arr[1];
                         this.networkGraph = arr[0];
-                        d.data.clickProcess = 'Completed';
                         this.networkGraph.children.find((nd) => {
                             collapseFew(nd, this.openNodes);
                         });
@@ -14007,10 +14568,10 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                         d.data.type === 'Service' &&
                         !d.children &&
                         !d._children) {
+                        d.data.clickProcess = 'Completed';
                         const arr = await this.treeNodeProcessor.processServicesForNodeClick(d, this.networkGraph, this.services, this.uniqId, this.zitiService);
                         this.uniqId = arr[1];
                         this.networkGraph = arr[0];
-                        d.data.clickProcess = 'Completed';
                         this.networkGraph.children.find((nd) => {
                             collapseFew(nd, this.openNodes);
                         });
@@ -14019,13 +14580,13 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                     else if (d.data &&
                         d.data.rootNode &&
                         d.data.rootNode === 'Yes' &&
-                        d.data.type === 'ServicePolicy' &&
+                        d.data.type === 'Service Policy' &&
                         !d.children &&
                         !d._children) {
+                        d.data.clickProcess = 'Completed';
                         const arr = await this.treeNodeProcessor.processServicePoliciesForNodeClick(d, this.networkGraph, this.service_policies, this.uniqId, this.zitiService);
                         this.uniqId = arr[1];
                         this.networkGraph = arr[0];
-                        d.data.clickProcess = 'Completed';
                         this.networkGraph.children.find((nd) => {
                             collapseFew(nd, this.openNodes);
                         });
@@ -14037,10 +14598,10 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                         d.data.type === 'Edge Router' &&
                         !d.children &&
                         !d._children) {
+                        d.data.clickProcess = 'Completed';
                         const arr = await this.treeNodeProcessor.processEdgeroutersForNodeClick(d, this.networkGraph, this.edgerouters, this.uniqId, this.zitiService);
                         this.uniqId = arr[1];
                         this.networkGraph = arr[0];
-                        d.data.clickProcess = 'Completed';
                         this.networkGraph.children.find((nd) => {
                             collapseFew(nd, this.openNodes);
                         });
@@ -14052,10 +14613,10 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                         d.data.type === 'Router Policy' &&
                         !d.children &&
                         !d._children) {
-                        const arr = await this.treeNodeProcessor.processEdgeRouterPoliciesForNodeClick(d, this.networkGraph, this.router_policies, this.uniqId, this.zitiService);
+                        d.data.clickProcess = 'Completed';
+                        const arr = await this.treeNodeProcessor.processEdgeRouterPoliciesForNodeClick(d, this.networkGraph, this.edge_router_policies, this.uniqId, this.zitiService);
                         this.uniqId = arr[1];
                         this.networkGraph = arr[0];
-                        d.data.clickProcess = 'Completed';
                         this.networkGraph.children.find((nd) => {
                             collapseFew(nd, this.openNodes);
                         });
@@ -14067,10 +14628,10 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                         d.data.type === 'Service Router Policy' &&
                         !d.children &&
                         !d._children) {
+                        d.data.clickProcess = 'Completed';
                         const arr = await this.treeNodeProcessor.processServiceEdgeRouterPoliciesForNodeClick(d, this.networkGraph, this.service_router_policies, this.uniqId, this.zitiService);
                         this.uniqId = arr[1];
                         this.networkGraph = arr[0];
-                        d.data.clickProcess = 'Completed';
                         this.networkGraph.children.find((nd) => {
                             collapseFew(nd, this.openNodes);
                         });
@@ -14099,13 +14660,17 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         this.nodeEnter
             .append('foreignObject')
             .attr('height', '50')
-            .attr('width', '330')
-            .attr('x', '10')
-            .attr('y', '-25')
+            .attr('width', function (d) {
+            return d && d.data && d.data.name.length >= 20 ? '550' : '330';
+        })
+            .attr('x', '20')
+            .attr('y', function (d) {
+            return d && d.data && d.data.rootNode === 'Yes' ? '-5' : '-40';
+        })
             .append('xhtml:body')
             .style('background', 'transparent')
             .html(function (d) {
-            return `<div class="text-container"<span>${d.data.name}</span>`;
+            return `<div class="node-text-container"><span>${d.data.name}</span></div>`;
         });
         this.nodeUpdate = this.nodeEnter.merge(this.node);
         this.nodeUpdate
@@ -14199,19 +14764,6 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                 }
             });
         }
-        function collapseDepth(d, id) {
-            // unused
-            if (d.children) {
-                if (d.data.id !== id) {
-                    d._children = d.children;
-                    d._children.forEach(collapseDepth);
-                    d.children = null;
-                }
-                else {
-                    d.children.forEach(collapseDepth);
-                }
-            }
-        }
         function collapseFew(_nd, openNodes) {
             if (_nd.data.id === '#all') {
                 return;
@@ -14250,54 +14802,6 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
             this.svg.transition().duration(750).attr('transform', trans);
         }
     }
-    removeGraphTooltip() {
-        if (this.graphtooltip) {
-            this.graphtooltip.style('display', 'none');
-        }
-    }
-    drawGraphTooltip(event, d) {
-        document.getElementById('tooltip').innerHTML = this.readGraphKeyValues(d);
-        this.graphtooltip.style('display', 'block');
-        const x = event.pageX - 400 + 'px';
-        const y = event.pageY + 10 + 'px';
-        this.graphtooltip.style('left', x);
-        this.graphtooltip.style('top', y);
-    }
-    readGraphKeyValues(d) {
-        let info = '<span style="font-size:14px;font-family:Open Sans; font-weight: 600; font-color: var(--tableText);">';
-        const keys = Object.keys(d.data);
-        keys.forEach((k) => {
-            if (k === 'value' ||
-                k === 'group' ||
-                k === 'index' ||
-                k === 'parent' ||
-                k === 'depth' ||
-                k === 'x' ||
-                k === 'y' ||
-                k === 'id' ||
-                k === 'x0' ||
-                k === 'y0' ||
-                k === 'vy' ||
-                k === 'vx') {
-                // continue;
-            }
-            else if (k === 'children') {
-                const kVal = d.data[k];
-                info = info + '  ' + k + '  :  ' + kVal.length + '<br>';
-            }
-            else {
-                if (this.isAnObject(d.data[k])) {
-                    const kVal = d.data[k];
-                    info = info + '   ' + k + '  :  ' + kVal.name + '<br>';
-                }
-                else {
-                    const vo = d.data[k];
-                    info = info + '   ' + k + '  :  ' + (vo !== null || vo !== '' ? d.data[k] : 'N/A') + '<br>';
-                }
-            }
-        });
-        return info + '</span>';
-    }
     setColor(d) {
         if (d.status === 'Error' && d.group === 3) {
             return 'red';
@@ -14352,22 +14856,6 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
             return 'blue';
         }
     }
-    nodeshape(d) {
-        if (d.group === '3') {
-            return 'rect';
-        }
-        else {
-            return 'circle';
-        }
-    }
-    linkWidth(d) {
-        if (d.group === 1) {
-            return 10;
-        }
-        else {
-            return 2;
-        }
-    }
     dragstarted(event, d) {
         if (!event.active) {
             this.simulation.alphaTarget(0.3).restart();
@@ -14402,10 +14890,14 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         document.getElementById('tooltip').innerHTML = this.readTreeKeyValues(event, s);
     }
     readTreeKeyValues(event, d) {
-        let info = '<span>';
+        const startIndex = d.data.name.indexOf('(');
+        const finIndex = d.data.name.indexOf(')');
+        const countStr = startIndex > 0 ? d.data.name.substring(startIndex + 1, finIndex) : 0;
+        let info = `<div class='tool-tip-container'>`;
         const keys = Object.keys(d.data); // mp.keys();
         keys.forEach(function (k) {
-            if (k === 'protocol' ||
+            if (k === 'firstChild' ||
+                k === 'protocol' ||
                 k === 'contextMenu' ||
                 k === 'uuid' ||
                 k === 'lastId' ||
@@ -14422,21 +14914,34 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                 k === 'y0') {
                 // continue;
             }
+            else if (d[k] instanceof Array) {
+                info =
+                    info +
+                        '<div class="prop-row"><div class="prop-name">' +
+                        k +
+                        ':</div><div class="prop-val">' +
+                        d[k].join('<br> &nbsp;&nbsp; &nbsp;&nbsp;') +
+                        '</div></div>';
+            }
             else {
-                info = info + '   ' + k + '  :  ' + d.data[k] + '<br>';
+                const propVal = d.data[k] || '';
+                info = info + '<div class="prop-row"><div class="prop-name">' + k + ':</div><div class="prop-val">' + propVal + '</div></div>';
             }
         });
-        return info + '</span>';
+        if (d.data.firstChild && d.data.firstChild === 'Yes' && countStr > this.maxObjectsPerNode - 1) {
+            info = info + '<span class="tooltip-help-text">Note: expand node disabled. Use search filter.</span>';
+        }
+        else if (d.data.firstChild && d.data.firstChild === 'Yes' && countStr < this.maxObjectsPerNode) {
+            info = info + '<span class="tooltip-help-text">Note: click to expand child nodes </span>';
+        }
+        return info + '</div>';
     }
-    hide() { }
-    toggleModalSize() { }
-    ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NetworkVisualizerComponent, deps: [{ token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i1$1.HttpClient }, { token: LoggerService }, { token: TreeNodeProcessor }, { token: NetworkVisualizerHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NetworkVisualizerComponent, selector: "app-network-visualizer", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-identities-container\">\n\n    <div class=\"nf-network-topology-container\" >\n\n      <div class=\"css-header\">{{title}} </div><br>\n\n      <div  class=\"nf-net-vis-controls-header\">\n        <div class=\"nf-topology-zoom-container\">\n          <!--button (click)=\"zoomOut()\" class=\"nf-topology-zoom-button minus\"></button>\n          <button (click)=\"zoomIn()\" class=\"nf-topology-zoom-button plus\"></button-->\n          <div (click)=\"resetTree('Yes')\" class=\"reset-button\" title=\"Reset\"></div>\n        </div>\n        <select\n            (change)=\"resourceTypeChanged()\"\n            [(ngModel)]=\"resourceType\"\n            [ngClass]=\"{ 'resource-type-error': resourceTypeError }\"\n            class=\"resource-type-select\"\n            id=\"ResourceTypeSelect\"\n        >\n          <option value=\"\">Select Resource Type</option>\n          <option value=\"service-policies\">Service Policies</option>\n          <option value=\"services\">Services</option>\n          <option value=\"identities\">Identities</option>\n          <option value=\"edge-routers\">Edge Routers</option>\n          <option value=\"edge-router-policies\">Edge Router Policies</option>\n          <option value=\"service-edge-router-policies\">Service Edge Router Policies</option>\n        </select>\n        <div class=\"nf-net-vis-filter-container listBox row\">\n          <input\n              (keyup)=\"filterSearchArray()\"\n              [(ngModel)]=\"filterText\"\n              [matAutocomplete]=\"auto\"\n              class=\"nf-topology-filter-input\"\n              id=\"filterText\"\n              matInput\n              placeholder=\"Type to Filter\"\n          />\n\n          <div\n              (click)=\"clearSearchFilter()\"\n              *ngIf=\"filterText !== ''\"\n              class=\"buttonBall close\"\n              id=\"ClearSearchFilter\"\n          ></div>\n          <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n          <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n            <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-autocomplete>\n        </div>\n      </div>\n\n      <div class=\"nf-topology-legend\">\n        <div class=\"legend-item\">\n          <div class=\"legend-circle servicepolicies\"></div>\n          <div class=\"legend-text\">Service Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle services\"></div>\n          <div class=\"legend-text\">Services</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle endpoints\"></div>\n          <div class=\"legend-text\">Identities</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle edgerouters\"></div>\n          <div class=\"legend-text\">Edge Routers</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle erpolicies\"></div>\n          <div class=\"legend-text\">Edge Router Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle serviceerpolicies\"></div>\n          <div class=\"legend-text\">Service Router Policies</div>\n        </div>\n      </div>\n\n      <div class=\"topotip\" id=\"tooltip\"></div>\n      <svg style='pointer-events:all' id=\"NetworkVisualizerSVG\"></svg>\n      <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n    </div>\n\n</div>\n", styles: [".ziti-page-container{height:100%;width:100%;left:0;display:flex;flex-direction:column;position:absolute;padding-top:1px;padding-left:3px;padding-right:3px;top:0}.nf-network-topology-container{overflow:hidden;width:100%;height:100%;background-color:var(--background);z-index:1001;margin:auto;inset:0;padding-top:1px;padding-left:3px;padding-right:3px;background:#f5e9f2;background-image:linear-gradient(#ecd3e6 2px,transparent 0),linear-gradient(90deg,#ecd3e6 2px,transparent 0),linear-gradient(#ecd3e6 1px,transparent 0),linear-gradient(90deg,#ecd3e6 1px,transparent 0);background-size:40px 40px,40px 40px,10px 10px,10px 10px}.css-header{height:50px;font-size:25px;font-weight:600;margin:8px 0 0 2px;font-family:Russo One;color:#0027ab;font-size:30px;text-transform:uppercase;font-weight:400;background-color:transparent}.resource-type-select{width:230px;flex-shrink:0;border-radius:27px;height:51px;margin-top:20px;margin-left:20px;-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px);background-color:#ffffff80!important;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);color:var(--tableText);padding-left:20px}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right 18px;background-repeat:no-repeat;background-size:18px;padding-right:38px}.no-results-warning{bottom:-20px;left:20px;font-size:15px;color:var(--tableText);padding-left:20px;padding-top:5px}.resource-type-error{border-width:3px;border-color:var(--red)!important}.nf-links{stroke:#fff;stroke-opacity:1.6}.nf-net-vis-controls-header{display:flex;flex-direction:row;position:absolute;z-index:99999;flex:1 0 auto;top:50px}.nf-net-vis-filter-container{max-width:300px;margin-top:20px;margin-left:10px;flex:1 0 auto}.table-filter-container{max-width:300px;margin-top:0;margin-left:1px;flex:1 0 auto}#ClearSearchFilter{position:absolute;right:2px;top:2px;width:20px;height:20px;font-size:25px;color:var(--tableText);z-index:99999999}#popupTableTitle{width:100%;font-weight:900;display:inline-block;background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);border:2px #d3d3d3!important;text-align:center;border:2px;border-color:#d3d3d3;height:25px;top:2px;color:#fff;padding-right:5px;background:#000;cursor:move}#tra:hover{text-decoration:underline}#CloseDataTable{position:absolute;right:5px;top:-33px;width:25px;height:25px;font-size:15px;color:#fff;z-index:99999999}.copydatatable{width:135px;height:17px;font-size:10pt;font-family:tahoma;top:95%;right:0%;border-radius:5px;background:#fff;border:0px solid gray!important;position:absolute!important;text-transform:uppercase;cursor:pointer;z-index:999}.copydatatable:hover{text-decoration:underline}.nf-topology-filter-input{height:50px;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px;padding-right:35px}.nf-topology-select-container{max-width:400px;margin-top:20px;margin-left:20px;flex:1 0 auto}.nf-topology-select-input{height:45px;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px}input:focus,textarea:focus,select:focus{box-shadow:0 20px 23px 0 var(--shadow)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-filter-input{background:var(--glass)!important;-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.nf-topology-zoom-container{display:flex;margin-left:20px;margin-top:20px;flex:1 0 auto}.nf-topology-zoom-button.minus{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s;background-image:url(/assets/images/Icon_Minus.png);background-size:40%;background-color:var(--red);box-shadow:0 6px 10px 0 var(--redShadow)}.nf-topology-zoom-label{padding-right:10px}.nf-topology-zoom-button{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s}.nf-topology-zoom-button.plus:before{content:\"\\e937\"}.nf-topology-zoom-button.minus:before{content:\"\\e943\"}.nf-topology-zoom-button:hover{color:var(--white);background-color:var(--primaryColor);filter:brightness(90%);transition:background-color 1s;transition:.3s}.nf-topology-zoom-button:active{background-color:var(--icon);transform:scale(.97);transition:background-color 1s;transition:.3s}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-zoom-button{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.placeholder{display:flex;align-items:center;justify-content:center;height:800px}.topotip{display:none;position:fixed;background:var(--navigation);border:0px;border-radius:12px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:10px;font-size:17px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:400px}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.topotip{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.nodes{cursor:pointer;box-shadow:0 30px 43px 0 var(--shadow)}.nf-links{cursor:pointer}.linkWidth{color:#fff}.nf-network-topology-container .loader{margin-left:-150px}.loader .bar1{background-color:var(--inputBorder)!important}.loader .bar2{background-color:var(--inputBorder)!important;animation-delay:-.7s}.loader .bar3{background-color:var(--inputBorder)!important;animation-delay:-.6s}.loader .bar4{background-color:var(--inputBorder)!important;animation-delay:-.5s}.loader .bar5{background-color:var(--inputBorder)!important;animation-delay:-.4s}.loader .bar6{background-color:var(--inputBorder)!important;animation-delay:-.3s}.changeView{display:flex;margin-top:32px;margin-left:10px;flex:1 0 auto}.changeView .changeViewLabel{margin-top:3px;margin-left:5px}.node circle{fill:#fff;stroke:#07397d;stroke-width:14px;box-shadow:0 20px 23px 0 var(--shadow)}.node text{font:27px sans-serif;cursor:pointer}.text-container{cursor:pointer}.link{fill:none;stroke:var(--table);stroke-width:5px;color:#fff}.nf-topology-legend{width:210px;border-radius:12px;margin-top:10px;margin-right:20px;position:fixed;top:0;right:0;background:var(--navigation);display:inline-block;box-shadow:0 20px 23px 0 var(--shadow);padding:5px 12px 7px}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-legend{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.legend-item{width:100%;height:100%;display:inline-block}.legend-circle{height:12px;width:12px;border-radius:15px;display:inline-block;margin-top:7px}.legend-circle.servicepolicies{background-color:#ff0d49}.legend-circle.services{background-color:#08dc5a}.legend-circle.endpoints{background-color:#0273fb}.legend-circle.edgerouters{background-color:#ffc000}.legend-circle.erpolicies{background-color:#ff8400}.legend-circle.serviceerpolicies{background-color:#ff5900}.legend-text{display:inline-block;font-size:15px;font-weight:600;color:var(--tableText);padding-left:7px;padding-bottom:4px}.reset-button{height:50px;width:50px;border-radius:50px;margin-right:10px;background-size:contain;background-image:url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:.3s}.reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}.reset-button:active{transform:scale(.9);transition:.3s}.sign_out_button{background-color:#2fa4e7;padding:16px 10px;color:#fff;float:left;text-decoration:none}.sign_out_button:hover{background-color:#1892d7}.sign_out_button a{color:#fff;text-decoration:none}.contextmenu_mouseout{fill:#f4f4f4;stroke:#fff;stroke-width:1px}.contextmenu_mouseover{fill:#c8c8c8}.menu2{position:fixed;background:#fff;color:#000;cursor:pointer;border:1px black solid}.contextmenu_text{position:fixed;background:var(--navigation);border:1px;border-radius:5px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:5px;font-size:10px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:400px}.contextmenu{z-index:2000;opacity:1;position:fixed;background:#fff;color:#000;font-family:sans-serif;font-size:11px;box-shadow:2px 2px 2px #90908d;padding:2px;border-radius:12px;border:1px solid #c6c6c6;max-width:400px}.menuItems{display:block;color:#555;text-decoration:none;padding:6px 8px 6px 30px;position:relative}.context-menu{display:none;position:absolute;z-index:10}.context-menu__items{list-style:none;margin:0;padding:0}.context-menu__item{display:block;margin-bottom:4px}.container{margin:0 auto;padding:0 24px;max-width:960px}.context-menu__link{display:block;padding:4px 12px;color:#06a;text-decoration:none}.contextmenu_text:hover .divItemsHover{color:#fff;background-color:#06a}.context-menu--active{display:block}#topoDataTableHeader{float:left;min-width:250px;width:auto;height:360px;top:100px;border-bottom-left-radius:13px;border-bottom-right-radius:13px;display:none;background:#fff;border:2px solid gray!important;position:absolute!important}.table-filter-input{height:30px;width:100%;top:40px;border-radius:1px;border-color:#d3d3d3;background-color:#d3d3d3;box-shadow:0 20px 23px 0 var(--shadow);padding-top:3px;padding-left:2px;padding-right:2px}#topoDataTable{float:down;min-width:250px;width:auto;height:300px;top:55px;border-radius:10px;position:absolute!important;overflow:auto;background:#fff;font-family:sans-serif;font-size:16px;color:#06a;overflow-x:scroll}table{width:auto;height:auto;max-height:300px}tr{width:auto;padding:5px}th{width:auto;font-family:sans-serif;font-size:16px;color:#06a;font-weight:700;background-color:#06a}td{width:auto}th{width:auto;font-weight:700;padding:2px;border:1px solid #ccc;text-align:center}.context-menu{border-radius:12px;background:var(--navigation);width:200px;box-shadow:0 20px 23px 0 var(--shadow);position:relative;display:none}.context-menu .menu-options{list-style:none;padding:0}.context-menu .menu-options .menu-option{font-weight:700;font-size:16px;line-height:36px;color:var(--tableText);padding:1px 4px 1px 20px;cursor:pointer}.context-menu .menu-options .menu-option:hover{background:var(--primaryColor);color:var(--navigation)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.context-menu{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.disabled{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none;cursor:pointer;opacity:.6}path:not(.loader path,.highcharts-root path){fill:none;stroke:var(--navigation);stroke-width:5px;color:#fff}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating{animation:rotating 2s linear infinite}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--icon);border-width:4px}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__inner-circle{border-color:var(--icon)}.mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:4px}#mat-radio-2>div>div>div.mdc-radio__background>div.mdc-radio__inner-circle .node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.endpoint circle{stroke:#0273fb!important;stroke-width:12px}.node.service circle{stroke:#08dc5a!important;stroke-width:12px}.node.service-policy circle{stroke:#ff0d49!important;stroke-width:12px}.node.edge-router-policy circle{stroke:#ff8400!important;stroke-width:12px}.node.service-edge-router-policy circle{stroke:#ff5900!important;stroke-width:12px}.text-container{color:var(--tableText);font-size:24px;font-weight:700;margin-left:20px;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}svg>g>g.node:first-of-type.terminate{cursor:pointer}svg>g>g.node:first-of-type.terminate .text-container{cursor:pointer}svg>g>g.node:first-of-type.terminate circle{cursor:pointer}svg>g>g.node:first-of-type.terminate:hover>rect{fill:url(#NodeHoverGradient)}.node>rect{fill:url(#NodeGradient)}.node.terminate{cursor:default;stroke-width:14px}.node.terminate .text-container{cursor:default}.node.terminate circle{cursor:default;stroke-width:14px}.node.terminate:hover>rect{fill:url(#NodeGradient)}.node:hover>rect{fill:url(#NodeHoverGradient)}p-chips.error .p-chips.p-component .p-chips-multiple-container{border-color:var(--red);border-width:2px}.checkboxes.error .mat-checkbox-frame{border-color:var(--red)}.checkboxes.error .mat-checkbox-label{color:var(--red)}.stop1{stop-color:var(--table);stop-opacity:.9}.stop2{stop-color:var(--table);stop-opacity:.65}.stop3{stop-color:var(--table);stop-opacity:0}.stop1a{stop-color:var(--background);stop-opacity:1}.stop2a{stop-color:var(--background);stop-opacity:.7}.stop3a{stop-color:var(--background);stop-opacity:0}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NetworkVisualizerComponent, selector: "app-network-visualizer", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-identities-container\">\n\n    <div class=\"nf-network-topology-container\" >\n\n      <div class=\"css-header\">{{title}} </div><br>\n\n      <div  class=\"nf-net-vis-controls-header\">\n        <div class=\"nf-topology-zoom-container\">\n          <!--button (click)=\"zoomOut()\" class=\"nf-topology-zoom-button minus\"></button>\n          <button (click)=\"zoomIn()\" class=\"nf-topology-zoom-button plus\"></button-->\n          <div (click)=\"resetTree('Yes')\" class=\"reset-button\" title=\"Reset\"></div>\n        </div>\n        <select\n            (change)=\"resourceTypeChanged()\"\n            [(ngModel)]=\"resourceType\"\n            [ngClass]=\"{ 'resource-type-error': resourceTypeError }\"\n            class=\"resource-type-select\"\n            id=\"ResourceTypeSelect\"\n        >\n          <option value=\"\">Select Resource Type</option>\n          <option value=\"service-policies\">Service Policies</option>\n          <option value=\"services\">Services</option>\n          <option value=\"identities\">Identities</option>\n          <option value=\"edge-routers\">Edge Routers</option>\n          <option value=\"edge-router-policies\">Edge Router Policies</option>\n          <option value=\"service-edge-router-policies\">Service Edge Router Policies</option>\n        </select>\n\n        <div class=\"nf-net-vis-filter-container listBox row\">\n          <input\n              (keyup)=\"nwSearchChange($event)\"\n              [(ngModel)]=\"filterText\"\n              [matAutocomplete]=\"auto\"\n              class=\"nf-topology-filter-input\"\n              id=\"filterText\"\n              matInput\n              placeholder=\"Type to Filter\"\n          />\n\n          <div\n              (click)=\"clearSearchFilter()\"\n              *ngIf=\"filterText !== ''\"\n              class=\"buttonBall close icon-close\"\n              id=\"ClearSearchFilter\"\n          ></div>\n\n          <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n            <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-autocomplete>\n        </div>\n      </div>\n\n      <div class=\"nf-topology-legend\">\n        <div class=\"legend-item\">\n          <div class=\"legend-circle servicepolicies\"></div>\n          <div class=\"legend-text\">Service Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle services\"></div>\n          <div class=\"legend-text\">Services</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle endpoints\"></div>\n          <div class=\"legend-text\">Identities</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle edgerouters\"></div>\n          <div class=\"legend-text\">Edge Routers</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle erpolicies\"></div>\n          <div class=\"legend-text\">Edge Router Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle serviceerpolicies\"></div>\n          <div class=\"legend-text\">Service Router Policies</div>\n        </div>\n\n        <div class=\"legend-item\">\n          <div class=\"node-expand-help\"></div>\n          <div class=\"legend-icon-text legend-associated-nodes\">View Associated Nodes</div>\n          <div class=\"legend-icon-pointer\"></div>\n        </div>\n      </div>\n\n      <div class=\"topotip\" id=\"tooltip\"></div>\n      <svg style='pointer-events:all' id=\"NetworkVisualizerSVG\"></svg>\n      <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n    </div>\n\n</div>\n", styles: [".ziti-page-container{height:100%;width:100%;left:0;display:flex;flex-direction:column;position:absolute;padding-top:1px;padding-left:3px;padding-right:3px;top:0}.nf-network-topology-container{overflow:hidden;width:100%;height:100%;background-color:var(--background);z-index:1001;margin:auto;inset:0;padding-top:1px;padding-left:3px;padding-right:3px;background:#ebefff;background-image:linear-gradient(#d1dcff 2px,transparent 0),linear-gradient(90deg,#d1dcff 2px,transparent 0),linear-gradient(#d1dcff 1px,transparent 0),linear-gradient(90deg,#d1dcff 1px,transparent 0);background-size:40px 40px,40px 40px,10px 10px,10px 10px}.css-header{height:50px;font-size:25px;font-weight:600;margin:8px 0 0 10px;font-family:Russo One;color:#0027ab;font-size:30px;text-transform:uppercase;font-weight:400;background-color:transparent}.resource-type-select{width:270px;flex-shrink:0;border-radius:27px;height:51px;margin-left:5px;-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px);background-color:#ffffff80!important;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);color:var(--tableText);padding-left:20px}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right 18px;background-repeat:no-repeat;background-size:18px;padding-right:38px}.no-results-warning{left:440px;font-size:15px;color:var(--tableText);padding-left:20px;padding-top:0;height:-moz-fit-content;height:fit-content;top:1px}.resource-type-error{border-width:3px;border-color:var(--red)!important}.nf-links{stroke:#fff;stroke-opacity:1.6}.nf-net-vis-controls-header{display:flex;flex-direction:row;position:absolute;z-index:99999;flex:1 0 auto;top:60px}.nf-net-vis-filter-container{max-width:490px;margin-top:0;margin-left:10px;flex:1 0 auto}.table-filter-container{max-width:300px;margin-top:0;margin-left:1px;flex:1 0 auto}#ClearSearchFilter{position:absolute;right:15px;top:5px;width:20px;height:20px;font-size:18px;font-weight:600;color:var(--formBase);z-index:99999999}#ClearSearchFilter:hover{filter:brightness(90%)}#ClearSearchFilter:active{transform:translateY(1px);filter:brightness(80%)}#popupTableTitle{width:100%;font-weight:900;display:inline-block;background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);border:2px #d3d3d3!important;text-align:center;border:2px;border-color:#d3d3d3;height:25px;top:2px;color:#fff;padding-right:5px;background:#000;cursor:move}#tra:hover{text-decoration:underline}#CloseDataTable{position:absolute;right:5px;top:-33px;width:25px;height:25px;font-size:15px;color:#fff;z-index:99999999}.copydatatable{width:135px;height:17px;font-size:10pt;font-family:tahoma;top:95%;right:0%;border-radius:5px;background:#fff;border:0px solid gray!important;position:absolute!important;text-transform:uppercase;cursor:pointer;z-index:999}.copydatatable:hover{text-decoration:underline}.nf-topology-filter-input{height:50px;width:485px;border-radius:25px;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:10px;padding-right:15px}.nf-topology-select-container{max-width:400px;margin-top:20px;margin-left:20px;flex:1 0 auto}.nf-topology-select-input{height:45px;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px}input:focus,textarea:focus,select:focus{box-shadow:0 20px 23px 0 var(--shadow)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-filter-input{background:var(--visualizerBackground)!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px)}}.nf-topology-zoom-container{display:flex;margin-left:10px;flex:1 0 auto}.nf-topology-zoom-button.minus{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s;background-image:url(/assets/images/Icon_Minus.png);background-size:40%;background-color:var(--red);box-shadow:0 6px 10px 0 var(--redShadow)}.nf-topology-zoom-label{padding-right:10px}.nf-topology-zoom-button{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s}.nf-topology-zoom-button.plus:before{content:\"\\e937\"}.nf-topology-zoom-button.minus:before{content:\"\\e943\"}.nf-topology-zoom-button:hover{color:var(--white);background-color:var(--primaryColor);filter:brightness(90%);transition:background-color 1s;transition:.3s}.nf-topology-zoom-button:active{background-color:var(--icon);transform:scale(.97);transition:background-color 1s;transition:.3s}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-zoom-button{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.placeholder{display:flex;align-items:center;justify-content:center;height:800px}.topotip{display:none;position:fixed;background:var(--navigation);border:0px;border-radius:12px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;font-size:15px;font-weight:600;color:var(--tableText);z-index:2000;opacity:1;max-width:400px;overflow:hidden}.nodes{cursor:pointer;box-shadow:0 30px 43px 0 var(--shadow)}.nf-links{cursor:pointer}.linkWidth{color:#fff}.nf-network-topology-container .loader{margin-left:-150px}.loader .bar1{background-color:var(--inputBorder)!important}.loader .bar2{background-color:var(--inputBorder)!important;animation-delay:-.7s}.loader .bar3{background-color:var(--inputBorder)!important;animation-delay:-.6s}.loader .bar4{background-color:var(--inputBorder)!important;animation-delay:-.5s}.loader .bar5{background-color:var(--inputBorder)!important;animation-delay:-.4s}.loader .bar6{background-color:var(--inputBorder)!important;animation-delay:-.3s}.changeView{display:flex;margin-top:32px;margin-left:10px;flex:1 0 auto}.changeView .changeViewLabel{margin-top:3px;margin-left:5px}.node circle{fill:#fff;stroke:#07397d;stroke-width:14px;box-shadow:0 20px 23px 0 var(--shadow)}.node text{font:27px sans-serif;cursor:pointer}.node-text-container{color:var(--tableText);font-size:24px;font-weight:600;margin-left:2px;margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.link{fill:none;stroke:var(--table);stroke-width:5px;color:#fff}.nf-topology-legend{width:230px;border-radius:12px;margin-top:10px;margin-right:10px;position:absolute;top:0;right:0;background:#ffffff80!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px);border-color:var(--navigation);border-style:solid;border-width:2px;display:inline-block;box-shadow:0 20px 23px 0 var(--shadow);padding:5px 5px 7px}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-legend{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.legend-item{width:100%;height:100%;display:inline-block;position:relative}.legend-itemA{width:100%;height:100%;margin-left:-3px;display:inline-block}.legend-circle{height:12px;width:12px;border-radius:15px;display:inline-block;margin-top:7px}.legend-circle.servicepolicies{background-color:#ff0d49}.legend-circle.services{background-color:#08dc5a}.legend-circle.endpoints{background-color:#0273fb}.legend-circle.edgerouters{background-color:#ffc000}.legend-circle.erpolicies{background-color:#ff8400}.legend-circle.serviceerpolicies{background-color:#ff5900}.legend-text{display:inline-block;font-size:15px;font-weight:600;color:var(--tableText);padding-left:7px;padding-bottom:4px}.legend-icon-text{display:inline-block;font-size:14px;font-weight:600;color:var(--tableText);padding-left:22px;padding-bottom:4px}.legend-icon-text.legend-associated-nodes{padding-left:20px}.legend-icon-pointer{background-size:16px 16px;background-image:url(/assets/svgs/cursor-pointer.svg);position:absolute;z-index:999999;width:20px;height:20px;top:10px;left:2px}.reset-button{height:50px;width:50px;border-radius:50px;margin-right:10px;background-size:contain;background-image:url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:.3s}.node-expand-help{border-radius:20px;border-width:4px;border-color:#08dc5a!important;border-style:solid;box-shadow:0 20px 23px 0 var(--shadow);width:16px;height:16px;position:absolute;background-color:brown;margin-left:-2px;top:2px}.reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}.reset-button:active{transform:scale(.9);transition:.3s}.sign_out_button{background-color:#2fa4e7;padding:16px 10px;color:#fff;float:left;text-decoration:none}.sign_out_button:hover{background-color:#1892d7}.sign_out_button a{color:#fff;text-decoration:none}.contextmenu_mouseout{fill:#f4f4f4;stroke:#fff;stroke-width:1px}.contextmenu_mouseover{fill:#c8c8c8}.menu2{position:fixed;background:#fff;color:#000;cursor:pointer;border:1px black solid}.contextmenu_text{position:fixed;background:var(--navigation);border:1px;border-radius:5px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:5px;font-size:10px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:400px}.contextmenu{z-index:2000;opacity:1;position:fixed;background:#fff;color:#000;font-family:sans-serif;font-size:11px;box-shadow:2px 2px 2px #90908d;padding:2px;border-radius:12px;border:1px solid #c6c6c6;max-width:400px}.menuItems{display:block;color:#555;text-decoration:none;padding:6px 8px 6px 30px;position:relative}.context-menu{display:none;position:absolute;z-index:10}.context-menu__items{list-style:none;margin:0;padding:0}.context-menu__item{display:block;margin-bottom:4px}.container{margin:0 auto;padding:0 24px;max-width:960px}.context-menu__link{display:block;padding:4px 12px;color:#06a;text-decoration:none}.contextmenu_text:hover .divItemsHover{color:#fff;background-color:#06a}.context-menu--active{display:block}#topoDataTableHeader{float:left;min-width:250px;width:auto;height:360px;top:100px;border-bottom-left-radius:13px;border-bottom-right-radius:13px;display:none;background:#fff;border:2px solid gray!important;position:absolute!important}.table-filter-input{height:30px;width:100%;top:40px;border-radius:1px;border-color:#d3d3d3;background-color:#d3d3d3;box-shadow:0 20px 23px 0 var(--shadow);padding-top:3px;padding-left:2px;padding-right:2px}#topoDataTable{float:down;min-width:250px;width:auto;height:300px;top:55px;border-radius:10px;position:absolute!important;overflow:auto;background:#fff;font-family:sans-serif;font-size:16px;color:#06a;overflow-x:scroll}table{width:auto;height:auto;max-height:300px}tr{width:auto;padding:5px}th{width:auto;font-family:sans-serif;font-size:16px;color:#06a;font-weight:700;background-color:#06a}td{width:auto}th{width:auto;font-weight:700;padding:2px;border:1px solid #ccc;text-align:center}.context-menu{border-radius:12px;background:var(--navigation);width:200px;box-shadow:0 20px 23px 0 var(--shadow);position:relative;display:none}.context-menu .menu-options{list-style:none;padding:0}.context-menu .menu-options .menu-option{font-weight:700;font-size:16px;line-height:36px;color:var(--tableText);padding:1px 4px 1px 20px;cursor:pointer}.context-menu .menu-options .menu-option:hover{background:var(--primaryColor);color:var(--navigation)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.context-menu{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.disabled{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none;cursor:pointer;opacity:.6}path:not(.loader path,.highcharts-root path){fill:none;stroke:var(--navigation);stroke-width:5px;color:#fff}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating{animation:rotating 2s linear infinite}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--icon);border-width:4px}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__inner-circle{border-color:var(--icon)}.mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:4px}#mat-radio-2>div>div>div.mdc-radio__background>div.mdc-radio__inner-circle .node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.endpoint circle{stroke:#0273fb!important;stroke-width:12px}.node.service circle{stroke:#08dc5a!important;stroke-width:12px}.node.service-policy circle{stroke:#ff0d49!important;stroke-width:12px}.node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.edge-router-policy circle{stroke:#ff8400!important;stroke-width:12px}.node.service-edge-router-policy circle{stroke:#ff5900!important;stroke-width:12px}.text-container{color:var(--tableText);font-size:24px;font-weight:700;margin-left:20px;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}svg>g>g.node:first-of-type.terminate{cursor:pointer}svg>g>g.node:first-of-type.terminate .text-container{cursor:pointer}svg>g>g.node:first-of-type.terminate circle{cursor:pointer}svg>g>g.node:first-of-type.terminate:hover>rect{fill:url(#NodeHoverGradient)}.node>rect{fill:url(#NodeGradient)}.node.terminate{cursor:default;stroke-width:14px}.node.terminate .text-container{cursor:default}.node.terminate circle{cursor:default;stroke-width:14px}.node.terminate:hover>rect{fill:url(#NodeGradient)}.node:hover>rect{fill:url(#NodeHoverGradient)}p-chips.error .p-chips.p-component .p-chips-multiple-container{border-color:var(--red);border-width:2px}.checkboxes.error .mat-checkbox-frame{border-color:var(--red)}.checkboxes.error .mat-checkbox-label{color:var(--red)}.stop1{stop-color:var(--table);stop-opacity:.9}.stop2{stop-color:var(--table);stop-opacity:.65}.stop3{stop-color:var(--table);stop-opacity:0}.stop1a{stop-color:var(--background);stop-opacity:1}.stop2a{stop-color:var(--background);stop-opacity:.7}.stop3a{stop-color:var(--background);stop-opacity:0}.tool-tip-container{font-size:14px;font-family:Open Sans;font-weight:600;font-color:var(--tableText)}.tool-tip-container .prop-row{display:grid;grid-template-columns:1fr 3fr;grid-gap:10px;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:25px;align-items:center;padding:0 10px}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}.tool-tip-container .prop-row .prop-name{grid-area:propName;font-weight:700}.tool-tip-container .prop-row .prop-val{grid-area:propVal;font-weight:400}.tool-tip-container .tooltip-help-text{font-size:12px;padding-left:10px;padding-right:10px;display:flex;height:22px;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NetworkVisualizerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-network-visualizer', encapsulation: ViewEncapsulation.None, template: "<div class=\"ziti-page-container ziti-identities-container\">\n\n    <div class=\"nf-network-topology-container\" >\n\n      <div class=\"css-header\">{{title}} </div><br>\n\n      <div  class=\"nf-net-vis-controls-header\">\n        <div class=\"nf-topology-zoom-container\">\n          <!--button (click)=\"zoomOut()\" class=\"nf-topology-zoom-button minus\"></button>\n          <button (click)=\"zoomIn()\" class=\"nf-topology-zoom-button plus\"></button-->\n          <div (click)=\"resetTree('Yes')\" class=\"reset-button\" title=\"Reset\"></div>\n        </div>\n        <select\n            (change)=\"resourceTypeChanged()\"\n            [(ngModel)]=\"resourceType\"\n            [ngClass]=\"{ 'resource-type-error': resourceTypeError }\"\n            class=\"resource-type-select\"\n            id=\"ResourceTypeSelect\"\n        >\n          <option value=\"\">Select Resource Type</option>\n          <option value=\"service-policies\">Service Policies</option>\n          <option value=\"services\">Services</option>\n          <option value=\"identities\">Identities</option>\n          <option value=\"edge-routers\">Edge Routers</option>\n          <option value=\"edge-router-policies\">Edge Router Policies</option>\n          <option value=\"service-edge-router-policies\">Service Edge Router Policies</option>\n        </select>\n        <div class=\"nf-net-vis-filter-container listBox row\">\n          <input\n              (keyup)=\"filterSearchArray()\"\n              [(ngModel)]=\"filterText\"\n              [matAutocomplete]=\"auto\"\n              class=\"nf-topology-filter-input\"\n              id=\"filterText\"\n              matInput\n              placeholder=\"Type to Filter\"\n          />\n\n          <div\n              (click)=\"clearSearchFilter()\"\n              *ngIf=\"filterText !== ''\"\n              class=\"buttonBall close\"\n              id=\"ClearSearchFilter\"\n          ></div>\n          <div [hidden]=\"!noSearchResults\" class=\"no-results-warning\">No Results Found</div>\n          <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n            <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-autocomplete>\n        </div>\n      </div>\n\n      <div class=\"nf-topology-legend\">\n        <div class=\"legend-item\">\n          <div class=\"legend-circle servicepolicies\"></div>\n          <div class=\"legend-text\">Service Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle services\"></div>\n          <div class=\"legend-text\">Services</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle endpoints\"></div>\n          <div class=\"legend-text\">Identities</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle edgerouters\"></div>\n          <div class=\"legend-text\">Edge Routers</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle erpolicies\"></div>\n          <div class=\"legend-text\">Edge Router Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle serviceerpolicies\"></div>\n          <div class=\"legend-text\">Service Router Policies</div>\n        </div>\n      </div>\n\n      <div class=\"topotip\" id=\"tooltip\"></div>\n      <svg style='pointer-events:all' id=\"NetworkVisualizerSVG\"></svg>\n      <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n    </div>\n\n</div>\n", styles: [".ziti-page-container{height:100%;width:100%;left:0;display:flex;flex-direction:column;position:absolute;padding-top:1px;padding-left:3px;padding-right:3px;top:0}.nf-network-topology-container{overflow:hidden;width:100%;height:100%;background-color:var(--background);z-index:1001;margin:auto;inset:0;padding-top:1px;padding-left:3px;padding-right:3px;background:#f5e9f2;background-image:linear-gradient(#ecd3e6 2px,transparent 0),linear-gradient(90deg,#ecd3e6 2px,transparent 0),linear-gradient(#ecd3e6 1px,transparent 0),linear-gradient(90deg,#ecd3e6 1px,transparent 0);background-size:40px 40px,40px 40px,10px 10px,10px 10px}.css-header{height:50px;font-size:25px;font-weight:600;margin:8px 0 0 2px;font-family:Russo One;color:#0027ab;font-size:30px;text-transform:uppercase;font-weight:400;background-color:transparent}.resource-type-select{width:230px;flex-shrink:0;border-radius:27px;height:51px;margin-top:20px;margin-left:20px;-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px);background-color:#ffffff80!important;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);color:var(--tableText);padding-left:20px}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right 18px;background-repeat:no-repeat;background-size:18px;padding-right:38px}.no-results-warning{bottom:-20px;left:20px;font-size:15px;color:var(--tableText);padding-left:20px;padding-top:5px}.resource-type-error{border-width:3px;border-color:var(--red)!important}.nf-links{stroke:#fff;stroke-opacity:1.6}.nf-net-vis-controls-header{display:flex;flex-direction:row;position:absolute;z-index:99999;flex:1 0 auto;top:50px}.nf-net-vis-filter-container{max-width:300px;margin-top:20px;margin-left:10px;flex:1 0 auto}.table-filter-container{max-width:300px;margin-top:0;margin-left:1px;flex:1 0 auto}#ClearSearchFilter{position:absolute;right:2px;top:2px;width:20px;height:20px;font-size:25px;color:var(--tableText);z-index:99999999}#popupTableTitle{width:100%;font-weight:900;display:inline-block;background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);border:2px #d3d3d3!important;text-align:center;border:2px;border-color:#d3d3d3;height:25px;top:2px;color:#fff;padding-right:5px;background:#000;cursor:move}#tra:hover{text-decoration:underline}#CloseDataTable{position:absolute;right:5px;top:-33px;width:25px;height:25px;font-size:15px;color:#fff;z-index:99999999}.copydatatable{width:135px;height:17px;font-size:10pt;font-family:tahoma;top:95%;right:0%;border-radius:5px;background:#fff;border:0px solid gray!important;position:absolute!important;text-transform:uppercase;cursor:pointer;z-index:999}.copydatatable:hover{text-decoration:underline}.nf-topology-filter-input{height:50px;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px;padding-right:35px}.nf-topology-select-container{max-width:400px;margin-top:20px;margin-left:20px;flex:1 0 auto}.nf-topology-select-input{height:45px;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px}input:focus,textarea:focus,select:focus{box-shadow:0 20px 23px 0 var(--shadow)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-filter-input{background:var(--glass)!important;-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.nf-topology-zoom-container{display:flex;margin-left:20px;margin-top:20px;flex:1 0 auto}.nf-topology-zoom-button.minus{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s;background-image:url(/assets/images/Icon_Minus.png);background-size:40%;background-color:var(--red);box-shadow:0 6px 10px 0 var(--redShadow)}.nf-topology-zoom-label{padding-right:10px}.nf-topology-zoom-button{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s}.nf-topology-zoom-button.plus:before{content:\"\\e937\"}.nf-topology-zoom-button.minus:before{content:\"\\e943\"}.nf-topology-zoom-button:hover{color:var(--white);background-color:var(--primaryColor);filter:brightness(90%);transition:background-color 1s;transition:.3s}.nf-topology-zoom-button:active{background-color:var(--icon);transform:scale(.97);transition:background-color 1s;transition:.3s}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-zoom-button{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.placeholder{display:flex;align-items:center;justify-content:center;height:800px}.topotip{display:none;position:fixed;background:var(--navigation);border:0px;border-radius:12px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:10px;font-size:17px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:400px}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.topotip{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.nodes{cursor:pointer;box-shadow:0 30px 43px 0 var(--shadow)}.nf-links{cursor:pointer}.linkWidth{color:#fff}.nf-network-topology-container .loader{margin-left:-150px}.loader .bar1{background-color:var(--inputBorder)!important}.loader .bar2{background-color:var(--inputBorder)!important;animation-delay:-.7s}.loader .bar3{background-color:var(--inputBorder)!important;animation-delay:-.6s}.loader .bar4{background-color:var(--inputBorder)!important;animation-delay:-.5s}.loader .bar5{background-color:var(--inputBorder)!important;animation-delay:-.4s}.loader .bar6{background-color:var(--inputBorder)!important;animation-delay:-.3s}.changeView{display:flex;margin-top:32px;margin-left:10px;flex:1 0 auto}.changeView .changeViewLabel{margin-top:3px;margin-left:5px}.node circle{fill:#fff;stroke:#07397d;stroke-width:14px;box-shadow:0 20px 23px 0 var(--shadow)}.node text{font:27px sans-serif;cursor:pointer}.text-container{cursor:pointer}.link{fill:none;stroke:var(--table);stroke-width:5px;color:#fff}.nf-topology-legend{width:210px;border-radius:12px;margin-top:10px;margin-right:20px;position:fixed;top:0;right:0;background:var(--navigation);display:inline-block;box-shadow:0 20px 23px 0 var(--shadow);padding:5px 12px 7px}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-legend{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.legend-item{width:100%;height:100%;display:inline-block}.legend-circle{height:12px;width:12px;border-radius:15px;display:inline-block;margin-top:7px}.legend-circle.servicepolicies{background-color:#ff0d49}.legend-circle.services{background-color:#08dc5a}.legend-circle.endpoints{background-color:#0273fb}.legend-circle.edgerouters{background-color:#ffc000}.legend-circle.erpolicies{background-color:#ff8400}.legend-circle.serviceerpolicies{background-color:#ff5900}.legend-text{display:inline-block;font-size:15px;font-weight:600;color:var(--tableText);padding-left:7px;padding-bottom:4px}.reset-button{height:50px;width:50px;border-radius:50px;margin-right:10px;background-size:contain;background-image:url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:.3s}.reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}.reset-button:active{transform:scale(.9);transition:.3s}.sign_out_button{background-color:#2fa4e7;padding:16px 10px;color:#fff;float:left;text-decoration:none}.sign_out_button:hover{background-color:#1892d7}.sign_out_button a{color:#fff;text-decoration:none}.contextmenu_mouseout{fill:#f4f4f4;stroke:#fff;stroke-width:1px}.contextmenu_mouseover{fill:#c8c8c8}.menu2{position:fixed;background:#fff;color:#000;cursor:pointer;border:1px black solid}.contextmenu_text{position:fixed;background:var(--navigation);border:1px;border-radius:5px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:5px;font-size:10px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:400px}.contextmenu{z-index:2000;opacity:1;position:fixed;background:#fff;color:#000;font-family:sans-serif;font-size:11px;box-shadow:2px 2px 2px #90908d;padding:2px;border-radius:12px;border:1px solid #c6c6c6;max-width:400px}.menuItems{display:block;color:#555;text-decoration:none;padding:6px 8px 6px 30px;position:relative}.context-menu{display:none;position:absolute;z-index:10}.context-menu__items{list-style:none;margin:0;padding:0}.context-menu__item{display:block;margin-bottom:4px}.container{margin:0 auto;padding:0 24px;max-width:960px}.context-menu__link{display:block;padding:4px 12px;color:#06a;text-decoration:none}.contextmenu_text:hover .divItemsHover{color:#fff;background-color:#06a}.context-menu--active{display:block}#topoDataTableHeader{float:left;min-width:250px;width:auto;height:360px;top:100px;border-bottom-left-radius:13px;border-bottom-right-radius:13px;display:none;background:#fff;border:2px solid gray!important;position:absolute!important}.table-filter-input{height:30px;width:100%;top:40px;border-radius:1px;border-color:#d3d3d3;background-color:#d3d3d3;box-shadow:0 20px 23px 0 var(--shadow);padding-top:3px;padding-left:2px;padding-right:2px}#topoDataTable{float:down;min-width:250px;width:auto;height:300px;top:55px;border-radius:10px;position:absolute!important;overflow:auto;background:#fff;font-family:sans-serif;font-size:16px;color:#06a;overflow-x:scroll}table{width:auto;height:auto;max-height:300px}tr{width:auto;padding:5px}th{width:auto;font-family:sans-serif;font-size:16px;color:#06a;font-weight:700;background-color:#06a}td{width:auto}th{width:auto;font-weight:700;padding:2px;border:1px solid #ccc;text-align:center}.context-menu{border-radius:12px;background:var(--navigation);width:200px;box-shadow:0 20px 23px 0 var(--shadow);position:relative;display:none}.context-menu .menu-options{list-style:none;padding:0}.context-menu .menu-options .menu-option{font-weight:700;font-size:16px;line-height:36px;color:var(--tableText);padding:1px 4px 1px 20px;cursor:pointer}.context-menu .menu-options .menu-option:hover{background:var(--primaryColor);color:var(--navigation)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.context-menu{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.disabled{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none;cursor:pointer;opacity:.6}path:not(.loader path,.highcharts-root path){fill:none;stroke:var(--navigation);stroke-width:5px;color:#fff}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating{animation:rotating 2s linear infinite}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--icon);border-width:4px}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__inner-circle{border-color:var(--icon)}.mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:4px}#mat-radio-2>div>div>div.mdc-radio__background>div.mdc-radio__inner-circle .node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.endpoint circle{stroke:#0273fb!important;stroke-width:12px}.node.service circle{stroke:#08dc5a!important;stroke-width:12px}.node.service-policy circle{stroke:#ff0d49!important;stroke-width:12px}.node.edge-router-policy circle{stroke:#ff8400!important;stroke-width:12px}.node.service-edge-router-policy circle{stroke:#ff5900!important;stroke-width:12px}.text-container{color:var(--tableText);font-size:24px;font-weight:700;margin-left:20px;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}svg>g>g.node:first-of-type.terminate{cursor:pointer}svg>g>g.node:first-of-type.terminate .text-container{cursor:pointer}svg>g>g.node:first-of-type.terminate circle{cursor:pointer}svg>g>g.node:first-of-type.terminate:hover>rect{fill:url(#NodeHoverGradient)}.node>rect{fill:url(#NodeGradient)}.node.terminate{cursor:default;stroke-width:14px}.node.terminate .text-container{cursor:default}.node.terminate circle{cursor:default;stroke-width:14px}.node.terminate:hover>rect{fill:url(#NodeGradient)}.node:hover>rect{fill:url(#NodeHoverGradient)}p-chips.error .p-chips.p-component .p-chips-multiple-container{border-color:var(--red);border-width:2px}.checkboxes.error .mat-checkbox-frame{border-color:var(--red)}.checkboxes.error .mat-checkbox-label{color:var(--red)}.stop1{stop-color:var(--table);stop-opacity:.9}.stop2{stop-color:var(--table);stop-opacity:.65}.stop3{stop-color:var(--table);stop-opacity:0}.stop1a{stop-color:var(--background);stop-opacity:1}.stop2a{stop-color:var(--background);stop-opacity:.7}.stop3a{stop-color:var(--background);stop-opacity:0}\n"] }]
+            args: [{ selector: 'app-network-visualizer', encapsulation: ViewEncapsulation.None, template: "<div class=\"ziti-page-container ziti-identities-container\">\n\n    <div class=\"nf-network-topology-container\" >\n\n      <div class=\"css-header\">{{title}} </div><br>\n\n      <div  class=\"nf-net-vis-controls-header\">\n        <div class=\"nf-topology-zoom-container\">\n          <!--button (click)=\"zoomOut()\" class=\"nf-topology-zoom-button minus\"></button>\n          <button (click)=\"zoomIn()\" class=\"nf-topology-zoom-button plus\"></button-->\n          <div (click)=\"resetTree('Yes')\" class=\"reset-button\" title=\"Reset\"></div>\n        </div>\n        <select\n            (change)=\"resourceTypeChanged()\"\n            [(ngModel)]=\"resourceType\"\n            [ngClass]=\"{ 'resource-type-error': resourceTypeError }\"\n            class=\"resource-type-select\"\n            id=\"ResourceTypeSelect\"\n        >\n          <option value=\"\">Select Resource Type</option>\n          <option value=\"service-policies\">Service Policies</option>\n          <option value=\"services\">Services</option>\n          <option value=\"identities\">Identities</option>\n          <option value=\"edge-routers\">Edge Routers</option>\n          <option value=\"edge-router-policies\">Edge Router Policies</option>\n          <option value=\"service-edge-router-policies\">Service Edge Router Policies</option>\n        </select>\n\n        <div class=\"nf-net-vis-filter-container listBox row\">\n          <input\n              (keyup)=\"nwSearchChange($event)\"\n              [(ngModel)]=\"filterText\"\n              [matAutocomplete]=\"auto\"\n              class=\"nf-topology-filter-input\"\n              id=\"filterText\"\n              matInput\n              placeholder=\"Type to Filter\"\n          />\n\n          <div\n              (click)=\"clearSearchFilter()\"\n              *ngIf=\"filterText !== ''\"\n              class=\"buttonBall close icon-close\"\n              id=\"ClearSearchFilter\"\n          ></div>\n\n          <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"autocompleteSearch($event)\">\n            <mat-option *ngFor=\"let option of autocompleteOptions\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-autocomplete>\n        </div>\n      </div>\n\n      <div class=\"nf-topology-legend\">\n        <div class=\"legend-item\">\n          <div class=\"legend-circle servicepolicies\"></div>\n          <div class=\"legend-text\">Service Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle services\"></div>\n          <div class=\"legend-text\">Services</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle endpoints\"></div>\n          <div class=\"legend-text\">Identities</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle edgerouters\"></div>\n          <div class=\"legend-text\">Edge Routers</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle erpolicies\"></div>\n          <div class=\"legend-text\">Edge Router Policies</div>\n        </div>\n        <div class=\"legend-item\">\n          <div class=\"legend-circle serviceerpolicies\"></div>\n          <div class=\"legend-text\">Service Router Policies</div>\n        </div>\n\n        <div class=\"legend-item\">\n          <div class=\"node-expand-help\"></div>\n          <div class=\"legend-icon-text legend-associated-nodes\">View Associated Nodes</div>\n          <div class=\"legend-icon-pointer\"></div>\n        </div>\n      </div>\n\n      <div class=\"topotip\" id=\"tooltip\"></div>\n      <svg style='pointer-events:all' id=\"NetworkVisualizerSVG\"></svg>\n      <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n    </div>\n\n</div>\n", styles: [".ziti-page-container{height:100%;width:100%;left:0;display:flex;flex-direction:column;position:absolute;padding-top:1px;padding-left:3px;padding-right:3px;top:0}.nf-network-topology-container{overflow:hidden;width:100%;height:100%;background-color:var(--background);z-index:1001;margin:auto;inset:0;padding-top:1px;padding-left:3px;padding-right:3px;background:#ebefff;background-image:linear-gradient(#d1dcff 2px,transparent 0),linear-gradient(90deg,#d1dcff 2px,transparent 0),linear-gradient(#d1dcff 1px,transparent 0),linear-gradient(90deg,#d1dcff 1px,transparent 0);background-size:40px 40px,40px 40px,10px 10px,10px 10px}.css-header{height:50px;font-size:25px;font-weight:600;margin:8px 0 0 10px;font-family:Russo One;color:#0027ab;font-size:30px;text-transform:uppercase;font-weight:400;background-color:transparent}.resource-type-select{width:270px;flex-shrink:0;border-radius:27px;height:51px;margin-left:5px;-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px);background-color:#ffffff80!important;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);color:var(--tableText);padding-left:20px}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right 18px;background-repeat:no-repeat;background-size:18px;padding-right:38px}.no-results-warning{left:440px;font-size:15px;color:var(--tableText);padding-left:20px;padding-top:0;height:-moz-fit-content;height:fit-content;top:1px}.resource-type-error{border-width:3px;border-color:var(--red)!important}.nf-links{stroke:#fff;stroke-opacity:1.6}.nf-net-vis-controls-header{display:flex;flex-direction:row;position:absolute;z-index:99999;flex:1 0 auto;top:60px}.nf-net-vis-filter-container{max-width:490px;margin-top:0;margin-left:10px;flex:1 0 auto}.table-filter-container{max-width:300px;margin-top:0;margin-left:1px;flex:1 0 auto}#ClearSearchFilter{position:absolute;right:15px;top:5px;width:20px;height:20px;font-size:18px;font-weight:600;color:var(--formBase);z-index:99999999}#ClearSearchFilter:hover{filter:brightness(90%)}#ClearSearchFilter:active{transform:translateY(1px);filter:brightness(80%)}#popupTableTitle{width:100%;font-weight:900;display:inline-block;background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);border:2px #d3d3d3!important;text-align:center;border:2px;border-color:#d3d3d3;height:25px;top:2px;color:#fff;padding-right:5px;background:#000;cursor:move}#tra:hover{text-decoration:underline}#CloseDataTable{position:absolute;right:5px;top:-33px;width:25px;height:25px;font-size:15px;color:#fff;z-index:99999999}.copydatatable{width:135px;height:17px;font-size:10pt;font-family:tahoma;top:95%;right:0%;border-radius:5px;background:#fff;border:0px solid gray!important;position:absolute!important;text-transform:uppercase;cursor:pointer;z-index:999}.copydatatable:hover{text-decoration:underline}.nf-topology-filter-input{height:50px;width:485px;border-radius:25px;border-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:10px;padding-right:15px}.nf-topology-select-container{max-width:400px;margin-top:20px;margin-left:20px;flex:1 0 auto}.nf-topology-select-input{height:45px;border-radius:25px;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 20px 23px 0 var(--shadow);padding-left:20px}input:focus,textarea:focus,select:focus{box-shadow:0 20px 23px 0 var(--shadow)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-filter-input{background:var(--visualizerBackground)!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px)}}.nf-topology-zoom-container{display:flex;margin-left:10px;flex:1 0 auto}.nf-topology-zoom-button.minus{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s;background-image:url(/assets/images/Icon_Minus.png);background-size:40%;background-color:var(--red);box-shadow:0 6px 10px 0 var(--redShadow)}.nf-topology-zoom-label{padding-right:10px}.nf-topology-zoom-button{height:50px;width:50px;margin-right:10px;border-radius:55px;border:unset;font-size:40px;font-family:icomoon!important;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:var(--primaryColor);line-height:49px;background-color:var(--navigation);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .5s}.nf-topology-zoom-button.plus:before{content:\"\\e937\"}.nf-topology-zoom-button.minus:before{content:\"\\e943\"}.nf-topology-zoom-button:hover{color:var(--white);background-color:var(--primaryColor);filter:brightness(90%);transition:background-color 1s;transition:.3s}.nf-topology-zoom-button:active{background-color:var(--icon);transform:scale(.97);transition:background-color 1s;transition:.3s}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-zoom-button{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.placeholder{display:flex;align-items:center;justify-content:center;height:800px}.topotip{display:none;position:fixed;background:var(--navigation);border:0px;border-radius:12px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;font-size:15px;font-weight:600;color:var(--tableText);z-index:2000;opacity:1;max-width:400px;overflow:hidden}.nodes{cursor:pointer;box-shadow:0 30px 43px 0 var(--shadow)}.nf-links{cursor:pointer}.linkWidth{color:#fff}.nf-network-topology-container .loader{margin-left:-150px}.loader .bar1{background-color:var(--inputBorder)!important}.loader .bar2{background-color:var(--inputBorder)!important;animation-delay:-.7s}.loader .bar3{background-color:var(--inputBorder)!important;animation-delay:-.6s}.loader .bar4{background-color:var(--inputBorder)!important;animation-delay:-.5s}.loader .bar5{background-color:var(--inputBorder)!important;animation-delay:-.4s}.loader .bar6{background-color:var(--inputBorder)!important;animation-delay:-.3s}.changeView{display:flex;margin-top:32px;margin-left:10px;flex:1 0 auto}.changeView .changeViewLabel{margin-top:3px;margin-left:5px}.node circle{fill:#fff;stroke:#07397d;stroke-width:14px;box-shadow:0 20px 23px 0 var(--shadow)}.node text{font:27px sans-serif;cursor:pointer}.node-text-container{color:var(--tableText);font-size:24px;font-weight:600;margin-left:2px;margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.link{fill:none;stroke:var(--table);stroke-width:5px;color:#fff}.nf-topology-legend{width:230px;border-radius:12px;margin-top:10px;margin-right:10px;position:absolute;top:0;right:0;background:#ffffff80!important;-webkit-backdrop-filter:saturate(110%) blur(5px);backdrop-filter:saturate(110%) blur(15px);border-color:var(--navigation);border-style:solid;border-width:2px;display:inline-block;box-shadow:0 20px 23px 0 var(--shadow);padding:5px 5px 7px}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.nf-topology-legend{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.legend-item{width:100%;height:100%;display:inline-block;position:relative}.legend-itemA{width:100%;height:100%;margin-left:-3px;display:inline-block}.legend-circle{height:12px;width:12px;border-radius:15px;display:inline-block;margin-top:7px}.legend-circle.servicepolicies{background-color:#ff0d49}.legend-circle.services{background-color:#08dc5a}.legend-circle.endpoints{background-color:#0273fb}.legend-circle.edgerouters{background-color:#ffc000}.legend-circle.erpolicies{background-color:#ff8400}.legend-circle.serviceerpolicies{background-color:#ff5900}.legend-text{display:inline-block;font-size:15px;font-weight:600;color:var(--tableText);padding-left:7px;padding-bottom:4px}.legend-icon-text{display:inline-block;font-size:14px;font-weight:600;color:var(--tableText);padding-left:22px;padding-bottom:4px}.legend-icon-text.legend-associated-nodes{padding-left:20px}.legend-icon-pointer{background-size:16px 16px;background-image:url(/assets/svgs/cursor-pointer.svg);position:absolute;z-index:999999;width:20px;height:20px;top:10px;left:2px}.reset-button{height:50px;width:50px;border-radius:50px;margin-right:10px;background-size:contain;background-image:url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 20px 23px 0 var(--shadow);transition:.3s}.node-expand-help{border-radius:20px;border-width:4px;border-color:#08dc5a!important;border-style:solid;box-shadow:0 20px 23px 0 var(--shadow);width:16px;height:16px;position:absolute;background-color:brown;margin-left:-2px;top:2px}.reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}.reset-button:active{transform:scale(.9);transition:.3s}.sign_out_button{background-color:#2fa4e7;padding:16px 10px;color:#fff;float:left;text-decoration:none}.sign_out_button:hover{background-color:#1892d7}.sign_out_button a{color:#fff;text-decoration:none}.contextmenu_mouseout{fill:#f4f4f4;stroke:#fff;stroke-width:1px}.contextmenu_mouseover{fill:#c8c8c8}.menu2{position:fixed;background:#fff;color:#000;cursor:pointer;border:1px black solid}.contextmenu_text{position:fixed;background:var(--navigation);border:1px;border-radius:5px;pointer-events:none;box-shadow:0 20px 23px 0 var(--shadow);transition:background-color .3s;padding:5px;font-size:10px;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:400px}.contextmenu{z-index:2000;opacity:1;position:fixed;background:#fff;color:#000;font-family:sans-serif;font-size:11px;box-shadow:2px 2px 2px #90908d;padding:2px;border-radius:12px;border:1px solid #c6c6c6;max-width:400px}.menuItems{display:block;color:#555;text-decoration:none;padding:6px 8px 6px 30px;position:relative}.context-menu{display:none;position:absolute;z-index:10}.context-menu__items{list-style:none;margin:0;padding:0}.context-menu__item{display:block;margin-bottom:4px}.container{margin:0 auto;padding:0 24px;max-width:960px}.context-menu__link{display:block;padding:4px 12px;color:#06a;text-decoration:none}.contextmenu_text:hover .divItemsHover{color:#fff;background-color:#06a}.context-menu--active{display:block}#topoDataTableHeader{float:left;min-width:250px;width:auto;height:360px;top:100px;border-bottom-left-radius:13px;border-bottom-right-radius:13px;display:none;background:#fff;border:2px solid gray!important;position:absolute!important}.table-filter-input{height:30px;width:100%;top:40px;border-radius:1px;border-color:#d3d3d3;background-color:#d3d3d3;box-shadow:0 20px 23px 0 var(--shadow);padding-top:3px;padding-left:2px;padding-right:2px}#topoDataTable{float:down;min-width:250px;width:auto;height:300px;top:55px;border-radius:10px;position:absolute!important;overflow:auto;background:#fff;font-family:sans-serif;font-size:16px;color:#06a;overflow-x:scroll}table{width:auto;height:auto;max-height:300px}tr{width:auto;padding:5px}th{width:auto;font-family:sans-serif;font-size:16px;color:#06a;font-weight:700;background-color:#06a}td{width:auto}th{width:auto;font-weight:700;padding:2px;border:1px solid #ccc;text-align:center}.context-menu{border-radius:12px;background:var(--navigation);width:200px;box-shadow:0 20px 23px 0 var(--shadow);position:relative;display:none}.context-menu .menu-options{list-style:none;padding:0}.context-menu .menu-options .menu-option{font-weight:700;font-size:16px;line-height:36px;color:var(--tableText);padding:1px 4px 1px 20px;cursor:pointer}.context-menu .menu-options .menu-option:hover{background:var(--primaryColor);color:var(--navigation)}@supports ((-webkit-backdrop-filter: saturate(110%) blur(15px)) or (backdrop-filter: saturate(110%) blur(15px))){.context-menu{background:var(--glass);-webkit-backdrop-filter:saturate(110%) blur(15px);backdrop-filter:saturate(110%) blur(15px)}}.spinner{position:absolute;right:1em;top:1em;display:inline-block;width:32px;height:32px;border-radius:50%;background:transparent;border-top:5px solid var(--placeholder);border-right:5px solid var(--placeholder);border-bottom:5px solid transparent;border-left:5px solid transparent;animation:loading .5s infinite linear}.disabled{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none;cursor:pointer;opacity:.6}path:not(.loader path,.highcharts-root path){fill:none;stroke:var(--navigation);stroke-width:5px;color:#fff}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating{animation:rotating 2s linear infinite}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle{background-color:var(--icon);border-width:4px}.mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__inner-circle{border-color:var(--icon)}.mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:4px}#mat-radio-2>div>div>div.mdc-radio__background>div.mdc-radio__inner-circle .node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.endpoint circle{stroke:#0273fb!important;stroke-width:12px}.node.service circle{stroke:#08dc5a!important;stroke-width:12px}.node.service-policy circle{stroke:#ff0d49!important;stroke-width:12px}.node.edge-router circle{stroke:#ffc000!important;stroke-width:12px}.node.edge-router-policy circle{stroke:#ff8400!important;stroke-width:12px}.node.service-edge-router-policy circle{stroke:#ff5900!important;stroke-width:12px}.text-container{color:var(--tableText);font-size:24px;font-weight:700;margin-left:20px;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}svg>g>g.node:first-of-type.terminate{cursor:pointer}svg>g>g.node:first-of-type.terminate .text-container{cursor:pointer}svg>g>g.node:first-of-type.terminate circle{cursor:pointer}svg>g>g.node:first-of-type.terminate:hover>rect{fill:url(#NodeHoverGradient)}.node>rect{fill:url(#NodeGradient)}.node.terminate{cursor:default;stroke-width:14px}.node.terminate .text-container{cursor:default}.node.terminate circle{cursor:default;stroke-width:14px}.node.terminate:hover>rect{fill:url(#NodeGradient)}.node:hover>rect{fill:url(#NodeHoverGradient)}p-chips.error .p-chips.p-component .p-chips-multiple-container{border-color:var(--red);border-width:2px}.checkboxes.error .mat-checkbox-frame{border-color:var(--red)}.checkboxes.error .mat-checkbox-label{color:var(--red)}.stop1{stop-color:var(--table);stop-opacity:.9}.stop2{stop-color:var(--table);stop-opacity:.65}.stop3{stop-color:var(--table);stop-opacity:0}.stop1a{stop-color:var(--background);stop-opacity:1}.stop2a{stop-color:var(--background);stop-opacity:.7}.stop3a{stop-color:var(--background);stop-opacity:0}.tool-tip-container{font-size:14px;font-family:Open Sans;font-weight:600;font-color:var(--tableText)}.tool-tip-container .prop-row{display:grid;grid-template-columns:1fr 3fr;grid-gap:10px;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:25px;align-items:center;padding:0 10px}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}.tool-tip-container .prop-row .prop-name{grid-area:propName;font-weight:700}.tool-tip-container .prop-row .prop-val{grid-area:propVal;font-weight:400}.tool-tip-container .tooltip-help-text{font-size:12px;padding-left:10px;padding-right:10px;display:flex;height:22px;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -18933,10 +19438,6 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
         this.isLoading = true;
         this.applySelectedAttributes();
         this.svc.save(this.formData).then((result) => {
-            if (result?.close) {
-                this.closeModal(true, true);
-                this.returnToListPage();
-            }
             const data = result?.data?.id ? result.data : result;
             if (!isEmpty(data.id)) {
                 this.formData = data || this.formData;
@@ -18945,6 +19446,10 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
             else {
                 this.initData = this.formData;
             }
+            if (result?.close) {
+                this.closeModal(true, true);
+                this.returnToListPage();
+            }
         }).finally(() => {
             this.isLoading = false;
         });
@@ -19019,7 +19524,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service edge edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"servicesLoading\"\n                            [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["hideOption", "label", "clickable", "isLoading", "allNames", "allowRemove", "tooltip"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service edge edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"servicesLoading\"\n                            [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText"], outputs: ["formViewChange", "actionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "showHeader", "headerActions"], outputs: ["actionRequested"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["hideOption", "label", "clickable", "isLoading", "allNames", "allowRemove", "tooltip"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceEdgeRouterPolicyFormComponent, decorators: [{
             type: Component,
@@ -19028,7 +19533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service edge edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"servicesLoading\"\n                            [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>" }]
+                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service edge edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [helpText]=\"'Preview list of all Services that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"servicesLoading\"\n                            [allNames]=\"svc.associatedServiceNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>" }]
         }], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -20829,7 +21334,7 @@ class ZitiControllerDataService extends ZitiDataService {
                     break;
                 case 'SELECT':
                 case 'COMBO':
-                    const val = isNumber(filter.value) ? `${filter.value}` : `"${filter.value}"`;
+                    const val = (isNumber(filter.value) || isBoolean(filter.value)) ? `${filter.value}` : `"${filter.value}"`;
                     filterVal = `${filter.columnId} = ${val}`;
                     break;
                 case 'DATETIME':
@@ -20838,6 +21343,9 @@ class ZitiControllerDataService extends ZitiDataService {
                 case 'ATTRIBUTE':
                     filterVal = this.getAttributeFilter(filter.value, filter.columnId);
                     break;
+                case 'BOOLEAN':
+                    filterVal = `${filter.columnId}=${filter.value}`;
+                    break;
                 default:
                     filterVal = `${filter.columnId} contains "${filter.value}"`;
                     break;
@@ -20917,5 +21425,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BooleanToggleInputComponent, COMPONENTS, CardListComponent, CheckboxListInputComponent, ConfigurationFormComponent, ConfigurationsPageComponent, CsvDownloadService, DEACTIVATE_GUARD, DeactivateGuardService, EDGE_ROUTER_EXTENSION_SERVICE, EDGE_ROUTER_POLICY_EXTENSION_SERVICE, EdgeRouter, EdgeRouterFormComponent, EdgeRouterFormService, EdgeRouterPoliciesPageComponent, EdgeRouterPoliciesPageService, EdgeRouterPolicyFormComponent, EdgeRouterPolicyFormService, EdgeRoutersPageComponent, EdgeRoutersPageService, Entity, ExtendableComponent, ExtensionsNoopService, FormFieldContainerComponent, FormFieldToggleComponent, FormHeaderComponent, GrowlerComponent, GrowlerModel, GrowlerModule, GrowlerService, IDENTITY_EXTENSION_SERVICE, IdentitiesPageComponent, IdentitiesPageService, Identity$1 as Identity, IdentityFormComponent, IdentityFormService, IdentityServicePathComponent, ListPageComponent, ListPageServiceClass, LoadingIndicatorComponent, LoggerService, LoginServiceClass, NetworkVisualizerComponent, NodeDataService, NodeWrapperService, NoopLoginService, NoopTabInterceptorService, NumberInputComponent, ObjectComponent, OpenZitiConsoleLibModule, PasswordInputComponent, ProjectableForm, ProtocolAddressPortInputComponent, ResetEnrollmentService, SERVICE_EDGE_ROUTER_POLICY_EXTENSION_SERVICE, SERVICE_EXTENSION_SERVICE, SERVICE_POLICY_EXTENSION_SERVICE, SETTINGS_SERVICE, SHAREDZ_EXTENSION, SelectorInputComponent, ServiceEdgeRouterPoliciesPageComponent, ServiceEdgeRouterPoliciesPageService, ServiceEdgeRouterPolicyFormComponent, ServiceEdgeRouterPolicyFormService, ServiceFormComponent, ServiceFormService, ServicePoliciesPageComponent, ServicePoliciesPageService, ServicePolicyFormComponent, ServicePolicyFormService, ServicesPageComponent, ServicesPageService, SettingsService, SettingsServiceClass, SideBannerComponent, SideModalComponent, SideNavbarComponent, SideToolbarComponent, SimpleServiceComponent, StringInputComponent, TabNameService, TextListInputComponent, VERSION, VisualizerServiceClass, ZAC_LOGIN_SERVICE, ZAC_WRAPPER_SERVICE, ZITI_DATA_SERVICE, ZITI_DOMAIN_CONTROLLER, ZITI_NAVIGATOR, ZITI_TAB_OVERRIDES, ZITI_URLS, ZacRoutingModule, ZacWrapperComponent, ZacWrapperService, ZacWrapperServiceClass, ZitiControllerDataService, ZitiDataService, playerFactory };
+export { BooleanToggleInputComponent, COMPONENTS, CardListComponent, CheckboxListInputComponent, ConfigurationFormComponent, ConfigurationsPageComponent, CsvDownloadService, DEACTIVATE_GUARD, DataTableFilterService, DeactivateGuardService, EDGE_ROUTER_EXTENSION_SERVICE, EDGE_ROUTER_POLICY_EXTENSION_SERVICE, EdgeRouter, EdgeRouterFormComponent, EdgeRouterFormService, EdgeRouterPoliciesPageComponent, EdgeRouterPoliciesPageService, EdgeRouterPolicyFormComponent, EdgeRouterPolicyFormService, EdgeRoutersPageComponent, EdgeRoutersPageService, Entity, ExtendableComponent, ExtensionsNoopService, FormFieldContainerComponent, FormFieldToggleComponent, FormHeaderComponent, GrowlerComponent, GrowlerModel, GrowlerModule, GrowlerService, IDENTITY_EXTENSION_SERVICE, IdentitiesPageComponent, IdentitiesPageService, Identity$1 as Identity, IdentityFormComponent, IdentityFormService, IdentityServicePathComponent, ListPageComponent, ListPageServiceClass, LoadingIndicatorComponent, LoggerService, LoginServiceClass, NetworkVisualizerComponent, NodeDataService, NodeWrapperService, NoopLoginService, NoopTabInterceptorService, NumberInputComponent, ObjectComponent, OpenZitiConsoleLibModule, PasswordInputComponent, ProjectableForm, ProtocolAddressPortInputComponent, ResetEnrollmentService, SERVICE_EDGE_ROUTER_POLICY_EXTENSION_SERVICE, SERVICE_EXTENSION_SERVICE, SERVICE_POLICY_EXTENSION_SERVICE, SETTINGS_SERVICE, SHAREDZ_EXTENSION, SelectorInputComponent, ServiceEdgeRouterPoliciesPageComponent, ServiceEdgeRouterPoliciesPageService, ServiceEdgeRouterPolicyFormComponent, ServiceEdgeRouterPolicyFormService, ServiceFormComponent, ServiceFormService, ServicePoliciesPageComponent, ServicePoliciesPageService, ServicePolicyFormComponent, ServicePolicyFormService, ServicesPageComponent, ServicesPageService, SettingsService, SettingsServiceClass, SideBannerComponent, SideModalComponent, SideNavbarComponent, SideToolbarComponent, SimpleServiceComponent, StringInputComponent, TabNameService, TextListInputComponent, VERSION, VisualizerServiceClass, ZAC_LOGIN_SERVICE, ZAC_WRAPPER_SERVICE, ZITI_DATA_SERVICE, ZITI_DOMAIN_CONTROLLER, ZITI_NAVIGATOR, ZITI_TAB_OVERRIDES, ZITI_URLS, ZacRoutingModule, ZacWrapperComponent, ZacWrapperService, ZacWrapperServiceClass, ZitiControllerDataService, ZitiDataService, playerFactory };
 //# sourceMappingURL=openziti-ziti-console-lib.mjs.map