@openziti/ziti-console-lib 0.12.3 → 0.12.5

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';
@@ -2792,456 +2792,335 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     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;
+class TableColumnFilterComponent {
+    constructor(filterService) {
         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;
+        this.type = 'TEXTINPUT';
+        this.filterString = '';
+        this.filterName = '';
+        this.dateFilter = '24h';
+        this.subscription = new Subscription();
+        this.setFilterDebounced = _.debounce(this.setFilter, 500);
+    }
+    ngOnInit() {
+        this.subscription.add(this.filterService.filtersChanged.subscribe((filters) => {
+            let tmp = '';
+            for (let idx = 0; idx < filters.length; idx++) {
+                if (filters[idx].columnId === this.columnDef?.colId) {
+                    tmp = filters[idx].value;
+                    break;
                 }
-                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];
-        }
+            this.filterString = tmp;
+        }));
     }
-    downloadItems(selectedItems) {
-        this.csvDownloadService.download(this.resourceType, selectedItems, this.CSV_COLUMNS, false, false, undefined, false);
+    setFilter() {
+        const filterObj = {
+            filterName: this.filterName,
+            columnId: this.columnDef?.colId,
+            value: this.filterString,
+            label: this.filterString,
+            type: this.type,
+        };
+        this.filterService.updateFilter(filterObj);
     }
-    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);
-        });
+    ngAfterViewInit() {
+        this.filterInput?.nativeElement?.focus();
     }
-    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;
+    statusClicked(event) {
+        if (event && this.openStatusMenu) {
+            event.statusFilter = true;
+            this.openStatusMenu(event);
         }
-        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);
+    ngOnDestroy() {
+        if (this.subscription)
+            this.subscription.unsubscribe();
     }
