@openziti/ziti-console-lib 0.12.4 → 0.12.6

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

@@ -4,7 +4,7 @@ import * as i4 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { Subject, BehaviorSubject, firstValueFrom, tap, map, Subscription } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import _, { isEmpty, isNumber, includes, isNil, defer, cloneDeep, set, invoke, get, debounce, isNaN as isNaN$1, forEach, isString, isFunction, unset, isBoolean, keys, isEqual, isObject, isArray, forOwn, invert, some, filter, sortedUniq, map as map$1, trim, delay } from 'lodash';
+import _, { isEmpty, isNumber, includes, isNil, defer, cloneDeep, set, invoke, get, debounce, isNaN as isNaN$1, forEach, isString, isFunction, unset, isBoolean, keys, isEqual, isObject, isArray, forOwn, invert, some, filter, sortBy, sortedUniq, map as map$1, trim, delay } from 'lodash';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpParams, HttpClientModule, HttpHeaders } from '@angular/common/http';
 import * as i1 from 'ngx-logger';
@@ -2777,387 +2777,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: LoggerService }, { type: GrowlerService }, { type: SettingsServiceClass }, { type: i1$1.HttpClient }, { type: i4.Router }]; } });
 
-/*
-    Copyright NetFoundry Inc.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-    https://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-let ListPageServiceClass = class ListPageServiceClass {
-    constructor(settings, filterService, csvDownloadService, extensionService, router) {
-        this.settings = settings;
-        this.filterService = filterService;
-        this.csvDownloadService = csvDownloadService;
-        this.extensionService = extensionService;
-        this.router = router;
-        this.CSV_COLUMNS = [
-            { label: 'Name', path: 'name' },
-            { label: 'ID', path: 'id' },
-            { label: 'Created At', path: 'createdAt' }
-        ];
-        this.basePath = '';
-        this.headerComponentParams = {
-            filterType: 'TEXTINPUT',
-            enableSorting: true
-        };
-        this.DEFAULT_PAGING = {
-            filter: "",
-            noSearch: false,
-            order: "asc",
-            page: 1,
-            searchOn: "name",
-            sort: "name",
-            total: 50
-        };
-        this.totalCount = 0;
-        this.menuItems = [];
-        this.tableHeaderActions = [];
-        this.currentSettings = {};
-        this.sideModalOpen = false;
-        this.currentSort = {
-            sortBy: 'name',
-            ordering: 'asc'
-        };
-        this.nameColumnRenderer = (row) => {
-            return `<div class="col cell-name-renderer" data-id="${row?.data?.id}">
-                    <strong>${row?.data?.name}</strong>
-                </div>`;
-        };
-        this.rolesRenderer = (row) => {
-            const colId = row.column.colId;
-            let roles = '';
-            if (row?.data?.[colId + 'Display']) {
-                row?.data?.[colId + 'Display'].forEach((attr) => {
-                    const className = attr?.name?.indexOf('@') === 0 ? 'attag' : 'hashtag';
-                    roles += `<div>
-                            <div class="${className}">${attr.name}</div>
-                            <div class="tag-name">${attr.name}</div>
-                          </div>`;
-                });
-            }
-            else {
-                row?.data?.[colId]?.forEach((attr) => {
-                    const className = attr.indexOf('@') === 0 ? 'attag' : 'hashtag';
-                    roles += `<div>
-                            <div class="${className}">${attr}</div>
-                            <div class="tag-name">${attr}</div>
-                          </div>`;
-                });
-            }
-            return roles;
-        };
-        this.createdAtFormatter = (row) => {
-            return moment(row?.data?.createdAt).local().format('M/D/YYYY HH:mm A');
-        };
-        this.dataService = inject(ZITI_DATA_SERVICE);
-        this.settings.settingsChange.subscribe((settings) => {
-            if (!isEmpty(this.settings?.settings?.session?.id) || this.dataService.dataServiceType === ZitiDataService.NODE_DATA_SERVICE_TYPE) {
-                if ((this.currentSettings?.session?.id !== settings?.session?.id || this.dataService.dataServiceType === ZitiDataService.NODE_DATA_SERVICE_TYPE) && this.refreshData) {
-                    this.refreshData();
-                }
-            }
-            this.currentSettings = settings;
-        });
-        router.events.subscribe((event) => {
-            if (event => event instanceof NavigationEnd) {
-                if (!event?.snapshot?.routeConfig?.path) {
-                    return;
-                }
-                const pathSegments = event.snapshot.routeConfig.path.split('/');
-                this.basePath = pathSegments[0];
-            }
-        });
-    }
-    initMenuActions() {
-        if (this.extensionService.listActions) {
-            this.menuItems = this.menuItems.map((item) => {
-                this.extensionService.listActions.forEach((extItem) => {
-                    if (item.action === extItem.action) {
-                        item = extItem;
-                    }
-                });
-                return item;
-            });
-            let filteredActions = this.extensionService.listActions.filter((extItem) => {
-                return !this.menuItems.some((item) => {
-                    return item.action === extItem.action;
-                });
-            });
-            this.menuItems = [...this.menuItems, ...filteredActions];
-        }
-    }
-    addListItemExtensionActions(row) {
-        if (this.extensionService.listActions) {
-            const keys = this.extensionService.listActions.map((action) => {
-                return action.action;
-            });
-            row.actionList = [...row.actionList, ...keys];
-        }
-    }
-    downloadItems(selectedItems) {
-        this.csvDownloadService.download(this.resourceType, selectedItems, this.CSV_COLUMNS, false, false, undefined, false);
-    }
-    downloadAllItems() {
-        const paging = cloneDeep(this.DEFAULT_PAGING);
-        paging.total = -1;
-        return this.getTableData(this.resourceType, paging, undefined, undefined)
-            .then((results) => {
-            return this.downloadItems(results?.data);
-        });
-    }
-    getTableData(resourceType, paging, filters, sort) {
-        if (!paging) {
-            paging = { ...this.DEFAULT_PAGING };
-        }
-        if (sort) {
-            paging.sort = sort.sortBy;
-            paging.order = sort.ordering;
-        }
-        for (let idx = 0; idx < filters?.length; idx++) {
-            paging.noSearch = false;
-            paging.searchOn = filters[idx].columnId;
-            paging.filter = filters[idx].value;
-            paging.rawFilter = true;
-        }
-        this.filterService.filtering.next(true);
-        return this.dataService.get(resourceType, paging, filters).finally(() => {
-            this.filterService.filtering.next(false);
-        });
-    }
-    checkForAssociatedEntities(items, type, associatedType) {
-        const itemsWithAssociations = [];
-        const promises = [];
-        items.forEach((config) => {
-            const prom = this.dataService.getSubdata(type, config.id, associatedType).then((result) => {
-                const services = result.data || [];
-                if (services.length > 0) {
-                    itemsWithAssociations.push(config);
-                }
-            });
-            promises.push(prom);
-        });
-        return Promise.all(promises).then(() => {
-            return itemsWithAssociations;
-        });
-    }
-    removeItems(ids) {
-        const promises = [];
-        ids.forEach((id) => {
-            const prom = this.dataService.delete(this.resourceType, id);
-            promises.push(prom);
-        });
-        return Promise.all(promises);
-    }
-    sort(sortBy, ordering = 'asc') {
-        this.currentSort = { sortBy, ordering };
-        if (this.refreshData)
-            this.refreshData({ sortBy, ordering });
-    }
-    hasSelectedText() {
-        let text = '';
-        if (window.getSelection) {
-            text = window.getSelection().toString();
-        }
-        return text?.length > 0;
-    }
-    getNetworkJwt() {
-        return this.dataService.get('network-jwts', {}, []);
-    }
-    openEditForm(itemId = '', basePath) {
-        if (isEmpty(itemId)) {
-            itemId = 'create';
-        }
-        basePath = basePath ? basePath : this.basePath;
-        this.router?.navigateByUrl(`${basePath}/${itemId}`);
-    }
-    remToPx(remValue) {
-        const rootFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
-        return remValue * rootFontSize;
-    }
-    ;
-};
-ListPageServiceClass = __decorate([
-    __param(0, Inject(SETTINGS_SERVICE)),
-    __param(3, Inject(SHAREDZ_EXTENSION))
-], ListPageServiceClass);
-
-class ListPageComponent {
-    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 = '-';
-        this.itemsSelected = false;
-        this.selectedItems = [];
-        this.columnDefs = [];
-        this.rowData = [];
-        this.reservedNames = [];
-        this.filterApplied = false;
-        this.modalOpen = false;
-        this.gridObj = {};
-        this.subscription = new Subscription();
-        this.growlerSvc = inject(GrowlerService);
-    }
-    ngOnInit() {
-        this.filterService.currentPage = 1;
-        this.svc.sideModalOpen = false;
-        this.svc.refreshData = this.refreshData.bind(this);
-        this.svc.initMenuActions();
-        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();
-        }));
-        this.filterService.pageChanged.subscribe(page => {
-            this.refreshData();
-        });
-        this.subscription.add(this.consoleEvents.closeSideModal.subscribe((event) => {
-            this.closeModal();
-        }));
-        this.subscription.add(this.consoleEvents.refreshData.subscribe((event) => {
-            this.refreshData();
-        }));
-        this.consoleEvents.enableZACEvents();
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    itemToggled(item) {
-        this.updateSelectedItems(item);
-    }
-    updateSelectedItems(toggledItem) {
-        let itemSelected = false;
-        this.selectedItems = [];
-        this.rowData.forEach((item) => {
-            const reserved = this.reservedNames?.includes(item.name);
-            if (reserved) {
-                item.selected = false;
-            }
-            else if (toggledItem?.id && toggledItem?.id === item?.id) {
-                item.selected = toggledItem.selected;
-            }
-            if (item.selected) {
-                itemSelected = true;
-                this.selectedItems.push(item);
-            }
-        });
-        this.itemsSelected = itemSelected;
-    }
-    refreshData(sort, hardRefresh = false) {
-        this.isLoading = true;
-        sort = sort ? sort : this.svc.currentSort;
-        this.svc.getData(this.filterService.filters, sort, this.filterService.currentPage)
-            .then((data) => {
-            this.rowData = [];
-            if (hardRefresh) {
-                defer(() => {
-                    this.rowData = data.data;
-                });
-            }
-            else {
-                this.rowData = data.data;
-            }
-            this.totalCount = data.meta.pagination.totalCount;
-            this.startCount = (data.meta.pagination.offset + 1);
-            if (this.startCount + data.meta.pagination.limit > this.totalCount) {
-                this.endCount = this.totalCount;
-            }
-            else {
-                this.endCount = data.meta.pagination.offset + data.meta.pagination.limit;
-            }
-            this.updateSelectedItems();
-            this.refreshCells();
-        }).finally(() => {
-            this.isLoading = false;
-        });
-    }
-    downloadAllItems() {
-        this.isLoading = true;
-        this.svc.downloadAllItems().then(() => {
-            const growlerData = new GrowlerModel('success', 'Success', `Download Finished`, `The requested items have been downloaded`);
-            this.growlerSvc.show(growlerData);
-        }).catch(() => {
-            const growlerData = new GrowlerModel('error', 'Error', `Download Failed`, `Failed to retrieve items for download`);
-            this.growlerSvc.show(growlerData);
-        }).finally(() => {
-            this.isLoading = false;
-        });
-    }
-    openBulkDelete(selectedItems, entityTypeLabel = 'item(s)') {
-        const selectedIds = selectedItems.map((row) => {
-            return row.id;
-        });
-        const selectedNames = selectedItems.map((item) => {
-            return item.name;
-        });
-        const countLabel = selectedItems.length > 1 ? selectedItems.length : '';
-        const data = {
-            appendId: 'DeleteServices',
-            title: 'Delete',
-            message: `Are you sure you would like to delete the following ${countLabel} ${entityTypeLabel}?`,
-            bulletList: selectedNames,
-            confirmLabel: 'Yes',
-            cancelLabel: 'Oops, no get me out of here',
-            imageUrl: '../../assets/svgs/Confirm_Trash.svg',
-            showCancelLink: true
-        };
-        this.dialogRef = this.dialogForm.open(ConfirmComponent, {
-            data: data,
-            autoFocus: false,
-        });
-        this.dialogRef.afterClosed().subscribe((result) => {
-            if (result?.confirmed) {
-                this.svc.removeItems(selectedIds).then(() => {
-                    this.refreshData(this.svc.currentSort);
-                });
-            }
-        });
-    }
-    handleExtensionActions(event) {
-        let extensionFound = false;
-        if (this.extensionService?.listActions?.length > 0) {
-            this.extensionService?.listActions?.forEach((extAction) => {
-                if (extAction?.action === event?.action) {
-                    extAction.callback(event.item);
-                    extensionFound = true;
-                }
-            });
-        }
-        return extensionFound;
-    }
-    gridReady(event) {
-        this.gridObj = event;
-    }
-    refreshCells() {
-        defer(() => {
-            var params = {
-                force: true,
-            };
-            this.gridObj?.api?.refreshCells(params);
-        });
-    }
-    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: i5$1.MatDialog }, { type: undefined }]; } });
-
 /*
     Copyright NetFoundry Inc.
 
@@ -3352,157 +2971,557 @@ class TableColumnDefaultComponent {
                 this.sortDir = undefined;
             }
             else {
-                this.sortDir = _.get(event, 'sortDir');
+                this.sortDir = _.get(event, 'sortDir');
+            }
+        });
+        headerParams.api.addEventListener('columnEverythingChanged', (event) => {
+            _.forEach(event.api?.columnModel?.columnDefs, colDef => {
+                if (this.columnDef.colId === colDef.colId && colDef.headerComponentParams?.filterOptions) {
+                    this.updateFilterOptions();
+                }
+            });
+        });
+    }
+    ngAfterViewInit() {
+        if (this.showBubble) {
+            // this.updateStatusClass();
+        }
+    }
+    pin() {
+        this.columnDef.pinColumn(this.columnObj, this.pinned ? false : 'left');
+        this.pinned = !this.pinned;
+    }
+    hide() {
+        this.headerParams.api.zitiHideColumn(this.columnObj, false);
+    }
+    sort(event) {
+        if (!this.columnDef.sortable) {
+            return;
+        }
+        const targetId = _.get(event, 'target.id');
+        if (_.includes([`HeaderStatus_${this.columnDef.colId}`, 'SearchFilter', `HeaderFilterIcon_${this.columnDef.colId}`], targetId)) {
+            return;
+        }
+        if (_.isEmpty(this.sortDir)) {
+            this.sortDir = 'asc';
+        }
+        else if (this.sortDir === 'asc') {
+            this.sortDir = 'desc';
+        }
+        else {
+            this.sortDir = 'asc';
+        }
+        _.set(this.headerParams, 'api.sortDir', this.sortDir);
+        _.set(this.headerParams, 'api.sortDir', this.columnDef.colId);
+        if (this.columnDef.sortColumn) {
+            this.columnDef.sortColumn(this.columnDef.colId, this.sortDir, this.headerParams.api);
+            this.headerParams.api.dispatchEvent({
+                type: 'sortChanged',
+                columnDef: this.columnDef,
+                sortDir: this.sortDir,
+            });
+        }
+    }
+    toggleFilter(event) {
+        this.showFilter = !this.showFilter;
+        if (this.filterType === 'SELECT' || this.filterType === 'COMBO' || this.filterType === 'DATETIME' || this.filterType === 'ATTRIBUTE') {
+            if (this.showFilter) {
+                this.updateFilterOptions();
+                _.invoke(this.headerParams, 'api.openHeaderFilter', event, this.filterOptions, this.filterType, this.columnDef?.colId, this.headerName, this.columnDef?.headerComponentParams);
+            }
+            else {
+                _.invoke(this.headerParams, 'api.closeHeaderFilter', event);
+            }
+        }
+        else if (this.filterType === 'CUSTOM') {
+            if (this.showFilter) {
+                this.updateFilterOptions();
+                _.invoke(this.headerParams, 'column.colDef.headerComponentParams.openHeaderFilter', event, this.filterOptions);
+            }
+            else {
+                _.invoke(this.headerParams, 'column.colDef.headerComponentParams.closeHeaderFilter', event);
+            }
+        }
+    }
+    toggleSecondaryFilter(event) {
+        this.showSecondaryFilter = !this.showSecondaryFilter;
+        if (this.showSecondaryFilter) {
+            const options = [
+                {
+                    label: 'Any',
+                    columnId: this.onlineStatusFilter,
+                    filterName: 'Status',
+                    value: undefined,
+                    bubbleClass: 'v7OnlineOffline',
+                },
+                {
+                    label: 'Online',
+                    columnId: this.onlineStatusFilter,
+                    filterName: 'Status',
+                    value: 'true',
+                    bubbleClass: 'v7Online',
+                },
+                {
+                    label: 'Offline',
+                    columnId: this.onlineStatusFilter,
+                    filterName: 'Status',
+                    value: 'false',
+                    bubbleClass: 'v7Offline',
+                },
+            ];
+            _.invoke(this.headerParams, 'api.openHeaderFilter', event, options);
+        }
+        else {
+            _.invoke(this.headerParams, 'api.closeHeaderFilter', event);
+        }
+    }
+    hideFilter(event) {
+        const targetId = _.get(event, 'target.id');
+        if (_.includes([`HeaderFilterButton_${this.columnDef.colId}`, `HeaderFilterIcon_${this.columnDef.colId}`], targetId)) {
+            return;
+        }
+        else if (targetId === this.columnDef?.colId && this.filterType === 'COMBO') {
+            return;
+        }
+        _.invoke(this.headerParams, 'api.closeHeaderFilter', event);
+        this.comboActive = false;
+        this.showFilter = false;
+        this.showSecondaryFilter = false;
+    }
+    refresh(params) {
+        return true;
+    }
+    openGridMenu() {
+        if (!this._showColumnMenu) {
+            return;
+        }
+        this._showColumnMenu(this.menuButton.nativeElement);
+    }
+    updateFilterOptions() {
+        let options = [];
+        if (this.headerParams.getFilterOptions) {
+            options = this.headerParams.getFilterOptions();
+        }
+        else {
+            options = this.headerParams.filterOptions;
+        }
+        this.filterOptions = _.map(options, (option) => {
+            option.columnId = this.columnDef.colId;
+            option.filterName = this.headerName;
+            option.type = this.filterType;
+            return option;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableColumnDefaultComponent, deps: [{ token: DataTableFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableColumnDefaultComponent, selector: "app-table-column-default", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }], ngImport: i0, template: "<div\n  (click)=\"sort($event)\"\n  [ngClass]=\"{ 'nf-can-sort': enableSorting }\"\n  class=\"ag-cell-label-container ag-header-cell-sorted-none\"\n  id=\"TableHeaderContainer_{{ columnDef.colId }}\"\n>\n    <span\n      #menuButton\n      (click)=\"openGridMenu()\"\n      *ngIf=\"false\"\n      class=\"ag-header-icon ag-header-cell-menu-button\"\n      id=\"HeaderMenu_{{ columnDef.colId }}\"\n      ref=\"eMenu\"\n    >\n        <span class=\"ag-icon ag-icon-menu\" unselectable=\"on\"></span>\n    </span>\n  <span\n    (click)=\"pin()\"\n    class=\"ag-header-icon ag-header-col-pin-button\"\n    id=\"HeaderPin_{{ columnDef.colId }}\"\n    title=\"{{ pinned ? 'Unpin Column' : 'Pin Column' }}\"\n  >\n        <span class=\"ag-icon ag-icon-pin\"></span>\n    </span>\n  <span\n    (click)=\"hide()\"\n    class=\"ag-header-icon ag-header-col-hide-button\"\n    id=\"HeaderHide_{{ columnDef.colId }}\"\n    title=\"Hide Column\"\n  >\n        <span class=\"ag-icon ag-icon-eye-slash\"></span>\n    </span>\n  <div class=\"ag-header-cell-label\" ref=\"eLabel\" unselectable=\"on\">\n        <span\n          *ngIf=\"!headerParams.filterType\"\n          [ngClass]=\"{ 'ag-filter-applied': filterApplied }\"\n          class=\"ag-header-icon ag-header-col-filter-button\"\n          id=\"HeaderFilterSpacer_{{ columnDef.colId }}\"\n        >\n            <span class=\"ag-icon ag-icon-filter\" id=\"HeaderFilterSpace_{{ columnDef.colId }}\" style=\"opacity: 0\"></span>\n        </span>\n    <span\n      (click)=\"toggleFilter($event)\"\n      *ngIf=\"headerParams.filterType\"\n      [ngClass]=\"{ 'ag-filter-applied': filterApplied }\"\n      class=\"ag-header-icon ag-header-col-filter-button\"\n      id=\"HeaderFilterButton_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-filter\" id=\"HeaderFilterIcon_{{ columnDef.colId }}\"></span>\n        </span>\n    <div\n      (clickOutside)=\"hideFilter($event)\"\n      [ngClass]=\"{ 'show-input-filter': showFilter }\"\n      class=\"header-text-container text-input-filter\"\n    >\n            <span\n              (click)=\"toggleSecondaryFilter($event)\"\n              *ngIf=\"showBubble\"\n              [ngClass]=\"statusClass\"\n              class=\"bubble\"\n              id=\"HeaderStatus_{{ columnDef.colId }}\"\n            >\n                <svg *ngIf=\"showLoader\" class=\"circular\" viewBox=\"25 25 50 50\">\n                    <circle\n                      class=\"path\"\n                      cx=\"50\"\n                      cy=\"50\"\n                      fill=\"none\"\n                      r=\"20\"\n                      stroke-miterlimit=\"10\"\n                      stroke-width=\"3\"\n                    ></circle>\n                </svg>\n            </span>\n      <app-table-column-filter\n        *ngIf=\"((showFilter || comboActive) && !(filterType === 'COMBO' && !comboActive)) && filterType !== 'SELECT' && filterType !== 'CUSTOM'\"\n        [columnDef]=\"columnDef\"\n        [filterName]=\"headerName\"\n        [filterString]=\"''\"\n        [openStatusMenu]=\"toggleSecondaryFilter.bind(this)\"\n        [type]=\"filterType\"\n      ></app-table-column-filter>\n      <span\n        *ngIf=\"((!showFilter && !comboActive) || (filterType === 'COMBO' && !comboActive)) || filterType === 'SELECT' || filterType === 'CUSTOM'\"\n        [title]=\"headerName\"\n        class=\"ag-header-cell-text\"\n        id=\"HeaderName_{{ columnDef.colId }}\"\n        unselectable=\"on\"\n      >{{ headerName }}</span\n      >\n    </div>\n    <span\n      *ngIf=\"enableSorting && !showFilter\"\n      [ngClass]=\"{ 'ag-hidden': sortDir !== 'desc' }\"\n      class=\"ag-header-icon ag-header-label-icon ag-sort-ascending-icon\"\n      id=\"HeaderSortAsc_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-asc\" unselectable=\"on\"></span>\n        </span>\n    <span\n      *ngIf=\"enableSorting && !showFilter\"\n      [ngClass]=\"{ 'ag-hidden': sortDir !== 'asc' }\"\n      class=\"ag-header-icon ag-header-label-icon ag-sort-descending-icon\"\n      id=\"HeaderSortDesc_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-desc\" unselectable=\"on\"></span>\n        </span>\n  </div>\n</div>\n", styles: [".ag-header-sort-click-space{display:flex;height:100%;position:relative;width:100%}.ag-header-col-filter-button.ag-filter-applied{opacity:1!important}.Online,.v7Online,.v7Offline{margin-right:.5rem!important;height:.875rem!important;width:.875rem!important}.Online:hover,.v7Online:hover,.v7Offline:hover{border-color:var(--primaryColor)!important;border-style:solid;border-width:var(--inputBorderWidth);height:.625rem!important;width:.625rem!important}.header-text-container{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.text-input-filter{display:flex;flex-direction:row;align-items:center}.text-input-filter .bubble{margin-top:.5rem;margin-left:.0625rem;margin-right:.5rem;width:.875rem;height:.875rem;flex-shrink:0}.ag-header-col-filter-button{margin-top:.5rem}.ag-header-cell-text{margin-top:.125rem;width:100%}.ag-header-cell-label .ag-sort-descending-icon{margin-top:1.25rem!important}.show-input-filter{width:100%}.filterButton{background-image:none}.filterButton .options{position:fixed}\n"], 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: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: TableColumnFilterComponent, selector: "app-table-column-filter", inputs: ["type", "filterString", "filterName", "columnDef", "openStatusMenu", "dateFilter"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableColumnDefaultComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-column-default', template: "<div\n  (click)=\"sort($event)\"\n  [ngClass]=\"{ 'nf-can-sort': enableSorting }\"\n  class=\"ag-cell-label-container ag-header-cell-sorted-none\"\n  id=\"TableHeaderContainer_{{ columnDef.colId }}\"\n>\n    <span\n      #menuButton\n      (click)=\"openGridMenu()\"\n      *ngIf=\"false\"\n      class=\"ag-header-icon ag-header-cell-menu-button\"\n      id=\"HeaderMenu_{{ columnDef.colId }}\"\n      ref=\"eMenu\"\n    >\n        <span class=\"ag-icon ag-icon-menu\" unselectable=\"on\"></span>\n    </span>\n  <span\n    (click)=\"pin()\"\n    class=\"ag-header-icon ag-header-col-pin-button\"\n    id=\"HeaderPin_{{ columnDef.colId }}\"\n    title=\"{{ pinned ? 'Unpin Column' : 'Pin Column' }}\"\n  >\n        <span class=\"ag-icon ag-icon-pin\"></span>\n    </span>\n  <span\n    (click)=\"hide()\"\n    class=\"ag-header-icon ag-header-col-hide-button\"\n    id=\"HeaderHide_{{ columnDef.colId }}\"\n    title=\"Hide Column\"\n  >\n        <span class=\"ag-icon ag-icon-eye-slash\"></span>\n    </span>\n  <div class=\"ag-header-cell-label\" ref=\"eLabel\" unselectable=\"on\">\n        <span\n          *ngIf=\"!headerParams.filterType\"\n          [ngClass]=\"{ 'ag-filter-applied': filterApplied }\"\n          class=\"ag-header-icon ag-header-col-filter-button\"\n          id=\"HeaderFilterSpacer_{{ columnDef.colId }}\"\n        >\n            <span class=\"ag-icon ag-icon-filter\" id=\"HeaderFilterSpace_{{ columnDef.colId }}\" style=\"opacity: 0\"></span>\n        </span>\n    <span\n      (click)=\"toggleFilter($event)\"\n      *ngIf=\"headerParams.filterType\"\n      [ngClass]=\"{ 'ag-filter-applied': filterApplied }\"\n      class=\"ag-header-icon ag-header-col-filter-button\"\n      id=\"HeaderFilterButton_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-filter\" id=\"HeaderFilterIcon_{{ columnDef.colId }}\"></span>\n        </span>\n    <div\n      (clickOutside)=\"hideFilter($event)\"\n      [ngClass]=\"{ 'show-input-filter': showFilter }\"\n      class=\"header-text-container text-input-filter\"\n    >\n            <span\n              (click)=\"toggleSecondaryFilter($event)\"\n              *ngIf=\"showBubble\"\n              [ngClass]=\"statusClass\"\n              class=\"bubble\"\n              id=\"HeaderStatus_{{ columnDef.colId }}\"\n            >\n                <svg *ngIf=\"showLoader\" class=\"circular\" viewBox=\"25 25 50 50\">\n                    <circle\n                      class=\"path\"\n                      cx=\"50\"\n                      cy=\"50\"\n                      fill=\"none\"\n                      r=\"20\"\n                      stroke-miterlimit=\"10\"\n                      stroke-width=\"3\"\n                    ></circle>\n                </svg>\n            </span>\n      <app-table-column-filter\n        *ngIf=\"((showFilter || comboActive) && !(filterType === 'COMBO' && !comboActive)) && filterType !== 'SELECT' && filterType !== 'CUSTOM'\"\n        [columnDef]=\"columnDef\"\n        [filterName]=\"headerName\"\n        [filterString]=\"''\"\n        [openStatusMenu]=\"toggleSecondaryFilter.bind(this)\"\n        [type]=\"filterType\"\n      ></app-table-column-filter>\n      <span\n        *ngIf=\"((!showFilter && !comboActive) || (filterType === 'COMBO' && !comboActive)) || filterType === 'SELECT' || filterType === 'CUSTOM'\"\n        [title]=\"headerName\"\n        class=\"ag-header-cell-text\"\n        id=\"HeaderName_{{ columnDef.colId }}\"\n        unselectable=\"on\"\n      >{{ headerName }}</span\n      >\n    </div>\n    <span\n      *ngIf=\"enableSorting && !showFilter\"\n      [ngClass]=\"{ 'ag-hidden': sortDir !== 'desc' }\"\n      class=\"ag-header-icon ag-header-label-icon ag-sort-ascending-icon\"\n      id=\"HeaderSortAsc_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-asc\" unselectable=\"on\"></span>\n        </span>\n    <span\n      *ngIf=\"enableSorting && !showFilter\"\n      [ngClass]=\"{ 'ag-hidden': sortDir !== 'asc' }\"\n      class=\"ag-header-icon ag-header-label-icon ag-sort-descending-icon\"\n      id=\"HeaderSortDesc_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-desc\" unselectable=\"on\"></span>\n        </span>\n  </div>\n</div>\n", styles: [".ag-header-sort-click-space{display:flex;height:100%;position:relative;width:100%}.ag-header-col-filter-button.ag-filter-applied{opacity:1!important}.Online,.v7Online,.v7Offline{margin-right:.5rem!important;height:.875rem!important;width:.875rem!important}.Online:hover,.v7Online:hover,.v7Offline:hover{border-color:var(--primaryColor)!important;border-style:solid;border-width:var(--inputBorderWidth);height:.625rem!important;width:.625rem!important}.header-text-container{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.text-input-filter{display:flex;flex-direction:row;align-items:center}.text-input-filter .bubble{margin-top:.5rem;margin-left:.0625rem;margin-right:.5rem;width:.875rem;height:.875rem;flex-shrink:0}.ag-header-col-filter-button{margin-top:.5rem}.ag-header-cell-text{margin-top:.125rem;width:100%}.ag-header-cell-label .ag-sort-descending-icon{margin-top:1.25rem!important}.show-input-filter{width:100%}.filterButton{background-image:none}.filterButton .options{position:fixed}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataTableFilterService }]; }, propDecorators: { menuButton: [{
+                type: ViewChild,
+                args: ['menuButton']
+            }] } });
+
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+let ListPageServiceClass = class ListPageServiceClass {
+    constructor(settings, filterService, csvDownloadService, extensionService, router) {
+        this.settings = settings;
+        this.filterService = filterService;
+        this.csvDownloadService = csvDownloadService;
+        this.extensionService = extensionService;
+        this.router = router;
+        this.CSV_COLUMNS = [
+            { label: 'Name', path: 'name' },
+            { label: 'ID', path: 'id' },
+            { label: 'Created At', path: 'createdAt' }
+        ];
+        this.basePath = '';
+        this.headerComponentParams = {
+            filterType: 'TEXTINPUT',
+            enableSorting: true
+        };
+        this.ID_COLUMN_DEF = {
+            colId: 'id',
+            field: 'id',
+            headerName: 'ID',
+            headerComponent: TableColumnDefaultComponent,
+            headerComponentParams: this.headerComponentParams,
+            cellRendererParams: { pathRoot: this.basePath, showIdentityIcons: true },
+            onCellClicked: (data) => {
+                if (this.hasSelectedText()) {
+                    return;
+                }
+                this.openEditForm(data?.data?.id);
+            },
+            resizable: true,
+            cellClass: 'nf-cell-vert-align tCol',
+            sortable: true,
+            filter: true,
+            hide: true,
+        };
+        this.DEFAULT_PAGING = {
+            filter: "",
+            noSearch: false,
+            order: "asc",
+            page: 1,
+            searchOn: "name",
+            sort: "name",
+            total: 50
+        };
+        this.totalCount = 0;
+        this.menuItems = [];
+        this.tableHeaderActions = [];
+        this.currentSettings = {};
+        this.sideModalOpen = false;
+        this.currentSort = {
+            sortBy: 'name',
+            ordering: 'asc'
+        };
+        this.nameColumnRenderer = (row) => {
+            return `<div class="col cell-name-renderer" data-id="${row?.data?.id}">
+                    <strong>${row?.data?.name}</strong>
+                </div>`;
+        };
+        this.rolesRenderer = (row) => {
+            const colId = row.column.colId;
+            let roles = '';
+            if (row?.data?.[colId + 'Display']) {
+                row?.data?.[colId + 'Display'].forEach((attr) => {
+                    const className = attr?.name?.indexOf('@') === 0 ? 'attag' : 'hashtag';
+                    roles += `<div>
+                            <div class="${className}">${attr.name}</div>
+                            <div class="tag-name">${attr.name}</div>
+                          </div>`;
+                });
+            }
+            else {
+                row?.data?.[colId]?.forEach((attr) => {
+                    const className = attr.indexOf('@') === 0 ? 'attag' : 'hashtag';
+                    roles += `<div>
+                            <div class="${className}">${attr}</div>
+                            <div class="tag-name">${attr}</div>
+                          </div>`;
+                });
+            }
+            return roles;
+        };
+        this.createdAtFormatter = (row) => {
+            return moment(row?.data?.createdAt).local().format('M/D/YYYY HH:mm A');
+        };
+        this.dataService = inject(ZITI_DATA_SERVICE);
+        this.settings.settingsChange.subscribe((settings) => {
+            if (!isEmpty(this.settings?.settings?.session?.id) || this.dataService.dataServiceType === ZitiDataService.NODE_DATA_SERVICE_TYPE) {
+                if ((this.currentSettings?.session?.id !== settings?.session?.id || this.dataService.dataServiceType === ZitiDataService.NODE_DATA_SERVICE_TYPE) && this.refreshData) {
+                    this.refreshData();
+                }
             }
+            this.currentSettings = settings;
         });
-        headerParams.api.addEventListener('columnEverythingChanged', (event) => {
-            _.forEach(event.api?.columnModel?.columnDefs, colDef => {
-                if (this.columnDef.colId === colDef.colId && colDef.headerComponentParams?.filterOptions) {
-                    this.updateFilterOptions();
+        router.events.subscribe((event) => {
+            if (event => event instanceof NavigationEnd) {
+                if (!event?.snapshot?.routeConfig?.path) {
+                    return;
                 }
-            });
+                const pathSegments = event.snapshot.routeConfig.path.split('/');
+                this.basePath = pathSegments[0];
+            }
         });
     }
-    ngAfterViewInit() {
-        if (this.showBubble) {
-            // this.updateStatusClass();
+    initMenuActions() {
+        if (this.extensionService.listActions) {
+            this.menuItems = this.menuItems.map((item) => {
+                this.extensionService.listActions.forEach((extItem) => {
+                    if (item.action === extItem.action) {
+                        item = extItem;
+                    }
+                });
+                return item;
+            });
+            let filteredActions = this.extensionService.listActions.filter((extItem) => {
+                return !this.menuItems.some((item) => {
+                    return item.action === extItem.action;
+                });
+            });
+            this.menuItems = [...this.menuItems, ...filteredActions];
         }
     }
-    pin() {
-        this.columnDef.pinColumn(this.columnObj, this.pinned ? false : 'left');
-        this.pinned = !this.pinned;
+    addListItemExtensionActions(row) {
+        if (this.extensionService.listActions) {
+            const keys = this.extensionService.listActions.map((action) => {
+                return action.action;
+            });
+            row.actionList = [...row.actionList, ...keys];
+        }
     }
-    hide() {
-        this.headerParams.api.zitiHideColumn(this.columnObj, false);
+    downloadItems(selectedItems) {
+        this.csvDownloadService.download(this.resourceType, selectedItems, this.CSV_COLUMNS, false, false, undefined, false);
     }
-    sort(event) {
-        if (!this.columnDef.sortable) {
-            return;
-        }
-        const targetId = _.get(event, 'target.id');
-        if (_.includes([`HeaderStatus_${this.columnDef.colId}`, 'SearchFilter', `HeaderFilterIcon_${this.columnDef.colId}`], targetId)) {
-            return;
-        }
-        if (_.isEmpty(this.sortDir)) {
-            this.sortDir = 'asc';
+    downloadAllItems() {
+        const paging = cloneDeep(this.DEFAULT_PAGING);
+        paging.total = -1;
+        return this.getTableData(this.resourceType, paging, undefined, undefined)
+            .then((results) => {
+            return this.downloadItems(results?.data);
+        });
+    }
+    getTableData(resourceType, paging, filters, sort) {
+        if (!paging) {
+            paging = { ...this.DEFAULT_PAGING };
         }
-        else if (this.sortDir === 'asc') {
-            this.sortDir = 'desc';
+        if (sort) {
+            paging.sort = sort.sortBy;
+            paging.order = sort.ordering;
         }
-        else {
-            this.sortDir = 'asc';
+        for (let idx = 0; idx < filters?.length; idx++) {
+            paging.noSearch = false;
+            paging.searchOn = filters[idx].columnId;
+            paging.filter = filters[idx].value;
+            paging.rawFilter = true;
         }
-        _.set(this.headerParams, 'api.sortDir', this.sortDir);
-        _.set(this.headerParams, 'api.sortDir', this.columnDef.colId);
-        if (this.columnDef.sortColumn) {
-            this.columnDef.sortColumn(this.columnDef.colId, this.sortDir, this.headerParams.api);
-            this.headerParams.api.dispatchEvent({
-                type: 'sortChanged',
-                columnDef: this.columnDef,
-                sortDir: this.sortDir,
+        this.filterService.filtering.next(true);
+        return this.dataService.get(resourceType, paging, filters).finally(() => {
+            this.filterService.filtering.next(false);
+        });
+    }
+    checkForAssociatedEntities(items, type, associatedType) {
+        const itemsWithAssociations = [];
+        const promises = [];
+        items.forEach((config) => {
+            const prom = this.dataService.getSubdata(type, config.id, associatedType).then((result) => {
+                const services = result.data || [];
+                if (services.length > 0) {
+                    itemsWithAssociations.push(config);
+                }
             });
+            promises.push(prom);
+        });
+        return Promise.all(promises).then(() => {
+            return itemsWithAssociations;
+        });
+    }
+    removeItems(ids) {
+        const promises = [];
+        ids.forEach((id) => {
+            const prom = this.dataService.delete(this.resourceType, id);
+            promises.push(prom);
+        });
+        return Promise.all(promises);
+    }
+    sort(sortBy, ordering = 'asc') {
+        this.currentSort = { sortBy, ordering };
+        if (this.refreshData)
+            this.refreshData({ sortBy, ordering });
+    }
+    hasSelectedText() {
+        let text = '';
+        if (window.getSelection) {
+            text = window.getSelection().toString();
         }
+        return text?.length > 0;
     }
-    toggleFilter(event) {
-        this.showFilter = !this.showFilter;
-        if (this.filterType === 'SELECT' || this.filterType === 'COMBO' || this.filterType === 'DATETIME' || this.filterType === 'ATTRIBUTE') {
-            if (this.showFilter) {
-                this.updateFilterOptions();
-                _.invoke(this.headerParams, 'api.openHeaderFilter', event, this.filterOptions, this.filterType, this.columnDef?.colId, this.headerName, this.columnDef?.headerComponentParams);
+    getNetworkJwt() {
+        return this.dataService.get('network-jwts', {}, []);
+    }
+    openEditForm(itemId = '', basePath) {
+        if (isEmpty(itemId)) {
+            itemId = 'create';
+        }
+        basePath = basePath ? basePath : this.basePath;
+        this.router?.navigateByUrl(`${basePath}/${itemId}`);
+    }
+    remToPx(remValue) {
+        const rootFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+        return remValue * rootFontSize;
+    }
+    ;
+};
+ListPageServiceClass = __decorate([
+    __param(0, Inject(SETTINGS_SERVICE)),
+    __param(3, Inject(SHAREDZ_EXTENSION))
+], ListPageServiceClass);
+
+class ListPageComponent {
+    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 = '-';
+        this.itemsSelected = false;
+        this.selectedItems = [];
+        this.columnDefs = [];
+        this.rowData = [];
+        this.reservedNames = [];
+        this.filterApplied = false;
+        this.modalOpen = false;
+        this.gridObj = {};
+        this.subscription = new Subscription();
+        this.growlerSvc = inject(GrowlerService);
+    }
+    ngOnInit() {
+        this.filterService.currentPage = 1;
+        this.svc.sideModalOpen = false;
+        this.svc.refreshData = this.refreshData.bind(this);
+        this.svc.initMenuActions();
+        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();
+        }));
+        this.filterService.pageChanged.subscribe(page => {
+            this.refreshData();
+        });
+        this.subscription.add(this.consoleEvents.closeSideModal.subscribe((event) => {
+            this.closeModal();
+        }));
+        this.subscription.add(this.consoleEvents.refreshData.subscribe((event) => {
+            this.refreshData();
+        }));
+        this.consoleEvents.enableZACEvents();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    itemToggled(item) {
+        this.updateSelectedItems(item);
+    }
+    updateSelectedItems(toggledItem) {
+        let itemSelected = false;
+        this.selectedItems = [];
+        this.rowData.forEach((item) => {
+            const reserved = this.reservedNames?.includes(item.name);
+            if (reserved) {
+                item.selected = false;
+            }
+            else if (toggledItem?.id && toggledItem?.id === item?.id) {
+                item.selected = toggledItem.selected;
+            }
+            if (item.selected) {
+                itemSelected = true;
+                this.selectedItems.push(item);
+            }
+        });
+        this.itemsSelected = itemSelected;
+    }
+    refreshData(sort, hardRefresh = false) {
+        this.isLoading = true;
+        sort = sort ? sort : this.svc.currentSort;
+        this.svc.getData(this.filterService.filters, sort, this.filterService.currentPage)
+            .then((data) => {
+            this.rowData = [];
+            if (hardRefresh) {
+                defer(() => {
+                    this.rowData = data.data;
+                });
             }
             else {
-                _.invoke(this.headerParams, 'api.closeHeaderFilter', event);
+                this.rowData = data.data;
             }
-        }
-        else if (this.filterType === 'CUSTOM') {
-            if (this.showFilter) {
-                this.updateFilterOptions();
-                _.invoke(this.headerParams, 'column.colDef.headerComponentParams.openHeaderFilter', event, this.filterOptions);
+            this.totalCount = data.meta.pagination.totalCount;
+            this.startCount = (data.meta.pagination.offset + 1);
+            if (this.startCount + data.meta.pagination.limit > this.totalCount) {
+                this.endCount = this.totalCount;
             }
             else {
-                _.invoke(this.headerParams, 'column.colDef.headerComponentParams.closeHeaderFilter', event);
+                this.endCount = data.meta.pagination.offset + data.meta.pagination.limit;
             }
-        }
-    }
-    toggleSecondaryFilter(event) {
-        this.showSecondaryFilter = !this.showSecondaryFilter;
-        if (this.showSecondaryFilter) {
-            const options = [
-                {
-                    label: 'Any',
-                    columnId: this.onlineStatusFilter,
-                    filterName: 'Status',
-                    value: undefined,
-                    bubbleClass: 'v7OnlineOffline',
-                },
-                {
-                    label: 'Online',
-                    columnId: this.onlineStatusFilter,
-                    filterName: 'Status',
-                    value: 'true',
-                    bubbleClass: 'v7Online',
-                },
-                {
-                    label: 'Offline',
-                    columnId: this.onlineStatusFilter,
-                    filterName: 'Status',
-                    value: 'false',
-                    bubbleClass: 'v7Offline',
-                },
-            ];
-            _.invoke(this.headerParams, 'api.openHeaderFilter', event, options);
-        }
-        else {
-            _.invoke(this.headerParams, 'api.closeHeaderFilter', event);
-        }
+            this.updateSelectedItems();
+            this.refreshCells();
+        }).finally(() => {
+            this.isLoading = false;
+        });
     }
-    hideFilter(event) {
-        const targetId = _.get(event, 'target.id');
-        if (_.includes([`HeaderFilterButton_${this.columnDef.colId}`, `HeaderFilterIcon_${this.columnDef.colId}`], targetId)) {
-            return;
-        }
-        else if (targetId === this.columnDef?.colId && this.filterType === 'COMBO') {
-            return;
-        }
-        _.invoke(this.headerParams, 'api.closeHeaderFilter', event);
-        this.comboActive = false;
-        this.showFilter = false;
-        this.showSecondaryFilter = false;
+    downloadAllItems() {
+        this.isLoading = true;
+        this.svc.downloadAllItems().then(() => {
+            const growlerData = new GrowlerModel('success', 'Success', `Download Finished`, `The requested items have been downloaded`);
+            this.growlerSvc.show(growlerData);
+        }).catch(() => {
+            const growlerData = new GrowlerModel('error', 'Error', `Download Failed`, `Failed to retrieve items for download`);
+            this.growlerSvc.show(growlerData);
+        }).finally(() => {
+            this.isLoading = false;
+        });
     }
-    refresh(params) {
-        return true;
+    openBulkDelete(selectedItems, entityTypeLabel = 'item(s)') {
+        const selectedIds = selectedItems.map((row) => {
+            return row.id;
+        });
+        const selectedNames = selectedItems.map((item) => {
+            return item.name;
+        });
+        const countLabel = selectedItems.length > 1 ? selectedItems.length : '';
+        const data = {
+            appendId: 'DeleteServices',
+            title: 'Delete',
+            message: `Are you sure you would like to delete the following ${countLabel} ${entityTypeLabel}?`,
+            bulletList: selectedNames,
+            confirmLabel: 'Yes',
+            cancelLabel: 'Oops, no get me out of here',
+            imageUrl: '../../assets/svgs/Confirm_Trash.svg',
+            showCancelLink: true
+        };
+        this.dialogRef = this.dialogForm.open(ConfirmComponent, {
+            data: data,
+            autoFocus: false,
+        });
+        this.dialogRef.afterClosed().subscribe((result) => {
+            if (result?.confirmed) {
+                this.svc.removeItems(selectedIds).then(() => {
+                    this.refreshData(this.svc.currentSort);
+                });
+            }
+        });
     }
-    openGridMenu() {
-        if (!this._showColumnMenu) {
-            return;
+    handleExtensionActions(event) {
+        let extensionFound = false;
+        if (this.extensionService?.listActions?.length > 0) {
+            this.extensionService?.listActions?.forEach((extAction) => {
+                if (extAction?.action === event?.action) {
+                    extAction.callback(event.item);
+                    extensionFound = true;
+                }
+            });
         }
-        this._showColumnMenu(this.menuButton.nativeElement);
+        return extensionFound;
     }
-    updateFilterOptions() {
-        let options = [];
-        if (this.headerParams.getFilterOptions) {
-            options = this.headerParams.getFilterOptions();
-        }
-        else {
-            options = this.headerParams.filterOptions;
-        }
-        this.filterOptions = _.map(options, (option) => {
-            option.columnId = this.columnDef.colId;
-            option.filterName = this.headerName;
-            option.type = this.filterType;
-            return option;
+    gridReady(event) {
+        this.gridObj = event;
+    }
+    refreshCells() {
+        defer(() => {
+            var params = {
+                force: true,
+            };
+            this.gridObj?.api?.refreshCells(params);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableColumnDefaultComponent, deps: [{ token: DataTableFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableColumnDefaultComponent, selector: "app-table-column-default", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }], ngImport: i0, template: "<div\n  (click)=\"sort($event)\"\n  [ngClass]=\"{ 'nf-can-sort': enableSorting }\"\n  class=\"ag-cell-label-container ag-header-cell-sorted-none\"\n  id=\"TableHeaderContainer_{{ columnDef.colId }}\"\n>\n    <span\n      #menuButton\n      (click)=\"openGridMenu()\"\n      *ngIf=\"false\"\n      class=\"ag-header-icon ag-header-cell-menu-button\"\n      id=\"HeaderMenu_{{ columnDef.colId }}\"\n      ref=\"eMenu\"\n    >\n        <span class=\"ag-icon ag-icon-menu\" unselectable=\"on\"></span>\n    </span>\n  <span\n    (click)=\"pin()\"\n    class=\"ag-header-icon ag-header-col-pin-button\"\n    id=\"HeaderPin_{{ columnDef.colId }}\"\n    title=\"{{ pinned ? 'Unpin Column' : 'Pin Column' }}\"\n  >\n        <span class=\"ag-icon ag-icon-pin\"></span>\n    </span>\n  <span\n    (click)=\"hide()\"\n    class=\"ag-header-icon ag-header-col-hide-button\"\n    id=\"HeaderHide_{{ columnDef.colId }}\"\n    title=\"Hide Column\"\n  >\n        <span class=\"ag-icon ag-icon-eye-slash\"></span>\n    </span>\n  <div class=\"ag-header-cell-label\" ref=\"eLabel\" unselectable=\"on\">\n        <span\n          *ngIf=\"!headerParams.filterType\"\n          [ngClass]=\"{ 'ag-filter-applied': filterApplied }\"\n          class=\"ag-header-icon ag-header-col-filter-button\"\n          id=\"HeaderFilterSpacer_{{ columnDef.colId }}\"\n        >\n            <span class=\"ag-icon ag-icon-filter\" id=\"HeaderFilterSpace_{{ columnDef.colId }}\" style=\"opacity: 0\"></span>\n        </span>\n    <span\n      (click)=\"toggleFilter($event)\"\n      *ngIf=\"headerParams.filterType\"\n      [ngClass]=\"{ 'ag-filter-applied': filterApplied }\"\n      class=\"ag-header-icon ag-header-col-filter-button\"\n      id=\"HeaderFilterButton_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-filter\" id=\"HeaderFilterIcon_{{ columnDef.colId }}\"></span>\n        </span>\n    <div\n      (clickOutside)=\"hideFilter($event)\"\n      [ngClass]=\"{ 'show-input-filter': showFilter }\"\n      class=\"header-text-container text-input-filter\"\n    >\n            <span\n              (click)=\"toggleSecondaryFilter($event)\"\n              *ngIf=\"showBubble\"\n              [ngClass]=\"statusClass\"\n              class=\"bubble\"\n              id=\"HeaderStatus_{{ columnDef.colId }}\"\n            >\n                <svg *ngIf=\"showLoader\" class=\"circular\" viewBox=\"25 25 50 50\">\n                    <circle\n                      class=\"path\"\n                      cx=\"50\"\n                      cy=\"50\"\n                      fill=\"none\"\n                      r=\"20\"\n                      stroke-miterlimit=\"10\"\n                      stroke-width=\"3\"\n                    ></circle>\n                </svg>\n            </span>\n      <app-table-column-filter\n        *ngIf=\"((showFilter || comboActive) && !(filterType === 'COMBO' && !comboActive)) && filterType !== 'SELECT' && filterType !== 'CUSTOM'\"\n        [columnDef]=\"columnDef\"\n        [filterName]=\"headerName\"\n        [filterString]=\"''\"\n        [openStatusMenu]=\"toggleSecondaryFilter.bind(this)\"\n        [type]=\"filterType\"\n      ></app-table-column-filter>\n      <span\n        *ngIf=\"((!showFilter && !comboActive) || (filterType === 'COMBO' && !comboActive)) || filterType === 'SELECT' || filterType === 'CUSTOM'\"\n        [title]=\"headerName\"\n        class=\"ag-header-cell-text\"\n        id=\"HeaderName_{{ columnDef.colId }}\"\n        unselectable=\"on\"\n      >{{ headerName }}</span\n      >\n    </div>\n    <span\n      *ngIf=\"enableSorting && !showFilter\"\n      [ngClass]=\"{ 'ag-hidden': sortDir !== 'desc' }\"\n      class=\"ag-header-icon ag-header-label-icon ag-sort-ascending-icon\"\n      id=\"HeaderSortAsc_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-asc\" unselectable=\"on\"></span>\n        </span>\n    <span\n      *ngIf=\"enableSorting && !showFilter\"\n      [ngClass]=\"{ 'ag-hidden': sortDir !== 'asc' }\"\n      class=\"ag-header-icon ag-header-label-icon ag-sort-descending-icon\"\n      id=\"HeaderSortDesc_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-desc\" unselectable=\"on\"></span>\n        </span>\n  </div>\n</div>\n", styles: [".ag-header-sort-click-space{display:flex;height:100%;position:relative;width:100%}.ag-header-col-filter-button.ag-filter-applied{opacity:1!important}.Online,.v7Online,.v7Offline{margin-right:.5rem!important;height:.875rem!important;width:.875rem!important}.Online:hover,.v7Online:hover,.v7Offline:hover{border-color:var(--primaryColor)!important;border-style:solid;border-width:var(--inputBorderWidth);height:.625rem!important;width:.625rem!important}.header-text-container{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.text-input-filter{display:flex;flex-direction:row;align-items:center}.text-input-filter .bubble{margin-top:.5rem;margin-left:.0625rem;margin-right:.5rem;width:.875rem;height:.875rem;flex-shrink:0}.ag-header-col-filter-button{margin-top:.5rem}.ag-header-cell-text{margin-top:.125rem;width:100%}.ag-header-cell-label .ag-sort-descending-icon{margin-top:1.25rem!important}.show-input-filter{width:100%}.filterButton{background-image:none}.filterButton .options{position:fixed}\n"], 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: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: TableColumnFilterComponent, selector: "app-table-column-filter", inputs: ["type", "filterString", "filterName", "columnDef", "openStatusMenu", "dateFilter"] }] }); }
+    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: TableColumnDefaultComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-table-column-default', template: "<div\n  (click)=\"sort($event)\"\n  [ngClass]=\"{ 'nf-can-sort': enableSorting }\"\n  class=\"ag-cell-label-container ag-header-cell-sorted-none\"\n  id=\"TableHeaderContainer_{{ columnDef.colId }}\"\n>\n    <span\n      #menuButton\n      (click)=\"openGridMenu()\"\n      *ngIf=\"false\"\n      class=\"ag-header-icon ag-header-cell-menu-button\"\n      id=\"HeaderMenu_{{ columnDef.colId }}\"\n      ref=\"eMenu\"\n    >\n        <span class=\"ag-icon ag-icon-menu\" unselectable=\"on\"></span>\n    </span>\n  <span\n    (click)=\"pin()\"\n    class=\"ag-header-icon ag-header-col-pin-button\"\n    id=\"HeaderPin_{{ columnDef.colId }}\"\n    title=\"{{ pinned ? 'Unpin Column' : 'Pin Column' }}\"\n  >\n        <span class=\"ag-icon ag-icon-pin\"></span>\n    </span>\n  <span\n    (click)=\"hide()\"\n    class=\"ag-header-icon ag-header-col-hide-button\"\n    id=\"HeaderHide_{{ columnDef.colId }}\"\n    title=\"Hide Column\"\n  >\n        <span class=\"ag-icon ag-icon-eye-slash\"></span>\n    </span>\n  <div class=\"ag-header-cell-label\" ref=\"eLabel\" unselectable=\"on\">\n        <span\n          *ngIf=\"!headerParams.filterType\"\n          [ngClass]=\"{ 'ag-filter-applied': filterApplied }\"\n          class=\"ag-header-icon ag-header-col-filter-button\"\n          id=\"HeaderFilterSpacer_{{ columnDef.colId }}\"\n        >\n            <span class=\"ag-icon ag-icon-filter\" id=\"HeaderFilterSpace_{{ columnDef.colId }}\" style=\"opacity: 0\"></span>\n        </span>\n    <span\n      (click)=\"toggleFilter($event)\"\n      *ngIf=\"headerParams.filterType\"\n      [ngClass]=\"{ 'ag-filter-applied': filterApplied }\"\n      class=\"ag-header-icon ag-header-col-filter-button\"\n      id=\"HeaderFilterButton_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-filter\" id=\"HeaderFilterIcon_{{ columnDef.colId }}\"></span>\n        </span>\n    <div\n      (clickOutside)=\"hideFilter($event)\"\n      [ngClass]=\"{ 'show-input-filter': showFilter }\"\n      class=\"header-text-container text-input-filter\"\n    >\n            <span\n              (click)=\"toggleSecondaryFilter($event)\"\n              *ngIf=\"showBubble\"\n              [ngClass]=\"statusClass\"\n              class=\"bubble\"\n              id=\"HeaderStatus_{{ columnDef.colId }}\"\n            >\n                <svg *ngIf=\"showLoader\" class=\"circular\" viewBox=\"25 25 50 50\">\n                    <circle\n                      class=\"path\"\n                      cx=\"50\"\n                      cy=\"50\"\n                      fill=\"none\"\n                      r=\"20\"\n                      stroke-miterlimit=\"10\"\n                      stroke-width=\"3\"\n                    ></circle>\n                </svg>\n            </span>\n      <app-table-column-filter\n        *ngIf=\"((showFilter || comboActive) && !(filterType === 'COMBO' && !comboActive)) && filterType !== 'SELECT' && filterType !== 'CUSTOM'\"\n        [columnDef]=\"columnDef\"\n        [filterName]=\"headerName\"\n        [filterString]=\"''\"\n        [openStatusMenu]=\"toggleSecondaryFilter.bind(this)\"\n        [type]=\"filterType\"\n      ></app-table-column-filter>\n      <span\n        *ngIf=\"((!showFilter && !comboActive) || (filterType === 'COMBO' && !comboActive)) || filterType === 'SELECT' || filterType === 'CUSTOM'\"\n        [title]=\"headerName\"\n        class=\"ag-header-cell-text\"\n        id=\"HeaderName_{{ columnDef.colId }}\"\n        unselectable=\"on\"\n      >{{ headerName }}</span\n      >\n    </div>\n    <span\n      *ngIf=\"enableSorting && !showFilter\"\n      [ngClass]=\"{ 'ag-hidden': sortDir !== 'desc' }\"\n      class=\"ag-header-icon ag-header-label-icon ag-sort-ascending-icon\"\n      id=\"HeaderSortAsc_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-asc\" unselectable=\"on\"></span>\n        </span>\n    <span\n      *ngIf=\"enableSorting && !showFilter\"\n      [ngClass]=\"{ 'ag-hidden': sortDir !== 'asc' }\"\n      class=\"ag-header-icon ag-header-label-icon ag-sort-descending-icon\"\n      id=\"HeaderSortDesc_{{ columnDef.colId }}\"\n    >\n            <span class=\"ag-icon ag-icon-desc\" unselectable=\"on\"></span>\n        </span>\n  </div>\n</div>\n", styles: [".ag-header-sort-click-space{display:flex;height:100%;position:relative;width:100%}.ag-header-col-filter-button.ag-filter-applied{opacity:1!important}.Online,.v7Online,.v7Offline{margin-right:.5rem!important;height:.875rem!important;width:.875rem!important}.Online:hover,.v7Online:hover,.v7Offline:hover{border-color:var(--primaryColor)!important;border-style:solid;border-width:var(--inputBorderWidth);height:.625rem!important;width:.625rem!important}.header-text-container{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.text-input-filter{display:flex;flex-direction:row;align-items:center}.text-input-filter .bubble{margin-top:.5rem;margin-left:.0625rem;margin-right:.5rem;width:.875rem;height:.875rem;flex-shrink:0}.ag-header-col-filter-button{margin-top:.5rem}.ag-header-cell-text{margin-top:.125rem;width:100%}.ag-header-cell-label .ag-sort-descending-icon{margin-top:1.25rem!important}.show-input-filter{width:100%}.filterButton{background-image:none}.filterButton .options{position:fixed}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataTableFilterService }]; }, propDecorators: { menuButton: [{
-                type: ViewChild,
-                args: ['menuButton']
-            }] } });
+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: i5$1.MatDialog }, { type: undefined }]; } });
 
 let Service$1 = class Service {
     constructor() {
@@ -4857,7 +4876,8 @@ class ConfigurationsPageService extends ListPageServiceClass {
                 valueFormatter: this.createdAtFormatter,
                 resizable: true,
                 cellClass: 'nf-cell-vert-align tCol',
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     get typeHeaderComponentParams() {
@@ -5874,7 +5894,8 @@ class IdentitiesPageService extends ListPageServiceClass {
                 resizable: true,
                 cellClass: 'nf-cell-vert-align tCol',
                 width: 100,
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort, page) {
@@ -6408,7 +6429,8 @@ class EdgeRoutersPageService extends ListPageServiceClass {
                 cellRenderer: 'cellTokenComponent',
                 resizable: true,
                 cellClass: 'nf-cell-vert-align tCol',
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
         if (this.extService.processTableColumns) {
             tableColumns = this.extService.processTableColumns(tableColumns);
@@ -9873,8 +9895,14 @@ class IdentityServicePathHelper {
             node.id = ePoint.id;
             node.name = ePoint.name;
             node.type = 'Identity';
-            node.apiSession = ePoint.hasApiSession === false ? 'No' : 'Yes';
-            node.routerConnection = ePoint.hasEdgeRouterConnection === false ? 'No' : 'Yes';
+            if (_.has(ePoint, 'edgeRouterConnectionStatus')) {
+                node.routerConnection = ePoint.edgeRouterConnectionStatus === 'offline' ? 'No' : 'Yes';
+                node.apiSession = node.routerConnection;
+            }
+            else {
+                node.routerConnection = ePoint['hasEdgeRouterConnection'] === false ? 'No' : 'Yes';
+                node.apiSession = ePoint['hasApiSession'] === false ? 'No' : 'Yes';
+            }
             node.os = ePoint.envInfo ? ePoint.envInfo.os : '';
             node.mfaEnabled = ePoint.isMfaEnabled;
             node.status = ePoint.envInfo && ePoint.envInfo.os !== null ? 'Registered' : 'Un-Registered';
@@ -9933,7 +9961,7 @@ class IdentityServicePathHelper {
             else if (endpointNode.apiSession === 'No') {
                 linkstate = 0;
             }
-            else if (endpointNode.status === 'Registered' && endpointNode.apiSession === 'Yes') {
+            else if (endpointNode.status === 'Registered' && endpointNode.routerConnection === 'Yes') {
                 linkstate = 1;
             }
             else {
@@ -9994,6 +10022,7 @@ class IdentityServicePathComponent {
         this.router = router;
         this.dialogRef = dialogRef;
         this.data = data;
+        this.isDarkMode = false;
         this.refreshRotate = false;
         this.closeRotate = true;
         this.filterText = 'fetching services..';
@@ -10014,6 +10043,8 @@ class IdentityServicePathComponent {
         this.getEndpointNetworkAsCode();
         this.autocompleteOptions = [];
         this.isLoading = true;
+        const bgCol = d3.color(d3.select('body').style("background-color")).formatHex();
+        this.isDarkMode = bgCol == '#18191d' ? true : false;
     }
     getEndpointNetworkAsCode() {
         const pagesize = 500;
@@ -10273,16 +10304,15 @@ class IdentityServicePathComponent {
         link.each(function (d, i) {
             const _this = d3.select(this);
             if (d.status === 1) {
-                let doInUsage = true; // false;
+                let doInUsage = true;
                 _this
                     .append('text')
-                    // .text(d.netspeed)
                     .style('fill', 'rgb(255,198,22)')
                     .style('font-size', '11');
                 _this
                     .append('rect')
                     .attr('fill', function (d) {
-                    return '#555';
+                    return 'white';
                 })
                     .attr('width', function (d) {
                     if (doInUsage) {
@@ -10364,14 +10394,12 @@ class IdentityServicePathComponent {
             .attr('y', -25)
             .attr('width', '40')
             .attr('height', '40');
-        // node.append('title') .text(function (d) {return d.name;});
         node
             .append('text')
             .attr('x', 10)
             .attr('y', 12)
-            .style('font-weight', '600')
+            .attr('fill', 'var(--tableText)')
             .text(function (d) {
-            // const name = d.type.includes('Service') ? d.alias : d.name;
             return d.name;
         });
         simulation.nodes(nodes).on('tick', ticked);
@@ -10462,7 +10490,7 @@ class IdentityServicePathComponent {
             }
         }
         function drawTooltip(event, d, endpointUtlizationJson) {
-            document.getElementById('epTooltip').innerHTML = readKeyValues(d, endpointUtlizationJson); // readObjectValues(d);
+            document.getElementById('epTooltip').innerHTML = readKeyValues(d, endpointUtlizationJson);
             tooltip.style('display', 'block');
             tooltip.style('white-space', 'pre-wrap');
             const x = event.pageX + 'px';
@@ -10495,35 +10523,35 @@ class IdentityServicePathComponent {
                 else if (k === 'children') {
                     const kVal = d[k];
                     if (kVal && kVal !== '') {
-                        info = info + '<div class="prop-row"><div class="prop-name">' + k + ':</div><div class="prop-val">' + kVal.length + '</div></div>';
+                        info = info + '<div class="prop-row">' + k + ': ' + kVal.length + '</div>';
                     }
                 }
                 else {
                     if (isAnObject(d[k])) {
                         const kVal = d[k];
                         if (kVal && kVal !== '') {
-                            info = info + '<div class="prop-row"><div class="prop-name">' + k + ':</div><div class="prop-val">' + kVal.name + '</div></div>';
+                            info = info + '<div class="prop-row">' + k + ': ' + kVal.name + '</div>';
                         }
                     }
                     else if (d[k] instanceof Array) {
                         info =
                             info +
-                                '<div class="prop-row"><div class="prop-name">' +
+                                '<div class="prop-row">' +
                                 k +
-                                ':</div><div class="prop-val">' +
+                                ': ' +
                                 d[k].join('<br> &nbsp;&nbsp; &nbsp;&nbsp;') +
-                                '</div></div>';
+                                '</div>';
                     }
                     else {
                         const vo = d[k];
                         if (vo && vo !== '') {
                             info =
                                 info +
-                                    '<div class="prop-row"><div class="prop-name">' +
+                                    '<div class="prop-row">' +
                                     k +
-                                    ':</div><div class="prop-val">' +
+                                    ': ' +
                                     (vo !== null || vo !== '' ? d[k] : 'N/A') +
-                                    '</div></div>';
+                                    '</div>';
                         }
                     }
                 }
@@ -10536,11 +10564,11 @@ class IdentityServicePathComponent {
         this.refreshRotate = false;
     } // end of initTopoView
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityServicePathComponent, deps: [{ token: IdentityServicePathHelper }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i5$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IdentityServicePathComponent, selector: "app-identity-visualizer", ngImport: i0, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizerDataModal\">\n    <div class=\"tp-data-header\">\n        <div class=\"modaltitle\">Identity Service Path</div>\n        <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n        <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n    </div>\n\n    <div class=\"identity-topology-container\">\n\n        <div style=\"width: 100%; height: 80px; float: left\">\n            <div class=\"ep-topology-filter-container listBox row\">\n                <input\n                    (keyup)=\"filterSearchArray()\"\n                    [(ngModel)]=\"selectedService\"\n                    [matAutocomplete]=\"auto\"\n                    class=\"topology-filter-input\"\n                    id=\"filterText\"\n                    matInput\n                    placeholder=\"Type to search identity accessible services.\"\n                />\n\n                <div\n                    (click)=\"clearSearchFilter()\"\n                    *ngIf=\"filterText\"\n                    class=\"clear-svc-icon icon-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.name\">\n                        {{ option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n            </div>\n        </div>\n\n            <div class=\"topotip\" id=\"epTooltip\"></div>\n\n            <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1200\">\n            </svg>\n            <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n\n        <div class=\"topology-legendA\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Component Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Unregistered / Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">Registered, Online</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle errored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n        <div class=\"topology-legendB\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Link Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">In Usage</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_not_in_use\"></div>\n                <div class=\"legend-text\">Usage Date N/A</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle linkerrored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n    </div>\n</div>\n", styles: ["#IdentityVisualizerDataModal{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed}#IdentityVisualizerDataModal .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizerDataModal .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizerDataModal .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizerDataModal .clear-svc-icon{font-size:1.4375rem;font-weight:600;position:absolute;top:.9375rem;right:2.5rem;color:var(--icon);cursor:pointer}#IdentityVisualizerDataModal .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizerDataModal.full-screen{width:100%;height:100%;border-radius:0}#IdentityVisualizerDataModal .ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}#IdentityVisualizerDataModal .buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}#IdentityVisualizerDataModal .identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;cursor:grab;background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}#IdentityVisualizerDataModal .tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}#IdentityVisualizerDataModal .node text{font:.75rem Open Sans,Arial,sans-serif}#IdentityVisualizerDataModal .modaltitle{filter:brightness(50%);padding-top:.375rem;padding-left:.3125rem}#IdentityVisualizerDataModal .modalbuttons{padding-right:1.25rem}#IdentityVisualizerDataModal .listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}#IdentityVisualizerDataModal .tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}#IdentityVisualizerDataModal .services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}#IdentityVisualizerDataModal select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}#IdentityVisualizerDataModal .topology-filter-input{height:3.125rem;width:95%;border-radius:1.5625rem;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding-left:1.25rem}#IdentityVisualizerDataModal .topotip{display:none;position:fixed;background:var(--navigation);border:0rem;border-radius:.75rem;pointer-events:none;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);transition:background-color .3s;padding:.3125rem 0;font-size:1.0625rem;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:28.125rem}#IdentityVisualizerDataModal .topology-legendA{border:0rem solid blue;width:12.5rem;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;display:inline-block;top:4.6875rem;right:0rem;background:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-top:0}#IdentityVisualizerDataModal .topology-legendB{width:12.5rem;border:0rem solid blue;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;top:12.5rem;right:0rem;background:var(--navigation);display:inline-block;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-left:.625rem}#IdentityVisualizerDataModal .legend-item{width:100%;height:100%;display:inline-block}#IdentityVisualizerDataModal .legend-item-head{width:105%;height:100%;display:inline-block;border:0rem solid blue;left:-.1875rem}#IdentityVisualizerDataModal .legend-circle{height:.75rem;width:.75rem;border-radius:.9375rem;display:inline-block;margin-top:.4375rem}#IdentityVisualizerDataModal .legend-circle.unregistered{background-color:#d8dce7}#IdentityVisualizerDataModal .legend-circle.registered_not_in_use{border:.0625rem solid #08dc5a;background-color:#fff}#IdentityVisualizerDataModal .legend-circle.registered_in_use{background-color:#08dc5a}#IdentityVisualizerDataModal .legend-circle.errored{background-color:#fb0d3d}#IdentityVisualizerDataModal .legend-circle.linkerrored{background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain}#IdentityVisualizerDataModal .legend-text{display:inline-block;font-size:.9375rem;font-weight:600;color:var(--tableText);padding-left:.4375rem;padding-bottom:.25rem}#IdentityVisualizerDataModal .legend-text-heading{text-align:center;display:inline-block;font-size:.875rem;font-weight:600;color:var(--tableText);padding-left:.625rem;padding-top:.125rem;padding-bottom:.125rem;color:#8a2be2}#IdentityVisualizerDataModal .legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}#IdentityVisualizerDataModal .filters-area{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;margin-top:.625rem}#IdentityVisualizerDataModal .dateTimeField input{height:2.5rem;vertical-align:middle;margin-right:.0625rem}#IdentityVisualizerDataModal .p-datepicker table td{padding:0rem}#IdentityVisualizerDataModal .p-datepicker table td>span{padding:0rem}#IdentityVisualizerDataModal .p-timepicker{padding:.0625rem}#IdentityVisualizerDataModal .p-datepicker-header,#IdentityVisualizerDataModal .p-datepicker-header-group{padding:0rem}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button:last-child{height:.9375rem}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button{height:.9375rem}#IdentityVisualizerDataModal .ng-tns-c15-3{font-size:.9375rem;font-weight:700}#IdentityVisualizerDataModal .p-datepicker .p-datepicker-buttonbar{padding:0rem}#IdentityVisualizerDataModal .reset-button{height:3.125rem;width:3.125rem;margin-top:-7%;margin-left:70%;border-radius:3.125rem;margin-right:.625rem;background-size:contain;--background-image: url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);transition:.3s}#IdentityVisualizerDataModal .refresh-button{position:absolute;display:inline-block;height:2.6875rem;width:7.625rem;margin-top:-5.3125rem;margin-left:65%;border-radius:.625rem;margin-right:.625rem;font-color:blue;font-weight:700}#IdentityVisualizerDataModal .reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}#IdentityVisualizerDataModal .reset-button:active{transform:scale(.9);transition:.3s}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#IdentityVisualizerDataModal .rotating{animation:rotating 2s linear infinite}.tool-tip-container .prop-row{display:grid;grid-template-columns:2fr 3fr;grid-gap:.625rem;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:1.5625rem;align-items:center;padding:0 .625rem}.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}\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.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.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: IdentityServicePathComponent, selector: "app-identity-visualizer", ngImport: i0, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizer\">\n    <div class=\"tp-data-header\">\n        <div class=\"modaltitle\">Identity Service Path</div>\n        <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n        <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n    </div>\n    <div [ngClass]=\"isDarkMode==true?'darkMode':'lightMode'\" class=\"identity-topology-container\">\n        <div style=\"width: 100%; height: 80px; float: left\">\n            <div class=\"ep-topology-filter-container listBox row\">\n                <input\n                    (keyup)=\"filterSearchArray()\"\n                    [(ngModel)]=\"selectedService\"\n                    [matAutocomplete]=\"auto\"\n                    class=\"topology-filter-input\"\n                    id=\"filterText\"\n                    matInput\n                    placeholder=\"Type to search identity accessible services.\"\n                />\n\n                <div\n                    (click)=\"clearSearchFilter()\"\n                    *ngIf=\"filterText\"\n                    class=\"clear-svc-icon icon-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.name\">\n                        {{ option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n            </div>\n        </div>\n\n            <div class=\"topotip\" id=\"epTooltip\"></div>\n\n            <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1200\">\n            </svg>\n            <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n\n        <div class=\"topology-legendA\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Component Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Unregistered / Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">Registered, Online</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle errored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n        <div class=\"topology-legendB\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Link Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">In Usage</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_not_in_use\"></div>\n                <div class=\"legend-text\">Usage Date N/A</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle linkerrored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n    </div>\n</div>\n", styles: ["#IdentityVisualizer{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed}#IdentityVisualizer .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizer .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizer .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizer .clear-svc-icon{font-size:1.4375rem;font-weight:600;position:relative;top:.9375rem;right:2.5rem;color:var(--icon);cursor:pointer}#IdentityVisualizer .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizer.full-screen{width:100%;height:100%;border-radius:0}.ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}.buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}.identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;cursor:grab}.lightMode{background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.darkMode{background:#000a17;background-image:linear-gradient(#001127 .125rem,transparent 0),linear-gradient(90deg,#001127 .125rem,transparent 0),linear-gradient(#001127 1px,transparent 0),linear-gradient(90deg,#001127 1px,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}.node text{font:.75rem Open Sans,Arial,sans-serif}.modaltitle{padding-top:.375rem;padding-left:.3125rem;color:var(--primaryColor)}.modalbuttons{padding-right:1.25rem}.listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}.tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}.services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}.topology-filter-input{height:3.125rem;width:95%;border-radius:1.5625rem;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding-left:1.25rem}.topotip{display:none;position:fixed;background:var(--navigation);border:.1rem;border-radius:.75rem;pointer-events:none;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);transition:background-color .3s;padding:.3125rem 0;font-size:1.0625rem;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;padding:1rem}.topology-legendA{border:0rem solid blue;width:12.5rem;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;display:inline-block;top:4.6875rem;right:0rem;background:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-top:0}.topology-legendB{width:12.5rem;border:0rem solid blue;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;top:12.5rem;right:0rem;background:var(--navigation);display:inline-block;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-left:.625rem}.legend-item{width:100%;height:100%;display:inline-block}.legend-item-head{width:105%;height:100%;display:inline-block;border:0rem solid blue;left:-.1875rem}.legend-circle{height:.75rem;width:.75rem;border-radius:.9375rem;display:inline-block;margin-top:.4375rem}.legend-circle.unregistered{background-color:#d8dce7}.legend-circle.registered_not_in_use{border:.0625rem solid #08dc5a;background-color:#fff}.legend-circle.registered_in_use{background-color:#08dc5a}.legend-circle.errored{background-color:#fb0d3d}.legend-circle.linkerrored{background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain}.legend-text{display:inline-block;font-size:.9375rem;font-weight:600;color:var(--tableText);padding-left:.4375rem;padding-bottom:.25rem}.legend-text-heading{text-align:center;display:inline-block;font-size:.875rem;font-weight:600;color:var(--tableText);padding-left:.625rem;padding-top:.125rem;padding-bottom:.125rem;color:#8a2be2}.legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating{animation:rotating 2s linear infinite}.tool-tip-container .prop-row{display:grid;grid-template-columns:auto auto;grid-gap:.625rem;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;min-height:1.5625rem;align-items:center;padding:.5rem}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}::ng-deep .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-radius:14px;background:var(--background);color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item{align-items:center;color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item:hover:not(.mat-option-disabled),::ng-deep .mat-mdc-option.mdc-list-item:focus:not(.mat-option-disabled){border-color:var(--primaryColor);border-radius:14px;border:.01rem solid var(--primaryColor)}::ng-deep .mat-mdc-raised-button .mdc-button__ripple{border:.1rem solid var(--primaryColor)}::ng-deep .p-button.p-button-icon-only{width:1.357rem}\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.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.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityServicePathComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-identity-visualizer', encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizerDataModal\">\n    <div class=\"tp-data-header\">\n        <div class=\"modaltitle\">Identity Service Path</div>\n        <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n        <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n    </div>\n\n    <div class=\"identity-topology-container\">\n\n        <div style=\"width: 100%; height: 80px; float: left\">\n            <div class=\"ep-topology-filter-container listBox row\">\n                <input\n                    (keyup)=\"filterSearchArray()\"\n                    [(ngModel)]=\"selectedService\"\n                    [matAutocomplete]=\"auto\"\n                    class=\"topology-filter-input\"\n                    id=\"filterText\"\n                    matInput\n                    placeholder=\"Type to search identity accessible services.\"\n                />\n\n                <div\n                    (click)=\"clearSearchFilter()\"\n                    *ngIf=\"filterText\"\n                    class=\"clear-svc-icon icon-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.name\">\n                        {{ option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n            </div>\n        </div>\n\n            <div class=\"topotip\" id=\"epTooltip\"></div>\n\n            <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1200\">\n            </svg>\n            <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n\n        <div class=\"topology-legendA\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Component Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Unregistered / Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">Registered, Online</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle errored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n        <div class=\"topology-legendB\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Link Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">In Usage</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_not_in_use\"></div>\n                <div class=\"legend-text\">Usage Date N/A</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle linkerrored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n    </div>\n</div>\n", styles: ["#IdentityVisualizerDataModal{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed}#IdentityVisualizerDataModal .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizerDataModal .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizerDataModal .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizerDataModal .clear-svc-icon{font-size:1.4375rem;font-weight:600;position:absolute;top:.9375rem;right:2.5rem;color:var(--icon);cursor:pointer}#IdentityVisualizerDataModal .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizerDataModal.full-screen{width:100%;height:100%;border-radius:0}#IdentityVisualizerDataModal .ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}#IdentityVisualizerDataModal .buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}#IdentityVisualizerDataModal .identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;cursor:grab;background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}#IdentityVisualizerDataModal .tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}#IdentityVisualizerDataModal .node text{font:.75rem Open Sans,Arial,sans-serif}#IdentityVisualizerDataModal .modaltitle{filter:brightness(50%);padding-top:.375rem;padding-left:.3125rem}#IdentityVisualizerDataModal .modalbuttons{padding-right:1.25rem}#IdentityVisualizerDataModal .listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}#IdentityVisualizerDataModal .tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}#IdentityVisualizerDataModal .services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}#IdentityVisualizerDataModal select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}#IdentityVisualizerDataModal .topology-filter-input{height:3.125rem;width:95%;border-radius:1.5625rem;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding-left:1.25rem}#IdentityVisualizerDataModal .topotip{display:none;position:fixed;background:var(--navigation);border:0rem;border-radius:.75rem;pointer-events:none;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);transition:background-color .3s;padding:.3125rem 0;font-size:1.0625rem;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;max-width:28.125rem}#IdentityVisualizerDataModal .topology-legendA{border:0rem solid blue;width:12.5rem;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;display:inline-block;top:4.6875rem;right:0rem;background:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-top:0}#IdentityVisualizerDataModal .topology-legendB{width:12.5rem;border:0rem solid blue;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;top:12.5rem;right:0rem;background:var(--navigation);display:inline-block;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-left:.625rem}#IdentityVisualizerDataModal .legend-item{width:100%;height:100%;display:inline-block}#IdentityVisualizerDataModal .legend-item-head{width:105%;height:100%;display:inline-block;border:0rem solid blue;left:-.1875rem}#IdentityVisualizerDataModal .legend-circle{height:.75rem;width:.75rem;border-radius:.9375rem;display:inline-block;margin-top:.4375rem}#IdentityVisualizerDataModal .legend-circle.unregistered{background-color:#d8dce7}#IdentityVisualizerDataModal .legend-circle.registered_not_in_use{border:.0625rem solid #08dc5a;background-color:#fff}#IdentityVisualizerDataModal .legend-circle.registered_in_use{background-color:#08dc5a}#IdentityVisualizerDataModal .legend-circle.errored{background-color:#fb0d3d}#IdentityVisualizerDataModal .legend-circle.linkerrored{background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain}#IdentityVisualizerDataModal .legend-text{display:inline-block;font-size:.9375rem;font-weight:600;color:var(--tableText);padding-left:.4375rem;padding-bottom:.25rem}#IdentityVisualizerDataModal .legend-text-heading{text-align:center;display:inline-block;font-size:.875rem;font-weight:600;color:var(--tableText);padding-left:.625rem;padding-top:.125rem;padding-bottom:.125rem;color:#8a2be2}#IdentityVisualizerDataModal .legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}#IdentityVisualizerDataModal .filters-area{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;margin-top:.625rem}#IdentityVisualizerDataModal .dateTimeField input{height:2.5rem;vertical-align:middle;margin-right:.0625rem}#IdentityVisualizerDataModal .p-datepicker table td{padding:0rem}#IdentityVisualizerDataModal .p-datepicker table td>span{padding:0rem}#IdentityVisualizerDataModal .p-timepicker{padding:.0625rem}#IdentityVisualizerDataModal .p-datepicker-header,#IdentityVisualizerDataModal .p-datepicker-header-group{padding:0rem}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button:last-child{height:.9375rem}#IdentityVisualizerDataModal .p-datepicker .p-timepicker button{height:.9375rem}#IdentityVisualizerDataModal .ng-tns-c15-3{font-size:.9375rem;font-weight:700}#IdentityVisualizerDataModal .p-datepicker .p-datepicker-buttonbar{padding:0rem}#IdentityVisualizerDataModal .reset-button{height:3.125rem;width:3.125rem;margin-top:-7%;margin-left:70%;border-radius:3.125rem;margin-right:.625rem;background-size:contain;--background-image: url(/assets/svgs/refresh.svg);cursor:pointer;overflow:hidden;z-index:24;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);transition:.3s}#IdentityVisualizerDataModal .refresh-button{position:absolute;display:inline-block;height:2.6875rem;width:7.625rem;margin-top:-5.3125rem;margin-left:65%;border-radius:.625rem;margin-right:.625rem;font-color:blue;font-weight:700}#IdentityVisualizerDataModal .reset-button:hover{filter:brightness(90%);transform:scale(.97);transition:.3s}#IdentityVisualizerDataModal .reset-button:active{transform:scale(.9);transition:.3s}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#IdentityVisualizerDataModal .rotating{animation:rotating 2s linear infinite}.tool-tip-container .prop-row{display:grid;grid-template-columns:2fr 3fr;grid-gap:.625rem;grid-template-areas:\"propName propVal\";height:-moz-fit-content;height:fit-content;min-height:1.5625rem;align-items:center;padding:0 .625rem}.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}\n"] }]
+            args: [{ selector: 'app-identity-visualizer', template: "<div [ngClass]=\"{ 'full-screen': fullScreen }\" class=\"modal solid\" id=\"IdentityVisualizer\">\n    <div class=\"tp-data-header\">\n        <div class=\"modaltitle\">Identity Service Path</div>\n        <div (click)=\"hide()\" class=\"buttonBall icon-close\" id=\"EscZEndpointClose\"></div>\n        <div (click)=\"toggleModalSize()\" class=\"buttonBall resize\" id=\"ResizeModalButton\"></div>\n    </div>\n    <div [ngClass]=\"isDarkMode==true?'darkMode':'lightMode'\" class=\"identity-topology-container\">\n        <div style=\"width: 100%; height: 80px; float: left\">\n            <div class=\"ep-topology-filter-container listBox row\">\n                <input\n                    (keyup)=\"filterSearchArray()\"\n                    [(ngModel)]=\"selectedService\"\n                    [matAutocomplete]=\"auto\"\n                    class=\"topology-filter-input\"\n                    id=\"filterText\"\n                    matInput\n                    placeholder=\"Type to search identity accessible services.\"\n                />\n\n                <div\n                    (click)=\"clearSearchFilter()\"\n                    *ngIf=\"filterText\"\n                    class=\"clear-svc-icon icon-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.name\">\n                        {{ option.name }}\n                    </mat-option>\n                </mat-autocomplete>\n            </div>\n        </div>\n\n            <div class=\"topotip\" id=\"epTooltip\"></div>\n\n            <svg style='pointer-events:all' height=\"1000\" id=\"IdentityTopology\" width=\"1200\">\n            </svg>\n            <lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n\n        <div class=\"topology-legendA\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Component Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Unregistered / Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">Registered, Online</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle errored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n        <div class=\"topology-legendB\">\n            <div class=\"legend-item-head\">\n                <div class=\"legend-text-heading\">Link Status</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle unregistered\"></div>\n                <div class=\"legend-text\">Offline</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_in_use\"></div>\n                <div class=\"legend-text\">In Usage</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle registered_not_in_use\"></div>\n                <div class=\"legend-text\">Usage Date N/A</div>\n            </div>\n            <div class=\"legend-item\">\n                <div class=\"legend-circle linkerrored\"></div>\n                <div class=\"legend-text\">Errored</div>\n            </div>\n        </div>\n\n    </div>\n</div>\n", styles: ["#IdentityVisualizer{overflow:hidden;width:75%;height:85%;background-color:var(--background);border-radius:1.5625rem;z-index:1001;margin:auto;inset:0rem;position:fixed}#IdentityVisualizer .buttonBall{cursor:pointer;font-weight:600}#IdentityVisualizer .buttonBall.icon-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.4375rem;color:var(--icon)}#IdentityVisualizer .buttonBall:hover{filter:brightness(50%)}#IdentityVisualizer .clear-svc-icon{font-size:1.4375rem;font-weight:600;position:relative;top:.9375rem;right:2.5rem;color:var(--icon);cursor:pointer}#IdentityVisualizer .clear-svc-icon:hover{filter:brightness(50%)}#IdentityVisualizer.full-screen{width:100%;height:100%;border-radius:0}.ep-topology-filter-container{width:37%;display:flex;flex-direction:row;position:absolute;margin:1.25rem;padding:0}.buttonBall.resize{top:1.25rem;width:1.4375rem;height:1.4375rem;right:3.4375rem;background-image:url(/assets/svgs/Resize.svg);background-size:1.4375rem 1.4375rem;position:absolute;cursor:pointer}.identity-topology-container{display:flex;margin-left:-.3125rem;margin-top:.625rem;flex-direction:column;cursor:grab}.lightMode{background:#f5e9f2;background-image:linear-gradient(#ecd3e6 .125rem,transparent 0),linear-gradient(90deg,#ecd3e6 .125rem,transparent 0),linear-gradient(#ecd3e6 .0625rem,transparent 0),linear-gradient(90deg,#ecd3e6 .0625rem,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.darkMode{background:#000a17;background-image:linear-gradient(#001127 .125rem,transparent 0),linear-gradient(90deg,#001127 .125rem,transparent 0),linear-gradient(#001127 1px,transparent 0),linear-gradient(90deg,#001127 1px,transparent 0);background-size:2.5rem 2.5rem,2.5rem 2.5rem,.625rem .625rem,.625rem .625rem}.tp-data-header{height:2.5rem;font-size:1.5625rem;font-weight:600;margin-left:1.25rem;margin-top:.625rem;margin-bottom:.3125rem;font-family:Russo One;color:var(--primaryColor);font-size:1.875rem;text-transform:uppercase;font-weight:400}.node text{font:.75rem Open Sans,Arial,sans-serif}.modaltitle{padding-top:.375rem;padding-left:.3125rem;color:var(--primaryColor)}.modalbuttons{padding-right:1.25rem}.listBox.row .close{position:fixed;display:flex;flex-direction:column;font-family:icomoon!important;font-style:normal;font-weight:600;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--icon);text-align:center;font-size:2.1875rem;line-height:2.5rem;left:35%;top:17%;width:2.5rem;height:2.5rem;background-image:url(/assets/svgs/close.svg);z-index:600;background-position:center center;background-size:75%;cursor:pointer;transition:.3s;justify-content:end;align-items:center}.tp-topo-data-header{border:0rem solid black;height:75rem;font-size:.75rem;font-weight:400;margin-left:.75rem;margin-top:.1875rem;color:var(--primaryColor)}.services-select{width:25rem;flex-shrink:0;border-radius:1.6875rem;height:3.1875rem;margin-left:1.375rem;margin-top:.625rem;background-color:#fff;border-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);color:var(--tableText);padding-left:1.25rem}select{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .9375rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:2.9375rem}.topology-filter-input{height:3.125rem;width:95%;border-radius:1.5625rem;border-color:var(--navigation);background-color:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding-left:1.25rem}.topotip{display:none;position:fixed;background:var(--navigation);border:.1rem;border-radius:.75rem;pointer-events:none;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);transition:background-color .3s;padding:.3125rem 0;font-size:1.0625rem;font-weight:700;color:var(--tableText);z-index:2000;opacity:1;padding:1rem}.topology-legendA{border:0rem solid blue;width:12.5rem;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;display:inline-block;top:4.6875rem;right:0rem;background:var(--navigation);box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-top:0}.topology-legendB{width:12.5rem;border:0rem solid blue;border-radius:.75rem;margin-bottom:.625rem;margin-right:.625rem;position:absolute;top:12.5rem;right:0rem;background:var(--navigation);display:inline-block;box-shadow:0 1.25rem 1.4375rem 0 var(--shadow);padding:0rem .625rem .3125rem;margin-left:.625rem}.legend-item{width:100%;height:100%;display:inline-block}.legend-item-head{width:105%;height:100%;display:inline-block;border:0rem solid blue;left:-.1875rem}.legend-circle{height:.75rem;width:.75rem;border-radius:.9375rem;display:inline-block;margin-top:.4375rem}.legend-circle.unregistered{background-color:#d8dce7}.legend-circle.registered_not_in_use{border:.0625rem solid #08dc5a;background-color:#fff}.legend-circle.registered_in_use{background-color:#08dc5a}.legend-circle.errored{background-color:#fb0d3d}.legend-circle.linkerrored{background-image:url(/assets/images/visualizer/link-cut.png);background-size:contain}.legend-text{display:inline-block;font-size:.9375rem;font-weight:600;color:var(--tableText);padding-left:.4375rem;padding-bottom:.25rem}.legend-text-heading{text-align:center;display:inline-block;font-size:.875rem;font-weight:600;color:var(--tableText);padding-left:.625rem;padding-top:.125rem;padding-bottom:.125rem;color:#8a2be2}.legend-text2{display:inline-block;font-size:.625rem;font-weight:400;color:var(--tableText);padding-left:.125rem;padding-bottom:.25rem}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating{animation:rotating 2s linear infinite}.tool-tip-container .prop-row{display:grid;grid-template-columns:auto auto;grid-gap:.625rem;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;min-height:1.5625rem;align-items:center;padding:.5rem}.tool-tip-container .prop-row:nth-child(2n){background-color:var(--formBackground)}::ng-deep .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-radius:14px;background:var(--background);color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item{align-items:center;color:var(--tableText)}::ng-deep .mat-mdc-option.mdc-list-item:hover:not(.mat-option-disabled),::ng-deep .mat-mdc-option.mdc-list-item:focus:not(.mat-option-disabled){border-color:var(--primaryColor);border-radius:14px;border:.01rem solid var(--primaryColor)}::ng-deep .mat-mdc-raised-button .mdc-button__ripple{border:.1rem solid var(--primaryColor)}::ng-deep .p-button.p-button-icon-only{width:1.357rem}\n"] }]
         }], ctorParameters: function () { return [{ type: IdentityServicePathHelper }, { type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -11293,7 +11321,8 @@ class TransitRoutersPageService extends ListPageServiceClass {
                 cellRenderer: 'cellTokenComponent',
                 resizable: true,
                 cellClass: 'nf-cell-vert-align tCol',
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
         if (this.extService.processTableColumns) {
             tableColumns = this.extService.processTableColumns(tableColumns);
@@ -12151,6 +12180,7 @@ class ServicePolicyFormService {
                 return svc.name;
             });
             this.associatedServiceNames = [...this.associatedServiceNames, ...namedAttributes];
+            this.associatedServiceNames = sortBy(this.associatedServices);
             this.associatedServiceNames = sortedUniq(this.associatedServiceNames);
             return this.associatedServices;
         });
@@ -12170,6 +12200,7 @@ class ServicePolicyFormService {
                 return svc.name;
             });
             this.associatedIdentityNames = [...this.associatedIdentityNames, ...namedAttributes];
+            this.associatedIdentityNames = sortBy(this.associatedIdentityNames);
             this.associatedIdentityNames = sortedUniq(this.associatedIdentityNames);
         });
     }
@@ -12399,7 +12430,8 @@ class ServicesPageService extends ListPageServiceClass {
                     this.serviceType = '';
                     this.openAdvanced(data.data.id);
                 },
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort, page) {
@@ -19131,7 +19163,8 @@ class EdgeRouterPoliciesPageService extends ListPageServiceClass {
                     this.openEditForm(data.data.id);
                 },
                 hide: true
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort, page) {
@@ -19673,7 +19706,8 @@ class ServicePoliciesPageService extends ListPageServiceClass {
                     this.openEditForm(data.data.id);
                 },
                 hide: true
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort, page) {
@@ -20219,6 +20253,7 @@ class EdgeRouterPolicyFormService {
                 return svc.name;
             });
             this.associatedEdgeRouterNames = [...this.associatedEdgeRouterNames, ...namedAttributes];
+            this.associatedEdgeRouterNames = sortBy(this.associatedEdgeRouterNames);
             this.associatedEdgeRouterNames = sortedUniq(this.associatedEdgeRouterNames);
         });
     }
@@ -20237,6 +20272,7 @@ class EdgeRouterPolicyFormService {
                 return svc.name;
             });
             this.associatedIdentityNames = [...this.associatedIdentityNames, ...namedAttributes];
+            this.associatedIdentityNames = sortBy(this.associatedIdentityNames);
             this.associatedIdentityNames = sortedUniq(this.associatedIdentityNames);
         });
     }
@@ -20826,7 +20862,8 @@ class ServiceEdgeRouterPoliciesPageService extends ListPageServiceClass {
                     this.openEditForm(data.data.id);
                 },
                 hide: true
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort, page) {
@@ -21101,6 +21138,7 @@ class ServiceEdgeRouterPolicyFormService {
                 return svc.name;
             });
             this.associatedEdgeRouterNames = [...this.associatedEdgeRouterNames, ...namedAttributes];
+            this.associatedEdgeRouterNames = sortBy(this.associatedEdgeRouterNames);
             this.associatedEdgeRouterNames = sortedUniq(this.associatedEdgeRouterNames);
         });
     }
@@ -21119,6 +21157,7 @@ class ServiceEdgeRouterPolicyFormService {
                 return svc.name;
             });
             this.associatedServiceNames = [...this.associatedServiceNames, ...namedAttributes];
+            this.associatedServiceNames = sortBy(this.associatedServiceNames);
             this.associatedServiceNames = sortedUniq(this.associatedServiceNames);
         });
     }
@@ -21615,7 +21654,8 @@ class TerminatorsPageService extends ListPageServiceClass {
                     this.openEditForm(data.data.id);
                 },
                 hide: false
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort) {
@@ -22252,7 +22292,8 @@ class JwtSignersPageService extends ListPageServiceClass {
                 valueFormatter: this.createdAtFormatter,
                 resizable: true,
                 cellClass: 'nf-cell-vert-align tCol',
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort) {
@@ -23255,7 +23296,8 @@ class AuthPoliciesPageService extends ListPageServiceClass {
                 valueFormatter: this.createdAtFormatter,
                 resizable: true,
                 cellClass: 'nf-cell-vert-align tCol',
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     checkDefaultAuthPolicy(authPolicy) {
@@ -24036,7 +24078,8 @@ class CertificateAuthoritiesPageService extends ListPageServiceClass {
                 valueFormatter: this.createdAtFormatter,
                 resizable: true,
                 cellClass: 'nf-cell-vert-align tCol',
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort) {
@@ -25105,7 +25148,8 @@ class ConfigTypesPageService extends ListPageServiceClass {
                 resizable: true,
                 cellClass: 'nf-cell-vert-align tCol',
                 width: this.remToPx(10),
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort) {
@@ -25734,7 +25778,8 @@ class PostureChecksPageService extends ListPageServiceClass {
                 resizable: true,
                 cellClass: 'nf-cell-vert-align tCol',
                 width: this.remToPx(10),
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort) {
@@ -27668,6 +27713,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     args: [SETTINGS_SERVICE]
                 }] }]; } });
 
+class ProgressMeterStep {
+    constructor() {
+        this.index = 0;
+        this.label = '';
+        this.state = '';
+    }
+}
+;
+class ProgressMeterComponent {
+    constructor() {
+        this.errors = {};
+        this.title = '';
+        this.steps = [];
+        this.currentStepIndex = 0;
+        this.currentStepChange = new EventEmitter;
+    }
+    getProgressBarStyle(index) {
+        const step = this.steps[index];
+        const nextStep = this.steps[index + 1];
+        if (step?.state === 'COMPLETE' && nextStep?.state === 'COMPLETE') {
+            return true;
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressMeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressMeterComponent, selector: "lib-progress-meter", inputs: { title: "title", steps: "steps", currentStepIndex: "currentStepIndex" }, outputs: { currentStepChange: "currentStepChange" }, ngImport: i0, template: "<div class=\"progress-meter-wrapper\">\n  <div class=\"progress-meter-container\">\n    <div\n        *ngFor=\"let step of steps; let index = index\"\n        [ngClass]=\"{ 'last-step': index === steps.length - 1 }\"\n        class=\"progress-meter-step-container\"\n    >\n      <div class=\"progress-step-item\" [ngClass]=\"{'in-progress': currentStepIndex === step.index}\">\n        <div class=\"progress-step-ball\" [ngClass]=\"{'progress-step-complete': step.state === 'COMPLETE', 'step-in-progress': step.state === 'IN_PROGRESS'}\">\n        </div>\n        <div *ngIf=\"step.state === 'IN_PROGRESS'\" class=\"spinner\"></div>\n        <div class=\"progress-step-label\" [ngClass]=\"{'step-in-progress': step.state === 'IN_PROGRESS'}\">{{ step.label }}</div>\n      </div>\n      <div *ngIf=\"index !== steps.length - 1\">\n        <div class=\"progress-step-bar\"\n             [ngClass]=\"{\n              'progress-step-complete': getProgressBarStyle(index),\n              'step-in-progress': currentStepIndex === index + 1\n            }\"\n        >\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".progress-meter-wrapper{display:flex;align-items:flex-start;font-size:1rem;gap:1rem;width:100%;height:6rem}.progress-meter-wrapper .progress-meter-container{display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative;width:100%;height:3.4375rem;z-index:999999999}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container{display:flex;flex-direction:row;align-items:center;justify-content:center;width:18rem;height:100%}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container.last-step{width:1.875rem}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%;width:1.875rem}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .progress-step-ball{width:1.875rem;height:1.875rem;border-radius:1.875rem;border:none;background-size:45%;background-position:center center;background-color:var(--placeholder);opacity:.35}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .progress-step-ball.progress-step-complete{background-color:var(--green);background-image:url(/assets/images/Icon_Check.png);border:none;opacity:1}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .progress-step-ball.step-in-progress{opacity:.35}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.25rem solid var(--stroke);border-right:.25rem solid var(--stroke);border-bottom:.25rem solid transparent;border-left:.25rem solid transparent;animation:loading .5s infinite linear;margin-left:-.125rem;margin-top:-.125rem;position:absolute}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .progress-step-label{height:1.25rem;font-size:.9375rem;margin-top:.3125rem;display:flex;align-items:center;justify-content:center;position:absolute;top:3.4375rem;color:var(--tableText);text-align:center;width:9.5rem;font-weight:600;opacity:.5}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .progress-step-label.step-in-progress{opacity:1}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-bar{background-color:var(--placeholder);border:none;width:16.2rem;height:.5rem;opacity:.35}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-bar.progress-step-complete{background-color:var(--green);opacity:1}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-bar.step-in-progress{opacity:1}\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressMeterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-progress-meter', template: "<div class=\"progress-meter-wrapper\">\n  <div class=\"progress-meter-container\">\n    <div\n        *ngFor=\"let step of steps; let index = index\"\n        [ngClass]=\"{ 'last-step': index === steps.length - 1 }\"\n        class=\"progress-meter-step-container\"\n    >\n      <div class=\"progress-step-item\" [ngClass]=\"{'in-progress': currentStepIndex === step.index}\">\n        <div class=\"progress-step-ball\" [ngClass]=\"{'progress-step-complete': step.state === 'COMPLETE', 'step-in-progress': step.state === 'IN_PROGRESS'}\">\n        </div>\n        <div *ngIf=\"step.state === 'IN_PROGRESS'\" class=\"spinner\"></div>\n        <div class=\"progress-step-label\" [ngClass]=\"{'step-in-progress': step.state === 'IN_PROGRESS'}\">{{ step.label }}</div>\n      </div>\n      <div *ngIf=\"index !== steps.length - 1\">\n        <div class=\"progress-step-bar\"\n             [ngClass]=\"{\n              'progress-step-complete': getProgressBarStyle(index),\n              'step-in-progress': currentStepIndex === index + 1\n            }\"\n        >\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".progress-meter-wrapper{display:flex;align-items:flex-start;font-size:1rem;gap:1rem;width:100%;height:6rem}.progress-meter-wrapper .progress-meter-container{display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative;width:100%;height:3.4375rem;z-index:999999999}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container{display:flex;flex-direction:row;align-items:center;justify-content:center;width:18rem;height:100%}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container.last-step{width:1.875rem}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%;width:1.875rem}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .progress-step-ball{width:1.875rem;height:1.875rem;border-radius:1.875rem;border:none;background-size:45%;background-position:center center;background-color:var(--placeholder);opacity:.35}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .progress-step-ball.progress-step-complete{background-color:var(--green);background-image:url(/assets/images/Icon_Check.png);border:none;opacity:1}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .progress-step-ball.step-in-progress{opacity:.35}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.25rem solid var(--stroke);border-right:.25rem solid var(--stroke);border-bottom:.25rem solid transparent;border-left:.25rem solid transparent;animation:loading .5s infinite linear;margin-left:-.125rem;margin-top:-.125rem;position:absolute}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .progress-step-label{height:1.25rem;font-size:.9375rem;margin-top:.3125rem;display:flex;align-items:center;justify-content:center;position:absolute;top:3.4375rem;color:var(--tableText);text-align:center;width:9.5rem;font-weight:600;opacity:.5}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-item .progress-step-label.step-in-progress{opacity:1}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-bar{background-color:var(--placeholder);border:none;width:16.2rem;height:.5rem;opacity:.35}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-bar.progress-step-complete{background-color:var(--green);opacity:1}.progress-meter-wrapper .progress-meter-container .progress-meter-step-container .progress-step-bar.step-in-progress{opacity:1}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], steps: [{
+                type: Input
+            }], currentStepIndex: [{
+                type: Input
+            }], currentStepChange: [{
+                type: Output
+            }] } });
+
+class ProgressWizardStep {
+    constructor() {
+        this.index = 0;
+        this.label = '';
+    }
+}
+;
+class ProgressWizardComponent {
+    constructor() {
+        this.errors = {};
+        this.title = '';
+        this.steps = [];
+        this.backButtonLabel = 'Back';
+        this.nextButtonLabel = 'Next';
+        this.nextButtonDisabled = false;
+        this.titleImageSrc = '';
+        this.showCloseButton = true;
+        this.currentStepIndex = 0;
+        this.currentStepIndexChange = new EventEmitter;
+        this.close = new EventEmitter;
+        this.done = new EventEmitter;
+        this.stepChanged = new EventEmitter;
+    }
+    cancel() {
+        this.close.emit();
+    }
+    confirm() {
+        this.close.emit();
+    }
+    nextStep() {
+        if (this.currentStepIndex >= (this.steps.length - 1)) {
+            this.done.emit();
+            return;
+        }
+        this.currentStepIndex++;
+        this.currentStepIndexChange.emit(this.currentStepIndex);
+        this.stepChanged.emit(this.steps[this.currentStepIndex]);
+    }
+    goToStep(stepNum) {
+        this.currentStepIndex = stepNum.index;
+        this.currentStepIndexChange.emit(this.currentStepIndex);
+        this.stepChanged.emit(this.steps[this.currentStepIndex]);
+    }
+    prevStep() {
+        this.currentStepIndex--;
+        this.currentStepIndexChange.emit(this.currentStepIndex);
+        this.stepChanged.emit(this.steps[this.currentStepIndex]);
+    }
+    get progressTrackHeight() {
+        const heightfactor = 8.333;
+        const trackNumber = ((this.steps ? this.steps.length : 1) - 1);
+        const trackHeight = heightfactor * trackNumber;
+        return trackHeight + 'rem';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressWizardComponent, selector: "lib-progress-wizard", inputs: { title: "title", steps: "steps", backButtonLabel: "backButtonLabel", nextButtonLabel: "nextButtonLabel", nextButtonDisabled: "nextButtonDisabled", titleImageSrc: "titleImageSrc", showCloseButton: "showCloseButton", currentStepIndex: "currentStepIndex" }, outputs: { currentStepIndexChange: "currentStepIndexChange", close: "close", done: "done", stepChanged: "stepChanged" }, ngImport: i0, template: "<div class=\"progress-wizard-wrapper\">\n  <div class=\"progress-wizard-container\">\n    <div *ngIf=\"showCloseButton\" (click)=\"cancel()\" class=\"close cancel\"></div>\n    <div class=\"side-progress-bar\">\n      <div class=\"progress-steps\">\n        <div class=\"progress-track\" style=\"height: {{progressTrackHeight}}\"></div>\n        <div *ngFor=\"let step of steps\" class=\"progress-step\" [ngClass]=\"{'step-active': step.index === currentStepIndex}\" (click)=\"goToStep(step)\">\n          <div class=\"progress-step-number\">{{step.index}}</div>\n          <div class=\"progress-step-number-background\"></div>\n          <div class=\"progress-step-label\">{{step.label}}</div>\n        </div>\n      </div>\n    </div>\n    <div>\n      <div class=\"center-content-container\">\n        <div class=\"center-content\">\n          <div class=\"header-title-container\" style=\"display: flex; flex-direction: row; gap: var(--gapSmall);align-items: center;\">\n            <div class=\"header-title-image\" style=\"background-image: url({{titleImageSrc}});\"></div>\n            <div class=\"header-title-container\">\n              <div class=\"header-title\">{{title}}</div>\n            </div>\n          </div>\n          <form name=\"form\" class=\"step-content-form\">\n            <div class=\"step-content-wrapper\">\n              <ng-content></ng-content>\n            </div>\n            <div class=\"buttons-container\">\n              <div *ngIf=\"currentStepIndex === 0\">\n              </div>\n              <button *ngIf=\"currentStepIndex > 0\" name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"prevStep()\">\n                {{backButtonLabel}}\n              </button>\n              <button name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"nextStep()\" [disabled]=\"nextButtonDisabled\">\n                {{nextButtonLabel}}\n              </button>\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".progress-wizard-wrapper{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;box-shadow:-1px 1rem 1.5625rem #0003}.progress-wizard-wrapper .progress-wizard-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:row;position:relative}.progress-wizard-wrapper .progress-wizard-container .center-content-container{-webkit-backdrop-filter:saturate(180%) blur(1.25rem);backdrop-filter:saturate(180%) blur(1.25rem);background-color:#eceef2;padding:2.1875rem;border-radius:.5rem;box-shadow:0 0 1.5625rem #0003;display:flex;flex-direction:column;height:100%;max-width:52rem}.progress-wizard-wrapper .progress-wizard-container .center-content-container .center-content{display:flex;flex-direction:column;height:100%}.header-title{color:var(--primaryColor)!important;filter:brightness(var(--brightnessDark));opacity:1;font-family:Russo One,Arial,sans-serif;font-size:2.35rem!important;line-height:unset;font-weight:400!important;margin:0!important;text-align:center;height:100%}.header-title-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow:visible}.step-content-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-top:var(--marginXL);padding:0!important;width:100%}.step-content-container .step-label-text{text-transform:none;font-size:1.125rem;width:100%;margin-bottom:var(--marginSmall);font-weight:600}.step-content-container .step-label-text.list-instructions{font-size:1rem;font-weight:600}.header-title-image{background-image:url(/assets/svgs/zlan-logo.svg);background-size:4.25rem;height:4.25rem;width:4.25rem}.buttons-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:var(--marginXXL)}.buttons-container button{box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)!important;color:#fff!important;line-height:2.5rem!important;height:3.125rem!important;border:none!important;vertical-align:middle!important;text-align:center!important;position:relative!important;z-index:1!important;display:inline-block!important;padding:0rem;margin-top:1.5625rem!important;transition:color .2s!important;font-size:.875rem!important;font-weight:600!important;font-family:Open Sans!important;text-transform:uppercase!important;border-radius:.5rem!important;min-width:10rem;background:var(--primaryColor)!important;cursor:pointer}.buttons-container button:hover{outline:0!important;box-shadow:0 .3125rem 1.25rem #0000000d!important}.buttons-container button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(1px)!important}.buttons-container button.btn-primary{position:relative;width:10rem;margin-top:0!important}.buttons-container button.btn-primary:disabled{filter:grayscale(1);opacity:.5;pointer-events:none}.buttons-container .saving-button,.buttons-container .saving-button:hover{filter:grayscale(1)!important;opacity:.5!important}.side-progress-bar{display:flex;flex-direction:row;width:20rem;margin-right:-1rem;position:relative;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;background-color:#eceef2f4;align-items:flex-start}.side-progress-bar .progress-steps{display:flex;flex-direction:column;height:100%;width:100%;justify-content:flex-start;align-items:flex-start;gap:5.5rem;cursor:pointer;padding:var(--paddingXXL) 0}.side-progress-bar .progress-steps .progress-track{position:absolute;width:.175rem;background-color:var(--stroke);left:2.175rem;height:23rem;opacity:.4}.side-progress-bar .progress-steps .progress-step{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%;height:2.5rem;filter:grayscale(1)}.side-progress-bar .progress-steps .progress-step.step-active{filter:none}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-number{opacity:1;box-shadow:1px 0 .8rem #0003}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-label{opacity:1}.side-progress-bar .progress-steps .progress-step-number{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:var(--primary);border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999999;opacity:.4}.side-progress-bar .progress-steps .progress-step-label{font-size:1.125rem;font-weight:600;margin-left:var(--marginSmall);opacity:.4}.side-progress-bar .progress-steps .progress-step-number-background{position:absolute;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:#eceef2;border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999}.step-content-form{display:flex;flex-direction:column;background-color:transparent;font-family:Open Sans;height:100%}.step-content-form .step-content-wrapper{height:100%;display:flex;flex-direction:column;justify-content: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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressWizardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-progress-wizard', template: "<div class=\"progress-wizard-wrapper\">\n  <div class=\"progress-wizard-container\">\n    <div *ngIf=\"showCloseButton\" (click)=\"cancel()\" class=\"close cancel\"></div>\n    <div class=\"side-progress-bar\">\n      <div class=\"progress-steps\">\n        <div class=\"progress-track\" style=\"height: {{progressTrackHeight}}\"></div>\n        <div *ngFor=\"let step of steps\" class=\"progress-step\" [ngClass]=\"{'step-active': step.index === currentStepIndex}\" (click)=\"goToStep(step)\">\n          <div class=\"progress-step-number\">{{step.index}}</div>\n          <div class=\"progress-step-number-background\"></div>\n          <div class=\"progress-step-label\">{{step.label}}</div>\n        </div>\n      </div>\n    </div>\n    <div>\n      <div class=\"center-content-container\">\n        <div class=\"center-content\">\n          <div class=\"header-title-container\" style=\"display: flex; flex-direction: row; gap: var(--gapSmall);align-items: center;\">\n            <div class=\"header-title-image\" style=\"background-image: url({{titleImageSrc}});\"></div>\n            <div class=\"header-title-container\">\n              <div class=\"header-title\">{{title}}</div>\n            </div>\n          </div>\n          <form name=\"form\" class=\"step-content-form\">\n            <div class=\"step-content-wrapper\">\n              <ng-content></ng-content>\n            </div>\n            <div class=\"buttons-container\">\n              <div *ngIf=\"currentStepIndex === 0\">\n              </div>\n              <button *ngIf=\"currentStepIndex > 0\" name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"prevStep()\">\n                {{backButtonLabel}}\n              </button>\n              <button name=\"action\" type=\"submit\" class=\"btn-primary\" (click)=\"nextStep()\" [disabled]=\"nextButtonDisabled\">\n                {{nextButtonLabel}}\n              </button>\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".progress-wizard-wrapper{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;box-shadow:-1px 1rem 1.5625rem #0003}.progress-wizard-wrapper .progress-wizard-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:flex;flex-direction:row;position:relative}.progress-wizard-wrapper .progress-wizard-container .center-content-container{-webkit-backdrop-filter:saturate(180%) blur(1.25rem);backdrop-filter:saturate(180%) blur(1.25rem);background-color:#eceef2;padding:2.1875rem;border-radius:.5rem;box-shadow:0 0 1.5625rem #0003;display:flex;flex-direction:column;height:100%;max-width:52rem}.progress-wizard-wrapper .progress-wizard-container .center-content-container .center-content{display:flex;flex-direction:column;height:100%}.header-title{color:var(--primaryColor)!important;filter:brightness(var(--brightnessDark));opacity:1;font-family:Russo One,Arial,sans-serif;font-size:2.35rem!important;line-height:unset;font-weight:400!important;margin:0!important;text-align:center;height:100%}.header-title-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;overflow:visible}.step-content-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-top:var(--marginXL);padding:0!important;width:100%}.step-content-container .step-label-text{text-transform:none;font-size:1.125rem;width:100%;margin-bottom:var(--marginSmall);font-weight:600}.step-content-container .step-label-text.list-instructions{font-size:1rem;font-weight:600}.header-title-image{background-image:url(/assets/svgs/zlan-logo.svg);background-size:4.25rem;height:4.25rem;width:4.25rem}.buttons-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-top:var(--marginXXL)}.buttons-container button{box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque)!important;color:#fff!important;line-height:2.5rem!important;height:3.125rem!important;border:none!important;vertical-align:middle!important;text-align:center!important;position:relative!important;z-index:1!important;display:inline-block!important;padding:0rem;margin-top:1.5625rem!important;transition:color .2s!important;font-size:.875rem!important;font-weight:600!important;font-family:Open Sans!important;text-transform:uppercase!important;border-radius:.5rem!important;min-width:10rem;background:var(--primaryColor)!important;cursor:pointer}.buttons-container button:hover{outline:0!important;box-shadow:0 .3125rem 1.25rem #0000000d!important}.buttons-container button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(1px)!important}.buttons-container button.btn-primary{position:relative;width:10rem;margin-top:0!important}.buttons-container button.btn-primary:disabled{filter:grayscale(1);opacity:.5;pointer-events:none}.buttons-container .saving-button,.buttons-container .saving-button:hover{filter:grayscale(1)!important;opacity:.5!important}.side-progress-bar{display:flex;flex-direction:row;width:20rem;margin-right:-1rem;position:relative;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;background-color:#eceef2f4;align-items:flex-start}.side-progress-bar .progress-steps{display:flex;flex-direction:column;height:100%;width:100%;justify-content:flex-start;align-items:flex-start;gap:5.5rem;cursor:pointer;padding:var(--paddingXXL) 0}.side-progress-bar .progress-steps .progress-track{position:absolute;width:.175rem;background-color:var(--stroke);left:2.175rem;height:23rem;opacity:.4}.side-progress-bar .progress-steps .progress-step{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%;height:2.5rem;filter:grayscale(1)}.side-progress-bar .progress-steps .progress-step.step-active{filter:none}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-number{opacity:1;box-shadow:1px 0 .8rem #0003}.side-progress-bar .progress-steps .progress-step.step-active .progress-step-label{opacity:1}.side-progress-bar .progress-steps .progress-step-number{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:var(--primary);border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999999;opacity:.4}.side-progress-bar .progress-steps .progress-step-label{font-size:1.125rem;font-weight:600;margin-left:var(--marginSmall);opacity:.4}.side-progress-bar .progress-steps .progress-step-number-background{position:absolute;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;background-color:#eceef2;border-style:solid;border-radius:2rem;border-color:#fff;color:var(--white);margin-left:1rem;border-width:.25rem;z-index:999}.step-content-form{display:flex;flex-direction:column;background-color:transparent;font-family:Open Sans;height:100%}.step-content-form .step-content-wrapper{height:100%;display:flex;flex-direction:column;justify-content:center}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], steps: [{
+                type: Input
+            }], backButtonLabel: [{
+                type: Input
+            }], nextButtonLabel: [{
+                type: Input
+            }], nextButtonDisabled: [{
+                type: Input
+            }], titleImageSrc: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], currentStepIndex: [{
+                type: Input
+            }], currentStepIndexChange: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], done: [{
+                type: Output
+            }], stepChanged: [{
+                type: Output
+            }] } });
+
 /*
     Copyright NetFoundry Inc.
 
@@ -27780,7 +27951,9 @@ class OpenZitiConsoleLibModule {
             SessionFormComponent,
             APISessionsPageComponent,
             APISessionFormComponent,
-            CallbackComponent], imports: [CommonModule,
+            CallbackComponent,
+            ProgressMeterComponent,
+            ProgressWizardComponent], imports: [CommonModule,
             FormsModule,
             MatDialogModule,
             MatRadioModule,
@@ -27845,7 +28018,11 @@ class OpenZitiConsoleLibModule {
             APISessionFormComponent,
             CallbackComponent,
             FormHeaderComponent,
-            JsonViewComponent] }); }
+            JsonViewComponent,
+            PreviewListComponent,
+            TagSelectorComponent,
+            ProgressMeterComponent,
+            ProgressWizardComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OpenZitiConsoleLibModule, providers: [
             { provide: SHAREDZ_EXTENSION, useClass: ExtensionsNoopService },
             { provide: ZITI_NAVIGATOR, useValue: {} },
@@ -27969,7 +28146,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         SessionFormComponent,
                         APISessionsPageComponent,
                         APISessionFormComponent,
-                        CallbackComponent
+                        CallbackComponent,
+                        ProgressMeterComponent,
+                        ProgressWizardComponent
                     ],
                     imports: [
                         CommonModule,
@@ -28042,7 +28221,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         APISessionFormComponent,
                         CallbackComponent,
                         FormHeaderComponent,
-                        JsonViewComponent
+                        JsonViewComponent,
+                        PreviewListComponent,
+                        TagSelectorComponent,
+                        ProgressMeterComponent,
+                        ProgressWizardComponent
                     ],
                     providers: [
                         { provide: SHAREDZ_EXTENSION, useClass: ExtensionsNoopService },
@@ -28058,7 +28241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 const VERSION = {
-    "version": "3.12.3"
+    "version": "3.12.5"
 };
 
 /*
@@ -29758,5 +29941,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APISessionFormComponent, APISessionsPageComponent, ApiSessionsPageService, AuthPoliciesPageComponent, AuthPoliciesPageService, AuthPolicyFormComponent, AuthPolicyFormService, AuthService, BooleanToggleInputComponent, COMPONENTS, CallbackComponent, CardListComponent, CertificateAuthoritiesPageComponent, CertificateAuthoritiesPageService, CertificateAuthorityFormComponent, CertificateAuthorityFormService, CheckboxListInputComponent, ConfigTypeFormComponent, ConfigTypesPageComponent, ConfigurationFormComponent, ConfigurationService, 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, JsonViewComponent, JwtSignerFormComponent, JwtSignerFormService, JwtSignersPageComponent, JwtSignersPageService, KEY_CODES, ListPageComponent, ListPageServiceClass, LoadingIndicatorComponent, LoggerService, LoginDialogComponent, LoginServiceClass, NetworkVisualizerComponent, NodeDataService, NodeWrapperService, NoopLoginService, NoopTabInterceptorService, NumberInputComponent, ObjectComponent, OpenZitiConsoleLibModule, PasswordInputComponent, PostureCheckFormComponent, PostureChecksPageComponent, PostureChecksPageService, 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, Session, SessionFormComponent, SessionsPageComponent, SessionsPageService, SettingsService, SettingsServiceClass, SideBannerComponent, SideModalComponent, SideNavbarComponent, SideToolbarComponent, SimpleServiceComponent, StringInputComponent, TabNameService, TerminatorFormComponent, TerminatorFormService, TerminatorsPageComponent, TerminatorsPageService, TextListInputComponent, TransitRouterFormComponent, TransitRouterFormService, TransitRoutersPageComponent, TransitRoutersPageService, VERSION, ValidationService, VerifyCertificateComponent, 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 { APISessionFormComponent, APISessionsPageComponent, ApiSessionsPageService, AuthPoliciesPageComponent, AuthPoliciesPageService, AuthPolicyFormComponent, AuthPolicyFormService, AuthService, BooleanToggleInputComponent, COMPONENTS, CallbackComponent, CardListComponent, CertificateAuthoritiesPageComponent, CertificateAuthoritiesPageService, CertificateAuthorityFormComponent, CertificateAuthorityFormService, CheckboxListInputComponent, ConfigTypeFormComponent, ConfigTypesPageComponent, ConfigurationFormComponent, ConfigurationService, 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, JsonViewComponent, JwtSignerFormComponent, JwtSignerFormService, JwtSignersPageComponent, JwtSignersPageService, KEY_CODES, ListPageComponent, ListPageServiceClass, LoadingIndicatorComponent, LoggerService, LoginDialogComponent, LoginServiceClass, NetworkVisualizerComponent, NodeDataService, NodeWrapperService, NoopLoginService, NoopTabInterceptorService, NumberInputComponent, ObjectComponent, OpenZitiConsoleLibModule, PasswordInputComponent, PostureCheckFormComponent, PostureChecksPageComponent, PostureChecksPageService, PreviewListComponent, ProgressMeterComponent, ProgressMeterStep, ProgressWizardComponent, ProgressWizardStep, 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, Session, SessionFormComponent, SessionsPageComponent, SessionsPageService, SettingsService, SettingsServiceClass, SideBannerComponent, SideModalComponent, SideNavbarComponent, SideToolbarComponent, SimpleServiceComponent, StringInputComponent, TabNameService, TagSelectorComponent, TerminatorFormComponent, TerminatorFormService, TerminatorsPageComponent, TerminatorsPageService, TextListInputComponent, TransitRouterFormComponent, TransitRouterFormService, TransitRoutersPageComponent, TransitRoutersPageService, VERSION, ValidationService, VerifyCertificateComponent, 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