-    sort(sortBy, ordering = 'asc') {
-        this.currentSort = { sortBy, ordering };
-        if (this.refreshData)
-            this.refreshData({ sortBy, ordering });
+    get availableRoleAttributes() {
+        return this.columnDef?.headerComponentParams?.roleAttributes;
     }
-    hasSelectedText() {
-        let text = '';
-        if (window.getSelection) {
-            text = window.getSelection().toString();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: DataTableFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableColumnFilterComponent, selector: "app-table-column-filter", inputs: { type: "type", filterString: "filterString", filterName: "filterName", columnDef: "columnDef", openStatusMenu: "openStatusMenu", dateFilter: "dateFilter" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<div class=\"header-filter-container\">\n  <div *ngIf=\"type === 'TEXTINPUT' || type === 'COMBO'\" class=\"text-input-filter\">\n    <input\n      #filterInput\n      (keyup)=\"setFilterDebounced()\"\n      [(ngModel)]=\"filterString\"\n      class=\"search\"\n      id=\"SearchFilter\"\n      placeholder=\"Type to Filter\"\n      type=\"text\"\n    />\n  </div>\n  <div *ngIf=\"type === 'SELECT'\"></div>\n</div>\n", styles: [".header-filter-container .search{height:2.5rem;border-width:0;font-size:.875rem;box-shadow:none;padding-left:0rem;margin-top:.9375rem}#TimeSearch{position:relative;float:left;display:inline-block;margin-left:.625rem;width:3.125rem;height:2.5rem;background-color:var(--primary)}#TimeSearch #TimeSearchList{width:2.75rem;height:0rem;position:absolute;top:0rem;left:-.125rem;overflow:hidden;transition:var(--transition);background-color:var(--menu);border-radius:.5rem;z-index:30}#TimeSearch #TimeSearchList .time{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;font-size:.75rem;font-weight:700;text-align:center;margin-top:.125rem;margin-left:.125rem;left:-.125rem;top:-3.1875rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSearchList.open{top:-3.1875rem;width:2.75rem;height:14.125rem}#TimeSearch #TimeSelectButton{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;text-align:center;font-size:.75rem;font-weight:700;margin-top:.4375rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSelectButton:hover,#TimeSearch #TimeSearchList .time:hover{background-color:var(--primaryColor);color:var(--white)}::ng-deep .tag-selector-filter .select2-selection{border:none!important}::ng-deep .tag-selector-filter .select2-selection .select2-search__field{height:2.1875rem!important}\n"], dependencies: [{ 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-column-filter', template: "<div class=\"header-filter-container\">\n  <div *ngIf=\"type === 'TEXTINPUT' || type === 'COMBO'\" class=\"text-input-filter\">\n    <input\n      #filterInput\n      (keyup)=\"setFilterDebounced()\"\n      [(ngModel)]=\"filterString\"\n      class=\"search\"\n      id=\"SearchFilter\"\n      placeholder=\"Type to Filter\"\n      type=\"text\"\n    />\n  </div>\n  <div *ngIf=\"type === 'SELECT'\"></div>\n</div>\n", styles: [".header-filter-container .search{height:2.5rem;border-width:0;font-size:.875rem;box-shadow:none;padding-left:0rem;margin-top:.9375rem}#TimeSearch{position:relative;float:left;display:inline-block;margin-left:.625rem;width:3.125rem;height:2.5rem;background-color:var(--primary)}#TimeSearch #TimeSearchList{width:2.75rem;height:0rem;position:absolute;top:0rem;left:-.125rem;overflow:hidden;transition:var(--transition);background-color:var(--menu);border-radius:.5rem;z-index:30}#TimeSearch #TimeSearchList .time{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;font-size:.75rem;font-weight:700;text-align:center;margin-top:.125rem;margin-left:.125rem;left:-.125rem;top:-3.1875rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSearchList.open{top:-3.1875rem;width:2.75rem;height:14.125rem}#TimeSearch #TimeSelectButton{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;text-align:center;font-size:.75rem;font-weight:700;margin-top:.4375rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSelectButton:hover,#TimeSearch #TimeSearchList .time:hover{background-color:var(--primaryColor);color:var(--white)}::ng-deep .tag-selector-filter .select2-selection{border:none!important}::ng-deep .tag-selector-filter .select2-selection .select2-search__field{height:2.1875rem!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataTableFilterService }]; }, propDecorators: { type: [{
+                type: Input
+            }], filterString: [{
+                type: Input
+            }], filterName: [{
+                type: Input
+            }], columnDef: [{
+                type: Input
+            }], openStatusMenu: [{
+                type: Input
+            }], dateFilter: [{
+                type: Input
+            }], filterInput: [{
+                type: ViewChild,
+                args: ['filterInput']
+            }] } });
+
+/*
+    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.
+*/
+class TableColumnDefaultComponent {
+    constructor(filterService) {
+        this.filterService = filterService;
+        this.headerParams = {
+            api: {},
+        };
+        this.columnDef = {
+            sortDir: undefined,
+            colId: undefined,
+            pinColumn: undefined,
+            sortColumn: undefined,
+        };
+        this.filterType = 'TEXTINPUT';
+        this.filterOptions = [];
+        this.columnFilters = {};
+        this.filtering = false;
+        this.showFilter = false;
+        this.comboActive = false;
+        this.showSecondaryFilter = false;
+        this.showBubble = false;
+        this.showLoader = false;
+        this.subscription = new Subscription();
+        this._statusClass = 'v7Offline';
+        if (!this) {
+            return;
         }
-        return text?.length > 0;
-    }
-    getNetworkJwt() {
-        return this.dataService.get('network-jwts', {}, []);
+        this.item = {
+            selected: false,
+        };
     }
-    openEditForm(itemId = '', basePath) {
-        if (isEmpty(itemId)) {
-            itemId = 'create';
+    get statusClass() {
+        if (!this.showBubble) {
+            return '';
         }
-        basePath = basePath ? basePath : this.basePath;
-        this.router?.navigateByUrl(`${basePath}/${itemId}`);
-    }
-    remToPx(remValue) {
-        const rootFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
-        return remValue * rootFontSize;
+        const status = _.get(this.columnObj, 'gridApi.columnFilters.hasApiSession', _.get(this.columnObj, 'gridApi.columnFilters.online'));
+        switch (status) {
+            case 'all':
+                this._statusClass = 'v7OnlineOffline';
+                break;
+            case 'false':
+                this._statusClass = 'v7Offline';
+                break;
+            case 'true':
+                this._statusClass = 'v7Online';
+                break;
+            case 'provisioning':
+                this._statusClass = '';
+                this.showLoader = true;
+                break;
+            case 'error':
+                this._statusClass = 'v7Error';
+                break;
+            default:
+                this._statusClass = 'v7OnlineOffline';
+                break;
+        }
+        return this._statusClass;
     }
-    ;
-};
-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);
+    get filterApplied() {
+        const columnId = _.get(this.columnDef, 'colId');
+        const filterVal = _.get(this.headerParams, `api.columnFilters.${columnId}`);
+        return !_.isEmpty(filterVal) || this.showFilter || this.filtering;
     }
     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;
+    agInit(headerParams = {}) {
+        if (!headerParams) {
+            return;
+        }
+        this.headerParams = headerParams;
+        this.enableSorting = headerParams.enableSorting;
+        this.headerName = headerParams.displayName;
+        this.columnObj = headerParams.column;
+        this.filterType = headerParams.filterType || 'TEXTINPUT';
+        this.columnFilters = headerParams.columnFilters;
+        this.columnDef = this.columnObj.colDef;
+        this.pinned = this.columnObj.pinned === 'left';
+        this.sortDir = this.columnDef.sortDir || 'none';
+        this.onlineStatusFilter = _.has(this.columnFilters, 'hasApiSession') ? 'hasApiSession' : 'online';
+        this.showBubble =
+            this.columnDef.colId === 'name' &&
+                (_.has(this.columnFilters, 'hasApiSession') || _.has(this.columnFilters, 'online'));
+        this._showColumnMenu = headerParams.showColumnMenu;
+        this.updateFilterOptions();
+        headerParams.api.addEventListener('sortChanged', (event) => {
+            const colId = _.get(event, 'columnDef.colId', '');
+            if (colId !== this.columnDef.colId) {
+                this.sortDir = undefined;
             }
             else {
-                this.endCount = data.meta.pagination.offset + data.meta.pagination.limit;
+                this.sortDir = _.get(event, 'sortDir');
             }
-            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;
+        headerParams.api.addEventListener('columnEverythingChanged', (event) => {
+            _.forEach(event.api?.columnModel?.columnDefs, colDef => {
+                if (this.columnDef.colId === colDef.colId && colDef.headerComponentParams?.filterOptions) {
+                    this.updateFilterOptions();
+                }
+            });
         });
     }
-    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);
-                });
-            }
-        });
+    ngAfterViewInit() {
+        if (this.showBubble) {
+            // this.updateStatusClass();
+        }
     }
-    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;
-                }
+    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,
             });
         }
-        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.
-
-    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.
-*/
-class TableColumnFilterComponent {
-    constructor(filterService) {
-        this.filterService = filterService;
-        this.type = 'TEXTINPUT';
-        this.filterString = '';
-        this.filterName = '';
-        this.dateFilter = '24h';
-        this.subscription = new Subscription();
-        this.setFilterDebounced = _.debounce(this.setFilter, 500);
     }
-    ngOnInit() {
-        this.subscription.add(this.filterService.filtersChanged.subscribe((filters) => {
-            let tmp = '';
-            for (let idx = 0; idx < filters.length; idx++) {
-                if (filters[idx].columnId === this.columnDef?.colId) {
-                    tmp = filters[idx].value;
-                    break;
-                }
+    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);
             }
-            this.filterString = tmp;
-        }));
-    }
-    setFilter() {
-        const filterObj = {
-            filterName: this.filterName,
-            columnId: this.columnDef?.colId,
-            value: this.filterString,
-            label: this.filterString,
-            type: this.type,
-        };
-        this.filterService.updateFilter(filterObj);
+            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);
+            }
+        }
     }
-    ngAfterViewInit() {
-        this.filterInput?.nativeElement?.focus();
+    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);
+        }
     }
-    statusClicked(event) {
-        if (event && this.openStatusMenu) {
-            event.statusFilter = true;
-            this.openStatusMenu(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;
     }
-    ngOnDestroy() {
-        if (this.subscription)
-            this.subscription.unsubscribe();
+    refresh(params) {
+        return true;
     }
-    get availableRoleAttributes() {
-        return this.columnDef?.headerComponentParams?.roleAttributes;
+    openGridMenu() {
+        if (!this._showColumnMenu) {
+            return;
+        }
+        this._showColumnMenu(this.menuButton.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: DataTableFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableColumnFilterComponent, selector: "app-table-column-filter", inputs: { type: "type", filterString: "filterString", filterName: "filterName", columnDef: "columnDef", openStatusMenu: "openStatusMenu", dateFilter: "dateFilter" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<div class=\"header-filter-container\">\n  <div *ngIf=\"type === 'TEXTINPUT' || type === 'COMBO'\" class=\"text-input-filter\">\n    <input\n      #filterInput\n      (keyup)=\"setFilterDebounced()\"\n      [(ngModel)]=\"filterString\"\n      class=\"search\"\n      id=\"SearchFilter\"\n      placeholder=\"Type to Filter\"\n      type=\"text\"\n    />\n  </div>\n  <div *ngIf=\"type === 'SELECT'\"></div>\n</div>\n", styles: [".header-filter-container .search{height:2.5rem;border-width:0;font-size:.875rem;box-shadow:none;padding-left:0rem;margin-top:.9375rem}#TimeSearch{position:relative;float:left;display:inline-block;margin-left:.625rem;width:3.125rem;height:2.5rem;background-color:var(--primary)}#TimeSearch #TimeSearchList{width:2.75rem;height:0rem;position:absolute;top:0rem;left:-.125rem;overflow:hidden;transition:var(--transition);background-color:var(--menu);border-radius:.5rem;z-index:30}#TimeSearch #TimeSearchList .time{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;font-size:.75rem;font-weight:700;text-align:center;margin-top:.125rem;margin-left:.125rem;left:-.125rem;top:-3.1875rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSearchList.open{top:-3.1875rem;width:2.75rem;height:14.125rem}#TimeSearch #TimeSelectButton{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;text-align:center;font-size:.75rem;font-weight:700;margin-top:.4375rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSelectButton:hover,#TimeSearch #TimeSearchList .time:hover{background-color:var(--primaryColor);color:var(--white)}::ng-deep .tag-selector-filter .select2-selection{border:none!important}::ng-deep .tag-selector-filter .select2-selection .select2-search__field{height:2.1875rem!important}\n"], dependencies: [{ 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"] }] }); }
+    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: TableColumnFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableColumnDefaultComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-column-filter', template: "<div class=\"header-filter-container\">\n  <div *ngIf=\"type === 'TEXTINPUT' || type === 'COMBO'\" class=\"text-input-filter\">\n    <input\n      #filterInput\n      (keyup)=\"setFilterDebounced()\"\n      [(ngModel)]=\"filterString\"\n      class=\"search\"\n      id=\"SearchFilter\"\n      placeholder=\"Type to Filter\"\n      type=\"text\"\n    />\n  </div>\n  <div *ngIf=\"type === 'SELECT'\"></div>\n</div>\n", styles: [".header-filter-container .search{height:2.5rem;border-width:0;font-size:.875rem;box-shadow:none;padding-left:0rem;margin-top:.9375rem}#TimeSearch{position:relative;float:left;display:inline-block;margin-left:.625rem;width:3.125rem;height:2.5rem;background-color:var(--primary)}#TimeSearch #TimeSearchList{width:2.75rem;height:0rem;position:absolute;top:0rem;left:-.125rem;overflow:hidden;transition:var(--transition);background-color:var(--menu);border-radius:.5rem;z-index:30}#TimeSearch #TimeSearchList .time{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;font-size:.75rem;font-weight:700;text-align:center;margin-top:.125rem;margin-left:.125rem;left:-.125rem;top:-3.1875rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSearchList.open{top:-3.1875rem;width:2.75rem;height:14.125rem}#TimeSearch #TimeSelectButton{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;text-align:center;font-size:.75rem;font-weight:700;margin-top:.4375rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSelectButton:hover,#TimeSearch #TimeSearchList .time:hover{background-color:var(--primaryColor);color:var(--white)}::ng-deep .tag-selector-filter .select2-selection{border:none!important}::ng-deep .tag-selector-filter .select2-selection .select2-search__field{height:2.1875rem!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataTableFilterService }]; }, propDecorators: { type: [{
-                type: Input
-            }], filterString: [{
-                type: Input
-            }], filterName: [{
-                type: Input
-            }], columnDef: [{
-                type: Input
-            }], openStatusMenu: [{
-                type: Input
-            }], dateFilter: [{
-                type: Input
-            }], filterInput: [{
+            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: ['filterInput']
+                args: ['menuButton']
             }] } });
 
 /*
@@ -3259,250 +3138,390 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-class TableColumnDefaultComponent {
-    constructor(filterService) {
+let ListPageServiceClass = class ListPageServiceClass {
+    constructor(settings, filterService, csvDownloadService, extensionService, router) {
+        this.settings = settings;
         this.filterService = filterService;
-        this.headerParams = {
-            api: {},
+        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.columnDef = {
-            sortDir: undefined,
-            colId: undefined,
-            pinColumn: undefined,
-            sortColumn: undefined,
+        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.filterType = 'TEXTINPUT';
-        this.filterOptions = [];
-        this.columnFilters = {};
-        this.filtering = false;
-        this.showFilter = false;
-        this.comboActive = false;
-        this.showSecondaryFilter = false;
-        this.showBubble = false;
-        this.showLoader = false;
-        this.subscription = new Subscription();
-        this._statusClass = 'v7Offline';
-        if (!this) {
-            return;
-        }
-        this.item = {
-            selected: false,
+        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];
+            }
+        });
     }
-    get statusClass() {
-        if (!this.showBubble) {
-            return '';
-        }
-        const status = _.get(this.columnObj, 'gridApi.columnFilters.hasApiSession', _.get(this.columnObj, 'gridApi.columnFilters.online'));
-        switch (status) {
-            case 'all':
-                this._statusClass = 'v7OnlineOffline';
-                break;
-            case 'false':
-                this._statusClass = 'v7Offline';
-                break;
-            case 'true':
-                this._statusClass = 'v7Online';
-                break;
-            case 'provisioning':
-                this._statusClass = '';
-                this.showLoader = true;
-                break;
-            case 'error':
-                this._statusClass = 'v7Error';
-                break;
-            default:
-                this._statusClass = 'v7OnlineOffline';
-                break;
+    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];
         }
-        return this._statusClass;
     }
-    get filterApplied() {
-        const columnId = _.get(this.columnDef, 'colId');
-        const filterVal = _.get(this.headerParams, `api.columnFilters.${columnId}`);
-        return !_.isEmpty(filterVal) || this.showFilter || this.filtering;
+    addListItemExtensionActions(row) {
+        if (this.extensionService.listActions) {
+            const keys = this.extensionService.listActions.map((action) => {
+                return action.action;
+            });
+            row.actionList = [...row.actionList, ...keys];
+        }
     }
-    ngOnInit() {
+    downloadItems(selectedItems) {
+        this.csvDownloadService.download(this.resourceType, selectedItems, this.CSV_COLUMNS, false, false, undefined, false);
     }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
+    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);
+        });
     }
-    agInit(headerParams = {}) {
-        if (!headerParams) {
-            return;
+    getTableData(resourceType, paging, filters, sort) {
+        if (!paging) {
+            paging = { ...this.DEFAULT_PAGING };
         }
-        this.headerParams = headerParams;
-        this.enableSorting = headerParams.enableSorting;
-        this.headerName = headerParams.displayName;
-        this.columnObj = headerParams.column;
-        this.filterType = headerParams.filterType || 'TEXTINPUT';
-        this.columnFilters = headerParams.columnFilters;
-        this.columnDef = this.columnObj.colDef;
-        this.pinned = this.columnObj.pinned === 'left';
-        this.sortDir = this.columnDef.sortDir || 'none';
-        this.onlineStatusFilter = _.has(this.columnFilters, 'hasApiSession') ? 'hasApiSession' : 'online';
-        this.showBubble =
-            this.columnDef.colId === 'name' &&
-                (_.has(this.columnFilters, 'hasApiSession') || _.has(this.columnFilters, 'online'));
-        this._showColumnMenu = headerParams.showColumnMenu;
-        this.updateFilterOptions();
-        headerParams.api.addEventListener('sortChanged', (event) => {
-            const colId = _.get(event, 'columnDef.colId', '');
-            if (colId !== this.columnDef.colId) {
-                this.sortDir = undefined;
-            }
-            else {
-                this.sortDir = _.get(event, 'sortDir');
-            }
+        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);
         });
-        headerParams.api.addEventListener('columnEverythingChanged', (event) => {
-            _.forEach(event.api?.columnModel?.columnDefs, colDef => {
-                if (this.columnDef.colId === colDef.colId && colDef.headerComponentParams?.filterOptions) {
-                    this.updateFilterOptions();
+    }
+    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;
         });
     }
-    ngAfterViewInit() {
-        if (this.showBubble) {
-            // this.updateStatusClass();
+    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();
     }
-    pin() {
-        this.columnDef.pinColumn(this.columnObj, this.pinned ? false : 'left');
-        this.pinned = !this.pinned;
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
-    hide() {
-        this.headerParams.api.zitiHideColumn(this.columnObj, false);
+    itemToggled(item) {
+        this.updateSelectedItems(item);
     }
-    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,
-            });
-        }
+    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;
     }
-    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);
+    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() {
@@ -3552,11 +3571,11 @@ class TableCellNameComponent {
         return val;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableCellNameComponent, deps: [{ token: i5$1.MatDialog }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableCellNameComponent, selector: "lib-table-cell-name", ngImport: i0, template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            <div *ngIf=\"cellParams.showIdentityIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <div *ngIf=\"cellParams.showRouterIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.isVerified}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.isOnline}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <strong>{{cellText}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;gap:.3125rem}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableCellNameComponent, selector: "lib-table-cell-name", ngImport: i0, template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            <div *ngIf=\"cellParams.showIdentityIcons && item.edgeRouterConnectionStatus\" class=\"cell-status-container\">\n                <span class=\"circle {{item.edgeRouterConnectionStatus}}\" title=\"Edge Router Connection Status\"></span>\n            </div>\n            <div *ngIf=\"cellParams.showIdentityIcons && !item.edgeRouterConnectionStatus\" class=\"cell-status-container\">\n                <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <div *ngIf=\"cellParams.showRouterIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.isVerified}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.isOnline}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <strong>{{cellText}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;gap:.3125rem}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem}.circle.online{background-color:var(--green)}.circle.unknown{background-color:var(--highlighted)}\n"], dependencies: [{ 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: TableCellNameComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-cell-name', template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            <div *ngIf=\"cellParams.showIdentityIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <div *ngIf=\"cellParams.showRouterIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.isVerified}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.isOnline}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <strong>{{cellText}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;gap:.3125rem}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem}\n"] }]
+            args: [{ selector: 'lib-table-cell-name', template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            <div *ngIf=\"cellParams.showIdentityIcons && item.edgeRouterConnectionStatus\" class=\"cell-status-container\">\n                <span class=\"circle {{item.edgeRouterConnectionStatus}}\" title=\"Edge Router Connection Status\"></span>\n            </div>\n            <div *ngIf=\"cellParams.showIdentityIcons && !item.edgeRouterConnectionStatus\" class=\"cell-status-container\">\n                <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <div *ngIf=\"cellParams.showRouterIcons\" class=\"cell-status-container\">\n                <span class=\"circle {{item.isVerified}}\" title=\"Api Session\"></span>\n                <span class=\"circle {{item.isOnline}}\" title=\"Edge Router Connected\"></span>\n            </div>\n            <strong>{{cellText}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;gap:.3125rem}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem}.circle.online{background-color:var(--green)}.circle.unknown{background-color:var(--highlighted)}\n"] }]
         }], ctorParameters: function () { return [{ type: i5$1.MatDialog }, { type: i4.Router }]; } });
 
 /*
@@ -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);
@@ -11293,7 +11315,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 +12174,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 +12194,7 @@ class ServicePolicyFormService {
                 return svc.name;
             });
             this.associatedIdentityNames = [...this.associatedIdentityNames, ...namedAttributes];
+            this.associatedIdentityNames = sortBy(this.associatedIdentityNames);
             this.associatedIdentityNames = sortedUniq(this.associatedIdentityNames);
         });
     }
@@ -12399,7 +12424,8 @@ class ServicesPageService extends ListPageServiceClass {
                     this.serviceType = '';
                     this.openAdvanced(data.data.id);
                 },
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort, page) {
@@ -19131,7 +19157,8 @@ class EdgeRouterPoliciesPageService extends ListPageServiceClass {
                     this.openEditForm(data.data.id);
                 },
                 hide: true
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort, page) {
@@ -19673,7 +19700,8 @@ class ServicePoliciesPageService extends ListPageServiceClass {
                     this.openEditForm(data.data.id);
                 },
                 hide: true
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort, page) {
@@ -20219,6 +20247,7 @@ class EdgeRouterPolicyFormService {
                 return svc.name;
             });
             this.associatedEdgeRouterNames = [...this.associatedEdgeRouterNames, ...namedAttributes];
+            this.associatedEdgeRouterNames = sortBy(this.associatedEdgeRouterNames);
             this.associatedEdgeRouterNames = sortedUniq(this.associatedEdgeRouterNames);
         });
     }
@@ -20237,6 +20266,7 @@ class EdgeRouterPolicyFormService {
                 return svc.name;
             });
             this.associatedIdentityNames = [...this.associatedIdentityNames, ...namedAttributes];
+            this.associatedIdentityNames = sortBy(this.associatedIdentityNames);
             this.associatedIdentityNames = sortedUniq(this.associatedIdentityNames);
         });
     }
@@ -20826,7 +20856,8 @@ class ServiceEdgeRouterPoliciesPageService extends ListPageServiceClass {
                     this.openEditForm(data.data.id);
                 },
                 hide: true
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort, page) {
@@ -21101,6 +21132,7 @@ class ServiceEdgeRouterPolicyFormService {
                 return svc.name;
             });
             this.associatedEdgeRouterNames = [...this.associatedEdgeRouterNames, ...namedAttributes];
+            this.associatedEdgeRouterNames = sortBy(this.associatedEdgeRouterNames);
             this.associatedEdgeRouterNames = sortedUniq(this.associatedEdgeRouterNames);
         });
     }
@@ -21119,6 +21151,7 @@ class ServiceEdgeRouterPolicyFormService {
                 return svc.name;
             });
             this.associatedServiceNames = [...this.associatedServiceNames, ...namedAttributes];
+            this.associatedServiceNames = sortBy(this.associatedServiceNames);
             this.associatedServiceNames = sortedUniq(this.associatedServiceNames);
         });
     }
@@ -21615,7 +21648,8 @@ class TerminatorsPageService extends ListPageServiceClass {
                     this.openEditForm(data.data.id);
                 },
                 hide: false
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort) {
@@ -22252,7 +22286,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 +23290,8 @@ class AuthPoliciesPageService extends ListPageServiceClass {
                 valueFormatter: this.createdAtFormatter,
                 resizable: true,
                 cellClass: 'nf-cell-vert-align tCol',
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     checkDefaultAuthPolicy(authPolicy) {
@@ -24036,7 +24072,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 +25142,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 +25772,8 @@ class PostureChecksPageService extends ListPageServiceClass {
                 resizable: true,
                 cellClass: 'nf-cell-vert-align tCol',
                 width: this.remToPx(10),
-            }
+            },
+            this.ID_COLUMN_DEF
         ];
     }
     getData(filters, sort) {
@@ -28058,7 +28097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 const VERSION = {
-    "version": "3.12.2"
+    "version": "3.12.4"
 };
 
 /*
@@ -29662,7 +29701,7 @@ class ZitiControllerDataService extends ZitiDataService {
             let filterVal = '';
             switch (filter.type) {
                 case 'TEXTINPUT':
-                    const verb = filter.verb ? filter.verb : 'contains';
+                    const verb = filter.verb ? filter.verb : 'icontains';
                     filterVal = `${filter.columnId} ${verb} "${filter.value}"`;
                     break;
                 case 'SELECT':
@@ -29680,7 +29719,7 @@ class ZitiControllerDataService extends ZitiDataService {
                     filterVal = `${filter.columnId}=${filter.value}`;
                     break;
                 default:
-                    filterVal = `${filter.columnId} contains "${filter.value}"`;
+                    filterVal = `${filter.columnId} icontains "${filter.value}"`;
                     break;
             }
             if (index <= 0) {