@openziti/ziti-console-lib 1.5.2 → 1.5.3

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

@@ -30,6 +30,8 @@ import * as i5$3 from '@angular/material/select';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i1$4 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
+import * as i6$1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { catchError, map as map$1, distinctUntilChanged, debounceTime, skip, takeUntil, throttleTime, filter as filter$1 } from 'rxjs/operators';
 import * as i1$2 from 'ngx-logger';
 import { NgxLoggerLevel } from 'ngx-logger';
@@ -2914,9 +2916,13 @@ class DataTableFilterService {
         this.activatedRoute = activatedRoute;
         this.filters = [];
         this.currentPage = 1;
+        /** Rows requested per page. Defaults to the legacy page size; the list-table's
+         *  rows-per-page control changes it via {@link changePageSize}. */
+        this.pageSize = 50;
         this.filtersChanged = new BehaviorSubject(this.filters);
         this.filtering = new BehaviorSubject(false);
         this.pageChanged = new BehaviorSubject(this.currentPage);
+        this.pageSizeChanged = new BehaviorSubject(this.pageSize);
         this.currentQueryParams = [];
     }
     updateFilter(filterObj) {
@@ -2962,6 +2968,11 @@ class DataTableFilterService {
         this.currentPage = page;
         this.pageChanged.next(page);
     }
+    changePageSize(size) {
+        this.pageSize = size;
+        this.currentPage = 1;
+        this.pageSizeChanged.next(size);
+    }
     clearFilters() {
         this.filters = [];
         this.updateUrlParameters();
@@ -3510,6 +3521,14 @@ let ListPageServiceClass = class ListPageServiceClass {
                 this.basePath = pathSegments[0];
             }
         });
+        // The subscription above misses the NavigationEnd that already fired before
+        // this root-provided service was lazily constructed (first page load), which
+        // would leave basePath empty and send name links / openEditForm to "/<id>".
+        // Seed it from the current route immediately.
+        const currentConfig = this.router?.routerState?.snapshot?.root?.firstChild?.routeConfig;
+        if (currentConfig?.path) {
+            this.basePath = currentConfig.path.split('/')[0];
+        }
     }
     /**
      * Root-provided page services survive route changes; restore baseline menus before each table init
@@ -3702,6 +3721,7 @@ class ListPageComponent {
         this.filterApplied = false;
         this.modalOpen = false;
         this.gridObj = {};
+        this.tableObj = null;
         this.subscription = new Subscription();
         this.growlerSvc = inject(GrowlerService);
         this.managementPermissions = inject(ManagementPermissionsService);
@@ -3712,7 +3732,7 @@ class ListPageComponent {
         this.svc.refreshData = this.refreshData.bind(this);
         this.svc.resetMenusForInit();
         this.svc.initMenuActions();
-        this.columnDefs = this.svc.initTableColumns();
+        this.columnDefs = this.loadTableColumns();
         this.svc.capturePermissionSnapshots();
         this.subscription.add(this.managementPermissions.stateVersion$.subscribe(() => {
             this.svc.rebuildMenusAndHeaders(this.managementPermissions);
@@ -3731,6 +3751,9 @@ class ListPageComponent {
         this.subscription.add(this.filterService.pageChanged.pipe(skip(1)).subscribe(page => {
             this.refreshData();
         }));
+        this.subscription.add(this.filterService.pageSizeChanged.pipe(skip(1)).subscribe(() => {
+            this.refreshData();
+        }));
         this.subscription.add(this.consoleEvents.closeSideModal.subscribe((event) => {
             this.closeModal();
         }));
@@ -3751,7 +3774,8 @@ class ListPageComponent {
         const index = this.svc.tableHeaderActions.findIndex((a) => a.action === 'download-selected');
         const allow = this.managementPermissions.canRead(this.svc.resourceType);
         if (hasSelection && allow && index === -1) {
-            this.svc.tableHeaderActions.push({ name: 'Download Selected', action: 'download-selected' });
+            // icon (SVG) is rendered by the new list-table's header menu; legacy ignores it
+            this.svc.tableHeaderActions.push({ name: 'Download Selected', action: 'download-selected', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5v7M5 6.6 8 9.6l3-3M3.2 12.6h9.6"/></svg>' });
         }
         if ((!hasSelection || !allow) && index !== -1) {
             this.svc.tableHeaderActions.splice(index, 1);
@@ -3782,7 +3806,7 @@ class ListPageComponent {
         }
         this.isLoading = true;
         sort = sort ? sort : this.svc.currentSort;
-        this.svc.getData(this.filterService.filters, sort, this.filterService.currentPage)
+        this.svc.getData(this.filterService.filters, sort, this.filterService.currentPage, this.filterService.pageSize)
             .then((data) => {
             this.rowData = [];
             if (hardRefresh) {
@@ -3868,9 +3892,22 @@ class ListPageComponent {
         }
         return extensionFound;
     }
+    /**
+     * Column set loaded into the table on init. Defaults to the service's ag-grid
+     * column defs (the legacy {@link DataTableComponent}). A page that renders the
+     * new {@link ListTableComponent} overrides this to return the `ListColumn` set
+     * instead, leaving every other page untouched.
+     */
+    loadTableColumns() {
+        return this.svc.initTableColumns();
+    }
     gridReady(event) {
         this.gridObj = event;
     }
+    /** Ready hook for {@link ListTableComponent}; keeps the instance for extension use. */
+    tableReady(event) {
+        this.tableObj = event?.component;
+    }
     refreshCells() {
         defer(() => {
             var params = {
@@ -6292,6 +6329,320 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     args: [ZITI_DATA_SERVICE]
                 }] }, { type: GrowlerService }] });
 
+/**
+ * Name cell for {@link ListTableComponent}: a link to the entity's detail route,
+ * with optional identity/router status circles and a prefix icon. Inputs come from
+ * the column's `cellInputs(ctx)`: `{ row, cellValue, cellConfig }`, where
+ * `cellConfig` carries `pathRoot`, `itemProp?`, `showIdentityIcons?`,
+ * `showRouterIcons?`, `getNamePrefix?`, `cellNamePreCheck?`.
+ */
+class NameCellComponent {
+    set row(v) {
+        this.item = v;
+    }
+    set cellValue(v) {
+        this.value = v;
+    }
+    set cellConfig(cfg) {
+        this.cellParams = cfg || {};
+    }
+    constructor(router) {
+        this.router = router;
+        this.cellParams = {};
+    }
+    get namePrefix() {
+        const fn = this.cellParams?.getNamePrefix;
+        if (typeof fn !== 'function') {
+            return null;
+        }
+        const result = fn(this.item);
+        if (!result?.show) {
+            return null;
+        }
+        return result;
+    }
+    linkClicked(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (isFunction(this.cellParams?.cellNamePreCheck)) {
+            this.cellParams?.cellNamePreCheck(this.item).then((result) => {
+                if (!result?.confirmed) {
+                    return;
+                }
+                this.navigate();
+            });
+            return;
+        }
+        this.navigate();
+    }
+    navigate() {
+        this.router.navigateByUrl(`${this.cellParams.pathRoot}/${get(this.item, this.cellParams.itemProp, this.item.id)}`);
+    }
+    get cellText() {
+        let val = this.value;
+        if (isEmpty(val)) {
+            val = this.item?.name;
+        }
+        return val;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NameCellComponent, deps: [{ token: i4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: NameCellComponent, isStandalone: false, selector: "lib-name-cell", inputs: { row: "row", cellValue: "cellValue", cellConfig: "cellConfig" }, ngImport: i0, template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" class=\"cell-name-link\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            @if (cellParams.showIdentityIcons && item.edgeRouterConnectionStatus) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.edgeRouterConnectionStatus}}\" title=\"Edge Router Connection Status\"></span>\n                </div>\n            }\n            @if (cellParams.showIdentityIcons && !item.edgeRouterConnectionStatus) {\n                <div 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            }\n            @if (cellParams.showRouterIcons) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.isVerified}}\" title=\"{{item.isVerified ? 'Verified' : 'Unverified'}}\"></span>\n                    <span class=\"circle {{item.isOnline}}\" title=\"{{item.isOnline ? 'Online' : 'Offline'}}\"></span>\n                </div>\n            }\n            @if (namePrefix) {\n                <div class=\"cell-name-prefix-wrap\" [matTooltip]=\"namePrefix.tooltip\" [matTooltipShowDelay]=\"0\">\n                    <span class=\"cell-name-prefix-icon\" [ngClass]=\"namePrefix.iconClass\"></span>\n                </div>\n            }\n            <strong>{{cellText}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;align-items:center;gap:.3125rem}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-name-link{display:inline-flex;align-items:center}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem}.cell-name-prefix-wrap{display:flex;align-items:center;justify-content:center}.cell-name-prefix-icon{color:var(--highlighted);font-size:1rem}.circle.online{background-color:var(--green)}.circle.unknown{background-color:var(--highlighted)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NameCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-name-cell', standalone: false, template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" class=\"cell-name-link\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            @if (cellParams.showIdentityIcons && item.edgeRouterConnectionStatus) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.edgeRouterConnectionStatus}}\" title=\"Edge Router Connection Status\"></span>\n                </div>\n            }\n            @if (cellParams.showIdentityIcons && !item.edgeRouterConnectionStatus) {\n                <div 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            }\n            @if (cellParams.showRouterIcons) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.isVerified}}\" title=\"{{item.isVerified ? 'Verified' : 'Unverified'}}\"></span>\n                    <span class=\"circle {{item.isOnline}}\" title=\"{{item.isOnline ? 'Online' : 'Offline'}}\"></span>\n                </div>\n            }\n            @if (namePrefix) {\n                <div class=\"cell-name-prefix-wrap\" [matTooltip]=\"namePrefix.tooltip\" [matTooltipShowDelay]=\"0\">\n                    <span class=\"cell-name-prefix-icon\" [ngClass]=\"namePrefix.iconClass\"></span>\n                </div>\n            }\n            <strong>{{cellText}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;align-items:center;gap:.3125rem}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-name-link{display:inline-flex;align-items:center}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem}.cell-name-prefix-wrap{display:flex;align-items:center;justify-content:center}.cell-name-prefix-icon{color:var(--highlighted);font-size:1rem}.circle.online{background-color:var(--green)}.circle.unknown{background-color:var(--highlighted)}\n"] }]
+        }], ctorParameters: () => [{ type: i4.Router }], propDecorators: { row: [{
+                type: Input
+            }], cellValue: [{
+                type: Input
+            }], cellConfig: [{
+                type: Input
+            }] } });
+
+/*
+    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.
+*/
+/**
+ * Modern hover card for the identities O/S cell — shows the environment info
+ * (OS, version, release, arch) in a clean key/value layout. Rendered by
+ * ListTableComponent's hover-tooltip mechanism (column `tooltip`).
+ */
+class OsInfoTooltipComponent {
+    get envInfo() {
+        return this.row?.envInfo || this.row?.versionInfo || {};
+    }
+    get osClass() {
+        const os = `${this.envInfo?.os || ''}`.toLowerCase();
+        const ver = `${this.envInfo?.osVersion || ''}`.toLowerCase();
+        if (ver.includes('windows') || os.includes('mingw') || os.includes('windows')) {
+            return 'windows';
+        }
+        if (os.includes('darwin')) {
+            return 'apple';
+        }
+        if (os.includes('linux')) {
+            return 'linux';
+        }
+        if (os.includes('android')) {
+            return 'android';
+        }
+        return 'other';
+    }
+    get osTitle() {
+        switch (this.osClass) {
+            case 'apple': return 'macOS';
+            case 'windows': return 'Windows';
+            case 'linux': return 'Linux';
+            case 'android': return 'Android';
+            default: return this.envInfo?.os || 'Unknown OS';
+        }
+    }
+    /** Whether there is any environment info worth showing. */
+    get hasInfo() {
+        const e = this.envInfo;
+        return !!(e && (e.os || e.osVersion || e.osRelease || e.arch));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: OsInfoTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: OsInfoTooltipComponent, isStandalone: false, selector: "lib-os-info-tooltip", inputs: { row: "row" }, ngImport: i0, template: "<div class=\"os-tip\">\n  <div class=\"os-tip-head\">\n    <span class=\"os-tip-icon {{ osClass }}\"></span>\n    <span class=\"os-tip-title\">{{ osTitle }}</span>\n  </div>\n  @if (hasInfo) {\n    <div class=\"os-tip-body\">\n      @if (envInfo?.osVersion) {\n        <div class=\"os-tip-row\"><span class=\"os-tip-key\">Version</span><span class=\"os-tip-val\">{{ envInfo.osVersion }}</span></div>\n      }\n      @if (envInfo?.osRelease) {\n        <div class=\"os-tip-row\"><span class=\"os-tip-key\">Release</span><span class=\"os-tip-val\">{{ envInfo.osRelease }}</span></div>\n      }\n      @if (envInfo?.arch) {\n        <div class=\"os-tip-row\"><span class=\"os-tip-key\">Arch</span><span class=\"os-tip-val\">{{ envInfo.arch }}</span></div>\n      }\n    </div>\n  } @else {\n    <div class=\"os-tip-empty\">No environment info reported</div>\n  }\n</div>\n", styles: [":host{display:block}.os-tip{min-width:11rem;max-width:16rem;padding:.625rem .75rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);font-family:var(--lt-font)}.os-tip-head{display:flex;align-items:center;gap:.5rem;padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--lt-border)}.os-tip-icon{flex:0 0 auto;width:1.25rem;height:1.25rem;background-size:contain;background-repeat:no-repeat;background-position:center}.os-tip-icon.apple{background-image:url(/assets/images/apple.png)}.os-tip-icon.windows{background-image:url(/assets/images/windows.png)}.os-tip-icon.linux{background-image:url(/assets/images/linux.png)}.os-tip-icon.android{background-image:url(/assets/images/android.png)}.os-tip-icon.other{background-image:url(/assets/images/other.png)}.os-tip-title{font-size:.875rem;font-weight:700;color:var(--lt-cell-text)}.os-tip-body{display:flex;flex-direction:column;gap:.3125rem}.os-tip-row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;font-size:.75rem}.os-tip-key{flex:0 0 auto;color:var(--groupText);font-size:.75rem}.os-tip-val{flex:1 1 auto;min-width:0;text-align:right;font-weight:600;color:var(--lt-cell-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.os-tip-empty{font-size:.75rem;font-style:italic;color:var(--groupText)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: OsInfoTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-os-info-tooltip', standalone: false, template: "<div class=\"os-tip\">\n  <div class=\"os-tip-head\">\n    <span class=\"os-tip-icon {{ osClass }}\"></span>\n    <span class=\"os-tip-title\">{{ osTitle }}</span>\n  </div>\n  @if (hasInfo) {\n    <div class=\"os-tip-body\">\n      @if (envInfo?.osVersion) {\n        <div class=\"os-tip-row\"><span class=\"os-tip-key\">Version</span><span class=\"os-tip-val\">{{ envInfo.osVersion }}</span></div>\n      }\n      @if (envInfo?.osRelease) {\n        <div class=\"os-tip-row\"><span class=\"os-tip-key\">Release</span><span class=\"os-tip-val\">{{ envInfo.osRelease }}</span></div>\n      }\n      @if (envInfo?.arch) {\n        <div class=\"os-tip-row\"><span class=\"os-tip-key\">Arch</span><span class=\"os-tip-val\">{{ envInfo.arch }}</span></div>\n      }\n    </div>\n  } @else {\n    <div class=\"os-tip-empty\">No environment info reported</div>\n  }\n</div>\n", styles: [":host{display:block}.os-tip{min-width:11rem;max-width:16rem;padding:.625rem .75rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);font-family:var(--lt-font)}.os-tip-head{display:flex;align-items:center;gap:.5rem;padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--lt-border)}.os-tip-icon{flex:0 0 auto;width:1.25rem;height:1.25rem;background-size:contain;background-repeat:no-repeat;background-position:center}.os-tip-icon.apple{background-image:url(/assets/images/apple.png)}.os-tip-icon.windows{background-image:url(/assets/images/windows.png)}.os-tip-icon.linux{background-image:url(/assets/images/linux.png)}.os-tip-icon.android{background-image:url(/assets/images/android.png)}.os-tip-icon.other{background-image:url(/assets/images/other.png)}.os-tip-title{font-size:.875rem;font-weight:700;color:var(--lt-cell-text)}.os-tip-body{display:flex;flex-direction:column;gap:.3125rem}.os-tip-row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;font-size:.75rem}.os-tip-key{flex:0 0 auto;color:var(--groupText);font-size:.75rem}.os-tip-val{flex:1 1 auto;min-width:0;text-align:right;font-weight:600;color:var(--lt-cell-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.os-tip-empty{font-size:.75rem;font-style:italic;color:var(--groupText)}\n"] }]
+        }], propDecorators: { row: [{
+                type: Input
+            }] } });
+
+/*
+    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.
+*/
+/**
+ * Hover card for the identities SDK cell — shows the reported SDK details
+ * (app id/version, version, type, branch, revision), the same fields the legacy
+ * ag-grid SDK tooltip surfaced. Rendered by ListTableComponent's hover-tooltip
+ * mechanism (column `tooltip`).
+ */
+class SdkInfoTooltipComponent {
+    get sdkInfo() {
+        return this.row?.sdkInfo || {};
+    }
+    get title() {
+        const s = this.sdkInfo;
+        return s?.appId || s?.type || 'SDK';
+    }
+    get hasInfo() {
+        const s = this.sdkInfo;
+        return !!(s && (s.appId || s.appVersion || s.version || s.type || s.branch || s.revision));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SdkInfoTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SdkInfoTooltipComponent, isStandalone: false, selector: "lib-sdk-info-tooltip", inputs: { row: "row" }, ngImport: i0, template: "<div class=\"sdk-tip\">\n  <div class=\"sdk-tip-head\">\n    <span class=\"sdk-tip-title\">{{ title }}</span>\n  </div>\n  @if (hasInfo) {\n    <div class=\"sdk-tip-body\">\n      @if (sdkInfo?.appId) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">App ID</span><span class=\"sdk-tip-val\">{{ sdkInfo.appId }}</span></div>\n      }\n      @if (sdkInfo?.appVersion) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">App Version</span><span class=\"sdk-tip-val\">{{ sdkInfo.appVersion }}</span></div>\n      }\n      @if (sdkInfo?.version) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">Version</span><span class=\"sdk-tip-val\">{{ sdkInfo.version }}</span></div>\n      }\n      @if (sdkInfo?.type) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">Type</span><span class=\"sdk-tip-val\">{{ sdkInfo.type }}</span></div>\n      }\n      @if (sdkInfo?.branch) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">Branch</span><span class=\"sdk-tip-val\">{{ sdkInfo.branch }}</span></div>\n      }\n      @if (sdkInfo?.revision) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">Revision</span><span class=\"sdk-tip-val\">{{ sdkInfo.revision }}</span></div>\n      }\n    </div>\n  } @else {\n    <div class=\"sdk-tip-empty\">No SDK info reported</div>\n  }\n</div>\n", styles: [":host{display:block}.sdk-tip{min-width:11rem;max-width:18rem;padding:.625rem .75rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);font-family:var(--lt-font)}.sdk-tip-head{display:flex;align-items:center;gap:.5rem;padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--lt-border)}.sdk-tip-title{font-size:.875rem;font-weight:700;color:var(--lt-cell-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sdk-tip-body{display:flex;flex-direction:column;gap:.3125rem}.sdk-tip-row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;font-size:.75rem}.sdk-tip-key{flex:0 0 auto;color:var(--groupText);font-size:.75rem}.sdk-tip-val{flex:1 1 auto;min-width:0;text-align:right;font-weight:600;color:var(--lt-cell-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sdk-tip-empty{font-size:.75rem;font-style:italic;color:var(--groupText)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SdkInfoTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sdk-info-tooltip', standalone: false, template: "<div class=\"sdk-tip\">\n  <div class=\"sdk-tip-head\">\n    <span class=\"sdk-tip-title\">{{ title }}</span>\n  </div>\n  @if (hasInfo) {\n    <div class=\"sdk-tip-body\">\n      @if (sdkInfo?.appId) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">App ID</span><span class=\"sdk-tip-val\">{{ sdkInfo.appId }}</span></div>\n      }\n      @if (sdkInfo?.appVersion) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">App Version</span><span class=\"sdk-tip-val\">{{ sdkInfo.appVersion }}</span></div>\n      }\n      @if (sdkInfo?.version) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">Version</span><span class=\"sdk-tip-val\">{{ sdkInfo.version }}</span></div>\n      }\n      @if (sdkInfo?.type) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">Type</span><span class=\"sdk-tip-val\">{{ sdkInfo.type }}</span></div>\n      }\n      @if (sdkInfo?.branch) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">Branch</span><span class=\"sdk-tip-val\">{{ sdkInfo.branch }}</span></div>\n      }\n      @if (sdkInfo?.revision) {\n        <div class=\"sdk-tip-row\"><span class=\"sdk-tip-key\">Revision</span><span class=\"sdk-tip-val\">{{ sdkInfo.revision }}</span></div>\n      }\n    </div>\n  } @else {\n    <div class=\"sdk-tip-empty\">No SDK info reported</div>\n  }\n</div>\n", styles: [":host{display:block}.sdk-tip{min-width:11rem;max-width:18rem;padding:.625rem .75rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);font-family:var(--lt-font)}.sdk-tip-head{display:flex;align-items:center;gap:.5rem;padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--lt-border)}.sdk-tip-title{font-size:.875rem;font-weight:700;color:var(--lt-cell-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sdk-tip-body{display:flex;flex-direction:column;gap:.3125rem}.sdk-tip-row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;font-size:.75rem}.sdk-tip-key{flex:0 0 auto;color:var(--groupText);font-size:.75rem}.sdk-tip-val{flex:1 1 auto;min-width:0;text-align:right;font-weight:600;color:var(--lt-cell-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sdk-tip-empty{font-size:.75rem;font-style:italic;color:var(--groupText)}\n"] }]
+        }], propDecorators: { row: [{
+                type: Input
+            }] } });
+
+/*
+    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.
+*/
+/**
+ * Renders a truthy boolean as a green check + domain label (via `trueLabel`);
+ * a false value renders nothing, so the column reads as a clean presence marker.
+ */
+class BooleanCellComponent {
+    constructor() {
+        this.trueLabel = 'Yes';
+    }
+    get isTrue() {
+        return this.value === true || this.value === 'true';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BooleanCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: BooleanCellComponent, isStandalone: false, selector: "lib-boolean-cell", inputs: { value: "value", trueLabel: "trueLabel" }, ngImport: i0, template: "@if (isTrue) {\n  <span class=\"bool bool-true\">\n    <svg class=\"bool-check\" viewBox=\"0 0 14 14\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.5 7.6 5.7 10.8 11.5 3.6\"/>\n    </svg>\n    <span class=\"bool-label\">{{ trueLabel }}</span>\n  </span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.bool-true{display:inline-flex;align-items:center;gap:.3125rem;padding:.1875rem .5rem .1875rem .4375rem;font-family:var(--lt-font);font-size:.75rem;font-weight:600;line-height:1.2;color:#15803d;background:color-mix(in srgb,#16a34a 12%,transparent);border-radius:999px}.bool-check{flex:0 0 auto;display:block;color:#16a34a}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BooleanCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-boolean-cell', standalone: false, template: "@if (isTrue) {\n  <span class=\"bool bool-true\">\n    <svg class=\"bool-check\" viewBox=\"0 0 14 14\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.5 7.6 5.7 10.8 11.5 3.6\"/>\n    </svg>\n    <span class=\"bool-label\">{{ trueLabel }}</span>\n  </span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.bool-true{display:inline-flex;align-items:center;gap:.3125rem;padding:.1875rem .5rem .1875rem .4375rem;font-family:var(--lt-font);font-size:.75rem;font-weight:600;line-height:1.2;color:#15803d;background:color-mix(in srgb,#16a34a 12%,transparent);border-radius:999px}.bool-check{flex:0 0 auto;display:block;color:#16a34a}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], trueLabel: [{
+                type: Input
+            }] } });
+
+/*
+    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.
+*/
+/**
+ * Enrollment-token cell for the identities list. Shows a status chip (Available /
+ * Expired / —) that doubles as a dropdown of enrollment actions (Download JWT, Show
+ * QR, Re-issue). Actions are emitted via the cell context's `emitAction`, so they run
+ * through the same page handlers as the row ⋯ menu.
+ */
+class TokenCellComponent {
+    constructor() {
+        this.open = false;
+        this.menuLeft = 0;
+        this.menuTop = 0;
+    }
+    get status() {
+        if (!this.hasEnrolmentToken) {
+            return 'none';
+        }
+        return this.tokenExpired ? 'expired' : 'available';
+    }
+    get statusLabel() {
+        return this.status === 'expired' ? 'Expired' : 'Available';
+    }
+    get actions() {
+        if (this.status === 'available') {
+            return [
+                { label: 'Download JWT', action: 'download-enrollment', icon: 'icon-download-jwt' },
+                { label: 'Show QR code', action: 'qr-code', icon: 'icon-qr' },
+                { label: 'Re-issue enrollment', action: 'reissue-enrollment', icon: 'icon-refresh' },
+            ];
+        }
+        if (this.status === 'expired') {
+            return [{ label: 'Re-issue enrollment', action: 'reissue-enrollment', icon: 'icon-refresh' }];
+        }
+        return [];
+    }
+    toggleMenu(event) {
+        event.stopPropagation();
+        if (this.open) {
+            this.open = false;
+            return;
+        }
+        const rect = this.trigger?.nativeElement.getBoundingClientRect();
+        if (rect) {
+            this.menuLeft = rect.left;
+            this.menuTop = rect.bottom + 4;
+        }
+        this.open = true;
+    }
+    closeMenu() {
+        this.open = false;
+    }
+    runAction(action, event) {
+        event.stopPropagation();
+        this.open = false;
+        this.emitAction?.(action, this.row);
+    }
+    get hasEnrolmentToken() {
+        const token = this.row?.enrollment?.ott?.jwt ||
+            this.row?.enrollment?.ottca?.jwt ||
+            this.row?.enrollment?.updb?.jwt;
+        return !!(this.row?.enrollmentToken || token);
+    }
+    get tokenExpired() {
+        const expiration = this.row?.enrollmentExpiresAt ||
+            this.row?.enrollment?.ott?.expiresAt ||
+            this.row?.enrollment?.ottca?.expiresAt ||
+            this.row?.enrollment?.updb?.expiresAt;
+        return expiration ? moment$1(expiration).isBefore() : false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TokenCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TokenCellComponent, isStandalone: false, selector: "lib-token-cell", inputs: { row: "row", emitAction: "emitAction" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: "@if (status !== 'none') {\n  <button\n    #trigger\n    type=\"button\"\n    class=\"token-chip {{ status }}\"\n    [class.is-open]=\"open\"\n    (click)=\"toggleMenu($event)\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open\"\n  >\n    <span class=\"token-chip-label\">{{ statusLabel }}</span>\n    <svg class=\"token-caret\" viewBox=\"0 0 10 6\" width=\"9\" height=\"6\" aria-hidden=\"true\">\n      <path fill=\"currentColor\" d=\"M0 0h10L5 6z\"/>\n    </svg>\n  </button>\n\n  @if (open) {\n    <div class=\"token-menu\" [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\" (clickOutside)=\"closeMenu()\">\n      @for (a of actions; track a.action) {\n        <button type=\"button\" class=\"token-menu-item\" (click)=\"runAction(a.action, $event)\">\n          <span class=\"token-menu-icon {{ a.icon }}\" aria-hidden=\"true\"></span>\n          <span class=\"token-menu-label\">{{ a.label }}</span>\n        </button>\n      }\n    </div>\n  }\n} @else {\n  <span class=\"token-empty\">&#8212;</span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.token-chip{display:inline-flex;align-items:center;gap:.3125rem;height:1.5rem;padding:0 .5rem;font-family:var(--lt-font);font-size:.75rem;font-weight:600;border:none;border-radius:.75rem;cursor:pointer;white-space:nowrap;transition:filter .15s}.token-chip .token-caret{display:block;opacity:.75}.token-chip:hover,.token-chip.is-open{filter:brightness(.96)}.token-chip.available{color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 12%,var(--lt-control-bg))}.token-chip.expired{color:color-mix(in srgb,var(--highlighted) 62%,#000);background:color-mix(in srgb,var(--highlighted) 26%,var(--lt-control-bg))}.token-empty{color:var(--groupText)}.token-menu{position:fixed;z-index:1000;min-width:11rem;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:token-in .1s ease-out}@keyframes token-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.token-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);text-align:left;background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer}.token-menu-item:hover{background:var(--lt-row-hover);color:var(--lt-link)}.token-menu-item:hover .token-menu-icon{color:var(--lt-link)}.token-menu-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;font-size:.9375rem;color:var(--lt-icon)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TokenCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-token-cell', standalone: false, template: "@if (status !== 'none') {\n  <button\n    #trigger\n    type=\"button\"\n    class=\"token-chip {{ status }}\"\n    [class.is-open]=\"open\"\n    (click)=\"toggleMenu($event)\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open\"\n  >\n    <span class=\"token-chip-label\">{{ statusLabel }}</span>\n    <svg class=\"token-caret\" viewBox=\"0 0 10 6\" width=\"9\" height=\"6\" aria-hidden=\"true\">\n      <path fill=\"currentColor\" d=\"M0 0h10L5 6z\"/>\n    </svg>\n  </button>\n\n  @if (open) {\n    <div class=\"token-menu\" [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\" (clickOutside)=\"closeMenu()\">\n      @for (a of actions; track a.action) {\n        <button type=\"button\" class=\"token-menu-item\" (click)=\"runAction(a.action, $event)\">\n          <span class=\"token-menu-icon {{ a.icon }}\" aria-hidden=\"true\"></span>\n          <span class=\"token-menu-label\">{{ a.label }}</span>\n        </button>\n      }\n    </div>\n  }\n} @else {\n  <span class=\"token-empty\">&#8212;</span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.token-chip{display:inline-flex;align-items:center;gap:.3125rem;height:1.5rem;padding:0 .5rem;font-family:var(--lt-font);font-size:.75rem;font-weight:600;border:none;border-radius:.75rem;cursor:pointer;white-space:nowrap;transition:filter .15s}.token-chip .token-caret{display:block;opacity:.75}.token-chip:hover,.token-chip.is-open{filter:brightness(.96)}.token-chip.available{color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 12%,var(--lt-control-bg))}.token-chip.expired{color:color-mix(in srgb,var(--highlighted) 62%,#000);background:color-mix(in srgb,var(--highlighted) 26%,var(--lt-control-bg))}.token-empty{color:var(--groupText)}.token-menu{position:fixed;z-index:1000;min-width:11rem;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:token-in .1s ease-out}@keyframes token-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.token-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);text-align:left;background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer}.token-menu-item:hover{background:var(--lt-row-hover);color:var(--lt-link)}.token-menu-item:hover .token-menu-icon{color:var(--lt-link)}.token-menu-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;font-size:.9375rem;color:var(--lt-icon)}\n"] }]
+        }], propDecorators: { row: [{
+                type: Input
+            }], emitAction: [{
+                type: Input
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger']
+            }] } });
+
 /*
     Copyright NetFoundry Inc.
 
@@ -6343,19 +6694,21 @@ class IdentitiesPageService extends ListPageServiceClass {
             os: '',
             createdAt: '',
         };
+        // `icon` (SVG markup) is rendered before the label in the new list-table's row kebab
+        // (3-dot) menu. The legacy ag-grid menu ignores it.
         this.menuItems = [
-            { name: 'Edit', action: 'update' },
-            { name: 'Download JWT', action: 'download-enrollment' },
-            { name: 'View QR', action: 'qr-code' },
-            { name: 'Visualizer', action: 'identity-service-path' },
-            { name: 'Reset Enrollment', action: 'reset-enrollment' },
-            { name: 'Reissue Enrollment', action: 'reissue-enrollment' },
-            { name: 'Reset MFA', action: 'reset-mfa' },
-            { name: 'Override', action: 'override' },
-            { name: 'Delete', action: 'delete' },
+            { name: 'Edit', action: 'update', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M11.2 2.6 13.4 4.8 6 12.2l-2.8.6.6-2.8z"/></svg>' },
+            { name: 'Download JWT', action: 'download-enrollment', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5v7M5 6.6 8 9.6l3-3M3.2 12.6h9.6"/></svg>' },
+            { name: 'View QR', action: 'qr-code', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><g fill="none" stroke="currentColor" stroke-width="1.3"><rect x="2.5" y="2.5" width="4" height="4" rx="0.5"/><rect x="9.5" y="2.5" width="4" height="4" rx="0.5"/><rect x="2.5" y="9.5" width="4" height="4" rx="0.5"/></g><rect x="10" y="10" width="3.5" height="3.5" fill="currentColor"/></svg>' },
+            { name: 'Visualizer', action: 'identity-service-path', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" d="M5.4 7.3 10.6 4.6M5.4 8.7l5.2 2.7"/><circle cx="4" cy="8" r="1.8" fill="currentColor"/><circle cx="12" cy="4" r="1.8" fill="currentColor"/><circle cx="12" cy="12" r="1.8" fill="currentColor"/></svg>' },
+            { name: 'Reset Enrollment', action: 'reset-enrollment', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" d="M3.2 8a4.8 4.8 0 1 0 1.3-3.3"/><path fill="currentColor" d="M2.8 2.8l-.3 2.9 2.8-.4z"/></svg>' },
+            { name: 'Reissue Enrollment', action: 'reissue-enrollment', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" d="M12.8 8a4.8 4.8 0 1 1-1.3-3.3"/><path fill="currentColor" d="M13.2 2.8l.3 2.9-2.8-.4z"/></svg>' },
+            { name: 'Reset MFA', action: 'reset-mfa', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round" d="M8 2.3 12.8 4v3.8c0 3-2.1 4.9-4.8 5.9-2.7-1-4.8-2.9-4.8-5.9V4z"/></svg>' },
+            { name: 'Override', action: 'override', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" d="M2.8 5h10.4M2.8 11h10.4"/><circle cx="6" cy="5" r="1.7" fill="currentColor"/><circle cx="10" cy="11" r="1.7" fill="currentColor"/></svg>' },
+            { name: 'Delete', action: 'delete', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M3.4 4.6h9.2M6.4 4.6V3.2h3.2v1.4M4.6 4.6 5 13h6l.4-8.4"/></svg>' },
         ];
         this.tableHeaderActions = [
-            { name: 'Download All', action: 'download-all' },
+            { name: 'Download All', action: 'download-all', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5v7M5 6.6 8 9.6l3-3M3.2 12.6h9.6"/></svg>' },
         ];
         this.resourceType = 'identities';
         this.validate = (formData) => {
@@ -6611,15 +6964,280 @@ class IdentitiesPageService extends ListPageServiceClass {
         }
         return tableColumns;
     }
+    /**
+     * Column set for the new `lib-list-table` (the "beta" Identities page). Mirrors
+     * {@link initTableColumns} but emits the declarative `ListColumn` shape instead of
+     * ag-grid `ColDef`s: component cells via `cell`/`cellInputs`, legacy string
+     * renderers via `cellHtml`, and header filters declared with `filterType`.
+     * Loaded by {@link IdentitiesPageComponent} when the Beta Features toggle is on;
+     * the legacy {@link initTableColumns} above is left untouched for the ag-grid table.
+     */
+    initListTableColumns() {
+        this.initMenuActions();
+        const identityRolesHeaderComponentParams = {
+            filterType: 'ATTRIBUTE',
+            enableSorting: true,
+            appendAttributeHash: false,
+            getRoleAttributes: () => this.identityRoleAttributes,
+            getNamedAttributes: () => [],
+            getSelectedRoleAttributes: () => this.selectedIdentityRoleAttributes,
+            getSelectedNamedAttributes: () => [],
+            setSelectedRoleAttributes: (attributes) => {
+                this.selectedIdentityRoleAttributes = attributes;
+            },
+            setSelectedNamedAttributes: (attributes) => {
+                // no-op
+            },
+            getNamedAttributesMap: () => ({}),
+        };
+        const osRenderer = (row) => {
+            const os = (row?.data?.envInfo?.os || '').toLowerCase();
+            const ver = (row?.data?.envInfo?.osVersion || '').toLowerCase();
+            let cls = 'other';
+            if (ver.includes('windows') || os.includes('windows') || os.includes('mingw'))
+                cls = 'windows';
+            else if (os.includes('darwin'))
+                cls = 'apple';
+            else if (os.includes('linux'))
+                cls = 'linux';
+            else if (os.includes('android'))
+                cls = 'android';
+            return `<span class="os ${cls}"></span>`;
+        };
+        const sdkRenderer = (row) => {
+            // detail moves to the hover popover (SdkInfoTooltipComponent); the cell
+            // just shows the version, so drop the legacy balloon attributes
+            const version = row?.data?.sdkInfo?.version || '-';
+            return `<span class="oneline">${version}</span>`;
+        };
+        const isAdminHeaderComponentParams = {
+            filterType: 'SELECT',
+            enableSorting: true,
+            filterOptions: [
+                { label: 'All', value: '' },
+                { label: 'Admins', value: true },
+                { label: 'Non-Admins', value: false },
+            ]
+        };
+        // Online when any of the connection signals is live (the status icon is drawn
+        // via CSS ::before, since [innerHTML] strips inline <svg>).
+        const isOnline = (v) => v === true || /online|connected|true/i.test(String(v ?? ''));
+        const statusRenderer = (row) => {
+            const d = row?.data || {};
+            const online = isOnline(d.edgeRouterConnectionStatus) || isOnline(d.hasEdgeRouterConnection) || isOnline(d.hasApiSession);
+            return `<span class="lt-status lt-status-${online ? 'online' : 'offline'}">${online ? 'Online' : 'Offline'}</span>`;
+        };
+        // Color-coded Type pill with an icon: Default = blue, Router = green. Icon drawn
+        // via CSS (::before) since [innerHTML] strips inline <svg>.
+        const typeBadgeRenderer = (row) => {
+            const t = row?.data?.type?.name || row?.data?.type || '';
+            const key = String(t).toLowerCase();
+            const cls = key === 'router' ? 'lt-type-router'
+                : key === 'default' ? 'lt-type-default'
+                    : 'lt-type-other';
+            return `<span class="lt-type-badge ${cls}">${t}</span>`;
+        };
+        // Light skinned role chips (the legacy rolesRenderer paints
+        // heavy dark overlap chips; this stays scoped to the beta page).
+        const rolesChipRenderer = (row) => {
+            const colId = row?.column?.colId;
+            const attrs = row?.data?.[colId + 'Display'] || row?.data?.[colId] || [];
+            if (!attrs?.length) {
+                return '';
+            }
+            return attrs.map((attr) => {
+                const raw = String(attr?.name ?? attr ?? '').trim();
+                if (!raw) {
+                    return '';
+                }
+                // named attributes (@) use the secondary color; role attributes (#)
+                // the primary color, matching the tag selector's distinction
+                const isNamed = raw.charAt(0) === '@';
+                const label = isNamed ? raw : (raw.charAt(0) === '#' ? raw : '#' + raw);
+                const cls = isNamed ? 'lt-chip lt-chip-at' : 'lt-chip';
+                return `<span class="${cls}">${label}</span>`;
+            }).join('');
+        };
+        let tableColumns = [
+            {
+                key: 'name',
+                field: 'name',
+                label: 'Name',
+                filterType: 'TEXTINPUT',
+                cell: NameCellComponent,
+                cellInputs: (ctx) => ({
+                    row: ctx.row,
+                    cellValue: ctx.value,
+                    // status now lives in its own Status column (skinned), so the
+                    // name cell no longer carries the connection dots
+                    cellConfig: { pathRoot: this.basePath, showIdentityIcons: false },
+                }),
+                onCellClick: (ctx) => {
+                    if (this.hasSelectedText()) {
+                        return;
+                    }
+                    this.openEditForm(ctx.row?.id);
+                },
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: true,
+                onSort: this.sort.bind(this),
+                sortDir: 'asc',
+                width: 300,
+            },
+            {
+                key: 'status',
+                field: 'hasEdgeRouterConnection',
+                label: 'Status',
+                cellHtml: statusRenderer,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                width: 120,
+            },
+            {
+                key: 'roleAttributes',
+                field: 'roleAttributes',
+                label: 'Roles',
+                filterType: 'ATTRIBUTE',
+                headerParams: identityRolesHeaderComponentParams,
+                cellHtml: rolesChipRenderer,
+                onCellClick: (ctx) => {
+                    if (this.hasSelectedText()) {
+                        return;
+                    }
+                    this.openEditForm(ctx.row?.id);
+                },
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: false,
+            },
+            {
+                key: 'os',
+                field: 'os',
+                label: 'O/S',
+                width: 100,
+                cellHtml: osRenderer,
+                tooltip: OsInfoTooltipComponent,
+                tooltipInputs: (ctx) => ({ row: ctx.row }),
+                // envInfo.os is a JSON blob field the controller cannot filter on
+                // ("unknown symbol") - no O/S filter control.
+                resizable: true,
+                cellClass: 'nf-cell-vert-align lt-cell-center',
+            },
+            {
+                key: 'sdk',
+                field: 'sdk',
+                label: 'SDK',
+                cellHtml: sdkRenderer,
+                tooltip: SdkInfoTooltipComponent,
+                tooltipInputs: (ctx) => ({ row: ctx.row }),
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                width: 125,
+            },
+            {
+                key: 'type',
+                field: 'type.name',
+                label: 'Type',
+                filterType: 'SELECT',
+                filterField: 'type',
+                filterPlaceholder: 'Any type',
+                // Only Default + Router exist as identity types in Ziti 2.x (confirmed
+                // via /edge/management/v1/identity-types); Service/Device/User are legacy
+                // and always return 0.
+                filterOptions: [
+                    { label: 'Show All', value: '' },
+                    { label: 'Default', value: 'Default', chipClass: 'lt-type-badge lt-type-default' },
+                    { label: 'Router', value: 'Router', chipClass: 'lt-type-badge lt-type-router' },
+                ],
+                cellHtml: typeBadgeRenderer,
+                resizable: true,
+                sortable: true,
+                cellClass: 'nf-cell-vert-align',
+                onSort: this.sort.bind(this),
+            },
+            {
+                key: 'isAdmin',
+                field: 'isAdmin',
+                label: 'Is Admin',
+                filterType: 'SELECT',
+                filterOptions: isAdminHeaderComponentParams.filterOptions,
+                cell: BooleanCellComponent,
+                cellInputs: (ctx) => ({ value: ctx.value, trueLabel: 'Admin' }),
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                width: 100,
+            },
+            {
+                key: 'createdAt',
+                field: 'createdAt',
+                label: 'Created At',
+                valueFormatter: this.createdAtFormatter,
+                filterType: 'DATETIME',
+                filterPlaceholder: 'Any time',
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+            },
+            {
+                key: 'token',
+                field: 'token',
+                label: 'Token',
+                cell: TokenCellComponent,
+                cellInputs: (ctx) => ({ row: ctx.row, emitAction: ctx.emitAction }),
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+            },
+            {
+                key: 'isMfaEnabled',
+                field: 'isMfaEnabled',
+                label: 'MFA',
+                // isMfaEnabled is a computed field the controller cannot filter on
+                // ("unknown symbol") - no MFA filter control.
+                cell: BooleanCellComponent,
+                cellInputs: (ctx) => ({ value: ctx.value, trueLabel: 'Enabled' }),
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                width: 100,
+            },
+            {
+                key: 'id',
+                field: 'id',
+                label: 'ID',
+                filterType: 'TEXTINPUT',
+                cellClass: 'nf-cell-vert-align',
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                onCellClick: (ctx) => {
+                    if (this.hasSelectedText()) {
+                        return;
+                    }
+                    this.openEditForm(ctx.row?.id);
+                },
+                hidden: true,
+            },
+        ];
+        if (this.extService.processTableColumns) {
+            tableColumns = this.extService.processTableColumns(tableColumns);
+        }
+        return tableColumns;
+    }
     getIdentityRoleAttributes() {
         return this.zitiService.get('identity-role-attributes', {}, []).then((result) => {
             this.identityRoleAttributes = result.data;
             return result;
         });
     }
-    getData(filters, sort, page) {
+    getData(filters, sort, page, pageSize) {
         // we can customize filters or sorting here before moving on...
         this.paging.page = page || this.paging.page;
+        if (pageSize) {
+            this.paging.total = pageSize;
+        }
         return super.getTableData('identities', this.paging, filters, sort)
             .then((results) => {
             return this.processData(results);
@@ -9289,6 +9907,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     args: [SHAREDZ_EXTENSION]
                 }] }] });
 
+/*
+    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.
+*/
+/**
+ * Header for the new list-table pages: an icon tile + title + one-line subtitle
+ * (with an optional info affordance) on the left, and a primary "Create ..." action
+ * on the right, over an optional tab strip. Emits the same `add` / `delete` actions
+ * as {@link ListPageHeaderComponent} so pages can swap headers without changing their
+ * handlers. Project the page's icon into the tile with a `header-icon` attribute.
+ */
+class ListTableHeaderComponent {
+    constructor() {
+        this.title = '';
+        this.subtitle = '';
+        /** Label for the primary create button, e.g. "Create Identity". */
+        this.createLabel = 'Create';
+        /** Optional short helper text shown behind the (i) affordance next to the title. */
+        this.infoText = '';
+        this.tabs = [];
+        this.showAdd = true;
+        /** Hide the create control even when showAdd is true. */
+        this.blockCreate = false;
+        /** Hide the bulk-delete control shown when rows are selected. */
+        this.blockDelete = false;
+        this.actionClicked = new EventEmitter();
+    }
+    clickAction(value) {
+        this.actionClicked.emit(value);
+    }
+    tabSelected(tab) {
+        const parsedUrl = new URL(window.location.href);
+        let path = parsedUrl.pathname;
+        if (document.baseURI) {
+            const base = new URL(document.baseURI).pathname;
+            if (path.startsWith(base)) {
+                path = path.slice(base.length);
+            }
+        }
+        let tabUrl = tab.url;
+        if (tab.url.startsWith('/')) {
+            tabUrl = tab.url.slice(1);
+        }
+        if (path.startsWith('/')) {
+            path = path.slice(1);
+        }
+        return tabUrl === path;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListTableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListTableHeaderComponent, isStandalone: false, selector: "lib-list-table-header", inputs: { title: "title", subtitle: "subtitle", createLabel: "createLabel", infoText: "infoText", tabs: "tabs", showAdd: "showAdd", blockCreate: "blockCreate", blockDelete: "blockDelete" }, outputs: { actionClicked: "actionClicked" }, ngImport: i0, template: "<div class=\"lth\">\n  <div class=\"lth-main\">\n    <div class=\"lth-icon\" aria-hidden=\"true\">\n      <ng-content select=\"[header-icon]\"></ng-content>\n    </div>\n    <div class=\"lth-titles\">\n      <div class=\"lth-title-row\">\n        <h1 class=\"lth-title\">{{ title }}</h1>\n        @if (infoText) {\n          <span class=\"lth-info\" [title]=\"infoText\" tabindex=\"0\" role=\"img\" [attr.aria-label]=\"infoText\">\n            <span class=\"lth-info-badge\" aria-hidden=\"true\">i</span>\n          </span>\n        }\n      </div>\n      @if (subtitle) {\n        <p class=\"lth-subtitle\">{{ subtitle }}</p>\n      }\n    </div>\n    <div class=\"lth-actions\">\n      @if (showAdd && !blockCreate) {\n        <button type=\"button\" class=\"lth-create\" (click)=\"clickAction('add')\" data-action=\"add\" id=\"CreateButton\">\n          <span class=\"lth-create-plus\" aria-hidden=\"true\">+</span>\n          <span>{{ createLabel }}</span>\n        </button>\n      }\n      @if (!showAdd && !blockDelete) {\n        <button type=\"button\" class=\"lth-delete\" (click)=\"clickAction('delete')\" data-action=\"delete\" id=\"DeleteButton\">\n          <span class=\"lth-delete-icon icon-minus\" aria-hidden=\"true\"></span>\n          <span>Delete</span>\n        </button>\n      }\n    </div>\n  </div>\n  @if (tabs?.length) {\n    <div class=\"lth-tabs\">\n      @for (tab of tabs; track tab) {\n        <a\n          class=\"lth-tab\"\n          [ngClass]=\"{ selected: tabSelected(tab) }\"\n          [routerLink]=\"tab.url\"\n          [hidden]=\"tab.hidden\"\n        >{{ tab.label }}</a>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.lth{display:flex;flex-direction:column;gap:.75rem;padding-bottom:.5rem}.lth-main{display:flex;align-items:center;gap:.875rem}.lth-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:.75rem;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--background));border:1px solid color-mix(in srgb,var(--primary) 22%,var(--background))}.lth-icon svg,.lth-icon img{display:block;width:1.5rem;height:1.5rem}:host ::ng-deep .lth-icon [class^=icon-],:host ::ng-deep .lth-icon [class*=\" icon-\"]{font-size:1.5rem;line-height:1}:host ::ng-deep .lth-icon [class^=icon-]:before,:host ::ng-deep .lth-icon [class*=\" icon-\"]:before{color:var(--primary)}.lth-titles{flex:1 1 auto;min-width:0}.lth-title-row{display:flex;align-items:center;gap:.5rem}.lth-title{margin:0;font-family:var(--lt-font, \"Open Sans\", sans-serif);font-size:1.5rem;font-weight:700;line-height:1.15;color:var(--tableText, var(--text))}.lth-info{display:inline-flex;align-items:center;justify-content:center;padding:.25rem;background:var(--background);border:1px solid var(--stroke);border-radius:.375rem;box-shadow:0 1px 2px #0000000f;cursor:help}.lth-info:hover{border-color:var(--groupText)}.lth-info-badge{display:inline-flex;align-items:center;justify-content:center;width:.9375rem;height:.9375rem;font-size:.625rem;font-weight:700;font-style:italic;font-family:Georgia,Times New Roman,serif;line-height:1;color:#fff;background:var(--dark);border-radius:50%}.lth-subtitle{margin:.125rem 0 0;font-family:var(--lt-font, \"Open Sans\", sans-serif);font-size:.8125rem;color:var(--groupText)}.lth-actions{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}.lth-create{display:inline-flex;align-items:center;gap:.4375rem;height:2.5rem;padding:0 1rem;font-family:var(--lt-font, \"Open Sans\", sans-serif);font-size:.8125rem;font-weight:600;color:#fff;background:var(--primary);border:none;border-radius:var(--inputBorderRadius, .5rem);cursor:pointer;transition:filter .15s}.lth-create:hover{filter:brightness(1.06)}.lth-create-plus{font-size:1.125rem;line-height:1}.lth-delete{display:inline-flex;align-items:center;gap:.4375rem;height:2.5rem;padding:0 1rem;font-family:var(--lt-font, \"Open Sans\", sans-serif);font-size:.8125rem;font-weight:600;color:var(--redText, #9c0027);background:transparent;border:1px solid var(--redText, #9c0027);border-radius:var(--inputBorderRadius, .5rem);cursor:pointer;transition:background .15s}.lth-delete:hover{background:color-mix(in srgb,var(--redText, #9c0027) 8%,transparent)}.lth-tabs{display:flex;align-items:center;gap:1.25rem;border-bottom:1px solid var(--stroke)}.lth-tab{padding:.4375rem .125rem;font-family:var(--lt-font, \"Open Sans\", sans-serif);font-size:.8125rem;font-weight:600;color:var(--groupText);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .15s,border-color .15s}.lth-tab:hover{color:var(--text)}.lth-tab.selected{color:var(--primary);border-bottom-color:var(--primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListTableHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-table-header', standalone: false, template: "<div class=\"lth\">\n  <div class=\"lth-main\">\n    <div class=\"lth-icon\" aria-hidden=\"true\">\n      <ng-content select=\"[header-icon]\"></ng-content>\n    </div>\n    <div class=\"lth-titles\">\n      <div class=\"lth-title-row\">\n        <h1 class=\"lth-title\">{{ title }}</h1>\n        @if (infoText) {\n          <span class=\"lth-info\" [title]=\"infoText\" tabindex=\"0\" role=\"img\" [attr.aria-label]=\"infoText\">\n            <span class=\"lth-info-badge\" aria-hidden=\"true\">i</span>\n          </span>\n        }\n      </div>\n      @if (subtitle) {\n        <p class=\"lth-subtitle\">{{ subtitle }}</p>\n      }\n    </div>\n    <div class=\"lth-actions\">\n      @if (showAdd && !blockCreate) {\n        <button type=\"button\" class=\"lth-create\" (click)=\"clickAction('add')\" data-action=\"add\" id=\"CreateButton\">\n          <span class=\"lth-create-plus\" aria-hidden=\"true\">+</span>\n          <span>{{ createLabel }}</span>\n        </button>\n      }\n      @if (!showAdd && !blockDelete) {\n        <button type=\"button\" class=\"lth-delete\" (click)=\"clickAction('delete')\" data-action=\"delete\" id=\"DeleteButton\">\n          <span class=\"lth-delete-icon icon-minus\" aria-hidden=\"true\"></span>\n          <span>Delete</span>\n        </button>\n      }\n    </div>\n  </div>\n  @if (tabs?.length) {\n    <div class=\"lth-tabs\">\n      @for (tab of tabs; track tab) {\n        <a\n          class=\"lth-tab\"\n          [ngClass]=\"{ selected: tabSelected(tab) }\"\n          [routerLink]=\"tab.url\"\n          [hidden]=\"tab.hidden\"\n        >{{ tab.label }}</a>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.lth{display:flex;flex-direction:column;gap:.75rem;padding-bottom:.5rem}.lth-main{display:flex;align-items:center;gap:.875rem}.lth-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:.75rem;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--background));border:1px solid color-mix(in srgb,var(--primary) 22%,var(--background))}.lth-icon svg,.lth-icon img{display:block;width:1.5rem;height:1.5rem}:host ::ng-deep .lth-icon [class^=icon-],:host ::ng-deep .lth-icon [class*=\" icon-\"]{font-size:1.5rem;line-height:1}:host ::ng-deep .lth-icon [class^=icon-]:before,:host ::ng-deep .lth-icon [class*=\" icon-\"]:before{color:var(--primary)}.lth-titles{flex:1 1 auto;min-width:0}.lth-title-row{display:flex;align-items:center;gap:.5rem}.lth-title{margin:0;font-family:var(--lt-font, \"Open Sans\", sans-serif);font-size:1.5rem;font-weight:700;line-height:1.15;color:var(--tableText, var(--text))}.lth-info{display:inline-flex;align-items:center;justify-content:center;padding:.25rem;background:var(--background);border:1px solid var(--stroke);border-radius:.375rem;box-shadow:0 1px 2px #0000000f;cursor:help}.lth-info:hover{border-color:var(--groupText)}.lth-info-badge{display:inline-flex;align-items:center;justify-content:center;width:.9375rem;height:.9375rem;font-size:.625rem;font-weight:700;font-style:italic;font-family:Georgia,Times New Roman,serif;line-height:1;color:#fff;background:var(--dark);border-radius:50%}.lth-subtitle{margin:.125rem 0 0;font-family:var(--lt-font, \"Open Sans\", sans-serif);font-size:.8125rem;color:var(--groupText)}.lth-actions{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}.lth-create{display:inline-flex;align-items:center;gap:.4375rem;height:2.5rem;padding:0 1rem;font-family:var(--lt-font, \"Open Sans\", sans-serif);font-size:.8125rem;font-weight:600;color:#fff;background:var(--primary);border:none;border-radius:var(--inputBorderRadius, .5rem);cursor:pointer;transition:filter .15s}.lth-create:hover{filter:brightness(1.06)}.lth-create-plus{font-size:1.125rem;line-height:1}.lth-delete{display:inline-flex;align-items:center;gap:.4375rem;height:2.5rem;padding:0 1rem;font-family:var(--lt-font, \"Open Sans\", sans-serif);font-size:.8125rem;font-weight:600;color:var(--redText, #9c0027);background:transparent;border:1px solid var(--redText, #9c0027);border-radius:var(--inputBorderRadius, .5rem);cursor:pointer;transition:background .15s}.lth-delete:hover{background:color-mix(in srgb,var(--redText, #9c0027) 8%,transparent)}.lth-tabs{display:flex;align-items:center;gap:1.25rem;border-bottom:1px solid var(--stroke)}.lth-tab{padding:.4375rem .125rem;font-family:var(--lt-font, \"Open Sans\", sans-serif);font-size:.8125rem;font-weight:600;color:var(--groupText);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .15s,border-color .15s}.lth-tab:hover{color:var(--text)}.lth-tab.selected{color:var(--primary);border-bottom-color:var(--primary)}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], createLabel: [{
+                type: Input
+            }], infoText: [{
+                type: Input
+            }], tabs: [{
+                type: Input
+            }], showAdd: [{
+                type: Input
+            }], blockCreate: [{
+                type: Input
+            }], blockDelete: [{
+                type: Input
+            }], actionClicked: [{
+                type: Output
+            }] } });
+
 /*
     Copyright NetFoundry Inc.
 
@@ -10769,6 +11472,1430 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 
+/*
+    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.
+*/
+/**
+ * Per-instance state + localStorage persistence for {@link ListTableComponent}.
+ * Reuses the legacy `ziti_<tableId>_table_state` / `_column_widths` keys so saved
+ * layouts carry over; unknown (ag-only) fields are ignored.
+ */
+class ListTableService {
+    constructor() {
+        this.tableId = '';
+        /** Coordinates the toolbar dropdowns so only one (filter pill or column chooser)
+         *  is open at a time. Openers emit themselves; others close when they see an
+         *  owner that isn't them. */
+        this.menuOpenedSubject = new Subject();
+        this.menuOpened$ = this.menuOpenedSubject.asObservable();
+    }
+    notifyMenuOpened(owner) {
+        this.menuOpenedSubject.next(owner);
+    }
+    stateKey() {
+        return `ziti_${this.tableId}_table_state`;
+    }
+    widthsKey() {
+        return `ziti_${this.tableId}_column_widths`;
+    }
+    /**
+     * Returns a shallow-cloned copy of `columns` with any persisted width, visibility,
+     * and order applied. Columns not present in the saved state keep their declared
+     * position (appended after the saved ones).
+     */
+    applyPersistedState(columns) {
+        let cols = columns.map((c) => ({ ...c }));
+        // widths
+        try {
+            const raw = localStorage.getItem(this.widthsKey());
+            if (raw) {
+                const widths = JSON.parse(raw) || {};
+                cols.forEach((c) => {
+                    if (widths[c.key] != null) {
+                        c.width = widths[c.key];
+                    }
+                });
+            }
+        }
+        catch {
+            // ignore malformed / unavailable storage
+        }
+        // order + visibility
+        try {
+            const raw = localStorage.getItem(this.stateKey());
+            if (raw) {
+                const state = JSON.parse(raw) || [];
+                const ordered = [];
+                state.forEach((s) => {
+                    const found = cols.find((c) => c.key === s.colId);
+                    if (found && !ordered.includes(found)) {
+                        if (s.hide != null) {
+                            found.hidden = s.hide;
+                        }
+                        if (s.width != null) {
+                            found.width = s.width;
+                        }
+                        ordered.push(found);
+                    }
+                });
+                cols.forEach((c) => {
+                    if (!ordered.includes(c)) {
+                        ordered.push(c);
+                    }
+                });
+                if (ordered.length) {
+                    cols = ordered;
+                }
+            }
+        }
+        catch {
+            // ignore malformed / unavailable storage
+        }
+        return cols;
+    }
+    /** Persists the current order + visibility (and widths embedded in each entry). */
+    saveState(columns) {
+        const state = columns.map((c) => ({ colId: c.key, hide: !!c.hidden, width: c.width }));
+        try {
+            localStorage.setItem(this.stateKey(), JSON.stringify(state));
+        }
+        catch {
+            // ignore
+        }
+    }
+    /** Persists a single column's width, then rewrites the ordered state. */
+    saveWidth(colId, width, columns) {
+        try {
+            const raw = localStorage.getItem(this.widthsKey());
+            const widths = raw ? JSON.parse(raw) : {};
+            widths[colId] = width;
+            localStorage.setItem(this.widthsKey(), JSON.stringify(widths));
+        }
+        catch {
+            // ignore
+        }
+        this.saveState(columns);
+    }
+    /** Clears all persisted layout for this table ("Restore Default Table"). */
+    reset() {
+        try {
+            localStorage.removeItem(this.stateKey());
+            localStorage.removeItem(this.widthsKey());
+        }
+        catch {
+            // ignore
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListTableService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListTableService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Generic, theme-driven action menu popover. Presentational only: the host owns
+ * open state and position and handles `(itemClick)` / `(closed)`.
+ */
+class ListMenuComponent {
+    constructor() {
+        /** Whether the menu is rendered. */
+        this.open = false;
+        /** Rows to render. */
+        this.items = [];
+        /** Fixed-position left offset (px). */
+        this.left = 0;
+        /** Fixed-position top offset (px). */
+        this.top = 0;
+        /** Emitted when a clickable row is selected. */
+        this.itemClick = new EventEmitter();
+        /** Emitted when the user clicks outside the open menu. */
+        this.closed = new EventEmitter();
+        this.trackItem = (_, item) => item.action ?? item.label;
+    }
+    onItem(item, event) {
+        if (item.disabled) {
+            return;
+        }
+        this.itemClick.emit({ item, event });
+    }
+    onClickOutside(event) {
+        this.closed.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListMenuComponent, isStandalone: false, selector: "lib-list-menu", inputs: { open: "open", items: "items", left: "left", top: "top", menuId: "menuId" }, outputs: { itemClick: "itemClick", closed: "closed" }, ngImport: i0, template: "@if (open) {\n  <div\n    class=\"lt-menu\"\n    [attr.id]=\"menuId || null\"\n    [ngStyle]=\"{ left: left + 'px', top: top + 'px' }\"\n    (clickOutside)=\"onClickOutside($event)\"\n  >\n    @for (item of items; track trackItem($index, item)) {\n      <button\n        type=\"button\"\n        class=\"lt-menu-item\"\n        [class.has-icon]=\"!!item.icon || !!item.iconSvg\"\n        [class.is-hidden]=\"item.hidden\"\n        [disabled]=\"!!item.disabled\"\n        [attr.id]=\"item.id || null\"\n        (click)=\"onItem(item, $event)\"\n      >\n        @if (item.iconSvg) {\n          <span class=\"lt-menu-icon\" aria-hidden=\"true\" [innerHTML]=\"item.iconSvg\"></span>\n        } @else if (item.icon) {\n          <span class=\"lt-menu-icon {{ item.icon }}\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"lt-menu-label\">{{ item.label }}</span>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.lt-menu{position:fixed;z-index:1000;min-width:11rem;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);font-family:var(--lt-font);animation:lt-menu-in .1s ease-out}@keyframes lt-menu-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.lt-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);text-align:left;background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer}.lt-menu-item:hover{background:var(--lt-row-hover);color:var(--lt-link)}.lt-menu-item:hover .lt-menu-icon{color:var(--lt-link)}.lt-menu-item.is-hidden{display:none}.lt-menu-item:disabled{opacity:.45;cursor:default}.lt-menu-item:disabled:hover{background:transparent;color:var(--lt-cell-text)}.lt-menu-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;font-size:.9375rem;color:var(--lt-icon)}.lt-menu-icon ::ng-deep svg{display:block;width:.9375rem;height:.9375rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-menu', standalone: false, template: "@if (open) {\n  <div\n    class=\"lt-menu\"\n    [attr.id]=\"menuId || null\"\n    [ngStyle]=\"{ left: left + 'px', top: top + 'px' }\"\n    (clickOutside)=\"onClickOutside($event)\"\n  >\n    @for (item of items; track trackItem($index, item)) {\n      <button\n        type=\"button\"\n        class=\"lt-menu-item\"\n        [class.has-icon]=\"!!item.icon || !!item.iconSvg\"\n        [class.is-hidden]=\"item.hidden\"\n        [disabled]=\"!!item.disabled\"\n        [attr.id]=\"item.id || null\"\n        (click)=\"onItem(item, $event)\"\n      >\n        @if (item.iconSvg) {\n          <span class=\"lt-menu-icon\" aria-hidden=\"true\" [innerHTML]=\"item.iconSvg\"></span>\n        } @else if (item.icon) {\n          <span class=\"lt-menu-icon {{ item.icon }}\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"lt-menu-label\">{{ item.label }}</span>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.lt-menu{position:fixed;z-index:1000;min-width:11rem;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);font-family:var(--lt-font);animation:lt-menu-in .1s ease-out}@keyframes lt-menu-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.lt-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);text-align:left;background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer}.lt-menu-item:hover{background:var(--lt-row-hover);color:var(--lt-link)}.lt-menu-item:hover .lt-menu-icon{color:var(--lt-link)}.lt-menu-item.is-hidden{display:none}.lt-menu-item:disabled{opacity:.45;cursor:default}.lt-menu-item:disabled:hover{background:transparent;color:var(--lt-cell-text)}.lt-menu-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;font-size:.9375rem;color:var(--lt-icon)}.lt-menu-icon ::ng-deep svg{display:block;width:.9375rem;height:.9375rem}\n"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], left: [{
+                type: Input
+            }], top: [{
+                type: Input
+            }], menuId: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+
+/**
+ * Row selection toggle for {@link ListTableComponent}. Router / exclusive /
+ * reserved / system rows cannot be toggled.
+ */
+class SelectCellComponent {
+    constructor() {
+        this.item = {
+            id: '',
+            name: '',
+            selected: false,
+            hideSelect: false,
+        };
+        this.disableToggle = false;
+    }
+    set row(v) {
+        this.item = v || this.item;
+        this.disableToggle =
+            _.get(this.item, 'typeId') === 'Router' ||
+                _.get(this.item, 'exclusiveTo') ||
+                _.get(this.item, 'reserved') === true ||
+                _.get(this.item, 'isSystem') === true;
+    }
+    toggle(item) {
+        if (this.disableToggle || !this.toggleItem) {
+            return;
+        }
+        this.toggleItem(item);
+    }
+    get tooltip() {
+        let tooltip = '';
+        if (this.item?.isSystem) {
+            tooltip = 'Deleting "system" entities is not allowed';
+        }
+        else if (this.item?.typeId === 'Router') {
+            tooltip = 'Unable to delete "Router" Identities. Please delete the associated Router instead.';
+        }
+        return tooltip;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SelectCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SelectCellComponent, isStandalone: false, selector: "lib-select-cell", inputs: { row: "row", toggleItem: "toggleItem" }, ngImport: i0, template: "@if (!item.hideSelect) {\n  <div\n    #toggleButton\n    (click)=\"toggle(item)\"\n    [ngClass]=\"{ selected: item.selected, disabled: disableToggle }\"\n    attr.name=\"RowSelect0_{{ item.name }}\"\n    class=\"row-toggle tSelect\"\n    id=\"RowSelect0_{{ item.id }}\"\n    attr.data-id=\"{{item.id}}\"\n    [matTooltip]=\"tooltip\"\n  ></div>\n}\n", styles: [".row-toggle.tSelect{box-sizing:border-box;width:1rem;height:1rem;border:1px solid var(--lt-border);border-radius:.25rem;cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--lt-control-bg);background-repeat:no-repeat;background-position:center center;transition:border-color .12s,background-color .12s}.row-toggle.tSelect:hover{border-color:var(--lt-link)}.row-toggle.tSelect.selected{border-color:var(--lt-link);background-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.6 5.7 10.8 11.5 3.6'/%3E%3C/svg%3E\")}.row-toggle.tSelect.disabled{opacity:.3;cursor:not-allowed;transform:translate(-50%,-50%)!important}.row-toggle.tSelect.disabled:hover{border-color:var(--lt-border);background-color:var(--lt-control-bg)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SelectCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-select-cell', standalone: false, template: "@if (!item.hideSelect) {\n  <div\n    #toggleButton\n    (click)=\"toggle(item)\"\n    [ngClass]=\"{ selected: item.selected, disabled: disableToggle }\"\n    attr.name=\"RowSelect0_{{ item.name }}\"\n    class=\"row-toggle tSelect\"\n    id=\"RowSelect0_{{ item.id }}\"\n    attr.data-id=\"{{item.id}}\"\n    [matTooltip]=\"tooltip\"\n  ></div>\n}\n", styles: [".row-toggle.tSelect{box-sizing:border-box;width:1rem;height:1rem;border:1px solid var(--lt-border);border-radius:.25rem;cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--lt-control-bg);background-repeat:no-repeat;background-position:center center;transition:border-color .12s,background-color .12s}.row-toggle.tSelect:hover{border-color:var(--lt-link)}.row-toggle.tSelect.selected{border-color:var(--lt-link);background-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.6 5.7 10.8 11.5 3.6'/%3E%3C/svg%3E\")}.row-toggle.tSelect.disabled{opacity:.3;cursor:not-allowed;transform:translate(-50%,-50%)!important}.row-toggle.tSelect.disabled:hover{border-color:var(--lt-border);background-color:var(--lt-control-bg)}\n"] }]
+        }], propDecorators: { row: [{
+                type: Input
+            }], toggleItem: [{
+                type: Input
+            }] } });
+
+/*
+    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.
+*/
+/** Header cell for {@link ListTableComponent}: label, 3-state sort (asc/desc), and hide. */
+class ListHeaderCellComponent {
+    constructor() {
+        this.sortChanged = new EventEmitter();
+        this.hideColumn = new EventEmitter();
+    }
+    get enableSorting() {
+        return !!(this.column?.sortable || this.column?.enableSorting);
+    }
+    sort() {
+        if (!this.enableSorting) {
+            return;
+        }
+        const dir = !this.sortDir || this.sortDir === 'desc' ? 'asc' : 'desc';
+        this.sortDir = dir;
+        this.column.onSort?.(this.column.key, dir);
+        this.sortChanged.emit({ colId: this.column.key, dir });
+    }
+    hide(event) {
+        event.stopPropagation();
+        this.hideColumn.emit(this.column);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListHeaderCellComponent, isStandalone: false, selector: "lib-list-header-cell", inputs: { column: "column", sortDir: "sortDir" }, outputs: { sortChanged: "sortChanged", hideColumn: "hideColumn" }, ngImport: i0, template: "<div\n  (click)=\"sort()\"\n  [ngClass]=\"{ 'nf-can-sort': enableSorting }\"\n  class=\"lt-header-container\"\n  id=\"TableHeaderContainer_{{ column.key }}\"\n>\n  @if (column.hideable !== false) {\n    <span\n      (click)=\"hide($event)\"\n      class=\"lt-header-icon lt-col-hide-button\"\n      id=\"HeaderHide_{{ column.key }}\"\n      title=\"Hide Column\"\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n        <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"\n          d=\"M1 8s2.7-4.5 7-4.5S15 8 15 8s-2.7 4.5-7 4.5S1 8 1 8Z\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/>\n        <line x1=\"2.5\" y1=\"13.5\" x2=\"13.5\" y2=\"2.5\" stroke=\"currentColor\" stroke-width=\"1.3\"/>\n      </svg>\n    </span>\n  }\n  <div class=\"lt-header-label\">\n    <span\n      [title]=\"column.label\"\n      class=\"lt-header-text\"\n      [class.is-sorted]=\"sortDir === 'asc' || sortDir === 'desc'\"\n      id=\"HeaderName_{{ column.key }}\"\n      unselectable=\"on\"\n    >{{ column.label }}</span>\n    @if (enableSorting) {\n      <span class=\"lt-sort\" [class.asc]=\"sortDir === 'asc'\" [class.desc]=\"sortDir === 'desc'\">\n        <svg viewBox=\"0 0 8 14\" width=\"8\" height=\"13\" aria-hidden=\"true\">\n          <path class=\"lt-sort-up\" d=\"M4 0 7.5 4.5H0.5z\"/>\n          <path class=\"lt-sort-down\" d=\"M4 14 0.5 9.5H7.5z\"/>\n        </svg>\n      </span>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;width:100%;align-items:center}.lt-header-container{display:flex;align-items:center;width:100%;height:100%;cursor:default;gap:.25rem}.lt-header-container.nf-can-sort{cursor:pointer}.lt-header-label{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.25rem}.lt-header-text{color:var(--lt-header-text);font-family:var(--lt-font);font-size:.6875rem;font-weight:600;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}.lt-header-text.is-sorted{color:var(--lt-icon-active);font-weight:700}.lt-header-text-container{display:flex;align-items:center;min-width:0;flex:1 1 auto}.lt-header-text-container.show-input-filter{width:100%}.lt-header-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--lt-icon);cursor:pointer;transition:opacity .2s,color .2s}.lt-header-icon svg{display:block}.lt-header-icon:hover{color:var(--lt-icon-active)}.lt-col-hide-button,.lt-col-filter-button{opacity:0}.lt-header-container:hover .lt-col-hide-button,.lt-header-container:hover .lt-col-filter-button{opacity:1}.lt-col-filter-button.nf-filter-applied{opacity:1;color:var(--lt-icon-active)}.lt-sort{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:auto;margin-right:.375rem}.lt-sort svg{display:block}.lt-sort .lt-sort-up,.lt-sort .lt-sort-down{fill:var(--lt-icon);opacity:.35;transition:opacity .15s,fill .15s}.lt-sort.asc .lt-sort-up,.lt-sort.desc .lt-sort-down{fill:var(--lt-icon-active);opacity:1}.nf-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListHeaderCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-header-cell', standalone: false, template: "<div\n  (click)=\"sort()\"\n  [ngClass]=\"{ 'nf-can-sort': enableSorting }\"\n  class=\"lt-header-container\"\n  id=\"TableHeaderContainer_{{ column.key }}\"\n>\n  @if (column.hideable !== false) {\n    <span\n      (click)=\"hide($event)\"\n      class=\"lt-header-icon lt-col-hide-button\"\n      id=\"HeaderHide_{{ column.key }}\"\n      title=\"Hide Column\"\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n        <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"\n          d=\"M1 8s2.7-4.5 7-4.5S15 8 15 8s-2.7 4.5-7 4.5S1 8 1 8Z\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/>\n        <line x1=\"2.5\" y1=\"13.5\" x2=\"13.5\" y2=\"2.5\" stroke=\"currentColor\" stroke-width=\"1.3\"/>\n      </svg>\n    </span>\n  }\n  <div class=\"lt-header-label\">\n    <span\n      [title]=\"column.label\"\n      class=\"lt-header-text\"\n      [class.is-sorted]=\"sortDir === 'asc' || sortDir === 'desc'\"\n      id=\"HeaderName_{{ column.key }}\"\n      unselectable=\"on\"\n    >{{ column.label }}</span>\n    @if (enableSorting) {\n      <span class=\"lt-sort\" [class.asc]=\"sortDir === 'asc'\" [class.desc]=\"sortDir === 'desc'\">\n        <svg viewBox=\"0 0 8 14\" width=\"8\" height=\"13\" aria-hidden=\"true\">\n          <path class=\"lt-sort-up\" d=\"M4 0 7.5 4.5H0.5z\"/>\n          <path class=\"lt-sort-down\" d=\"M4 14 0.5 9.5H7.5z\"/>\n        </svg>\n      </span>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;width:100%;align-items:center}.lt-header-container{display:flex;align-items:center;width:100%;height:100%;cursor:default;gap:.25rem}.lt-header-container.nf-can-sort{cursor:pointer}.lt-header-label{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.25rem}.lt-header-text{color:var(--lt-header-text);font-family:var(--lt-font);font-size:.6875rem;font-weight:600;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}.lt-header-text.is-sorted{color:var(--lt-icon-active);font-weight:700}.lt-header-text-container{display:flex;align-items:center;min-width:0;flex:1 1 auto}.lt-header-text-container.show-input-filter{width:100%}.lt-header-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--lt-icon);cursor:pointer;transition:opacity .2s,color .2s}.lt-header-icon svg{display:block}.lt-header-icon:hover{color:var(--lt-icon-active)}.lt-col-hide-button,.lt-col-filter-button{opacity:0}.lt-header-container:hover .lt-col-hide-button,.lt-header-container:hover .lt-col-filter-button{opacity:1}.lt-col-filter-button.nf-filter-applied{opacity:1;color:var(--lt-icon-active)}.lt-sort{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:auto;margin-right:.375rem}.lt-sort svg{display:block}.lt-sort .lt-sort-up,.lt-sort .lt-sort-down{fill:var(--lt-icon);opacity:.35;transition:opacity .15s,fill .15s}.lt-sort.asc .lt-sort-up,.lt-sort.desc .lt-sort-down{fill:var(--lt-icon-active);opacity:1}.nf-hidden{display:none}\n"] }]
+        }], propDecorators: { column: [{
+                type: Input
+            }], sortDir: [{
+                type: Input
+            }], sortChanged: [{
+                type: Output
+            }], hideColumn: [{
+                type: Output
+            }] } });
+
+/*
+    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.
+*/
+const DATE_PRESETS = [
+    { label: 'Any time', value: '' },
+    { label: 'Last Hour', value: 'hour' },
+    { label: 'Last Day', value: 'day' },
+    { label: 'Last Week', value: 'week' },
+    { label: 'Last Month', value: 'month' },
+];
+/**
+ * A single control in the table's filter row. Renders the right widget for the
+ * column's `filterType` (text input / single-select / multi-select / date-range)
+ * and pushes changes through {@link DataTableFilterService}, whose value contract the
+ * controller query-builder already understands (icontains / = / anyOf() / datetime range).
+ */
+class ListFilterCellComponent {
+    constructor(filterService, listSvc) {
+        this.filterService = filterService;
+        this.listSvc = listSvc;
+        this.mode = 'text';
+        this.options = [];
+        this.textValue = '';
+        this.selectedValue = '';
+        this.selectedValues = [];
+        /** In-dropdown search text for the multi-select attribute combo. */
+        this.attrSearch = '';
+        this.open = false;
+        this.menuLeft = 0;
+        this.menuTop = 0;
+        this.menuWidth = 0;
+        // custom date range (daterange mode)
+        this.dateRangeStart = null;
+        this.dateRangeEnd = null;
+        this.sub = new Subscription();
+        this.textDebounced = _.debounce(() => this.emitText(), 400);
+    }
+    ngOnInit() {
+        this.mode = this.resolveMode();
+        this.options = this.resolveOptions();
+        this.sub.add(this.filterService.filtersChanged.subscribe((filters) => this.syncFromFilters(filters)));
+        // close this menu whenever another dropdown opens
+        this.sub.add(this.listSvc.menuOpened$.subscribe((owner) => {
+            if (owner !== this) {
+                this.open = false;
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+    // ------------------------------------------------------------------ config
+    get field() {
+        return this.column.filterField || this.column.field || this.column.key;
+    }
+    get placeholder() {
+        return this.column.filterPlaceholder || 'All';
+    }
+    resolveMode() {
+        switch (this.column.filterType) {
+            case 'TEXTINPUT':
+                return 'text';
+            case 'ATTRIBUTE':
+                return 'multi';
+            case 'DATETIME':
+                return 'daterange';
+            default:
+                return 'single';
+        }
+    }
+    resolveOptions() {
+        if (this.mode === 'daterange') {
+            return DATE_PRESETS;
+        }
+        if (this.mode === 'multi') {
+            const getAttrs = this.column.headerParams?.['getRoleAttributes'];
+            const attrs = (typeof getAttrs === 'function' ? getAttrs() : null) || this.column.filterOptions || [];
+            return attrs.map((a) => (typeof a === 'string' ? { label: a, value: a } : a));
+        }
+        const raw = this.column.getFilterOptions ? this.column.getFilterOptions() : this.column.filterOptions || [];
+        return raw;
+    }
+    // ------------------------------------------------------------------ display
+    /** Short display of the current selection, shown after the field label when set. */
+    get valueLabel() {
+        if (this.mode === 'multi') {
+            if (this.selectedValues.length === 1) {
+                return this.selectedValues[0];
+            }
+            return `${this.selectedValues.length}`;
+        }
+        if (this.mode === 'daterange') {
+            if (this.selectedValue === 'custom' && this.dateRangeStart) {
+                const start = moment$1(this.dateRangeStart).format('M/D/YY');
+                const end = this.dateRangeEnd ? moment$1(this.dateRangeEnd).format('M/D/YY') : '';
+                return end ? `${start} – ${end}` : start;
+            }
+            const found = this.options.find((o) => o.value === this.selectedValue);
+            return found && found.value ? found.label : '';
+        }
+        const match = this.options.find((o) => `${o.value}` === `${this.selectedValue}`);
+        return match && match.value !== '' && match.value != null ? match.label : '';
+    }
+    get hasValue() {
+        if (this.mode === 'multi') {
+            return this.selectedValues.length > 0;
+        }
+        return this.selectedValue !== '' && this.selectedValue != null;
+    }
+    isOptionSelected(opt) {
+        if (this.mode === 'multi') {
+            return this.selectedValues.includes(opt.value);
+        }
+        return `${opt.value}` === `${this.selectedValue}`;
+    }
+    /** Attribute options filtered by the in-dropdown search box (multi mode). */
+    get filteredOptions() {
+        if (this.mode !== 'multi' || !this.attrSearch) {
+            return this.options;
+        }
+        const q = this.attrSearch.toLowerCase();
+        return this.options.filter((o) => `${o.label ?? o.value}`.toLowerCase().includes(q));
+    }
+    /** A named attribute (rendered with @ + secondary color) vs a role attribute (# + primary). */
+    isNamedOption(opt) {
+        return String(opt?.value ?? opt?.label ?? '').charAt(0) === '@';
+    }
+    /** Option label with its #/@ prefix, matching the Roles column chips. */
+    attrLabel(opt) {
+        const raw = String(opt?.label ?? opt?.value ?? '');
+        if (raw.charAt(0) === '@' || raw.charAt(0) === '#') {
+            return raw;
+        }
+        return '#' + raw;
+    }
+    // ------------------------------------------------------------------ open/close
+    toggleMenu(event) {
+        event.stopPropagation();
+        if (this.open) {
+            this.open = false;
+            return;
+        }
+        const rect = this.trigger?.nativeElement.getBoundingClientRect();
+        if (rect) {
+            this.menuLeft = rect.left;
+            this.menuTop = rect.bottom + 4;
+            this.menuWidth = Math.max(rect.width, this.mode === 'multi' ? 220 : 160);
+        }
+        // refresh dynamic option sources (e.g. role attributes) each open
+        this.options = this.resolveOptions();
+        this.attrSearch = '';
+        this.open = true;
+        this.listSvc.notifyMenuOpened(this);
+    }
+    closeMenu() {
+        this.open = false;
+    }
+    // ------------------------------------------------------------------ text
+    onTextInput() {
+        this.textDebounced();
+    }
+    emitText() {
+        this.filterService.updateFilter({
+            filterName: this.column.label,
+            columnId: this.field,
+            value: this.textValue,
+            label: this.textValue,
+            type: 'TEXTINPUT',
+        });
+    }
+    // ------------------------------------------------------------------ single
+    selectOption(opt) {
+        this.selectedValue = opt.value;
+        this.open = false;
+        if (opt.value === '' || opt.value == null) {
+            this.removeThis();
+            return;
+        }
+        this.filterService.updateFilter({
+            filterName: this.column.label,
+            columnId: this.field,
+            value: opt.value,
+            label: opt.label,
+            type: this.column.filterType || 'SELECT',
+        });
+    }
+    // ------------------------------------------------------------------ multi
+    toggleOption(opt) {
+        const idx = this.selectedValues.indexOf(opt.value);
+        if (idx >= 0) {
+            this.selectedValues.splice(idx, 1);
+        }
+        else {
+            this.selectedValues.push(opt.value);
+        }
+        this.emitMulti();
+    }
+    emitMulti() {
+        if (!this.selectedValues.length) {
+            this.removeThis();
+            return;
+        }
+        const filter = {
+            filterName: this.column.label,
+            columnId: this.field,
+            value: [...this.selectedValues],
+            label: this.selectedValues.join(', '),
+            type: 'ATTRIBUTE',
+            semantic: 'AnyOf',
+        };
+        this.filterService.updateFilter(filter);
+    }
+    // ------------------------------------------------------------------ date range
+    selectDatePreset(opt) {
+        this.selectedValue = opt.value;
+        this.dateRangeStart = null;
+        this.dateRangeEnd = null;
+        this.open = false;
+        if (!opt.value) {
+            this.removeThis();
+            return;
+        }
+        const end = moment$1();
+        let start;
+        switch (opt.value) {
+            case 'hour':
+                start = moment$1().subtract(1, 'hours');
+                break;
+            case 'week':
+                start = moment$1().subtract(7, 'days');
+                break;
+            case 'month':
+                start = moment$1().subtract(1, 'month');
+                break;
+            case 'day':
+            default:
+                start = moment$1().subtract(24, 'hours');
+                break;
+        }
+        this.filterService.updateFilter({
+            filterName: this.column.label,
+            columnId: this.field,
+            value: [encodeURIComponent(start.toISOString()), encodeURIComponent(end.toISOString())],
+            label: opt.label,
+            type: 'DATETIME',
+        });
+    }
+    openCustomRange(event) {
+        event.stopPropagation();
+        this.open = false;
+        // open the Material calendar on the next tick (after the menu closes)
+        _.delay(() => this.rangePicker?.open(), 0);
+    }
+    onRangeStartChanged(date) {
+        this.dateRangeStart = date;
+        this.emitCustomRange();
+    }
+    onRangeEndChanged(date) {
+        this.dateRangeEnd = date;
+        this.emitCustomRange();
+    }
+    emitCustomRange() {
+        if (!this.dateRangeStart || !this.dateRangeEnd) {
+            return;
+        }
+        this.selectedValue = 'custom';
+        const start = moment$1(this.dateRangeStart).startOf('day');
+        const end = moment$1(this.dateRangeEnd).endOf('day');
+        this.filterService.updateFilter({
+            filterName: this.column.label,
+            columnId: this.field,
+            value: [encodeURIComponent(start.toISOString()), encodeURIComponent(end.toISOString())],
+            label: `${start.format('M/D/YY')} – ${end.format('M/D/YY')}`,
+            type: 'DATETIME',
+        });
+    }
+    // ------------------------------------------------------------------ clear
+    clear(event) {
+        event.stopPropagation();
+        this.selectedValue = '';
+        this.selectedValues = [];
+        this.textValue = '';
+        this.dateRangeStart = null;
+        this.dateRangeEnd = null;
+        this.removeThis();
+    }
+    removeThis() {
+        this.filterService.removeFilter({
+            filterName: this.column.label,
+            columnId: this.field,
+            value: '',
+            label: '',
+        });
+    }
+    // ------------------------------------------------------------------ sync
+    syncFromFilters(filters) {
+        const match = filters.find((f) => f.columnId === this.field);
+        if (!match) {
+            this.textValue = '';
+            this.selectedValue = '';
+            this.selectedValues = [];
+            this.dateRangeStart = null;
+            this.dateRangeEnd = null;
+            return;
+        }
+        if (this.mode === 'text') {
+            this.textValue = match.value ?? '';
+        }
+        else if (this.mode === 'multi') {
+            this.selectedValues = _.isArray(match.value) ? [...match.value] : [match.value];
+        }
+        else if (this.mode === 'daterange') {
+            // keep the locally chosen preset label; match.value is the raw [start,end] range
+        }
+        else {
+            this.selectedValue = match.value;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListFilterCellComponent, deps: [{ token: DataTableFilterService }, { token: ListTableService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListFilterCellComponent, isStandalone: false, selector: "lib-list-filter-cell", inputs: { column: "column" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "rangePicker", first: true, predicate: ["rangePicker"], descendants: true }], ngImport: i0, template: "@switch (mode) {\n  @case ('text') {\n    <div class=\"fc-text\">\n      <input\n        class=\"fc-input\"\n        type=\"text\"\n        [placeholder]=\"column.filterPlaceholder || 'Filter'\"\n        [(ngModel)]=\"textValue\"\n        (keyup)=\"onTextInput()\"\n      />\n      @if (textValue) {\n        <span class=\"fc-clear\" (click)=\"clear($event)\" title=\"Clear\" aria-label=\"Clear filter\">&times;</span>\n      }\n    </div>\n  }\n  @default {\n    <button\n      #trigger\n      type=\"button\"\n      class=\"fc-pill\"\n      [class.has-value]=\"hasValue\"\n      [class.is-open]=\"open\"\n      (click)=\"toggleMenu($event)\"\n      aria-haspopup=\"listbox\"\n      [attr.aria-expanded]=\"open\"\n    >\n      <span class=\"fc-pill-field\">{{ column.label }}</span>\n      @if (hasValue) {\n        <span class=\"fc-pill-value\" [title]=\"valueLabel\">{{ valueLabel }}</span>\n        <span class=\"fc-clear\" (click)=\"clear($event)\" title=\"Clear\" aria-label=\"Clear filter\">&times;</span>\n      } @else {\n        <span class=\"fc-caret\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 10 6\" width=\"9\" height=\"6\"><path fill=\"currentColor\" d=\"M0 0h10L5 6z\"/></svg>\n        </span>\n      }\n    </button>\n\n    @if (open) {\n      <div\n        class=\"fc-menu\"\n        (clickOutside)=\"closeMenu()\"\n        [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px', 'min-width.px': menuWidth }\"\n      >\n        @if (mode === 'multi') {\n          <div class=\"fc-search\">\n            <svg class=\"fc-search-icon\" viewBox=\"0 0 16 16\" width=\"13\" height=\"13\" aria-hidden=\"true\">\n              <circle cx=\"7\" cy=\"7\" r=\"4.3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n              <line x1=\"10.4\" y1=\"10.4\" x2=\"14.6\" y2=\"14.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n            </svg>\n            <input\n              class=\"fc-search-input\"\n              type=\"text\"\n              [(ngModel)]=\"attrSearch\"\n              placeholder=\"Search attributes\"\n              (click)=\"$event.stopPropagation()\"\n              autocomplete=\"off\"\n            />\n          </div>\n          @if (!filteredOptions.length) {\n            <div class=\"fc-empty\">{{ options.length ? 'No matches' : 'No attributes available' }}</div>\n          }\n          <div class=\"fc-opt-list\">\n            @for (opt of filteredOptions; track opt.value) {\n              <button type=\"button\" class=\"fc-opt\" [class.selected]=\"isOptionSelected(opt)\" (click)=\"toggleOption(opt)\">\n                <span class=\"fc-check\" aria-hidden=\"true\">\n                  @if (isOptionSelected(opt)) {\n                    <svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2 6.3 4.6 9 10 3\"/></svg>\n                  }\n                </span>\n                <span class=\"fc-attr\" [class.at]=\"isNamedOption(opt)\">{{ attrLabel(opt) }}</span>\n              </button>\n            }\n          </div>\n        } @else if (mode === 'daterange') {\n          @for (opt of options; track opt.value) {\n            <button type=\"button\" class=\"fc-opt\" [class.selected]=\"isOptionSelected(opt)\" (click)=\"selectDatePreset(opt)\">\n              <span class=\"fc-opt-label\">{{ opt.label }}</span>\n            </button>\n          }\n          <div class=\"fc-divider\"></div>\n          <button type=\"button\" class=\"fc-opt\" [class.selected]=\"selectedValue === 'custom'\" (click)=\"openCustomRange($event)\">\n            <span class=\"fc-opt-label\">Custom range\u2026</span>\n          </button>\n        } @else {\n          @for (opt of options; track opt.value) {\n            <button type=\"button\" class=\"fc-opt\" [class.selected]=\"isOptionSelected(opt)\" (click)=\"selectOption(opt)\">\n              @if (opt.chipClass) {\n                <span [ngClass]=\"opt.chipClass\">{{ opt.label }}</span>\n              } @else {\n                <span class=\"fc-opt-label\">{{ opt.label }}</span>\n              }\n            </button>\n          }\n        }\n      </div>\n    }\n  }\n}\n\n@if (mode === 'daterange') {\n  <!-- hidden Material range input; the calendar is opened from the \"Custom range\u2026\" option -->\n  <mat-date-range-input class=\"fc-hidden-range\" [rangePicker]=\"rangePicker\">\n    <input matStartDate [(ngModel)]=\"dateRangeStart\" (dateChange)=\"onRangeStartChanged($event.value)\" tabindex=\"-1\" aria-hidden=\"true\" />\n    <input matEndDate [(ngModel)]=\"dateRangeEnd\" (dateChange)=\"onRangeEndChanged($event.value)\" tabindex=\"-1\" aria-hidden=\"true\" />\n  </mat-date-range-input>\n  <mat-date-range-picker #rangePicker xPosition=\"start\" yPosition=\"below\"></mat-date-range-picker>\n}\n", styles: [":host{display:inline-flex;position:relative}.fc-hidden-range{position:absolute;left:0;top:100%;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}.fc-divider{height:1px;margin:.25rem;background:var(--lt-border)}.fc-text{position:relative;display:flex;align-items:center}.fc-input{width:100%;height:1.875rem;padding:0 1.5rem 0 .5rem;font-family:var(--lt-font);font-size:.75rem;color:var(--lt-cell-text);background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);outline:none}.fc-input::placeholder{color:var(--placeholder)}.fc-input:focus{border-color:var(--lt-link)}.fc-pill{display:inline-flex;align-items:center;gap:.375rem;height:var(--lt-toolbar-height);max-width:14rem;padding:0 .75rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.fc-pill:hover,.fc-pill.is-open{border-color:var(--lt-link)}.fc-pill.has-value{border-color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 8%,var(--lt-control-bg))}.fc-pill-field{color:var(--lt-cell-text)}.fc-pill.has-value .fc-pill-field{color:var(--groupText)}.fc-pill.has-value .fc-pill-field:after{content:\":\"}.fc-pill-value{color:var(--lt-link);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fc-caret{flex:0 0 auto;display:inline-flex;color:var(--lt-icon)}.fc-clear{flex:0 0 auto;font-size:1rem;line-height:1;color:var(--lt-icon);cursor:pointer}.fc-clear:hover{color:var(--lt-icon-active)}.fc-text .fc-clear{position:absolute;right:.5rem}.fc-menu{position:fixed;z-index:1000;max-height:18rem;overflow-y:auto;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:fc-in .1s ease-out}@keyframes fc-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.fc-opt{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer;text-align:left}.fc-opt:hover{background:var(--lt-row-hover)}.fc-opt.selected{color:var(--lt-link);font-weight:600}.fc-opt-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fc-check{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;box-sizing:border-box;border:.09375rem solid var(--lt-border);border-radius:.25rem;color:var(--lt-control-bg);background:var(--lt-control-bg)}.fc-opt.selected .fc-check{background:var(--lt-link);border-color:var(--lt-link)}.fc-empty{padding:.5rem;font-size:.75rem;color:var(--groupText)}.fc-search{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:.375rem;padding:.125rem .25rem .375rem;background:var(--lt-control-bg)}.fc-search-icon{flex:0 0 auto;margin-left:.25rem;color:var(--lt-icon)}.fc-search-input{flex:1 1 auto;min-width:0;height:1.75rem;padding:0 .5rem;font-family:var(--lt-font);font-size:.75rem;color:var(--lt-cell-text);background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);outline:none}.fc-search-input::placeholder{color:var(--placeholder)}.fc-search-input:focus{border-color:var(--lt-link)}.fc-opt-list{display:flex;flex-direction:column}.fc-attr{display:inline-flex;align-items:center;padding:.0625rem .375rem;font-size:.75rem;font-weight:600;line-height:1.4;border-radius:.25rem;color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 12%,transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fc-attr.at{color:var(--secondary);background:color-mix(in srgb,var(--secondary) 14%,transparent)}.fc-opt.selected .fc-attr{color:var(--lt-link)}.fc-opt.selected .fc-attr.at{color:var(--secondary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListFilterCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-filter-cell', standalone: false, template: "@switch (mode) {\n  @case ('text') {\n    <div class=\"fc-text\">\n      <input\n        class=\"fc-input\"\n        type=\"text\"\n        [placeholder]=\"column.filterPlaceholder || 'Filter'\"\n        [(ngModel)]=\"textValue\"\n        (keyup)=\"onTextInput()\"\n      />\n      @if (textValue) {\n        <span class=\"fc-clear\" (click)=\"clear($event)\" title=\"Clear\" aria-label=\"Clear filter\">&times;</span>\n      }\n    </div>\n  }\n  @default {\n    <button\n      #trigger\n      type=\"button\"\n      class=\"fc-pill\"\n      [class.has-value]=\"hasValue\"\n      [class.is-open]=\"open\"\n      (click)=\"toggleMenu($event)\"\n      aria-haspopup=\"listbox\"\n      [attr.aria-expanded]=\"open\"\n    >\n      <span class=\"fc-pill-field\">{{ column.label }}</span>\n      @if (hasValue) {\n        <span class=\"fc-pill-value\" [title]=\"valueLabel\">{{ valueLabel }}</span>\n        <span class=\"fc-clear\" (click)=\"clear($event)\" title=\"Clear\" aria-label=\"Clear filter\">&times;</span>\n      } @else {\n        <span class=\"fc-caret\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 10 6\" width=\"9\" height=\"6\"><path fill=\"currentColor\" d=\"M0 0h10L5 6z\"/></svg>\n        </span>\n      }\n    </button>\n\n    @if (open) {\n      <div\n        class=\"fc-menu\"\n        (clickOutside)=\"closeMenu()\"\n        [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px', 'min-width.px': menuWidth }\"\n      >\n        @if (mode === 'multi') {\n          <div class=\"fc-search\">\n            <svg class=\"fc-search-icon\" viewBox=\"0 0 16 16\" width=\"13\" height=\"13\" aria-hidden=\"true\">\n              <circle cx=\"7\" cy=\"7\" r=\"4.3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n              <line x1=\"10.4\" y1=\"10.4\" x2=\"14.6\" y2=\"14.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n            </svg>\n            <input\n              class=\"fc-search-input\"\n              type=\"text\"\n              [(ngModel)]=\"attrSearch\"\n              placeholder=\"Search attributes\"\n              (click)=\"$event.stopPropagation()\"\n              autocomplete=\"off\"\n            />\n          </div>\n          @if (!filteredOptions.length) {\n            <div class=\"fc-empty\">{{ options.length ? 'No matches' : 'No attributes available' }}</div>\n          }\n          <div class=\"fc-opt-list\">\n            @for (opt of filteredOptions; track opt.value) {\n              <button type=\"button\" class=\"fc-opt\" [class.selected]=\"isOptionSelected(opt)\" (click)=\"toggleOption(opt)\">\n                <span class=\"fc-check\" aria-hidden=\"true\">\n                  @if (isOptionSelected(opt)) {\n                    <svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2 6.3 4.6 9 10 3\"/></svg>\n                  }\n                </span>\n                <span class=\"fc-attr\" [class.at]=\"isNamedOption(opt)\">{{ attrLabel(opt) }}</span>\n              </button>\n            }\n          </div>\n        } @else if (mode === 'daterange') {\n          @for (opt of options; track opt.value) {\n            <button type=\"button\" class=\"fc-opt\" [class.selected]=\"isOptionSelected(opt)\" (click)=\"selectDatePreset(opt)\">\n              <span class=\"fc-opt-label\">{{ opt.label }}</span>\n            </button>\n          }\n          <div class=\"fc-divider\"></div>\n          <button type=\"button\" class=\"fc-opt\" [class.selected]=\"selectedValue === 'custom'\" (click)=\"openCustomRange($event)\">\n            <span class=\"fc-opt-label\">Custom range\u2026</span>\n          </button>\n        } @else {\n          @for (opt of options; track opt.value) {\n            <button type=\"button\" class=\"fc-opt\" [class.selected]=\"isOptionSelected(opt)\" (click)=\"selectOption(opt)\">\n              @if (opt.chipClass) {\n                <span [ngClass]=\"opt.chipClass\">{{ opt.label }}</span>\n              } @else {\n                <span class=\"fc-opt-label\">{{ opt.label }}</span>\n              }\n            </button>\n          }\n        }\n      </div>\n    }\n  }\n}\n\n@if (mode === 'daterange') {\n  <!-- hidden Material range input; the calendar is opened from the \"Custom range\u2026\" option -->\n  <mat-date-range-input class=\"fc-hidden-range\" [rangePicker]=\"rangePicker\">\n    <input matStartDate [(ngModel)]=\"dateRangeStart\" (dateChange)=\"onRangeStartChanged($event.value)\" tabindex=\"-1\" aria-hidden=\"true\" />\n    <input matEndDate [(ngModel)]=\"dateRangeEnd\" (dateChange)=\"onRangeEndChanged($event.value)\" tabindex=\"-1\" aria-hidden=\"true\" />\n  </mat-date-range-input>\n  <mat-date-range-picker #rangePicker xPosition=\"start\" yPosition=\"below\"></mat-date-range-picker>\n}\n", styles: [":host{display:inline-flex;position:relative}.fc-hidden-range{position:absolute;left:0;top:100%;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}.fc-divider{height:1px;margin:.25rem;background:var(--lt-border)}.fc-text{position:relative;display:flex;align-items:center}.fc-input{width:100%;height:1.875rem;padding:0 1.5rem 0 .5rem;font-family:var(--lt-font);font-size:.75rem;color:var(--lt-cell-text);background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);outline:none}.fc-input::placeholder{color:var(--placeholder)}.fc-input:focus{border-color:var(--lt-link)}.fc-pill{display:inline-flex;align-items:center;gap:.375rem;height:var(--lt-toolbar-height);max-width:14rem;padding:0 .75rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.fc-pill:hover,.fc-pill.is-open{border-color:var(--lt-link)}.fc-pill.has-value{border-color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 8%,var(--lt-control-bg))}.fc-pill-field{color:var(--lt-cell-text)}.fc-pill.has-value .fc-pill-field{color:var(--groupText)}.fc-pill.has-value .fc-pill-field:after{content:\":\"}.fc-pill-value{color:var(--lt-link);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fc-caret{flex:0 0 auto;display:inline-flex;color:var(--lt-icon)}.fc-clear{flex:0 0 auto;font-size:1rem;line-height:1;color:var(--lt-icon);cursor:pointer}.fc-clear:hover{color:var(--lt-icon-active)}.fc-text .fc-clear{position:absolute;right:.5rem}.fc-menu{position:fixed;z-index:1000;max-height:18rem;overflow-y:auto;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:fc-in .1s ease-out}@keyframes fc-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.fc-opt{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer;text-align:left}.fc-opt:hover{background:var(--lt-row-hover)}.fc-opt.selected{color:var(--lt-link);font-weight:600}.fc-opt-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fc-check{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;box-sizing:border-box;border:.09375rem solid var(--lt-border);border-radius:.25rem;color:var(--lt-control-bg);background:var(--lt-control-bg)}.fc-opt.selected .fc-check{background:var(--lt-link);border-color:var(--lt-link)}.fc-empty{padding:.5rem;font-size:.75rem;color:var(--groupText)}.fc-search{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:.375rem;padding:.125rem .25rem .375rem;background:var(--lt-control-bg)}.fc-search-icon{flex:0 0 auto;margin-left:.25rem;color:var(--lt-icon)}.fc-search-input{flex:1 1 auto;min-width:0;height:1.75rem;padding:0 .5rem;font-family:var(--lt-font);font-size:.75rem;color:var(--lt-cell-text);background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);outline:none}.fc-search-input::placeholder{color:var(--placeholder)}.fc-search-input:focus{border-color:var(--lt-link)}.fc-opt-list{display:flex;flex-direction:column}.fc-attr{display:inline-flex;align-items:center;padding:.0625rem .375rem;font-size:.75rem;font-weight:600;line-height:1.4;border-radius:.25rem;color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 12%,transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fc-attr.at{color:var(--secondary);background:color-mix(in srgb,var(--secondary) 14%,transparent)}.fc-opt.selected .fc-attr{color:var(--lt-link)}.fc-opt.selected .fc-attr.at{color:var(--secondary)}\n"] }]
+        }], ctorParameters: () => [{ type: DataTableFilterService }, { type: ListTableService }], propDecorators: { column: [{
+                type: Input
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], rangePicker: [{
+                type: ViewChild,
+                args: ['rangePicker']
+            }] } });
+
+/*
+    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.
+*/
+/**
+ * Custom, token-skinnable list table. Columns are declared with {@link ListColumn};
+ * sort, filter, and pagination flow through {@link DataTableFilterService}.
+ */
+class ListTableComponent {
+    set tableId(id) {
+        this._tableId = id;
+        this.svc.tableId = id;
+    }
+    get tableId() {
+        return this._tableId;
+    }
+    set columns(value) {
+        this._rawColumns = value || [];
+        if (this._initialized) {
+            this.buildColumns();
+        }
+    }
+    constructor(svc, tableFilterService, el, ngZone, sanitizer) {
+        this.svc = svc;
+        this.tableFilterService = tableFilterService;
+        this.el = el;
+        this.ngZone = ngZone;
+        this.sanitizer = sanitizer;
+        this._tableId = '';
+        this.rowData = [];
+        this.isLoading = false;
+        this.options = { noSelect: false, noMenu: false };
+        this.startCount = '-';
+        this.endCount = '-';
+        this.totalCount = '-';
+        this.filterApplied = false;
+        this.menuItems = [];
+        this.headerActions = [];
+        this.noItemsImage = 'nodata';
+        this.showNoItemsAdd = true;
+        this.noItemsReadonly = false;
+        this.accessDenied = false;
+        this.entityTypeName = '';
+        this.filterName = 'name';
+        this.filterColumn = 'name';
+        this.actionRequested = new EventEmitter();
+        this.tableReady = new EventEmitter();
+        /** Full column list (includes hidden), after persisted state. */
+        this.allColumns = [];
+        /** Currently rendered columns (visible + ordered). */
+        this.visibleColumns = [];
+        /** Hidden columns, shaped for the shared hidden-columns bar (`headerName`). */
+        this.hiddenColumns = [];
+        this.entityTypeLabel = '';
+        // ---- action menus ----
+        this.openMenu = false;
+        this.openHeaderMenu = false;
+        this.menuLeft = 0;
+        this.menuTop = 0;
+        this.selectedItem = { actionList: [] };
+        // ---- selection ----
+        this.allToggled = false;
+        // ---- column chooser (skinned show/hide + reorder panel) ----
+        this.showColumnChooser = false;
+        // ---- integrated toolbar: search + filter chips + pagination ----
+        this.searchString = '';
+        this.activeFilters = [];
+        this.filtering = false;
+        this.inputChangedDebounced = _.debounce(() => this.applySearch(), 400);
+        // ---- responsive filter overflow: controls that don't fit collapse into "More" ----
+        this.visibleFilterColumns = [];
+        this.overflowFilterColumns = [];
+        this.showFilterOverflow = false;
+        this.filterWidths = new Map();
+        this.filtersDirty = true;
+        this.overflowRaf = 0;
+        this.FILTER_GAP = 8; // px, matches the .lt-filter-zone/.lt-filters gap
+        this.MORE_BTN_W = 92; // px reserved for the "More" trigger when overflowing
+        this.onPointerMove = (e) => this.handleResizeMove(e);
+        this.onPointerUp = () => this.handleResizeEnd();
+        this._rawColumns = [];
+        this._initialColumns = [];
+        this._initialized = false;
+        this.subscription = new Subscription();
+        this.trackRow = (index, row) => row?.id ?? row?.name ?? index;
+        this.trackCol = (index, col) => col.key;
+        // ---------------------------------------------------------------- hover tooltip
+        this.hoverTooltip = null;
+        // ---------------------------------------------------------------- selection
+        this.toggleItem = (item) => {
+            item.selected = !item.selected;
+            this.allToggled = !_.isEmpty(this.rowData) && _.every(this.rowData, { selected: true });
+            this.actionRequested.emit({ action: 'toggleItem', item });
+        };
+        // ---------------------------------------------------------------- action menus
+        this.openActionMenu = (event, item) => {
+            this.selectedItem = item;
+            this.openMenu = true;
+            _.delay(() => {
+                const height = this.contextMenu?.nativeElement?.offsetHeight || 120;
+                const windowOffset = window.innerHeight - event.clientY;
+                const menuOffset = windowOffset <= height ? height - windowOffset : 0;
+                this.menuLeft = event.clientX - 100;
+                this.menuTop = event.clientY + 5 - menuOffset;
+            }, 10);
+        };
+        this.closeActionMenu = () => {
+            this.selectedItem = { actionList: [] };
+            this.openMenu = false;
+            this.openHeaderMenu = false;
+        };
+        this.closeHeaderActionMenu = () => {
+            this.openHeaderMenu = false;
+        };
+        /** Restore-default (rotate) icon for the built-in header action. */
+        this.RESET_TABLE_ICON = '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" d="M3.2 8a4.8 4.8 0 1 0 1.3-3.3"/><path fill="currentColor" d="M2.8 2.8l-.3 2.9 2.8-.4z"/></svg>';
+        // ---- rows-per-page + numbered pagination (the skin footer) ----
+        this.pageSizeOptions = [25, 50, 100];
+        // ---- auto-refresh (the skin toolbar toggle) ----
+        this.autoRefresh = false;
+        this.autoRefreshIntervalMs = 30000;
+        // ---- row action icons ----
+        // A menu item's host-supplied `icon` (SVG markup) is rendered before its label in
+        // the row's kebab menu. Sanitized once per unique SVG and cached.
+        this.iconCache = new Map();
+    }
+    ngOnInit() {
+        this._initialized = true;
+        this.buildColumns();
+        this.updateEntityTypeLabel();
+        this.subscription.add(this.tableFilterService.filtersChanged.subscribe((filters) => {
+            // chips: every non-hidden filter except the free-text search (shown in the box)
+            this.activeFilters = filters.filter((f) => f.hidden !== true && f.columnId !== this.filterColumn);
+            const match = filters.find((f) => f.columnId === this.filterColumn);
+            this.searchString = match ? match.value : '';
+            // an activated filter changes which controls are pinned and how wide they render
+            this.filtersDirty = true;
+            this.scheduleFilterOverflow();
+        }));
+        this.subscription.add(this.tableFilterService.filtering.subscribe((f) => (this.filtering = f)));
+        // close the column chooser whenever a filter dropdown (or anything else) opens
+        this.subscription.add(this.svc.menuOpened$.subscribe((owner) => {
+            if (owner !== this) {
+                this.showColumnChooser = false;
+            }
+        }));
+        this.tableReady.emit({ component: this });
+    }
+    ngAfterViewInit() {
+        this.ensureFilterResizeObserver();
+    }
+    ngAfterViewChecked() {
+        // the whole table sits behind @if(showTable), so the toolbar may not exist
+        // until row data arrives; (re)attach the observer once/whenever it appears
+        this.ensureFilterResizeObserver();
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+        this.detachResizeListeners();
+        this.filterRO?.disconnect();
+        if (this.overflowRaf) {
+            cancelAnimationFrame(this.overflowRaf);
+        }
+        if (this.autoRefreshTimer) {
+            clearInterval(this.autoRefreshTimer);
+        }
+    }
+    get showTable() {
+        return this.isLoading || this.filterApplied || this.rowData?.length > 0;
+    }
+    /** Columns surfaced as inline filter controls in the toolbar. Text filters are
+     *  excluded because the free-text search box already covers the primary text field. */
+    get filterableColumns() {
+        return this.allColumns.filter((c) => c.filterType && c.filterType !== 'TEXTINPUT');
+    }
+    // -------------------------------------------------- responsive filter overflow
+    /** A filter column is "active" when it has an applied filter. */
+    isFilterActive(col) {
+        return this.activeFilters.some((f) => f.columnId === col.key);
+    }
+    /** Applied filters that are currently hidden in the overflow dropdown. */
+    get hiddenActiveCount() {
+        return this.overflowFilterColumns.filter((c) => this.isFilterActive(c)).length;
+    }
+    toggleFilterOverflow(event) {
+        event.stopPropagation();
+        this.showFilterOverflow = !this.showFilterOverflow;
+        if (this.showFilterOverflow) {
+            this.svc.notifyMenuOpened(this);
+        }
+    }
+    closeFilterOverflow(event) {
+        // keep open when the click lands in a filter's own Material overlay (e.g. the
+        // date-range calendar), which renders outside this popover's DOM subtree
+        const target = event?.target;
+        if (target?.closest?.('.cdk-overlay-container')) {
+            return;
+        }
+        this.showFilterOverflow = false;
+    }
+    ensureFilterResizeObserver() {
+        // observe the toolbar row (not the content-sized zone) so a window resize,
+        // which changes the row's available width, actually fires the observer
+        const target = this.filterZone?.nativeElement?.parentElement ?? undefined;
+        if (!target || typeof ResizeObserver === 'undefined' || target === this.observedToolbar) {
+            return;
+        }
+        // ResizeObserver fires outside Angular's zone; re-enter so the recomputed
+        // visible/overflow split actually triggers change detection.
+        if (!this.filterRO) {
+            this.filterRO = new ResizeObserver(() => this.ngZone.run(() => this.scheduleFilterOverflow()));
+        }
+        else {
+            this.filterRO.disconnect();
+        }
+        this.filterRO.observe(target);
+        this.observedToolbar = target;
+        // compute the split for the newly-observed row (deferred, so it never mutates
+        // bound state inside the change-detection pass that called us)
+        this.scheduleFilterOverflow();
+    }
+    scheduleFilterOverflow() {
+        if (this.overflowRaf) {
+            cancelAnimationFrame(this.overflowRaf);
+        }
+        this.overflowRaf = requestAnimationFrame(() => {
+            this.overflowRaf = 0;
+            this.ensureFilterResizeObserver();
+            this.recomputeFilterOverflow();
+        });
+    }
+    recomputeFilterOverflow() {
+        const cols = this.filterableColumns;
+        if (!cols.length) {
+            this.visibleFilterColumns = [];
+            this.overflowFilterColumns = [];
+            return;
+        }
+        const needMeasure = this.filtersDirty || cols.some((c) => !this.filterWidths.has(c.key));
+        if (!needMeasure) {
+            this.applyFilterSplit();
+            return;
+        }
+        // render every control inline for one frame so each can be measured, then collapse
+        this.visibleFilterColumns = cols;
+        this.overflowFilterColumns = [];
+        requestAnimationFrame(() => {
+            const row = this.filtersRow?.nativeElement;
+            if (row) {
+                row.querySelectorAll('[data-filter-key]').forEach((el) => {
+                    const key = el.getAttribute('data-filter-key');
+                    if (key) {
+                        this.filterWidths.set(key, Math.ceil(el.getBoundingClientRect().width));
+                    }
+                });
+            }
+            this.filtersDirty = false;
+            this.applyFilterSplit();
+        });
+    }
+    /** Split filter controls into inline vs. overflow, pinning active filters and
+     *  dropping inactive (then, only if forced, active) from the right until they fit. */
+    applyFilterSplit() {
+        const zone = this.filterZone?.nativeElement;
+        const cols = this.filterableColumns;
+        if (!zone || !cols.length) {
+            return;
+        }
+        // budget = the toolbar row's width minus its fixed siblings (search / divider /
+        // Columns) and the gaps between them, i.e. the space filters may take before
+        // they'd push the Columns control off the row
+        const toolbarLeft = zone.parentElement;
+        const siblingWidth = (sel) => {
+            const node = toolbarLeft?.querySelector(sel);
+            return node ? Math.ceil(node.getBoundingClientRect().width) : 0;
+        };
+        const available = (toolbarLeft?.clientWidth ?? zone.clientWidth) -
+            siblingWidth('.lt-search') -
+            siblingWidth('.lt-divider') -
+            siblingWidth('.lt-columns') -
+            3 * this.FILTER_GAP;
+        const widthOf = (c) => this.filterWidths.get(c.key) ?? 0;
+        const totalOf = (list, withMore) => {
+            let w = 0;
+            list.forEach((c, i) => (w += widthOf(c) + (i > 0 ? this.FILTER_GAP : 0)));
+            if (withMore) {
+                w += (list.length ? this.FILTER_GAP : 0) + this.MORE_BTN_W;
+            }
+            return w;
+        };
+        if (totalOf(cols, false) <= available) {
+            this.visibleFilterColumns = cols;
+            this.overflowFilterColumns = [];
+            return;
+        }
+        // removal priority: inactive right-to-left first, then active right-to-left
+        const inactive = cols.filter((c) => !this.isFilterActive(c)).reverse();
+        const active = cols.filter((c) => this.isFilterActive(c)).reverse();
+        const removalOrder = [...inactive, ...active];
+        const overflow = new Set();
+        for (const c of removalOrder) {
+            overflow.add(c.key);
+            const visible = cols.filter((x) => !overflow.has(x.key));
+            if (totalOf(visible, true) <= available) {
+                break;
+            }
+        }
+        this.visibleFilterColumns = cols.filter((c) => !overflow.has(c.key));
+        this.overflowFilterColumns = cols.filter((c) => overflow.has(c.key));
+        if (!this.overflowFilterColumns.length) {
+            this.showFilterOverflow = false;
+        }
+    }
+    // ---------------------------------------------------------------- columns
+    buildColumns() {
+        this._initialColumns = this._rawColumns.map((c) => ({ ...c }));
+        this.allColumns = this.svc.applyPersistedState(this._rawColumns);
+        this.updateVisible();
+        // start with every filter control visible; the overflow pass collapses to fit
+        this.visibleFilterColumns = this.filterableColumns;
+        this.overflowFilterColumns = [];
+        this.filtersDirty = true;
+        this.scheduleFilterOverflow();
+    }
+    updateVisible() {
+        this.visibleColumns = this.allColumns.filter((c) => !c.hidden);
+        this.hiddenColumns = this.allColumns
+            .filter((c) => c.hidden)
+            .map((c) => ({ ...c, headerName: c.label }));
+    }
+    colWidth(col) {
+        return col.width != null ? `${col.width}px` : null;
+    }
+    // ---------------------------------------------------------------- cells
+    rawValue(col, row) {
+        return _.get(row, col.field || col.key);
+    }
+    cellContext(col, row, i) {
+        return {
+            row,
+            value: this.rawValue(col, row),
+            colId: col.key,
+            rowIndex: i,
+            emitAction: (action, item = row) => this.actionRequested.emit({ action, item }),
+        };
+    }
+    legacyShim(col, row, i) {
+        return { data: row, value: this.rawValue(col, row), column: { colId: col.key }, rowIndex: i };
+    }
+    renderMode(col) {
+        if (col.cell) {
+            return 'component';
+        }
+        if (col.cellHtml) {
+            return 'html';
+        }
+        return 'text';
+    }
+    cellInputs(col, row, i) {
+        if (col.cellInputs) {
+            return col.cellInputs(this.cellContext(col, row, i));
+        }
+        return { row, value: this.rawValue(col, row) };
+    }
+    cellHtml(col, row, i) {
+        return col.cellHtml ? col.cellHtml(this.legacyShim(col, row, i)) : '';
+    }
+    cellText(col, row, i) {
+        if (col.valueFormatter) {
+            return col.valueFormatter(this.legacyShim(col, row, i));
+        }
+        return this.rawValue(col, row);
+    }
+    cellClass(col) {
+        return col.cellClass || '';
+    }
+    onCellClick(col, row, i) {
+        col.onCellClick?.(this.cellContext(col, row, i));
+    }
+    tooltipInputs(col, row, i) {
+        return col.tooltipInputs ? col.tooltipInputs(this.cellContext(col, row, i)) : { row };
+    }
+    onCellHover(col, row, i, event) {
+        if (!col.tooltip) {
+            return;
+        }
+        const rect = event.currentTarget.getBoundingClientRect();
+        this.hoverTooltip = {
+            component: col.tooltip,
+            inputs: this.tooltipInputs(col, row, i),
+            left: rect.left,
+            top: rect.bottom + 6,
+        };
+    }
+    onCellLeave() {
+        this.hoverTooltip = null;
+    }
+    /** Some rows selected but the header select-all isn't fully on (indeterminate). */
+    get someSelected() {
+        return !this.allToggled && _.some(this.rowData, { selected: true });
+    }
+    toggleAll() {
+        const newState = !this.allToggled;
+        this.allToggled = newState;
+        _.forEach(this.rowData, (row) => {
+            row.selected = newState;
+        });
+        this.actionRequested.emit({ action: 'toggleAll' });
+    }
+    // ---------------------------------------------------------------- sort
+    onHeaderSort(event) {
+        this.allColumns.forEach((c) => {
+            c.sortDir = c.key === event.colId ? event.dir : undefined;
+        });
+    }
+    // ---------------------------------------------------------------- hide / show / reorder
+    hideColumn(col) {
+        const target = this.allColumns.find((c) => c.key === col.key);
+        if (!target) {
+            return;
+        }
+        target.hidden = true;
+        this.updateVisible();
+        this.svc.saveState(this.allColumns);
+    }
+    showColumn(event) {
+        const target = this.allColumns.find((c) => c.key === event.column?.key);
+        if (!target) {
+            return;
+        }
+        target.hidden = false;
+        this.updateVisible();
+        this.svc.saveState(this.allColumns);
+    }
+    onReorder(event) {
+        if (event.previousIndex === event.currentIndex) {
+            return;
+        }
+        moveItemInArray(this.visibleColumns, event.previousIndex, event.currentIndex);
+        const nextVisible = [...this.visibleColumns];
+        let vi = 0;
+        this.allColumns = this.allColumns.map((c) => (c.hidden ? c : nextVisible[vi++]));
+        this.updateVisible();
+        this.svc.saveState(this.allColumns);
+    }
+    resetTableColumns() {
+        this.svc.reset();
+        this.allColumns = this._initialColumns.map((c) => ({ ...c }));
+        this.updateVisible();
+        this.closeActionMenu();
+    }
+    // ---------------------------------------------------------------- column chooser
+    /** Count of columns the user has hidden beyond the defaults (drives the badge).
+     *  Columns hidden by default don't count, so a fresh/default load shows no badge. */
+    get hiddenColumnCount() {
+        return this.allColumns.filter((c) => c.hidden && !this.isDefaultHidden(c)).length;
+    }
+    /** True when visibility + order match the originally declared columns. */
+    get columnsAtDefault() {
+        if (this.allColumns.length !== this._initialColumns.length) {
+            return false;
+        }
+        return this.allColumns.every((c, i) => {
+            const init = this._initialColumns[i];
+            return init && init.key === c.key && !!init.hidden === !!c.hidden;
+        });
+    }
+    /** True when the column is hidden in the originally declared defaults. */
+    isDefaultHidden(col) {
+        const init = this._initialColumns.find((c) => c.key === col.key);
+        return !!init?.hidden;
+    }
+    toggleColumnChooser(event) {
+        event.stopPropagation();
+        this.showColumnChooser = !this.showColumnChooser;
+        if (this.showColumnChooser) {
+            this.svc.notifyMenuOpened(this);
+        }
+    }
+    closeColumnChooser() {
+        this.showColumnChooser = false;
+    }
+    toggleColumnVisible(col) {
+        if (col.hideable === false) {
+            return;
+        }
+        const target = this.allColumns.find((c) => c.key === col.key);
+        if (!target) {
+            return;
+        }
+        target.hidden = !target.hidden;
+        this.updateVisible();
+        this.svc.saveState(this.allColumns);
+    }
+    chooserReorder(event) {
+        if (event.previousIndex === event.currentIndex) {
+            return;
+        }
+        moveItemInArray(this.allColumns, event.previousIndex, event.currentIndex);
+        this.updateVisible();
+        this.svc.saveState(this.allColumns);
+    }
+    // ---------------------------------------------------------------- resize
+    startResize(col, event) {
+        if (col.resizable === false) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const th = event.target?.closest('th');
+        const startWidth = col.width ?? th?.offsetWidth ?? 150;
+        this.resizing = { col, startX: event.clientX, startWidth };
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
+    }
+    handleResizeMove(event) {
+        if (!this.resizing) {
+            return;
+        }
+        const delta = event.clientX - this.resizing.startX;
+        const min = this.resizing.col.minWidth ?? 40;
+        this.resizing.col.width = Math.max(min, Math.round(this.resizing.startWidth + delta));
+    }
+    handleResizeEnd() {
+        if (this.resizing) {
+            this.svc.saveWidth(this.resizing.col.key, this.resizing.col.width, this.allColumns);
+        }
+        this.resizing = undefined;
+        this.detachResizeListeners();
+    }
+    detachResizeListeners() {
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+    }
+    openHeaderActionMenu(event) {
+        this.menuLeft = event.clientX - 150;
+        this.menuTop = event.clientY + 5;
+        _.delay(() => {
+            this.openHeaderMenu = true;
+        }, 100);
+    }
+    hideMenuItem(menuItem, selectedItem) {
+        if (_.isFunction(menuItem.hidden)) {
+            return menuItem.hidden(selectedItem);
+        }
+        else if (_.isBoolean(menuItem.hidden)) {
+            return menuItem.hidden;
+        }
+        return !selectedItem.actionList?.includes(menuItem.action);
+    }
+    /** Header action menu rows: the reset action followed by host-provided header actions.
+     *  A host action's `icon` (SVG markup) is rendered before its label, like the row menu. */
+    get headerMenuItems() {
+        const items = [
+            { label: 'Restore Default Table', action: '__reset_table__', id: 'ResetTableButton', iconSvg: this.safeIcon(this.RESET_TABLE_ICON) },
+        ];
+        _.forEach(this.headerActions, (ha) => {
+            items.push({
+                label: ha.name || ha.label,
+                action: ha.action,
+                id: 'HeaderAction_' + ha.action,
+                iconSvg: ha.icon ? this.safeIcon(ha.icon) : undefined,
+                data: ha,
+            });
+        });
+        return items;
+    }
+    onHeaderMenuClick(evt) {
+        if (evt.item.action === '__reset_table__') {
+            this.resetTableColumns();
+        }
+        else {
+            this.actionRequested.emit({ action: evt.item.action });
+        }
+        this.closeHeaderActionMenu();
+    }
+    /** Row action menu rows, built from `menuItems` against the currently selected row.
+     *  A menu item's `icon` (SVG markup) is rendered before its label in the menu. */
+    get rowMenuItems() {
+        return _.map(this.menuItems, (mi) => ({
+            label: mi.name || mi.label,
+            action: mi.action,
+            id: 'TableActionButton_' + mi.action,
+            hidden: this.hideMenuItem(mi, this.selectedItem),
+            iconSvg: mi.icon ? this.safeIcon(mi.icon) : undefined,
+            data: mi,
+        }));
+    }
+    onRowMenuClick(evt) {
+        this.actionRequested.emit({ action: evt.item.action, item: this.selectedItem });
+        this.closeActionMenu();
+    }
+    openCreate() {
+        this.actionRequested.emit({ action: 'create' });
+    }
+    // ---------------------------------------------------------------- toolbar search + pagination
+    onSearchInput() {
+        this.inputChangedDebounced();
+    }
+    applySearch() {
+        this.tableFilterService.currentPage = 1;
+        this.tableFilterService.updateFilter({
+            filterName: this.filterName,
+            columnId: this.filterColumn,
+            value: this.searchString,
+            label: this.searchString,
+        });
+    }
+    nextPage() {
+        if (this.nextDisabled) {
+            return;
+        }
+        this.tableFilterService.changePage((this.tableFilterService.currentPage || 1) + 1);
+    }
+    prevPage() {
+        if (this.prevDisabled) {
+            return;
+        }
+        this.tableFilterService.changePage((this.tableFilterService.currentPage || 1) - 1);
+    }
+    get nextDisabled() {
+        if (!_.isNumber(this.totalCount) || !_.isNumber(this.endCount) || this.filtering) {
+            return true;
+        }
+        return Number(this.endCount) >= Number(this.totalCount);
+    }
+    get prevDisabled() {
+        if (!_.isNumber(this.startCount) || !_.isNumber(this.totalCount) || this.filtering) {
+            return true;
+        }
+        return Number(this.startCount) <= 1;
+    }
+    get pageSize() {
+        return this.tableFilterService.pageSize;
+    }
+    get currentPageNum() {
+        return this.tableFilterService.currentPage || 1;
+    }
+    get totalPages() {
+        if (!_.isNumber(this.totalCount) || Number(this.totalCount) <= 0) {
+            return 1;
+        }
+        return Math.max(1, Math.ceil(Number(this.totalCount) / this.pageSize));
+    }
+    /** Page numbers to render, with `0` marking a gap ("..."). Shows the first and
+     *  last page plus a window around the current page so long lists stay compact. */
+    get pageWindow() {
+        const total = this.totalPages;
+        const cur = this.currentPageNum;
+        if (total <= 7) {
+            return Array.from({ length: total }, (_v, i) => i + 1);
+        }
+        const pages = new Set([1, total, cur, cur - 1, cur + 1]);
+        const sorted = [...pages].filter((p) => p >= 1 && p <= total).sort((a, b) => a - b);
+        const out = [];
+        let prev = 0;
+        for (const p of sorted) {
+            if (prev && p - prev > 1) {
+                out.push(0); // gap sentinel
+            }
+            out.push(p);
+            prev = p;
+        }
+        return out;
+    }
+    goToPage(page) {
+        if (page < 1 || page > this.totalPages || page === this.currentPageNum || this.filtering) {
+            return;
+        }
+        this.tableFilterService.changePage(page);
+    }
+    onPageSizeChange(size) {
+        if (!size || size === this.pageSize) {
+            return;
+        }
+        this.tableFilterService.changePageSize(size);
+    }
+    /** Re-fetch the current page (re-emits the page so the host reloads its data). */
+    refresh() {
+        if (this.filtering) {
+            return;
+        }
+        this.tableFilterService.changePage(this.currentPageNum);
+    }
+    toggleAutoRefresh() {
+        this.autoRefresh = !this.autoRefresh;
+        if (this.autoRefresh) {
+            this.autoRefreshTimer = setInterval(() => this.ngZone.run(() => this.refresh()), this.autoRefreshIntervalMs);
+        }
+        else if (this.autoRefreshTimer) {
+            clearInterval(this.autoRefreshTimer);
+            this.autoRefreshTimer = undefined;
+        }
+    }
+    safeIcon(svg) {
+        let safe = this.iconCache.get(svg);
+        if (!safe) {
+            safe = this.sanitizer.bypassSecurityTrustHtml(svg);
+            this.iconCache.set(svg, safe);
+        }
+        return safe;
+    }
+    updateEntityTypeLabel() {
+        const map = {
+            'api-sessions': 'API Sessions',
+            'auth-policies': 'Auth Policies',
+            'certificate-authorities': 'Certificate Authorities',
+            'ext-jwt-signers': 'External JWT Signers',
+            identities: 'Identities',
+            'posture-checks': 'Posture Checks',
+            'edge-routers': 'Edge Routers',
+            services: 'Services',
+            configurations: 'Configs',
+            'config-types': 'Config Types',
+            'service-policies': 'Service Policies',
+            'edge-router-policies': 'Edge Router Policies',
+            'service-edge-router-policies': 'Service Edge Router Policies',
+            sessions: 'Sessions',
+            terminators: 'Terminators',
+            'transit-routers': 'Transit Routers',
+        };
+        this.entityTypeLabel = map[this._tableId] || this.entityTypeName || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListTableComponent, deps: [{ token: ListTableService }, { token: DataTableFilterService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListTableComponent, isStandalone: false, selector: "lib-list-table", inputs: { tableId: "tableId", columns: "columns", rowData: "rowData", isLoading: "isLoading", options: "options", startCount: "startCount", endCount: "endCount", totalCount: "totalCount", filterApplied: "filterApplied", menuItems: "menuItems", headerActions: "headerActions", noItemsImage: "noItemsImage", showNoItemsAdd: "showNoItemsAdd", noItemsReadonly: "noItemsReadonly", accessDenied: "accessDenied", entityTypeName: "entityTypeName", filterName: "filterName", filterColumn: "filterColumn" }, outputs: { actionRequested: "actionRequested", tableReady: "tableReady" }, providers: [ListTableService], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "filterZone", first: true, predicate: ["filterZone"], descendants: true }, { propertyName: "filtersRow", first: true, predicate: ["filtersRow"], descendants: true }], ngImport: i0, template: "@if (showTable && !accessDenied) {\n  <div class=\"lt-container\">\n    <div class=\"lt-toolbar\">\n      <div class=\"lt-toolbar-left\">\n        <div class=\"lt-search\">\n          <svg class=\"lt-search-icon\" viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <circle cx=\"7\" cy=\"7\" r=\"4.3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n            <line x1=\"10.4\" y1=\"10.4\" x2=\"14.6\" y2=\"14.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n          </svg>\n          <input\n            class=\"lt-search-input\"\n            id=\"SearchFilter\"\n            type=\"text\"\n            [placeholder]=\"'Search ' + (entityTypeLabel || 'items')\"\n            [(ngModel)]=\"searchString\"\n            (keyup)=\"onSearchInput()\"\n          />\n        </div>\n        @if (filterableColumns.length) {\n          <div class=\"lt-filter-zone\" #filterZone>\n            <div class=\"lt-filters\" #filtersRow>\n              @for (col of visibleFilterColumns; track col.key) {\n                <span class=\"lt-filter-item\" [attr.data-filter-key]=\"col.key\">\n                  <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                </span>\n              }\n            </div>\n            @if (overflowFilterColumns.length) {\n              <div class=\"lt-filter-more\">\n                <button\n                  type=\"button\"\n                  class=\"lt-filter-more-btn\"\n                  [class.is-on]=\"hiddenActiveCount > 0\"\n                  [class.is-open]=\"showFilterOverflow\"\n                  (click)=\"toggleFilterOverflow($event)\"\n                  aria-haspopup=\"true\"\n                  [attr.aria-expanded]=\"showFilterOverflow\"\n                  [attr.aria-label]=\"overflowFilterColumns.length + ' more filters'\"\n                  id=\"FilterOverflowButton\"\n                >\n                  <span class=\"lt-filter-more-icon\" aria-hidden=\"true\">\n                    <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\"><path fill=\"currentColor\" d=\"M2 3h12l-4.6 5.6v4l-2.8 1.4v-5.4z\"/></svg>\n                  </span>\n                  <span class=\"lt-filter-more-label\">More</span>\n                  <span class=\"lt-filter-more-count\">{{ overflowFilterColumns.length }}</span>\n                </button>\n                @if (showFilterOverflow) {\n                  <div class=\"lt-filter-overflow\" (clickOutside)=\"closeFilterOverflow($event)\">\n                    <div class=\"lt-filter-overflow-title\">Filters</div>\n                    @for (col of overflowFilterColumns; track col.key) {\n                      <div class=\"lt-filter-overflow-row\" [class.is-active]=\"isFilterActive(col)\">\n                        <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"lt-toolbar-right\">\n        <ng-template #refreshIcon>\n          <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" d=\"M13.4 8a5.4 5.4 0 1 1-1.5-3.8\"/>\n            <path fill=\"currentColor\" d=\"M13.9 2.1l.5 3.2-3.2-.5z\"/>\n          </svg>\n        </ng-template>\n        <button\n          type=\"button\"\n          class=\"lt-refresh-btn\"\n          (click)=\"refresh()\"\n          [disabled]=\"filtering\"\n          aria-label=\"Refresh\"\n          title=\"Refresh\"\n          id=\"RefreshTableButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n        </button>\n        <button\n          type=\"button\"\n          class=\"lt-autorefresh-btn\"\n          [class.is-on]=\"autoRefresh\"\n          (click)=\"toggleAutoRefresh()\"\n          [attr.aria-pressed]=\"autoRefresh\"\n          id=\"AutoRefreshButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n          <span>Auto-refresh: {{ autoRefresh ? 'On' : 'Off' }}</span>\n        </button>\n        <div class=\"lt-columns\">\n          <button\n            type=\"button\"\n            class=\"lt-columns-btn\"\n            [class.is-on]=\"hiddenColumnCount > 0\"\n            [class.is-open]=\"showColumnChooser\"\n            (click)=\"toggleColumnChooser($event)\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"showColumnChooser\"\n            id=\"ColumnChooserButton\"\n          >\n            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n              <path fill=\"currentColor\" d=\"M2 3.5h9v1.4H2zM2 7.3h6v1.4H2zM2 11.1h11v1.4H2z\"/>\n              <circle cx=\"13\" cy=\"4.2\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"10\" cy=\"8\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"14.4\" cy=\"11.8\" r=\"1.7\" fill=\"currentColor\"/>\n            </svg>\n            <span>Columns</span>\n            @if (hiddenColumnCount > 0) {\n              <span class=\"lt-columns-count\">{{ hiddenColumnCount }}</span>\n            }\n          </button>\n          @if (showColumnChooser) {\n            <div class=\"lt-column-chooser\" (clickOutside)=\"closeColumnChooser()\">\n              <div class=\"lt-chooser-header\">\n                <span class=\"lt-chooser-title\">Columns</span>\n                <span class=\"lt-chooser-subtitle\">Customize order and visibility</span>\n              </div>\n              <ul class=\"lt-chooser-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"chooserReorder($event)\">\n                @for (col of allColumns; track col.key) {\n                  <li class=\"lt-chooser-row\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"col.reorderable === false\">\n                    <button\n                      type=\"button\"\n                      class=\"lt-chooser-toggle\"\n                      [class.checked]=\"!col.hidden\"\n                      [disabled]=\"col.hideable === false\"\n                      (click)=\"toggleColumnVisible(col)\"\n                      [attr.aria-pressed]=\"!col.hidden\"\n                    >\n                      <span class=\"lt-chooser-box\" aria-hidden=\"true\">\n                        @if (!col.hidden) {\n                          <svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\">\n                            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2 6.3 4.6 9 10 3\"/>\n                          </svg>\n                        }\n                      </span>\n                      <span class=\"lt-chooser-text\">{{ col.label }}</span>\n                      @if (isDefaultHidden(col)) {\n                        <span class=\"lt-chooser-default-tag\">hidden by default</span>\n                      }\n                    </button>\n                    @if (col.reorderable !== false) {\n                      <span class=\"lt-chooser-handle\" cdkDragHandle aria-label=\"Drag to reorder\" title=\"Drag to reorder\">\n                        <svg viewBox=\"0 0 10 16\" width=\"10\" height=\"15\" fill=\"currentColor\" aria-hidden=\"true\">\n                          <circle cx=\"3\" cy=\"3\" r=\"1.25\"/><circle cx=\"7\" cy=\"3\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"8\" r=\"1.25\"/><circle cx=\"7\" cy=\"8\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"13\" r=\"1.25\"/><circle cx=\"7\" cy=\"13\" r=\"1.25\"/>\n                        </svg>\n                      </span>\n                    }\n                  </li>\n                }\n              </ul>\n              <div class=\"lt-chooser-footer\">\n                <button\n                  type=\"button\"\n                  class=\"lt-chooser-reset\"\n                  [disabled]=\"columnsAtDefault\"\n                  (click)=\"resetTableColumns()\"\n                  id=\"ResetColumnsButton\"\n                >\n                  Reset to default\n                </button>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <div class=\"lt-scroll\" id=\"ItemTable\">\n      <table class=\"lt-table\">\n        <colgroup>\n          @if (!options.noSelect) { <col class=\"lt-col-select\" /> }\n          @for (col of visibleColumns; track trackCol($index, col)) {\n            <col [style.width]=\"colWidth(col)\" />\n          }\n          @if (!options.noMenu) { <col class=\"lt-col-menu\" /> }\n        </colgroup>\n        <thead class=\"lt-head\">\n          <tr cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"onReorder($event)\">\n            @if (!options.noSelect) {\n              <th class=\"lt-select-cell\">\n                <div\n                  class=\"lt-select-all\"\n                  [class.checked]=\"allToggled\"\n                  [class.indeterminate]=\"someSelected\"\n                  (click)=\"toggleAll()\"\n                  id=\"SelectAllRows\"\n                ></div>\n              </th>\n            }\n            @for (col of visibleColumns; track trackCol($index, col)) {\n              <th\n                cdkDrag\n                [cdkDragDisabled]=\"col.reorderable === false\"\n                class=\"lt-th\"\n                [ngClass]=\"col.cellClass\"\n                id=\"Header_{{ col.key }}\"\n              >\n                <lib-list-header-cell\n                  [column]=\"col\"\n                  [sortDir]=\"col.sortDir\"\n                  (sortChanged)=\"onHeaderSort($event)\"\n                  (hideColumn)=\"hideColumn($event)\"\n                ></lib-list-header-cell>\n                @if (col.resizable !== false) {\n                  <span class=\"lt-resize\" (pointerdown)=\"startResize(col, $event)\"></span>\n                }\n              </th>\n            }\n            @if (!options.noMenu) {\n              <th class=\"lt-menu-cell\">\n                <div class=\"lt-header-menu-trigger\" (click)=\"openHeaderActionMenu($event)\" id=\"ColumnMenuHeader\">\n                  &#8942;\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of rowData; track trackRow($index, row); let i = $index) {\n            <tr\n              class=\"lt-row\"\n              [class.lt-row-odd]=\"i % 2 === 1\"\n              [class.lt-row-selected]=\"row.selected\"\n              [class.row-invalid]=\"row.invalid\"\n              [class.row-copied]=\"row.copied\"\n            >\n              @if (!options.noSelect) {\n                <td class=\"lt-select-cell\">\n                  <lib-select-cell [row]=\"row\" [toggleItem]=\"toggleItem\"></lib-select-cell>\n                </td>\n              }\n              @for (col of visibleColumns; track trackCol($index, col)) {\n                <td\n                  class=\"lt-cell\"\n                  [ngClass]=\"cellClass(col)\"\n                  (click)=\"onCellClick(col, row, i)\"\n                  (mouseenter)=\"onCellHover(col, row, i, $event)\"\n                  (mouseleave)=\"onCellLeave()\"\n                >\n                  @switch (renderMode(col)) {\n                    @case ('component') {\n                      <ng-container *ngComponentOutlet=\"col.cell; inputs: cellInputs(col, row, i)\"></ng-container>\n                    }\n                    @case ('html') {\n                      <span class=\"lt-cell-html\" [innerHTML]=\"cellHtml(col, row, i)\"></span>\n                    }\n                    @default {\n                      <span class=\"lt-cell-text\">{{ cellText(col, row, i) }}</span>\n                    }\n                  }\n                </td>\n              }\n              @if (!options.noMenu) {\n                <td class=\"lt-menu-cell\">\n                  @if (row.actionList?.length) {\n                    <button\n                      type=\"button\"\n                      class=\"lt-row-menu-trigger\"\n                      (click)=\"$event.stopPropagation(); openActionMenu($event, row)\"\n                      attr.id=\"RowMenu_{{ row.id }}\"\n                      aria-label=\"Row actions\"\n                    >&#8942;</button>\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      @if (!isLoading && filterApplied && (!rowData || rowData.length === 0)) {\n        <div class=\"no-rows-message\">No Rows To Show</div>\n      }\n    </div>\n\n    <div class=\"lt-footer\">\n      <div class=\"lt-footer-count\">\n        Showing <span id=\"Start\">{{ startCount }}</span>&#8211;<span id=\"End\">{{ endCount }}</span>\n        of <span id=\"Total\">{{ totalCount }}</span>\n      </div>\n      <div class=\"lt-footer-controls\">\n        <div class=\"lt-rpp\">\n          <span class=\"lt-rpp-label\">Rows per page</span>\n          <select\n            class=\"lt-rpp-select\"\n            [disabled]=\"filtering\"\n            [value]=\"pageSize\"\n            (change)=\"onPageSizeChange(+$any($event.target).value)\"\n            aria-label=\"Rows per page\"\n          >\n            @for (opt of pageSizeOptions; track opt) {\n              <option [value]=\"opt\">{{ opt }}</option>\n            }\n          </select>\n        </div>\n        <div class=\"lt-pager\">\n          <button type=\"button\" class=\"lt-page-btn icon-prev\" [disabled]=\"prevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\"></button>\n          @for (p of pageWindow; track $index) {\n            @if (p === 0) {\n              <span class=\"lt-page-gap\">&#8230;</span>\n            } @else {\n              <button\n                type=\"button\"\n                class=\"lt-page-num\"\n                [class.is-current]=\"p === currentPageNum\"\n                (click)=\"goToPage(p)\"\n              >{{ p }}</button>\n            }\n          }\n          <button type=\"button\" class=\"lt-page-btn icon-next\" [disabled]=\"nextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\"></button>\n        </div>\n      </div>\n    </div>\n\n    <!-- header action menu -->\n    <lib-list-menu\n      menuId=\"HeaderActionMenu\"\n      [open]=\"openHeaderMenu\"\n      [items]=\"headerMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onHeaderMenuClick($event)\"\n      (closed)=\"closeHeaderActionMenu()\"\n    ></lib-list-menu>\n\n    <!-- row action menu -->\n    <lib-list-menu\n      menuId=\"RowActionMenu\"\n      [open]=\"openMenu\"\n      [items]=\"rowMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onRowMenuClick($event)\"\n      (closed)=\"closeActionMenu()\"\n    ></lib-list-menu>\n  </div>\n} @else {\n  <lib-no-items\n    (clickEmit)=\"openCreate()\"\n    [image]=\"noItemsImage\"\n    [isEmpty]=\"!rowData || rowData.length === 0\"\n    [isLoading]=\"isLoading\"\n    [typeName]=\"entityTypeLabel\"\n    [hasAdd]=\"showNoItemsAdd\"\n    [readonly]=\"noItemsReadonly\"\n    [accessDenied]=\"accessDenied\"\n  ></lib-no-items>\n}\n\n@if (hoverTooltip) {\n  <div class=\"lt-tooltip\" [ngStyle]=\"{ left: hoverTooltip.left + 'px', top: hoverTooltip.top + 'px' }\">\n    <ng-container *ngComponentOutlet=\"hoverTooltip.component; inputs: hoverTooltip.inputs\"></ng-container>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.lt-columns-btn,.lt-autorefresh-btn,.lt-refresh-btn,.lt-filter-more-btn{display:inline-flex;align-items:center;gap:.4375rem;height:var(--lt-toolbar-height);padding:0 .75rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.lt-columns-btn svg,.lt-autorefresh-btn svg,.lt-refresh-btn svg,.lt-filter-more-btn svg{display:block}.lt-columns-btn:hover,.lt-autorefresh-btn:hover,.lt-refresh-btn:hover,.lt-filter-more-btn:hover,.is-open.lt-columns-btn,.is-open.lt-autorefresh-btn,.is-open.lt-refresh-btn,.is-open.lt-filter-more-btn,.is-on.lt-columns-btn,.is-on.lt-autorefresh-btn,.is-on.lt-refresh-btn,.is-on.lt-filter-more-btn{border-color:var(--lt-link);color:var(--lt-link)}.lt-columns-count,.lt-filter-more-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.125rem;height:1.125rem;padding:0 .3125rem;font-size:.6875rem;font-weight:700;color:var(--lt-control-bg);background:var(--lt-link);border-radius:.5625rem}.lt-container{display:flex;position:relative;height:calc(100% - 5.625rem);width:100%;flex-direction:column}.lt-scroll{position:relative;z-index:1;width:100%;flex:0 1 auto;min-height:0;overflow:auto;background-color:var(--lt-bg)}.lt-scroll .no-rows-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--lt-cell-text);font-size:.875rem;pointer-events:none}.lt-table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text)}.lt-head{position:sticky;top:0;z-index:10}.lt-head th{position:relative;box-sizing:border-box;height:2.75rem;padding:0 .3125rem 0 .625rem;text-align:left;vertical-align:middle;background-color:var(--lt-header-bg);border-bottom:1px solid var(--lt-header-underline);white-space:nowrap;-webkit-user-select:none;user-select:none}.lt-head th.lt-th{border-right:1px solid var(--lt-border)}.lt-head .lt-select-cell,.lt-head .lt-menu-cell{width:3.75rem;padding:0}.lt-resize{position:absolute;right:0;top:50%;transform:translateY(-50%);width:.625rem;height:.875rem;cursor:col-resize}.lt-resize:before,.lt-resize:after{content:\"\";position:absolute;top:0;height:100%;width:1px;background:transparent;transition:background .15s}.lt-resize:before{right:.25rem}.lt-resize:after{right:.125rem}.lt-resize:hover:before,.lt-resize:hover:after{background:var(--lt-icon)}.lt-head th:hover .lt-resize:before,.lt-head th:hover .lt-resize:after{background:var(--lt-border)}.lt-select-all{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:1rem;height:1rem;border:1px solid var(--lt-border);border-radius:.25rem;background:var(--lt-control-bg);background-repeat:no-repeat;background-position:center center;cursor:pointer;transition:border-color .12s,background-color .12s}.lt-select-all:hover{border-color:var(--lt-link)}.lt-select-all.checked{background-color:var(--lt-link);border-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.6 5.7 10.8 11.5 3.6'/%3E%3C/svg%3E\")}.lt-select-all.indeterminate{background-color:var(--lt-link);border-color:var(--lt-link);background-image:linear-gradient(#fff,#fff);background-size:.5rem .125rem}.lt-header-menu-trigger{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.25rem;color:var(--lt-icon);cursor:pointer}.lt-header-menu-trigger:hover{color:var(--lt-icon-active)}.lt-row-menu-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;font-size:1.25rem;line-height:1;color:var(--lt-icon);background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer;transition:color .15s,background .15s}.lt-row-menu-trigger:hover{color:var(--lt-icon-active);background:var(--lt-row-hover)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--lt-header-bg);color:var(--lt-header-text);box-shadow:var(--shadowLarge);padding:0 .625rem;display:flex;align-items:center;border-radius:var(--lt-radius)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.lt-row{height:var(--lt-row-height);background-color:var(--lt-row-bg);color:var(--lt-cell-text)}.lt-row td{border-bottom:1px solid var(--lt-border)}.lt-row.lt-row-odd{background-color:var(--lt-row-alt-bg)}.lt-row:hover{background-color:var(--lt-row-hover)}.lt-row.lt-row-selected{background-color:var(--lt-row-selected)}.lt-row.lt-row-selected:hover{background-color:var(--lt-row-hover)}.lt-row.row-invalid{background-color:var(--invalid)!important}.lt-row.row-copied{background-color:var(--copiedRow)!important}.lt-cell{height:var(--lt-row-height);padding:0 .625rem 0 1.25rem;text-align:left;vertical-align:middle;border:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text}.lt-cell-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:middle}.lt-cell.lt-cell-center{text-align:center}.lt-badge-cell .lt-cell-text{padding:.1875rem .5rem;font-size:.75rem;font-weight:600;line-height:1.2;color:var(--lt-cell-text);background:color-mix(in srgb,var(--lt-border) 45%,transparent);border:1px solid var(--lt-border);border-radius:999px}.lt-badge-cell .lt-cell-text:empty{display:none}.lt-select-cell,.lt-menu-cell{width:3.75rem;padding:0;text-align:center;vertical-align:middle;overflow:visible;position:relative}.lt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:0 0 .625rem;min-height:var(--lt-toolbar-height);position:relative;z-index:30}.lt-toolbar-left{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;flex-wrap:nowrap}.lt-filter-zone{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;flex:0 1 auto;min-width:0}.lt-filters{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;min-width:0;flex:0 1 auto;overflow:hidden}.lt-filter-item{display:inline-flex;flex:0 0 auto}.lt-filter-more{position:relative;flex:0 0 auto}.lt-filter-more-btn{gap:.375rem;padding:0 .625rem}.lt-filter-more-btn .lt-filter-more-icon{display:inline-flex}.lt-filter-overflow{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;min-width:15rem;max-width:min(22rem,90vw);display:flex;flex-direction:column;gap:.5rem;padding:.625rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:lt-chooser-in .12s ease-out}.lt-filter-overflow-title{font-family:var(--lt-font);font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--groupText)}.lt-filter-overflow-row{display:flex}.lt-filter-overflow-row lib-list-filter-cell,.lt-filter-overflow-row .lt-filter-item{flex:1 1 auto;min-width:0}.lt-toolbar-right{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}.lt-divider{flex:0 0 auto;width:1px;height:1.5rem;background:var(--lt-border)}.lt-search{position:relative;display:flex;align-items:center;width:18rem;max-width:40vw;flex:0 1 18rem}.lt-search-icon{position:absolute;left:.625rem;display:block;color:var(--lt-icon);pointer-events:none}.lt-search-input{width:100%;height:var(--lt-toolbar-height);padding:0 .75rem 0 1.75rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-border);border-radius:var(--lt-radius);outline:none;transition:border-color .15s,box-shadow .15s}.lt-search-input::placeholder{color:var(--placeholder)}.lt-search-input:focus{border-color:var(--lt-link);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--lt-link) 18%,transparent)}.lt-count{font-size:.8125rem;color:var(--groupText);white-space:nowrap}.lt-count .lt-count-of{color:var(--groupText)}.lt-pager{display:flex;align-items:center;gap:.25rem}.lt-page-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);color:var(--lt-icon);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer;font-size:.9375rem;transition:border-color .15s,color .15s}.lt-page-btn:not(:disabled):hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-btn:disabled{opacity:.4;cursor:default}.lt-refresh-btn{padding:0;width:var(--lt-toolbar-height);justify-content:center}.lt-refresh-btn:disabled{opacity:.5;cursor:default;border-color:var(--lt-border);color:var(--lt-cell-text)}.lt-columns{position:relative;flex:0 0 auto}.lt-column-chooser{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;width:15rem;max-height:calc(100vh - 9rem);display:flex;flex-direction:column;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);overflow:hidden;animation:lt-chooser-in .12s ease-out}@keyframes lt-chooser-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.lt-chooser-header{flex:0 0 auto;display:flex;flex-direction:column;padding:.625rem .75rem .5rem;border-bottom:1px solid var(--lt-border)}.lt-chooser-title{font-size:.8125rem;font-weight:700;color:var(--lt-cell-text)}.lt-chooser-subtitle{font-size:.6875rem;color:var(--groupText)}.lt-chooser-list{flex:1 1 auto;list-style:none;margin:0;padding:.375rem .5rem;min-height:0;overflow-y:auto}.lt-chooser-row{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:.5rem;border-radius:var(--lt-radius);background:var(--lt-control-bg)}.lt-chooser-row:hover{background:var(--lt-row-hover)}.lt-chooser-row:hover .lt-chooser-handle{opacity:1}.lt-chooser-toggle{display:flex;align-items:center;gap:.625rem;flex:1 1 auto;min-width:0;padding:0;background:transparent;border:none;font:inherit;font-size:.875rem;color:var(--lt-cell-text);text-align:left;cursor:pointer}.lt-chooser-toggle:disabled{cursor:default;opacity:.5}.lt-chooser-box{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1rem;height:1rem;border:.09375rem solid var(--lt-border);border-radius:.25rem;color:var(--lt-control-bg);background:var(--lt-control-bg);transition:background .12s,border-color .12s}.lt-chooser-toggle.checked .lt-chooser-box{background:var(--lt-link);border-color:var(--lt-link)}.lt-chooser-toggle:not(:disabled):hover .lt-chooser-box{border-color:var(--lt-link)}.lt-chooser-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lt-chooser-default-tag{flex:0 0 auto;margin-left:.375rem;font-size:.6875rem;font-weight:400;font-style:italic;color:var(--groupText);white-space:nowrap}.lt-chooser-handle{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--lt-icon);cursor:grab;padding-left:.5rem;-webkit-user-select:none;user-select:none}.lt-chooser-handle:active{cursor:grabbing}.lt-chooser-footer{flex:0 0 auto;padding:.5rem .75rem;border-top:1px solid var(--lt-border)}.lt-chooser-reset{width:100%;height:1.875rem;font-size:.75rem;font-weight:600;color:var(--lt-link);background:transparent;border:1px solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer}.lt-chooser-reset:disabled{color:var(--groupText);cursor:default;opacity:.6}.lt-chooser-reset:not(:disabled):hover{border-color:var(--lt-link)}.lt-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.625rem .125rem 0;font-family:var(--lt-font);font-size:.8125rem;color:var(--groupText)}.lt-footer-count{white-space:nowrap}.lt-footer-count span{color:var(--lt-cell-text);font-weight:600}.lt-footer-controls{display:flex;align-items:center;gap:1.25rem;flex-wrap:nowrap}.lt-rpp{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}.lt-rpp-label{text-transform:none;font-weight:400;color:var(--groupText)}.lt-rpp-select{width:auto;min-width:4rem;height:var(--lt-toolbar-height);padding:0 1.75rem 0 .625rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background-color:var(--lt-control-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .5rem center;border:var(--inputBorderWidth) solid var(--lt-border);border-radius:var(--lt-radius);appearance:none;-webkit-appearance:none;cursor:pointer}.lt-rpp-select:focus{outline:none;border-color:var(--lt-link)}.lt-page-num{display:inline-flex;align-items:center;justify-content:center;min-width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);padding:0 .5rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer;transition:border-color .15s,color .15s,background .15s}.lt-page-num:hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-num.is-current{color:#fff;background:var(--lt-link);border-color:var(--lt-link);cursor:default}.lt-page-gap{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;color:var(--groupText)}.lt-tooltip{position:fixed;z-index:1100;pointer-events:none;animation:lt-tooltip-in .12s ease-out}@keyframes lt-tooltip-in{0%{opacity:0;transform:translateY(-.1875rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: ListMenuComponent, selector: "lib-list-menu", inputs: ["open", "items", "left", "top", "menuId"], outputs: ["itemClick", "closed"] }, { kind: "component", type: SelectCellComponent, selector: "lib-select-cell", inputs: ["row", "toggleItem"] }, { kind: "component", type: ListHeaderCellComponent, selector: "lib-list-header-cell", inputs: ["column", "sortDir"], outputs: ["sortChanged", "hideColumn"] }, { kind: "component", type: ListFilterCellComponent, selector: "lib-list-filter-cell", inputs: ["column"] }, { kind: "component", type: NoItemsComponent, selector: "lib-no-items", inputs: ["image", "typeName", "isEmpty", "hasAdd", "hiddenResults", "isLoading", "readonly", "accessDenied"], outputs: ["clickEmit", "refresh"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-table', standalone: false, providers: [ListTableService], template: "@if (showTable && !accessDenied) {\n  <div class=\"lt-container\">\n    <div class=\"lt-toolbar\">\n      <div class=\"lt-toolbar-left\">\n        <div class=\"lt-search\">\n          <svg class=\"lt-search-icon\" viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <circle cx=\"7\" cy=\"7\" r=\"4.3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n            <line x1=\"10.4\" y1=\"10.4\" x2=\"14.6\" y2=\"14.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n          </svg>\n          <input\n            class=\"lt-search-input\"\n            id=\"SearchFilter\"\n            type=\"text\"\n            [placeholder]=\"'Search ' + (entityTypeLabel || 'items')\"\n            [(ngModel)]=\"searchString\"\n            (keyup)=\"onSearchInput()\"\n          />\n        </div>\n        @if (filterableColumns.length) {\n          <div class=\"lt-filter-zone\" #filterZone>\n            <div class=\"lt-filters\" #filtersRow>\n              @for (col of visibleFilterColumns; track col.key) {\n                <span class=\"lt-filter-item\" [attr.data-filter-key]=\"col.key\">\n                  <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                </span>\n              }\n            </div>\n            @if (overflowFilterColumns.length) {\n              <div class=\"lt-filter-more\">\n                <button\n                  type=\"button\"\n                  class=\"lt-filter-more-btn\"\n                  [class.is-on]=\"hiddenActiveCount > 0\"\n                  [class.is-open]=\"showFilterOverflow\"\n                  (click)=\"toggleFilterOverflow($event)\"\n                  aria-haspopup=\"true\"\n                  [attr.aria-expanded]=\"showFilterOverflow\"\n                  [attr.aria-label]=\"overflowFilterColumns.length + ' more filters'\"\n                  id=\"FilterOverflowButton\"\n                >\n                  <span class=\"lt-filter-more-icon\" aria-hidden=\"true\">\n                    <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\"><path fill=\"currentColor\" d=\"M2 3h12l-4.6 5.6v4l-2.8 1.4v-5.4z\"/></svg>\n                  </span>\n                  <span class=\"lt-filter-more-label\">More</span>\n                  <span class=\"lt-filter-more-count\">{{ overflowFilterColumns.length }}</span>\n                </button>\n                @if (showFilterOverflow) {\n                  <div class=\"lt-filter-overflow\" (clickOutside)=\"closeFilterOverflow($event)\">\n                    <div class=\"lt-filter-overflow-title\">Filters</div>\n                    @for (col of overflowFilterColumns; track col.key) {\n                      <div class=\"lt-filter-overflow-row\" [class.is-active]=\"isFilterActive(col)\">\n                        <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"lt-toolbar-right\">\n        <ng-template #refreshIcon>\n          <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" d=\"M13.4 8a5.4 5.4 0 1 1-1.5-3.8\"/>\n            <path fill=\"currentColor\" d=\"M13.9 2.1l.5 3.2-3.2-.5z\"/>\n          </svg>\n        </ng-template>\n        <button\n          type=\"button\"\n          class=\"lt-refresh-btn\"\n          (click)=\"refresh()\"\n          [disabled]=\"filtering\"\n          aria-label=\"Refresh\"\n          title=\"Refresh\"\n          id=\"RefreshTableButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n        </button>\n        <button\n          type=\"button\"\n          class=\"lt-autorefresh-btn\"\n          [class.is-on]=\"autoRefresh\"\n          (click)=\"toggleAutoRefresh()\"\n          [attr.aria-pressed]=\"autoRefresh\"\n          id=\"AutoRefreshButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n          <span>Auto-refresh: {{ autoRefresh ? 'On' : 'Off' }}</span>\n        </button>\n        <div class=\"lt-columns\">\n          <button\n            type=\"button\"\n            class=\"lt-columns-btn\"\n            [class.is-on]=\"hiddenColumnCount > 0\"\n            [class.is-open]=\"showColumnChooser\"\n            (click)=\"toggleColumnChooser($event)\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"showColumnChooser\"\n            id=\"ColumnChooserButton\"\n          >\n            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n              <path fill=\"currentColor\" d=\"M2 3.5h9v1.4H2zM2 7.3h6v1.4H2zM2 11.1h11v1.4H2z\"/>\n              <circle cx=\"13\" cy=\"4.2\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"10\" cy=\"8\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"14.4\" cy=\"11.8\" r=\"1.7\" fill=\"currentColor\"/>\n            </svg>\n            <span>Columns</span>\n            @if (hiddenColumnCount > 0) {\n              <span class=\"lt-columns-count\">{{ hiddenColumnCount }}</span>\n            }\n          </button>\n          @if (showColumnChooser) {\n            <div class=\"lt-column-chooser\" (clickOutside)=\"closeColumnChooser()\">\n              <div class=\"lt-chooser-header\">\n                <span class=\"lt-chooser-title\">Columns</span>\n                <span class=\"lt-chooser-subtitle\">Customize order and visibility</span>\n              </div>\n              <ul class=\"lt-chooser-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"chooserReorder($event)\">\n                @for (col of allColumns; track col.key) {\n                  <li class=\"lt-chooser-row\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"col.reorderable === false\">\n                    <button\n                      type=\"button\"\n                      class=\"lt-chooser-toggle\"\n                      [class.checked]=\"!col.hidden\"\n                      [disabled]=\"col.hideable === false\"\n                      (click)=\"toggleColumnVisible(col)\"\n                      [attr.aria-pressed]=\"!col.hidden\"\n                    >\n                      <span class=\"lt-chooser-box\" aria-hidden=\"true\">\n                        @if (!col.hidden) {\n                          <svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\">\n                            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2 6.3 4.6 9 10 3\"/>\n                          </svg>\n                        }\n                      </span>\n                      <span class=\"lt-chooser-text\">{{ col.label }}</span>\n                      @if (isDefaultHidden(col)) {\n                        <span class=\"lt-chooser-default-tag\">hidden by default</span>\n                      }\n                    </button>\n                    @if (col.reorderable !== false) {\n                      <span class=\"lt-chooser-handle\" cdkDragHandle aria-label=\"Drag to reorder\" title=\"Drag to reorder\">\n                        <svg viewBox=\"0 0 10 16\" width=\"10\" height=\"15\" fill=\"currentColor\" aria-hidden=\"true\">\n                          <circle cx=\"3\" cy=\"3\" r=\"1.25\"/><circle cx=\"7\" cy=\"3\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"8\" r=\"1.25\"/><circle cx=\"7\" cy=\"8\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"13\" r=\"1.25\"/><circle cx=\"7\" cy=\"13\" r=\"1.25\"/>\n                        </svg>\n                      </span>\n                    }\n                  </li>\n                }\n              </ul>\n              <div class=\"lt-chooser-footer\">\n                <button\n                  type=\"button\"\n                  class=\"lt-chooser-reset\"\n                  [disabled]=\"columnsAtDefault\"\n                  (click)=\"resetTableColumns()\"\n                  id=\"ResetColumnsButton\"\n                >\n                  Reset to default\n                </button>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <div class=\"lt-scroll\" id=\"ItemTable\">\n      <table class=\"lt-table\">\n        <colgroup>\n          @if (!options.noSelect) { <col class=\"lt-col-select\" /> }\n          @for (col of visibleColumns; track trackCol($index, col)) {\n            <col [style.width]=\"colWidth(col)\" />\n          }\n          @if (!options.noMenu) { <col class=\"lt-col-menu\" /> }\n        </colgroup>\n        <thead class=\"lt-head\">\n          <tr cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"onReorder($event)\">\n            @if (!options.noSelect) {\n              <th class=\"lt-select-cell\">\n                <div\n                  class=\"lt-select-all\"\n                  [class.checked]=\"allToggled\"\n                  [class.indeterminate]=\"someSelected\"\n                  (click)=\"toggleAll()\"\n                  id=\"SelectAllRows\"\n                ></div>\n              </th>\n            }\n            @for (col of visibleColumns; track trackCol($index, col)) {\n              <th\n                cdkDrag\n                [cdkDragDisabled]=\"col.reorderable === false\"\n                class=\"lt-th\"\n                [ngClass]=\"col.cellClass\"\n                id=\"Header_{{ col.key }}\"\n              >\n                <lib-list-header-cell\n                  [column]=\"col\"\n                  [sortDir]=\"col.sortDir\"\n                  (sortChanged)=\"onHeaderSort($event)\"\n                  (hideColumn)=\"hideColumn($event)\"\n                ></lib-list-header-cell>\n                @if (col.resizable !== false) {\n                  <span class=\"lt-resize\" (pointerdown)=\"startResize(col, $event)\"></span>\n                }\n              </th>\n            }\n            @if (!options.noMenu) {\n              <th class=\"lt-menu-cell\">\n                <div class=\"lt-header-menu-trigger\" (click)=\"openHeaderActionMenu($event)\" id=\"ColumnMenuHeader\">\n                  &#8942;\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of rowData; track trackRow($index, row); let i = $index) {\n            <tr\n              class=\"lt-row\"\n              [class.lt-row-odd]=\"i % 2 === 1\"\n              [class.lt-row-selected]=\"row.selected\"\n              [class.row-invalid]=\"row.invalid\"\n              [class.row-copied]=\"row.copied\"\n            >\n              @if (!options.noSelect) {\n                <td class=\"lt-select-cell\">\n                  <lib-select-cell [row]=\"row\" [toggleItem]=\"toggleItem\"></lib-select-cell>\n                </td>\n              }\n              @for (col of visibleColumns; track trackCol($index, col)) {\n                <td\n                  class=\"lt-cell\"\n                  [ngClass]=\"cellClass(col)\"\n                  (click)=\"onCellClick(col, row, i)\"\n                  (mouseenter)=\"onCellHover(col, row, i, $event)\"\n                  (mouseleave)=\"onCellLeave()\"\n                >\n                  @switch (renderMode(col)) {\n                    @case ('component') {\n                      <ng-container *ngComponentOutlet=\"col.cell; inputs: cellInputs(col, row, i)\"></ng-container>\n                    }\n                    @case ('html') {\n                      <span class=\"lt-cell-html\" [innerHTML]=\"cellHtml(col, row, i)\"></span>\n                    }\n                    @default {\n                      <span class=\"lt-cell-text\">{{ cellText(col, row, i) }}</span>\n                    }\n                  }\n                </td>\n              }\n              @if (!options.noMenu) {\n                <td class=\"lt-menu-cell\">\n                  @if (row.actionList?.length) {\n                    <button\n                      type=\"button\"\n                      class=\"lt-row-menu-trigger\"\n                      (click)=\"$event.stopPropagation(); openActionMenu($event, row)\"\n                      attr.id=\"RowMenu_{{ row.id }}\"\n                      aria-label=\"Row actions\"\n                    >&#8942;</button>\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      @if (!isLoading && filterApplied && (!rowData || rowData.length === 0)) {\n        <div class=\"no-rows-message\">No Rows To Show</div>\n      }\n    </div>\n\n    <div class=\"lt-footer\">\n      <div class=\"lt-footer-count\">\n        Showing <span id=\"Start\">{{ startCount }}</span>&#8211;<span id=\"End\">{{ endCount }}</span>\n        of <span id=\"Total\">{{ totalCount }}</span>\n      </div>\n      <div class=\"lt-footer-controls\">\n        <div class=\"lt-rpp\">\n          <span class=\"lt-rpp-label\">Rows per page</span>\n          <select\n            class=\"lt-rpp-select\"\n            [disabled]=\"filtering\"\n            [value]=\"pageSize\"\n            (change)=\"onPageSizeChange(+$any($event.target).value)\"\n            aria-label=\"Rows per page\"\n          >\n            @for (opt of pageSizeOptions; track opt) {\n              <option [value]=\"opt\">{{ opt }}</option>\n            }\n          </select>\n        </div>\n        <div class=\"lt-pager\">\n          <button type=\"button\" class=\"lt-page-btn icon-prev\" [disabled]=\"prevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\"></button>\n          @for (p of pageWindow; track $index) {\n            @if (p === 0) {\n              <span class=\"lt-page-gap\">&#8230;</span>\n            } @else {\n              <button\n                type=\"button\"\n                class=\"lt-page-num\"\n                [class.is-current]=\"p === currentPageNum\"\n                (click)=\"goToPage(p)\"\n              >{{ p }}</button>\n            }\n          }\n          <button type=\"button\" class=\"lt-page-btn icon-next\" [disabled]=\"nextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\"></button>\n        </div>\n      </div>\n    </div>\n\n    <!-- header action menu -->\n    <lib-list-menu\n      menuId=\"HeaderActionMenu\"\n      [open]=\"openHeaderMenu\"\n      [items]=\"headerMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onHeaderMenuClick($event)\"\n      (closed)=\"closeHeaderActionMenu()\"\n    ></lib-list-menu>\n\n    <!-- row action menu -->\n    <lib-list-menu\n      menuId=\"RowActionMenu\"\n      [open]=\"openMenu\"\n      [items]=\"rowMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onRowMenuClick($event)\"\n      (closed)=\"closeActionMenu()\"\n    ></lib-list-menu>\n  </div>\n} @else {\n  <lib-no-items\n    (clickEmit)=\"openCreate()\"\n    [image]=\"noItemsImage\"\n    [isEmpty]=\"!rowData || rowData.length === 0\"\n    [isLoading]=\"isLoading\"\n    [typeName]=\"entityTypeLabel\"\n    [hasAdd]=\"showNoItemsAdd\"\n    [readonly]=\"noItemsReadonly\"\n    [accessDenied]=\"accessDenied\"\n  ></lib-no-items>\n}\n\n@if (hoverTooltip) {\n  <div class=\"lt-tooltip\" [ngStyle]=\"{ left: hoverTooltip.left + 'px', top: hoverTooltip.top + 'px' }\">\n    <ng-container *ngComponentOutlet=\"hoverTooltip.component; inputs: hoverTooltip.inputs\"></ng-container>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.lt-columns-btn,.lt-autorefresh-btn,.lt-refresh-btn,.lt-filter-more-btn{display:inline-flex;align-items:center;gap:.4375rem;height:var(--lt-toolbar-height);padding:0 .75rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.lt-columns-btn svg,.lt-autorefresh-btn svg,.lt-refresh-btn svg,.lt-filter-more-btn svg{display:block}.lt-columns-btn:hover,.lt-autorefresh-btn:hover,.lt-refresh-btn:hover,.lt-filter-more-btn:hover,.is-open.lt-columns-btn,.is-open.lt-autorefresh-btn,.is-open.lt-refresh-btn,.is-open.lt-filter-more-btn,.is-on.lt-columns-btn,.is-on.lt-autorefresh-btn,.is-on.lt-refresh-btn,.is-on.lt-filter-more-btn{border-color:var(--lt-link);color:var(--lt-link)}.lt-columns-count,.lt-filter-more-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.125rem;height:1.125rem;padding:0 .3125rem;font-size:.6875rem;font-weight:700;color:var(--lt-control-bg);background:var(--lt-link);border-radius:.5625rem}.lt-container{display:flex;position:relative;height:calc(100% - 5.625rem);width:100%;flex-direction:column}.lt-scroll{position:relative;z-index:1;width:100%;flex:0 1 auto;min-height:0;overflow:auto;background-color:var(--lt-bg)}.lt-scroll .no-rows-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--lt-cell-text);font-size:.875rem;pointer-events:none}.lt-table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text)}.lt-head{position:sticky;top:0;z-index:10}.lt-head th{position:relative;box-sizing:border-box;height:2.75rem;padding:0 .3125rem 0 .625rem;text-align:left;vertical-align:middle;background-color:var(--lt-header-bg);border-bottom:1px solid var(--lt-header-underline);white-space:nowrap;-webkit-user-select:none;user-select:none}.lt-head th.lt-th{border-right:1px solid var(--lt-border)}.lt-head .lt-select-cell,.lt-head .lt-menu-cell{width:3.75rem;padding:0}.lt-resize{position:absolute;right:0;top:50%;transform:translateY(-50%);width:.625rem;height:.875rem;cursor:col-resize}.lt-resize:before,.lt-resize:after{content:\"\";position:absolute;top:0;height:100%;width:1px;background:transparent;transition:background .15s}.lt-resize:before{right:.25rem}.lt-resize:after{right:.125rem}.lt-resize:hover:before,.lt-resize:hover:after{background:var(--lt-icon)}.lt-head th:hover .lt-resize:before,.lt-head th:hover .lt-resize:after{background:var(--lt-border)}.lt-select-all{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:1rem;height:1rem;border:1px solid var(--lt-border);border-radius:.25rem;background:var(--lt-control-bg);background-repeat:no-repeat;background-position:center center;cursor:pointer;transition:border-color .12s,background-color .12s}.lt-select-all:hover{border-color:var(--lt-link)}.lt-select-all.checked{background-color:var(--lt-link);border-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.6 5.7 10.8 11.5 3.6'/%3E%3C/svg%3E\")}.lt-select-all.indeterminate{background-color:var(--lt-link);border-color:var(--lt-link);background-image:linear-gradient(#fff,#fff);background-size:.5rem .125rem}.lt-header-menu-trigger{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.25rem;color:var(--lt-icon);cursor:pointer}.lt-header-menu-trigger:hover{color:var(--lt-icon-active)}.lt-row-menu-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;font-size:1.25rem;line-height:1;color:var(--lt-icon);background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer;transition:color .15s,background .15s}.lt-row-menu-trigger:hover{color:var(--lt-icon-active);background:var(--lt-row-hover)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--lt-header-bg);color:var(--lt-header-text);box-shadow:var(--shadowLarge);padding:0 .625rem;display:flex;align-items:center;border-radius:var(--lt-radius)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.lt-row{height:var(--lt-row-height);background-color:var(--lt-row-bg);color:var(--lt-cell-text)}.lt-row td{border-bottom:1px solid var(--lt-border)}.lt-row.lt-row-odd{background-color:var(--lt-row-alt-bg)}.lt-row:hover{background-color:var(--lt-row-hover)}.lt-row.lt-row-selected{background-color:var(--lt-row-selected)}.lt-row.lt-row-selected:hover{background-color:var(--lt-row-hover)}.lt-row.row-invalid{background-color:var(--invalid)!important}.lt-row.row-copied{background-color:var(--copiedRow)!important}.lt-cell{height:var(--lt-row-height);padding:0 .625rem 0 1.25rem;text-align:left;vertical-align:middle;border:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text}.lt-cell-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:middle}.lt-cell.lt-cell-center{text-align:center}.lt-badge-cell .lt-cell-text{padding:.1875rem .5rem;font-size:.75rem;font-weight:600;line-height:1.2;color:var(--lt-cell-text);background:color-mix(in srgb,var(--lt-border) 45%,transparent);border:1px solid var(--lt-border);border-radius:999px}.lt-badge-cell .lt-cell-text:empty{display:none}.lt-select-cell,.lt-menu-cell{width:3.75rem;padding:0;text-align:center;vertical-align:middle;overflow:visible;position:relative}.lt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:0 0 .625rem;min-height:var(--lt-toolbar-height);position:relative;z-index:30}.lt-toolbar-left{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;flex-wrap:nowrap}.lt-filter-zone{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;flex:0 1 auto;min-width:0}.lt-filters{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;min-width:0;flex:0 1 auto;overflow:hidden}.lt-filter-item{display:inline-flex;flex:0 0 auto}.lt-filter-more{position:relative;flex:0 0 auto}.lt-filter-more-btn{gap:.375rem;padding:0 .625rem}.lt-filter-more-btn .lt-filter-more-icon{display:inline-flex}.lt-filter-overflow{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;min-width:15rem;max-width:min(22rem,90vw);display:flex;flex-direction:column;gap:.5rem;padding:.625rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:lt-chooser-in .12s ease-out}.lt-filter-overflow-title{font-family:var(--lt-font);font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--groupText)}.lt-filter-overflow-row{display:flex}.lt-filter-overflow-row lib-list-filter-cell,.lt-filter-overflow-row .lt-filter-item{flex:1 1 auto;min-width:0}.lt-toolbar-right{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}.lt-divider{flex:0 0 auto;width:1px;height:1.5rem;background:var(--lt-border)}.lt-search{position:relative;display:flex;align-items:center;width:18rem;max-width:40vw;flex:0 1 18rem}.lt-search-icon{position:absolute;left:.625rem;display:block;color:var(--lt-icon);pointer-events:none}.lt-search-input{width:100%;height:var(--lt-toolbar-height);padding:0 .75rem 0 1.75rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-border);border-radius:var(--lt-radius);outline:none;transition:border-color .15s,box-shadow .15s}.lt-search-input::placeholder{color:var(--placeholder)}.lt-search-input:focus{border-color:var(--lt-link);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--lt-link) 18%,transparent)}.lt-count{font-size:.8125rem;color:var(--groupText);white-space:nowrap}.lt-count .lt-count-of{color:var(--groupText)}.lt-pager{display:flex;align-items:center;gap:.25rem}.lt-page-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);color:var(--lt-icon);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer;font-size:.9375rem;transition:border-color .15s,color .15s}.lt-page-btn:not(:disabled):hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-btn:disabled{opacity:.4;cursor:default}.lt-refresh-btn{padding:0;width:var(--lt-toolbar-height);justify-content:center}.lt-refresh-btn:disabled{opacity:.5;cursor:default;border-color:var(--lt-border);color:var(--lt-cell-text)}.lt-columns{position:relative;flex:0 0 auto}.lt-column-chooser{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;width:15rem;max-height:calc(100vh - 9rem);display:flex;flex-direction:column;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);overflow:hidden;animation:lt-chooser-in .12s ease-out}@keyframes lt-chooser-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.lt-chooser-header{flex:0 0 auto;display:flex;flex-direction:column;padding:.625rem .75rem .5rem;border-bottom:1px solid var(--lt-border)}.lt-chooser-title{font-size:.8125rem;font-weight:700;color:var(--lt-cell-text)}.lt-chooser-subtitle{font-size:.6875rem;color:var(--groupText)}.lt-chooser-list{flex:1 1 auto;list-style:none;margin:0;padding:.375rem .5rem;min-height:0;overflow-y:auto}.lt-chooser-row{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:.5rem;border-radius:var(--lt-radius);background:var(--lt-control-bg)}.lt-chooser-row:hover{background:var(--lt-row-hover)}.lt-chooser-row:hover .lt-chooser-handle{opacity:1}.lt-chooser-toggle{display:flex;align-items:center;gap:.625rem;flex:1 1 auto;min-width:0;padding:0;background:transparent;border:none;font:inherit;font-size:.875rem;color:var(--lt-cell-text);text-align:left;cursor:pointer}.lt-chooser-toggle:disabled{cursor:default;opacity:.5}.lt-chooser-box{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1rem;height:1rem;border:.09375rem solid var(--lt-border);border-radius:.25rem;color:var(--lt-control-bg);background:var(--lt-control-bg);transition:background .12s,border-color .12s}.lt-chooser-toggle.checked .lt-chooser-box{background:var(--lt-link);border-color:var(--lt-link)}.lt-chooser-toggle:not(:disabled):hover .lt-chooser-box{border-color:var(--lt-link)}.lt-chooser-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lt-chooser-default-tag{flex:0 0 auto;margin-left:.375rem;font-size:.6875rem;font-weight:400;font-style:italic;color:var(--groupText);white-space:nowrap}.lt-chooser-handle{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--lt-icon);cursor:grab;padding-left:.5rem;-webkit-user-select:none;user-select:none}.lt-chooser-handle:active{cursor:grabbing}.lt-chooser-footer{flex:0 0 auto;padding:.5rem .75rem;border-top:1px solid var(--lt-border)}.lt-chooser-reset{width:100%;height:1.875rem;font-size:.75rem;font-weight:600;color:var(--lt-link);background:transparent;border:1px solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer}.lt-chooser-reset:disabled{color:var(--groupText);cursor:default;opacity:.6}.lt-chooser-reset:not(:disabled):hover{border-color:var(--lt-link)}.lt-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.625rem .125rem 0;font-family:var(--lt-font);font-size:.8125rem;color:var(--groupText)}.lt-footer-count{white-space:nowrap}.lt-footer-count span{color:var(--lt-cell-text);font-weight:600}.lt-footer-controls{display:flex;align-items:center;gap:1.25rem;flex-wrap:nowrap}.lt-rpp{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}.lt-rpp-label{text-transform:none;font-weight:400;color:var(--groupText)}.lt-rpp-select{width:auto;min-width:4rem;height:var(--lt-toolbar-height);padding:0 1.75rem 0 .625rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background-color:var(--lt-control-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .5rem center;border:var(--inputBorderWidth) solid var(--lt-border);border-radius:var(--lt-radius);appearance:none;-webkit-appearance:none;cursor:pointer}.lt-rpp-select:focus{outline:none;border-color:var(--lt-link)}.lt-page-num{display:inline-flex;align-items:center;justify-content:center;min-width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);padding:0 .5rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer;transition:border-color .15s,color .15s,background .15s}.lt-page-num:hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-num.is-current{color:#fff;background:var(--lt-link);border-color:var(--lt-link);cursor:default}.lt-page-gap{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;color:var(--groupText)}.lt-tooltip{position:fixed;z-index:1100;pointer-events:none;animation:lt-tooltip-in .12s ease-out}@keyframes lt-tooltip-in{0%{opacity:0;transform:translateY(-.1875rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [{ type: ListTableService }, { type: DataTableFilterService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.DomSanitizer }], propDecorators: { tableId: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], startCount: [{
+                type: Input
+            }], endCount: [{
+                type: Input
+            }], totalCount: [{
+                type: Input
+            }], filterApplied: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
+            }], headerActions: [{
+                type: Input
+            }], noItemsImage: [{
+                type: Input
+            }], showNoItemsAdd: [{
+                type: Input
+            }], noItemsReadonly: [{
+                type: Input
+            }], accessDenied: [{
+                type: Input
+            }], entityTypeName: [{
+                type: Input
+            }], filterName: [{
+                type: Input
+            }], filterColumn: [{
+                type: Input
+            }], actionRequested: [{
+                type: Output
+            }], tableReady: [{
+                type: Output
+            }], contextMenu: [{
+                type: ViewChild,
+                args: ['contextMenu']
+            }], filterZone: [{
+                type: ViewChild,
+                args: ['filterZone']
+            }], filtersRow: [{
+                type: ViewChild,
+                args: ['filtersRow']
+            }] } });
+
 class Link {
     constructor() {
         this.statusReason = null;
@@ -12828,11 +14955,11 @@ class SideModalComponent {
         this.openChange.emit(this.open);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SideModalComponent, deps: [{ token: ConsoleEventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SideModalComponent, isStandalone: false, selector: "lib-side-modal", inputs: { showClose: "showClose", open: "open" }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<div class=\"side-modal-container\" [ngClass]=\"{'side-modal-open': open}\">\n  @if (showClose) {\n    <div class=\"close icon-close\" (click)=\"close()\"></div>\n  }\n  <ng-content></ng-content>\n</div>\n\n", styles: [".side-modal-container{position:fixed;right:-30%;top:0;padding:1.875rem;height:100%;width:30%;min-width:28.125rem;max-width:37.5rem;overflow-y:auto;transition:right .3s ease-in-out;z-index:999999;background-color:var(--formBackground);box-shadow:-.25rem 0 1.25rem #0003;border-left:.0625rem solid var(--tableBorder)}.side-modal-container.side-modal-open{right:0}.side-modal-container .close{position:absolute;top:1rem;right:1rem;font-size:1.5rem;cursor:pointer;color:var(--tableText);transition:all .2s ease;z-index:10}.side-modal-container .close:hover{color:var(--primary);transform:scale(1.1)}::ng-deep .sideNavClosed .side-modal-container.side-modal-open{right:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SideModalComponent, isStandalone: false, selector: "lib-side-modal", inputs: { showClose: "showClose", open: "open" }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<div class=\"side-modal-container\" [ngClass]=\"{'side-modal-open': open}\">\n  @if (showClose) {\n    <div class=\"close icon-close\" (click)=\"close()\"></div>\n  }\n  <ng-content></ng-content>\n</div>\n\n", styles: [".side-modal-container{position:fixed;right:-42rem;top:0;padding:1.875rem;height:100%;width:30%;min-width:28.125rem;max-width:37.5rem;overflow-y:auto;transition:right .3s ease-in-out;z-index:999999;background-color:var(--formBackground);box-shadow:-.25rem 0 1.25rem #0003;border-left:.0625rem solid var(--tableBorder)}.side-modal-container.side-modal-open{right:0}.side-modal-container .close{position:absolute;top:1rem;right:1rem;font-size:1.5rem;cursor:pointer;color:var(--tableText);transition:all .2s ease;z-index:10}.side-modal-container .close:hover{color:var(--primary);transform:scale(1.1)}::ng-deep .sideNavClosed .side-modal-container.side-modal-open{right:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SideModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-side-modal', standalone: false, template: "<div class=\"side-modal-container\" [ngClass]=\"{'side-modal-open': open}\">\n  @if (showClose) {\n    <div class=\"close icon-close\" (click)=\"close()\"></div>\n  }\n  <ng-content></ng-content>\n</div>\n\n", styles: [".side-modal-container{position:fixed;right:-30%;top:0;padding:1.875rem;height:100%;width:30%;min-width:28.125rem;max-width:37.5rem;overflow-y:auto;transition:right .3s ease-in-out;z-index:999999;background-color:var(--formBackground);box-shadow:-.25rem 0 1.25rem #0003;border-left:.0625rem solid var(--tableBorder)}.side-modal-container.side-modal-open{right:0}.side-modal-container .close{position:absolute;top:1rem;right:1rem;font-size:1.5rem;cursor:pointer;color:var(--tableText);transition:all .2s ease;z-index:10}.side-modal-container .close:hover{color:var(--primary);transform:scale(1.1)}::ng-deep .sideNavClosed .side-modal-container.side-modal-open{right:0}\n"] }]
+            args: [{ selector: 'lib-side-modal', standalone: false, template: "<div class=\"side-modal-container\" [ngClass]=\"{'side-modal-open': open}\">\n  @if (showClose) {\n    <div class=\"close icon-close\" (click)=\"close()\"></div>\n  }\n  <ng-content></ng-content>\n</div>\n\n", styles: [".side-modal-container{position:fixed;right:-42rem;top:0;padding:1.875rem;height:100%;width:30%;min-width:28.125rem;max-width:37.5rem;overflow-y:auto;transition:right .3s ease-in-out;z-index:999999;background-color:var(--formBackground);box-shadow:-.25rem 0 1.25rem #0003;border-left:.0625rem solid var(--tableBorder)}.side-modal-container.side-modal-open{right:0}.side-modal-container .close{position:absolute;top:1rem;right:1rem;font-size:1.5rem;cursor:pointer;color:var(--tableText);transition:all .2s ease;z-index:10}.side-modal-container .close:hover{color:var(--primary);transform:scale(1.1)}::ng-deep .sideNavClosed .side-modal-container.side-modal-open{right:0}\n"] }]
         }], ctorParameters: () => [{ type: ConsoleEventsService }], propDecorators: { showClose: [{
                 type: Input
             }], open: [{
@@ -13317,6 +15444,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
     See the License for the specific language governing permissions and
     limitations under the License.
 */
+/**
+ * Legacy Identities page (ag-grid `lib-data-table`). Selected by the route when the
+ * "Beta Features" flag is off. Slated for removal once the new list-table page (see
+ * {@link IdentitiesListPageComponent}) graduates — at which point this file and its
+ * template are deleted outright.
+ */
 class IdentitiesPageComponent extends ListPageComponent {
     constructor(svc, filterService, dialogForm, tabNames, router, consoleEvents, extService) {
         super(filterService, svc, consoleEvents, dialogForm, extService);
@@ -13513,6 +15646,229 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     args: [IDENTITY_EXTENSION_SERVICE]
                 }] }] });
 
+/*
+    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.
+*/
+/**
+ * New Identities page, rendered on the shared `lib-list-table`. Extends the common
+ * {@link ListPageComponent} (which future list-table pages extend the same way).
+ * Selected by the route when the "Beta Features" flag is on; the legacy ag-grid page
+ * ({@link IdentitiesPageComponent}) handles the flag-off case. The two pages carry
+ * their own copies of the identity actions during the migration so the legacy one can
+ * be deleted outright once this graduates.
+ */
+class IdentitiesListPageComponent extends ListPageComponent {
+    constructor(svc, filterService, dialogForm, tabNames, router, consoleEvents, extService) {
+        super(filterService, svc, consoleEvents, dialogForm, extService);
+        this.svc = svc;
+        this.tabNames = tabNames;
+        this.router = router;
+        this.extService = extService;
+        this.title = 'Identities';
+        this.isLoading = false;
+        this.formDataChanged = false;
+    }
+    /** The new table consumes the declarative ListColumn set. */
+    loadTableColumns() {
+        return this.svc.initListTableColumns();
+    }
+    ngOnInit() {
+        this.tabs = this.tabNames.getTabs('identities');
+        this.svc.refreshData = this.refreshData;
+        this.subscription.add(this.router.events.subscribe((event) => {
+            if (event instanceof NavigationEnd) {
+                this.refreshData();
+            }
+        }));
+        this.svc.getIdentityRoleAttributes();
+        super.ngOnInit();
+    }
+    headerActionClicked(action) {
+        switch (action) {
+            case 'add':
+                this.svc.openEditForm();
+                break;
+            case 'edit':
+                this.svc.openUpdate();
+                break;
+            case 'delete':
+                const selectedItems = this.rowData.filter((row) => {
+                    return row.selected;
+                });
+                const label = selectedItems.length > 1 ? 'identities' : 'identity';
+                this.openBulkDelete(selectedItems, label);
+                break;
+            default:
+        }
+    }
+    closeModal(event) {
+        this.svc.sideModalOpen = false;
+        if (event?.refresh) {
+            this.refreshData();
+            this.svc.getIdentityRoleAttributes();
+        }
+    }
+    dataChanged(event) {
+        this.formDataChanged = event;
+    }
+    tableAction(event) {
+        const extensionActionFound = this.handleExtensionActions(event);
+        this.trackMenuAction(event?.action, event?.item);
+        if (extensionActionFound) {
+            return;
+        }
+        switch (event?.action) {
+            case 'toggleAll':
+                this.itemToggled(event.item);
+                this.rowData.forEach((item) => {
+                    if (item.typeId === 'Router') {
+                        item.selected = false;
+                    }
+                });
+                break;
+            case 'toggleItem':
+                this.itemToggled(event.item);
+                break;
+            case 'update':
+                this.svc.openEditForm(event?.item?.id);
+                break;
+            case 'create':
+                this.svc.openEditForm();
+                break;
+            case 'override':
+                this.svc.openOverridesModal(event.item);
+                break;
+            case 'delete':
+                this.deleteItem(event.item);
+                break;
+            case 'download-enrollment':
+                this.downloadJWT(event.item);
+                break;
+            case 'reset-enrollment':
+                this.resetEnrollment(event.item);
+                break;
+            case 'reissue-enrollment':
+                this.reissueEnrollment(event.item);
+                break;
+            case "identity-service-path":
+                this.openIdentityVisualizer(event.item);
+                break;
+            case "qr-code":
+                this.showQRCode(event.item);
+                break;
+            case 'download-all':
+                this.downloadAllItems();
+                break;
+            case 'download-selected':
+                this.svc.downloadItems(this.selectedItems);
+                break;
+            case 'reset-mfa':
+                this.isLoading = true;
+                this.svc.resetMFA(event.item).finally(() => {
+                    this.isLoading = false;
+                    this.refreshData();
+                });
+                break;
+            default:
+                break;
+        }
+    }
+    downloadJWT(item) {
+        const jwt = this.svc.getJWT(item);
+        this.svc.downloadJWT(jwt, item.name);
+    }
+    showQRCode(item) {
+        const data = {
+            jwt: this.svc.getJWT(item),
+            expiration: this.svc.getEnrollmentExpiration(item),
+            qrCodeSize: 500,
+            identity: item,
+            qrOnly: true,
+        };
+        this.dialogRef = this.dialogForm.open(QrCodeComponent, {
+            data: data,
+            autoFocus: false,
+        });
+    }
+    trackMenuAction(action, item) {
+        this.extService?.consoleActionTriggered?.emit({
+            action,
+            page: 'identity',
+            item,
+            type: 'menu-action'
+        });
+    }
+    deleteItem(item) {
+        this.openBulkDelete([item], 'identity');
+    }
+    openIdentityVisualizer(identity) {
+        this.dialogRef = this.dialogForm.open(IdentityServicePathComponent, {
+            data: {
+                identity: identity,
+            },
+            autoFocus: false,
+        });
+    }
+    resetEnrollment(identity) {
+        this.dialogRef = this.dialogForm.open(ResetEnrollmentComponent, {
+            data: {
+                identity: identity,
+                type: 'reset',
+            },
+            autoFocus: false,
+        });
+        this.dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.refreshData(undefined, true);
+            }
+        });
+    }
+    reissueEnrollment(identity) {
+        this.dialogRef = this.dialogForm.open(ResetEnrollmentComponent, {
+            data: {
+                identity: identity,
+                type: 'reissue',
+            },
+            autoFocus: false,
+        });
+        this.dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.refreshData(undefined, true);
+            }
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    canDeactivate() {
+        if (this.formDataChanged && this.svc.sideModalOpen) {
+            return confirm('You have unsaved changes. Do you want to leave this page and discard your changes or stay on this page?');
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IdentitiesListPageComponent, deps: [{ token: IdentitiesPageService }, { token: DataTableFilterService }, { token: i5.MatDialog }, { token: TabNameService }, { token: i4.Router }, { token: ConsoleEventsService }, { token: IDENTITY_EXTENSION_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: IdentitiesListPageComponent, isStandalone: false, selector: "lib-identities-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-identities-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Manage identities across the network\"\n    createLabel=\"Create Identity\"\n    infoText=\"Identities are the clients, services, and routers enrolled in this network.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-identity\" aria-hidden=\"true\"></span>\n  </lib-list-table-header>\n  <ng-content select=\"[slot=list-page-subheader]\"></ng-content>\n  <lib-list-table class=\"lt-skin\" [tableId]=\"'identities'\"\n    [noItemsReadonly]=\"headerBlockCreate\"\n    [accessDenied]=\"headerBlockRead\"\n    [rowData]=\"rowData\"\n    [isLoading]=\"isLoading\"\n    [columns]=\"columnDefs\"\n    (actionRequested)=\"tableAction($event)\"\n    [startCount]=\"startCount\"\n    [endCount]=\"endCount\"\n    [totalCount]=\"totalCount\"\n    [filterApplied]=\"filterApplied\"\n    [menuItems]=\"svc.menuItems\"\n    [headerActions]=\"svc.tableHeaderActions\"\n    [noItemsImage]=\"'No_Clients'\"\n    (tableReady)=\"tableReady($event)\"\n    >\n  </lib-list-table>\n</div>\n<lib-side-modal [(open)]=\"svc.sideModalOpen\" [showClose]=\"false\">\n  @if (svc.modalType === 'overrides' && svc.sideModalOpen) {\n    <lib-overrides\n      [identity]=\"svc.selectedIdentity\"\n      (close)=\"closeModal($event)\"\n    ></lib-overrides>\n  }\n</lib-side-modal>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".ziti-page-container .action{line-height:3.75rem;top:1.5625rem;right:1.5625rem;z-index:999}.ziti-identities-container ::ng-deep .zac-wrapper-container{height:0rem;left:-62499.9375rem;position:fixed}.ziti-identities-container ::ng-deep .zac-wrapper-container .action{display:none}.ziti-ag-grid{height:100%;position:relative;width:100%}.ziti-ag-grid .ziti-ag-grid-table{height:100%;width:100%}.ziti-ag-grid .ziti-ag-grid-table .ag-root-wrapper{border-bottom-style:none}.ziti-ag-grid .ziti-ag-grid-table .ag-cell{align-items:center;display:flex}.system-policies-toggle,.hidden-results-container{position:relative;right:0;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;margin-top:.625rem;padding-left:1.25rem;border-radius:var(--inputBorderRadius);padding-bottom:0;padding-right:0;padding-top:0;flex-wrap:nowrap;flex:1 0 auto}.system-policies-toggle .toggle-text,.hidden-results-container .toggle-text{font-weight:600;font-size:.75rem}.system-policies-toggle .toggle-text a,.hidden-results-container .toggle-text a{cursor:pointer}.system-policies-toggle .toggle,.hidden-results-container .toggle{width:4.6875rem;margin-left:.625rem}.system-policies-toggle .toggle.on .switch,.hidden-results-container .toggle.on .switch{left:3.25rem}.system-policies-toggle .spinner,.hidden-results-container .spinner{display:inline-block;width:.625rem;height:.625rem;border-radius:50%;background:transparent;border-top:.125rem solid var(--tableText);border-right:.125rem solid var(--tableText);border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear;margin-left:.3125rem}.hidden-results-container.loading-results{opacity:.7}.nf-cell-vert-align,.ag-row .ag-cell{align-items:center;display:flex}.hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:.4375rem;min-height:1.875rem;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:.875rem}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:.125rem solid var(--background);border-radius:.75rem;cursor:pointer;color:var(----stroke);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:1.5625rem!important;margin-left:.625rem;margin-top:.3125rem;padding:.125rem .625rem .125rem .3125rem;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:.125rem solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial}::ng-deep .darkmode .ag-dnd-ghost-icon .ag-icon-eye-slash{color:#fff!important}.tMenu{transition-property:opacity;z-index:99999999999;height:fit-content}.tMenu.action-menu{position:fixed;width:10.9375rem}.tMenu .tActionRow{transition-property:opacity}.tMenu .tActionRow.has-icon{display:flex;flex-direction:row;align-items:center}.tMenu .tActionRow .v7Offline{background-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline{width:.875rem;height:.875rem;border-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline:hover{border-color:var(--placeholder)}.hidden-items-container{display:flex;flex-direction:row;width:100%;flex-wrap:nowrap;justify-content:space-between}.os-icon{width:1.4375rem;height:1.4375rem;background-size:1.4375rem 1.4375rem;display:inline-flex;margin-right:.5rem;margin-top:.3125rem;margin-bottom:.3125rem}::ng-deep .date-time-container{position:fixed}::ng-deep .date-time-container .p-calendar .p-inputtext{height:.0625rem;width:.0625rem;padding:0}::ng-deep .date-time-container .filter-button-container{height:3.125rem;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .date-time-container .filter-button-container .toggleButton{padding-left:.3125rem;padding-right:.3125rem;width:unset}::ng-deep .date-time-container .p-calendar{height:1.875rem}::ng-deep .date-time-container .p-calendar .p-inputtext{height:1.875rem;border-top-left-radius:1.25rem;border-bottom-left-radius:1.25rem;text-indent:.3125rem}::ng-deep .date-time-container .p-calendar .p-button-icon-only{border-top-right-radius:1.25rem;border-bottom-right-radius:1.25rem}#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:0;position:absolute;top:0;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 p-togglebutton .p-togglebutton.p-button{border-radius:var(--inputBorderRadius)!important;box-shadow:0 .3125rem 1.25rem #0000000d!important;margin-top:-.125rem!important}::ng-deep p-togglebutton .p-togglebutton.p-button:hover{filter:brightness(99%)!important;box-shadow:0 .3125rem 1.25rem #0000000d!important;transition:all .3s ease}::ng-deep p-togglebutton .p-togglebutton.p-button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(.0625rem)!important;transition:all .3s ease}#TimeSearch #TimeSelectButton{margin-top:.25rem!important}::ng-deep .p-calendar .p-inputtext{height:2.3125rem}::ng-deep .p-inputtext{border-radius:var(--inputBorderRadius)}.calendar{display:inline-block;padding-left:.3125rem;float:left;padding-right:.625rem;margin-top:-.125rem}::ng-deep .p-datepicker:not(.p-datepicker-inline){background:var(--table);border:0 none;box-shadow:#091e4226 0 1.25rem 2rem -.5rem;border-radius:.75rem}::ng-deep .p-button.p-button-text{background-color:transparent;color:var(--primaryColor);border-color:transparent}::ng-deep .p-button.p-button-text:enabled:hover{background:var(--primaryColorShadowLight);color:var(--primaryColor);border-color:transparent}::ng-deep .p-datepicker table td>span.p-highlight{color:var(--tableText);background:var(--primaryColorShadowLight)}::ng-deep .p-inputtext:enabled:hover{border-color:var(--primaryColor)}::ng-deep .p-datepicker{padding:.5rem;padding-bottom:0;background:var(--table);color:var(--tableText);border:.0625rem solid var(--inputBorder);border-radius:.1875rem}::ng-deep .p-inputtext:enabled:focus{outline:0 none;outline-offset:0;box-shadow:0 0 0 1 var(--primaryColorShadowLight);border-color:var(--primaryColor)}::ng-deep .p-inputtext{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:1rem;color:var(--tableText);background:var(--table);padding:.5rem;border:.0625rem solid var(--inputBorder);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--inputBorderRadius)}::ng-deep .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header{background:var(--table)}::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--tableText);background:var(--table);font-weight:600;margin:0;border-bottom:.0625rem solid var(--inputBorder);border-top-right-radius:.75rem;border-top-left-radius:.75rem}::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#e9ecef;color:var(--table)}::ng-deep .p-datepicker .p-timepicker{border-top:.0625rem solid var(--background);padding:.5rem}::ng-deep .p-togglebutton.p-button{background:var(--background);border:.0625rem solid var(--inputBorder);color:var(--tableText);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:1rem 0;border-top:.0625rem solid var(--inputBorder)}::ng-deep .p-button{color:#fff;background:var(--primaryColor);border:.0625rem solid var(--primaryColor);padding:.495rem 1rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:var(--inputBorderRadius)}::ng-deep .p-togglebutton.p-button.p-highlight{background:var(--primaryColor);border:.0625rem solid var(--primaryColor);color:var(--background)}::ng-deep .p-togglebutton.p-button.p-highlight:hover{background:var(--primaryColor);border:.0625rem solid var(--primaryColor);color:var(--background)}app-zac-wrapper{z-index:999999}\n"], dependencies: [{ kind: "component", type: ListTableHeaderComponent, selector: "lib-list-table-header", inputs: ["title", "subtitle", "createLabel", "infoText", "tabs", "showAdd", "blockCreate", "blockDelete"], outputs: ["actionClicked"] }, { kind: "component", type: ListTableComponent, selector: "lib-list-table", inputs: ["tableId", "columns", "rowData", "isLoading", "options", "startCount", "endCount", "totalCount", "filterApplied", "menuItems", "headerActions", "noItemsImage", "showNoItemsAdd", "noItemsReadonly", "accessDenied", "entityTypeName", "filterName", "filterColumn"], outputs: ["actionRequested", "tableReady"] }, { kind: "component", type: SideModalComponent, selector: "lib-side-modal", inputs: ["showClose", "open"], outputs: ["openChange"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: OverridesComponent, selector: "lib-overrides", inputs: ["identity"], outputs: ["close"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IdentitiesListPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-identities-list', standalone: false, template: "<div class=\"ziti-page-container ziti-identities-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Manage identities across the network\"\n    createLabel=\"Create Identity\"\n    infoText=\"Identities are the clients, services, and routers enrolled in this network.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-identity\" aria-hidden=\"true\"></span>\n  </lib-list-table-header>\n  <ng-content select=\"[slot=list-page-subheader]\"></ng-content>\n  <lib-list-table class=\"lt-skin\" [tableId]=\"'identities'\"\n    [noItemsReadonly]=\"headerBlockCreate\"\n    [accessDenied]=\"headerBlockRead\"\n    [rowData]=\"rowData\"\n    [isLoading]=\"isLoading\"\n    [columns]=\"columnDefs\"\n    (actionRequested)=\"tableAction($event)\"\n    [startCount]=\"startCount\"\n    [endCount]=\"endCount\"\n    [totalCount]=\"totalCount\"\n    [filterApplied]=\"filterApplied\"\n    [menuItems]=\"svc.menuItems\"\n    [headerActions]=\"svc.tableHeaderActions\"\n    [noItemsImage]=\"'No_Clients'\"\n    (tableReady)=\"tableReady($event)\"\n    >\n  </lib-list-table>\n</div>\n<lib-side-modal [(open)]=\"svc.sideModalOpen\" [showClose]=\"false\">\n  @if (svc.modalType === 'overrides' && svc.sideModalOpen) {\n    <lib-overrides\n      [identity]=\"svc.selectedIdentity\"\n      (close)=\"closeModal($event)\"\n    ></lib-overrides>\n  }\n</lib-side-modal>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".ziti-page-container .action{line-height:3.75rem;top:1.5625rem;right:1.5625rem;z-index:999}.ziti-identities-container ::ng-deep .zac-wrapper-container{height:0rem;left:-62499.9375rem;position:fixed}.ziti-identities-container ::ng-deep .zac-wrapper-container .action{display:none}.ziti-ag-grid{height:100%;position:relative;width:100%}.ziti-ag-grid .ziti-ag-grid-table{height:100%;width:100%}.ziti-ag-grid .ziti-ag-grid-table .ag-root-wrapper{border-bottom-style:none}.ziti-ag-grid .ziti-ag-grid-table .ag-cell{align-items:center;display:flex}.system-policies-toggle,.hidden-results-container{position:relative;right:0;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;margin-top:.625rem;padding-left:1.25rem;border-radius:var(--inputBorderRadius);padding-bottom:0;padding-right:0;padding-top:0;flex-wrap:nowrap;flex:1 0 auto}.system-policies-toggle .toggle-text,.hidden-results-container .toggle-text{font-weight:600;font-size:.75rem}.system-policies-toggle .toggle-text a,.hidden-results-container .toggle-text a{cursor:pointer}.system-policies-toggle .toggle,.hidden-results-container .toggle{width:4.6875rem;margin-left:.625rem}.system-policies-toggle .toggle.on .switch,.hidden-results-container .toggle.on .switch{left:3.25rem}.system-policies-toggle .spinner,.hidden-results-container .spinner{display:inline-block;width:.625rem;height:.625rem;border-radius:50%;background:transparent;border-top:.125rem solid var(--tableText);border-right:.125rem solid var(--tableText);border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear;margin-left:.3125rem}.hidden-results-container.loading-results{opacity:.7}.nf-cell-vert-align,.ag-row .ag-cell{align-items:center;display:flex}.hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:.4375rem;min-height:1.875rem;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:.875rem}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:.125rem solid var(--background);border-radius:.75rem;cursor:pointer;color:var(----stroke);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:1.5625rem!important;margin-left:.625rem;margin-top:.3125rem;padding:.125rem .625rem .125rem .3125rem;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:.125rem solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial}::ng-deep .darkmode .ag-dnd-ghost-icon .ag-icon-eye-slash{color:#fff!important}.tMenu{transition-property:opacity;z-index:99999999999;height:fit-content}.tMenu.action-menu{position:fixed;width:10.9375rem}.tMenu .tActionRow{transition-property:opacity}.tMenu .tActionRow.has-icon{display:flex;flex-direction:row;align-items:center}.tMenu .tActionRow .v7Offline{background-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline{width:.875rem;height:.875rem;border-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline:hover{border-color:var(--placeholder)}.hidden-items-container{display:flex;flex-direction:row;width:100%;flex-wrap:nowrap;justify-content:space-between}.os-icon{width:1.4375rem;height:1.4375rem;background-size:1.4375rem 1.4375rem;display:inline-flex;margin-right:.5rem;margin-top:.3125rem;margin-bottom:.3125rem}::ng-deep .date-time-container{position:fixed}::ng-deep .date-time-container .p-calendar .p-inputtext{height:.0625rem;width:.0625rem;padding:0}::ng-deep .date-time-container .filter-button-container{height:3.125rem;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .date-time-container .filter-button-container .toggleButton{padding-left:.3125rem;padding-right:.3125rem;width:unset}::ng-deep .date-time-container .p-calendar{height:1.875rem}::ng-deep .date-time-container .p-calendar .p-inputtext{height:1.875rem;border-top-left-radius:1.25rem;border-bottom-left-radius:1.25rem;text-indent:.3125rem}::ng-deep .date-time-container .p-calendar .p-button-icon-only{border-top-right-radius:1.25rem;border-bottom-right-radius:1.25rem}#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:0;position:absolute;top:0;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 p-togglebutton .p-togglebutton.p-button{border-radius:var(--inputBorderRadius)!important;box-shadow:0 .3125rem 1.25rem #0000000d!important;margin-top:-.125rem!important}::ng-deep p-togglebutton .p-togglebutton.p-button:hover{filter:brightness(99%)!important;box-shadow:0 .3125rem 1.25rem #0000000d!important;transition:all .3s ease}::ng-deep p-togglebutton .p-togglebutton.p-button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(.0625rem)!important;transition:all .3s ease}#TimeSearch #TimeSelectButton{margin-top:.25rem!important}::ng-deep .p-calendar .p-inputtext{height:2.3125rem}::ng-deep .p-inputtext{border-radius:var(--inputBorderRadius)}.calendar{display:inline-block;padding-left:.3125rem;float:left;padding-right:.625rem;margin-top:-.125rem}::ng-deep .p-datepicker:not(.p-datepicker-inline){background:var(--table);border:0 none;box-shadow:#091e4226 0 1.25rem 2rem -.5rem;border-radius:.75rem}::ng-deep .p-button.p-button-text{background-color:transparent;color:var(--primaryColor);border-color:transparent}::ng-deep .p-button.p-button-text:enabled:hover{background:var(--primaryColorShadowLight);color:var(--primaryColor);border-color:transparent}::ng-deep .p-datepicker table td>span.p-highlight{color:var(--tableText);background:var(--primaryColorShadowLight)}::ng-deep .p-inputtext:enabled:hover{border-color:var(--primaryColor)}::ng-deep .p-datepicker{padding:.5rem;padding-bottom:0;background:var(--table);color:var(--tableText);border:.0625rem solid var(--inputBorder);border-radius:.1875rem}::ng-deep .p-inputtext:enabled:focus{outline:0 none;outline-offset:0;box-shadow:0 0 0 1 var(--primaryColorShadowLight);border-color:var(--primaryColor)}::ng-deep .p-inputtext{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:1rem;color:var(--tableText);background:var(--table);padding:.5rem;border:.0625rem solid var(--inputBorder);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--inputBorderRadius)}::ng-deep .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header{background:var(--table)}::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--tableText);background:var(--table);font-weight:600;margin:0;border-bottom:.0625rem solid var(--inputBorder);border-top-right-radius:.75rem;border-top-left-radius:.75rem}::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#e9ecef;color:var(--table)}::ng-deep .p-datepicker .p-timepicker{border-top:.0625rem solid var(--background);padding:.5rem}::ng-deep .p-togglebutton.p-button{background:var(--background);border:.0625rem solid var(--inputBorder);color:var(--tableText);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:1rem 0;border-top:.0625rem solid var(--inputBorder)}::ng-deep .p-button{color:#fff;background:var(--primaryColor);border:.0625rem solid var(--primaryColor);padding:.495rem 1rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:var(--inputBorderRadius)}::ng-deep .p-togglebutton.p-button.p-highlight{background:var(--primaryColor);border:.0625rem solid var(--primaryColor);color:var(--background)}::ng-deep .p-togglebutton.p-button.p-highlight:hover{background:var(--primaryColor);border:.0625rem solid var(--primaryColor);color:var(--background)}app-zac-wrapper{z-index:999999}\n"] }]
+        }], ctorParameters: () => [{ type: IdentitiesPageService }, { type: DataTableFilterService }, { type: i5.MatDialog }, { type: TabNameService }, { type: i4.Router }, { type: ConsoleEventsService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [IDENTITY_EXTENSION_SERVICE]
+                }] }] });
+
 class EdgeRoutersPageComponent extends ListPageComponent {
     constructor(svc, filterService, dialogForm, tabNames, consoleEvents, extService) {
         super(filterService, svc, consoleEvents, dialogForm);
@@ -19888,13 +22244,16 @@ class EdgeRouterFormComponent extends ProjectableForm {
     get tunnelerEnabledReadOnly() {
         return this.config.isOpenZiti ? true : !this.isTunnelerDisabled();
     }
+    get isCustomerHosted() {
+        return this.extService.disabledComponents.some(item => item.key === 'customer-hosted');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: EdgeRouterFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: EDGE_ROUTER_EXTENSION_SERVICE }, { token: DEFAULT_APP_CONFIG }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: EdgeRouterFormComponent, isStandalone: false, selector: "lib-edge-router-form", inputs: { edgeRouterRoleAttributes: "edgeRouterRoleAttributes" }, outputs: { close: "close" }, providers: [
             {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (isCustomerHosted) {\n                <lib-form-field-container\n                  [title]=\"'LINK LISTENER'\"\n                  class=\"form-field-advanced\"\n                  >\n                  <div class=\"config-item disabled\">\n                    <div class=\"config-container toggle-container\">\n                      <div class=\"config-container-label\">ENABLE LINK LISTENER</div>\n                      <div\n                        [ngClass]=\"{ on: formData.linkListener, disabled: true }\"\n                        class=\"toggle\"\n                        role=\"switch\"\n                        aria-disabled=\"true\"\n                        [attr.aria-checked]=\"!!formData.linkListener\"\n                        matTooltip=\"This value is reported by the router and can't be changed here.\"\n                        matTooltipPosition=\"above\"\n                        >\n                        <span [hidden]=\"!formData.linkListener\" class=\"on-label\">YES</span>\n                        <span [hidden]=\"formData.linkListener\" class=\"off-label\">NO</span>\n                        <div class=\"switch\"></div>\n                      </div>\n                    </div>\n                  </div>\n                </lib-form-field-container>\n              }\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container-label.advertise-address-label{height:auto;padding:.125rem 0}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}.config-container.advertise-address-container{height:auto;min-height:var(--defaultInputHeight);padding:0rem 1.25rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{
             type: Component,
@@ -19903,7 +22262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"] }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (isCustomerHosted) {\n                <lib-form-field-container\n                  [title]=\"'LINK LISTENER'\"\n                  class=\"form-field-advanced\"\n                  >\n                  <div class=\"config-item disabled\">\n                    <div class=\"config-container toggle-container\">\n                      <div class=\"config-container-label\">ENABLE LINK LISTENER</div>\n                      <div\n                        [ngClass]=\"{ on: formData.linkListener, disabled: true }\"\n                        class=\"toggle\"\n                        role=\"switch\"\n                        aria-disabled=\"true\"\n                        [attr.aria-checked]=\"!!formData.linkListener\"\n                        matTooltip=\"This value is reported by the router and can't be changed here.\"\n                        matTooltipPosition=\"above\"\n                        >\n                        <span [hidden]=\"!formData.linkListener\" class=\"on-label\">YES</span>\n                        <span [hidden]=\"formData.linkListener\" class=\"off-label\">NO</span>\n                        <div class=\"switch\"></div>\n                      </div>\n                    </div>\n                  </div>\n                </lib-form-field-container>\n              }\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container-label.advertise-address-label{height:auto;padding:.125rem 0}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}.config-container.advertise-address-container{height:auto;min-height:var(--defaultInputHeight);padding:0rem 1.25rem}\n"] }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -26403,6 +28762,9 @@ class JwtSigner {
         this.targetToken = 'ACCESS';
         this.enrollToCertEnabled = false;
         this.enrollToTokenEnabled = false;
+        this.enrollAuthPolicyId = '';
+        this.enrollNameClaimsSelector = '';
+        this.enrollAttributeClaimsSelector = '';
     }
 }
 ;
@@ -26616,6 +28978,7 @@ class JwtSignerFormComponent extends ProjectableForm {
         this.configKey = 'oauth_test_callback_config';
         this.tokenTypeKey = 'oauth_test_callback_token_type';
         this.oidcVerified = false;
+        this.authPolicies = [];
         this.usePreviousLocation = false;
         this.entityType = 'external-jwt-signers';
         this.entityClass = JwtSigner;
@@ -26627,10 +28990,25 @@ class JwtSignerFormComponent extends ProjectableForm {
         this.settingsService.settingsChange.subscribe((results) => {
             this.settings = results;
         });
+        this.getAuthPolicies();
         if (window.location.href.indexOf('test-auth') > 0) {
             this.handleOAuthCallback();
         }
     }
+    getAuthPolicies() {
+        const paging = {
+            filter: "",
+            noSearch: true,
+            order: "asc",
+            page: 1,
+            searchOn: "name",
+            sort: "name",
+            total: 100
+        };
+        this.zitiService.get('auth-policies', paging, []).then((result) => {
+            this.authPolicies = [...result.data];
+        });
+    }
     ngAfterViewInit() {
         super.ngAfterViewInit(true);
     }
@@ -26796,6 +29174,18 @@ class JwtSignerFormComponent extends ProjectableForm {
         }
         this.formData.targetToken = val;
     }
+    get enrollAuthPolicyId() {
+        if (this.formData && isNil(this.formData.enrollAuthPolicyId)) {
+            this.formData.enrollAuthPolicyId = '';
+        }
+        return this.formData?.enrollAuthPolicyId;
+    }
+    set enrollAuthPolicyId(val) {
+        if (!this.formData) {
+            return;
+        }
+        this.formData.enrollAuthPolicyId = val;
+    }
     get apiCallURL() {
         return this.settings.selectedEdgeController + '/edge/management/v1/external-jwt-signers' + (this.formData.id ? `/${this.formData.id}` : '');
     }
@@ -26822,6 +29212,11 @@ class JwtSignerFormComponent extends ProjectableForm {
         if (!isEmpty(this.formData.targetToken) && this.showTokenType) {
             data.targetToken = this.formData.targetToken;
         }
+        if (this.showAutoEnrollment) {
+            data.enrollAuthPolicyId = this.formData.enrollAuthPolicyId || '';
+            data.enrollNameClaimsSelector = this.formData.enrollNameClaimsSelector || '';
+            data.enrollAttributeClaimsSelector = this.formData.enrollAttributeClaimsSelector || '';
+        }
         if (!isEmpty(this.formData.id)) {
             data.id = this.formData.id;
         }
@@ -27091,11 +29486,11 @@ class JwtSignerFormComponent extends ProjectableForm {
         return !this.errors.jwksEndpoint;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: JwtSignerFormComponent, deps: [{ token: JwtSignerFormService }, { token: SchemaService }, { token: GrowlerService }, { token: SHAREDZ_EXTENSION }, { token: SETTINGS_SERVICE }, { token: ZITI_DATA_SERVICE }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: ValidationService }, { token: AuthService }, { token: i1$6.OAuthService }, { token: i1$3.HttpClient }, { token: ZAC_LOGIN_SERVICE }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: JwtSignerFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }, { propertyName: "oidcVerification", first: true, predicate: ["oidcVerification"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container\n          [title]=\"'Name'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n         @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [layout]=\"'column'\"\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-header\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Issuer</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Audience</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The expected &quot;aud&quot; (audience) field on the JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-row\">\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Claims Property</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if &quot;Use External Id&quot; is set to true. Defaults to &quot;sub&quot;\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"If enabled, will match the &quot;claimsProperty&quot; to an identity's &quot;externalId&quot; field. If false, it will match to the identity's id field.\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Use External ID</div>\n                  </div>\n                  <div\n                    (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n                    [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Client ID</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The client id to use when authenticating to the IDP\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n              <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">External Auth Url</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Scopes</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <lib-chips-input\n              (keyup)=\"scopesOnKeyup($event)\"\n              [(ngModel)]=\"formData.scopes\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter scopes\"\n              [addOnBlur]=\"true\"\n              separator=\",\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </div>\n        </lib-form-field-container>\n        @if (showAutoEnrollment) {\n          <lib-form-field-container\n            [title]=\"'Auto Enrollment'\"\n            [helpText]=\"'Click for more information'\"\n            (helpClicked)=\"showAutoEnrollHelp()\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n                  <div\n                    (click)=\"toggleEnrollToCertEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToCertEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Token</div>\n                  <div\n                    (click)=\"toggleEnrollToTokenEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore && showTokenType) {\n          <lib-form-field-container\n            [title]=\"'Target Token Type'\"\n            [label]=\"'Required'\"\n            [helpText]=\"'The target token type. Can be either Access or ID'\"\n            class=\"form-field-advanced\"\n            >\n            <select\n              [(ngModel)]=\"targetToken\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"ACCESS\">Access</option>\n              <option value=\"ID\">ID</option>\n            </select>\n          </lib-form-field-container>\n        }\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          <lib-form-field-container\n            [title]=\"'Verify OIDC Authentication'\"\n            class=\"form-field-advanced\"\n            [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n            >\n            <div class=\"form-field-row\" #oidcVerification>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"form-field-title\">Callback URL</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <div class=\"copy-link-container\">\n                  <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n                  <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n                </div>\n              </div>\n              @if (!useStrictReadonlyForm) {\n              <div class=\"test-oauth-button\"\n                [ngClass]=\"{'oidc-verified': oidcVerified}\"\n                (click)=\"testOIDCAuthentication()\"\n                >\n                {{oidcVerified ? 'Verified' : 'Authenticate' }}\n                @if (oauthLoading) {\n                  <div class=\"spinner\"></div>\n                }\n                @if (oidcVerified) {\n                  <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n                }\n              </div>\n              }\n            </div>\n            @if (oidcErrorMessageDetail) {\n              <div class=\"oidc-error-message-container\">\n                <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n                <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n                @if (oidcErrorMessageDetail2) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n                }\n                @if (oidcErrorMessageDetail3) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n                }\n              </div>\n            }\n            @if (oidcAuthTokenClaims) {\n              <div class=\"oidc-token-claims-container\">\n                <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n                <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </div>\n            }\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Verification'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          <div\n            class=\"radio-group-container\"\n            [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n            (keydown)=\"radioKeyDownHandler($event)\"\n            [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n            >\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">JWKS Endpoint</span>\n            </div>\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">Cert PEM</span>\n            </div>\n          </div>\n          @if (signatureMethod === 'JWKS_ENDPOINT') {\n            <div class=\"form-field-input-group\">\n              <div class=\"form-field-label-container select-file-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">JWKS Endpoint</span>\n                  </div>\n                </div>\n                <input\n                  class=\"form-field-input\"\n                  placeholder=\"Enter endpoint URL\"\n                  [(ngModel)]=\"formData.jwksEndpoint\"\n                  [ngClass]=\"{error: errors['jwksEndpoint']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n              </div>\n            </div>\n          }\n          @if (signatureMethod === 'CERT_PEM') {\n            <div class=\"form-field-input-group\">\n              <div class=\"form-field-label-container select-file-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">PEM</span>\n                  </div>\n                  <span\n                    class=\"select-file-button\"\n                    [class.toggle-readonly]=\"useStrictReadonlyForm\"\n                    (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n                    >\n                    Select File\n                    @if (fileSelectOpening) {\n                      <div class=\"spinner\"></div>\n                    }\n                  </span>\n                  <input\n                    #fileSelect\n                    type=\"file\"\n                    style=\"display:none\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                    (change)=\"selectPemFile($event)\"\n                    >\n                </div>\n                <textarea\n                  placeholder=\"Paste pem contents or select file\"\n                  [(ngModel)]=\"formData.certPem\"\n                  [ngClass]=\"{error: errors['certPem']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  ></textarea>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">KID</span>\n                  </div>\n                  <span class=\"form-field-label\" >Optional</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n              </div>\n            </div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"config-container-label\">ENABLED</div>\n              <div\n                (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n                [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            [class]=\"'api-data-no-wrap'\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n              <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n  <div class=\"help-panel-content\">\n    <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n    <p class=\"help-panel-intro\">\n      Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n    </p>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-certificate\"></span>\n        Auto-Enroll to Cert\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-key\"></span>\n        Auto-Enroll to Token\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-note\">\n      <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n    </div>\n  </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite_ALWAYS);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: SideModalComponent, selector: "lib-side-modal", inputs: ["showClose", "open"], outputs: ["openChange"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: JwtSignerFormComponent, isStandalone: false, selector: "lib-configuration", inputs: { errors: "errors" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["fileSelect"], descendants: true }, { propertyName: "oidcVerification", first: true, predicate: ["oidcVerification"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container\n          [title]=\"'Name'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n         @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [layout]=\"'column'\"\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-header\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Issuer</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Audience</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The expected &quot;aud&quot; (audience) field on the JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-row\">\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Claims Property</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if &quot;Use External Id&quot; is set to true. Defaults to &quot;sub&quot;\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"If enabled, will match the &quot;claimsProperty&quot; to an identity's &quot;externalId&quot; field. If false, it will match to the identity's id field.\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Use External ID</div>\n                  </div>\n                  <div\n                    (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n                    [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Client ID</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The client id to use when authenticating to the IDP\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n              <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">External Auth Url</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Scopes</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <lib-chips-input\n              (keyup)=\"scopesOnKeyup($event)\"\n              [(ngModel)]=\"formData.scopes\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter scopes\"\n              [addOnBlur]=\"true\"\n              separator=\",\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </div>\n        </lib-form-field-container>\n        @if (showAutoEnrollment) {\n          <lib-form-field-container\n            [title]=\"'Auto Enrollment'\"\n            [helpText]=\"'Click for more information'\"\n            (helpClicked)=\"showAutoEnrollHelp()\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n                  <div\n                    (click)=\"toggleEnrollToCertEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToCertEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Token</div>\n                  <div\n                    (click)=\"toggleEnrollToTokenEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore && showTokenType) {\n          <lib-form-field-container\n            [title]=\"'Target Token Type'\"\n            [label]=\"'Required'\"\n            [helpText]=\"'The target token type. Can be either Access or ID'\"\n            class=\"form-field-advanced\"\n            >\n            <select\n              [(ngModel)]=\"targetToken\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"ACCESS\">Access</option>\n              <option value=\"ID\">ID</option>\n            </select>\n          </lib-form-field-container>\n        }\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          @if (showAutoEnrollment) {\n            <lib-form-field-container\n              [title]=\"'Auto Enrollment Options'\"\n              class=\"form-field-advanced\"\n              >\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Enrollment Auth Policy</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"The authentication policy assigned to identities created through auto-enrollment. Defaults to the &quot;default&quot; policy.\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <select\n                  [(ngModel)]=\"enrollAuthPolicyId\"\n                  class=\"form-field-dropdown\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  >\n                  <option value=\"\">Select an Authentication Policy</option>\n                  @for (policy of authPolicies; track policy.id) {\n                    <option [value]=\"policy.id\">{{ policy.name }}</option>\n                  }\n                </select>\n              </div>\n              <div class=\"form-field-row\">\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Name Claims Selector</span>\n                    <div\n                      class=\"form-field-info infoicon\"\n                      matTooltip=\"The claims JSON pointer selector or top level property used for the name of enrolling identities. Defaults to /sub\"\n                      matTooltipPosition=\"below\"\n                    ></div>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"Enter name claims selector\" [(ngModel)]=\"formData.enrollNameClaimsSelector\" [disabled]=\"useStrictReadonlyForm\" />\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Attribute Claims Selector</span>\n                    <div\n                      class=\"form-field-info infoicon\"\n                      matTooltip=\"The claims JSON pointer selector or top level property used for the attributes of enrolling identities.\"\n                      matTooltipPosition=\"below\"\n                    ></div>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"Enter attribute claims selector\" [(ngModel)]=\"formData.enrollAttributeClaimsSelector\" [disabled]=\"useStrictReadonlyForm\" />\n                </div>\n              </div>\n            </lib-form-field-container>\n          }\n          <lib-form-field-container\n            [title]=\"'Verify OIDC Authentication'\"\n            class=\"form-field-advanced\"\n            [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n            >\n            <div class=\"form-field-row\" #oidcVerification>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"form-field-title\">Callback URL</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <div class=\"copy-link-container\">\n                  <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n                  <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n                </div>\n              </div>\n              @if (!useStrictReadonlyForm) {\n              <div class=\"test-oauth-button\"\n                [ngClass]=\"{'oidc-verified': oidcVerified}\"\n                (click)=\"testOIDCAuthentication()\"\n                >\n                {{oidcVerified ? 'Verified' : 'Authenticate' }}\n                @if (oauthLoading) {\n                  <div class=\"spinner\"></div>\n                }\n                @if (oidcVerified) {\n                  <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n                }\n              </div>\n              }\n            </div>\n            @if (oidcErrorMessageDetail) {\n              <div class=\"oidc-error-message-container\">\n                <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n                <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n                @if (oidcErrorMessageDetail2) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n                }\n                @if (oidcErrorMessageDetail3) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n                }\n              </div>\n            }\n            @if (oidcAuthTokenClaims) {\n              <div class=\"oidc-token-claims-container\">\n                <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n                <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </div>\n            }\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Verification'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          <div\n            class=\"radio-group-container\"\n            [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n            (keydown)=\"radioKeyDownHandler($event)\"\n            [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n            >\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">JWKS Endpoint</span>\n            </div>\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">Cert PEM</span>\n            </div>\n          </div>\n          @if (signatureMethod === 'JWKS_ENDPOINT') {\n            <div class=\"form-field-input-group\">\n              <div class=\"form-field-label-container select-file-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">JWKS Endpoint</span>\n                  </div>\n                </div>\n                <input\n                  class=\"form-field-input\"\n                  placeholder=\"Enter endpoint URL\"\n                  [(ngModel)]=\"formData.jwksEndpoint\"\n                  [ngClass]=\"{error: errors['jwksEndpoint']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n              </div>\n            </div>\n          }\n          @if (signatureMethod === 'CERT_PEM') {\n            <div class=\"form-field-input-group\">\n              <div class=\"form-field-label-container select-file-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">PEM</span>\n                  </div>\n                  <span\n                    class=\"select-file-button\"\n                    [class.toggle-readonly]=\"useStrictReadonlyForm\"\n                    (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n                    >\n                    Select File\n                    @if (fileSelectOpening) {\n                      <div class=\"spinner\"></div>\n                    }\n                  </span>\n                  <input\n                    #fileSelect\n                    type=\"file\"\n                    style=\"display:none\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                    (change)=\"selectPemFile($event)\"\n                    >\n                </div>\n                <textarea\n                  placeholder=\"Paste pem contents or select file\"\n                  [(ngModel)]=\"formData.certPem\"\n                  [ngClass]=\"{error: errors['certPem']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  ></textarea>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">KID</span>\n                  </div>\n                  <span class=\"form-field-label\" >Optional</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n              </div>\n            </div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"config-container-label\">ENABLED</div>\n              <div\n                (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n                [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            [class]=\"'api-data-no-wrap'\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n              <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n  <div class=\"help-panel-content\">\n    <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n    <p class=\"help-panel-intro\">\n      Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n    </p>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-certificate\"></span>\n        Auto-Enroll to Cert\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-key\"></span>\n        Auto-Enroll to Token\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-lock\"></span>\n        Enrollment Auth Policy\n      </h3>\n      <p class=\"help-panel-text\">\n        The authentication policy assigned to identities that are created through auto-enrollment. When left unset, the controller's \"default\" authentication policy is used.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-identity\"></span>\n        Name Claims Selector\n      </h3>\n      <p class=\"help-panel-text\">\n        A JSON pointer selector (or top-level claim property) identifying which JWT claim supplies the name for enrolling identities. Defaults to <code>/sub</code> when unset.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-identity\"></span>\n        Attribute Claims Selector\n      </h3>\n      <p class=\"help-panel-text\">\n        A JSON pointer selector (or top-level claim property) identifying which JWT claim supplies the role attributes for enrolling identities.\n      </p>\n    </div>\n\n    <div class=\"help-panel-note\">\n      <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n    </div>\n  </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite_ALWAYS);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsInputComponent, selector: "lib-chips-input", inputs: ["placeholder", "inputId", "addOnBlur", "allowDuplicate", "separator", "invalid"], outputs: ["onAdd", "onRemove", "onModelChange", "onBlur", "keyup"] }, { kind: "component", type: SideModalComponent, selector: "lib-side-modal", inputs: ["showClose", "open"], outputs: ["openChange"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: JwtSignerFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container\n          [title]=\"'Name'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n         @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [layout]=\"'column'\"\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-header\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Issuer</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Audience</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The expected &quot;aud&quot; (audience) field on the JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-row\">\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Claims Property</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if &quot;Use External Id&quot; is set to true. Defaults to &quot;sub&quot;\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"If enabled, will match the &quot;claimsProperty&quot; to an identity's &quot;externalId&quot; field. If false, it will match to the identity's id field.\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Use External ID</div>\n                  </div>\n                  <div\n                    (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n                    [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Client ID</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The client id to use when authenticating to the IDP\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n              <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">External Auth Url</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Scopes</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <lib-chips-input\n              (keyup)=\"scopesOnKeyup($event)\"\n              [(ngModel)]=\"formData.scopes\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter scopes\"\n              [addOnBlur]=\"true\"\n              separator=\",\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </div>\n        </lib-form-field-container>\n        @if (showAutoEnrollment) {\n          <lib-form-field-container\n            [title]=\"'Auto Enrollment'\"\n            [helpText]=\"'Click for more information'\"\n            (helpClicked)=\"showAutoEnrollHelp()\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n                  <div\n                    (click)=\"toggleEnrollToCertEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToCertEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Token</div>\n                  <div\n                    (click)=\"toggleEnrollToTokenEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore && showTokenType) {\n          <lib-form-field-container\n            [title]=\"'Target Token Type'\"\n            [label]=\"'Required'\"\n            [helpText]=\"'The target token type. Can be either Access or ID'\"\n            class=\"form-field-advanced\"\n            >\n            <select\n              [(ngModel)]=\"targetToken\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"ACCESS\">Access</option>\n              <option value=\"ID\">ID</option>\n            </select>\n          </lib-form-field-container>\n        }\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          <lib-form-field-container\n            [title]=\"'Verify OIDC Authentication'\"\n            class=\"form-field-advanced\"\n            [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n            >\n            <div class=\"form-field-row\" #oidcVerification>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"form-field-title\">Callback URL</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <div class=\"copy-link-container\">\n                  <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n                  <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n                </div>\n              </div>\n              @if (!useStrictReadonlyForm) {\n              <div class=\"test-oauth-button\"\n                [ngClass]=\"{'oidc-verified': oidcVerified}\"\n                (click)=\"testOIDCAuthentication()\"\n                >\n                {{oidcVerified ? 'Verified' : 'Authenticate' }}\n                @if (oauthLoading) {\n                  <div class=\"spinner\"></div>\n                }\n                @if (oidcVerified) {\n                  <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n                }\n              </div>\n              }\n            </div>\n            @if (oidcErrorMessageDetail) {\n              <div class=\"oidc-error-message-container\">\n                <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n                <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n                @if (oidcErrorMessageDetail2) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n                }\n                @if (oidcErrorMessageDetail3) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n                }\n              </div>\n            }\n            @if (oidcAuthTokenClaims) {\n              <div class=\"oidc-token-claims-container\">\n                <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n                <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </div>\n            }\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Verification'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          <div\n            class=\"radio-group-container\"\n            [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n            (keydown)=\"radioKeyDownHandler($event)\"\n            [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n            >\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">JWKS Endpoint</span>\n            </div>\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">Cert PEM</span>\n            </div>\n          </div>\n          @if (signatureMethod === 'JWKS_ENDPOINT') {\n            <div class=\"form-field-input-group\">\n              <div class=\"form-field-label-container select-file-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">JWKS Endpoint</span>\n                  </div>\n                </div>\n                <input\n                  class=\"form-field-input\"\n                  placeholder=\"Enter endpoint URL\"\n                  [(ngModel)]=\"formData.jwksEndpoint\"\n                  [ngClass]=\"{error: errors['jwksEndpoint']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n              </div>\n            </div>\n          }\n          @if (signatureMethod === 'CERT_PEM') {\n            <div class=\"form-field-input-group\">\n              <div class=\"form-field-label-container select-file-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">PEM</span>\n                  </div>\n                  <span\n                    class=\"select-file-button\"\n                    [class.toggle-readonly]=\"useStrictReadonlyForm\"\n                    (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n                    >\n                    Select File\n                    @if (fileSelectOpening) {\n                      <div class=\"spinner\"></div>\n                    }\n                  </span>\n                  <input\n                    #fileSelect\n                    type=\"file\"\n                    style=\"display:none\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                    (change)=\"selectPemFile($event)\"\n                    >\n                </div>\n                <textarea\n                  placeholder=\"Paste pem contents or select file\"\n                  [(ngModel)]=\"formData.certPem\"\n                  [ngClass]=\"{error: errors['certPem']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  ></textarea>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">KID</span>\n                  </div>\n                  <span class=\"form-field-label\" >Optional</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n              </div>\n            </div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"config-container-label\">ENABLED</div>\n              <div\n                (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n                [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            [class]=\"'api-data-no-wrap'\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n              <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n  <div class=\"help-panel-content\">\n    <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n    <p class=\"help-panel-intro\">\n      Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n    </p>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-certificate\"></span>\n        Auto-Enroll to Cert\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-key\"></span>\n        Auto-Enroll to Token\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-note\">\n      <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n    </div>\n  </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite_ALWAYS);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"] }]
+            args: [{ selector: 'lib-configuration', standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  tabindex=\"0\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"(formData.id ? 'JWT Signer Details' : 'Create JWT Signer')\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [saveDisabled]=\"svc.saveDisabled || formDataInvalid || formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <div class=\"jwt-signer-form-container projectable-form-container\" #scrollContainer>\n    <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n      <div class=\"form-group-column three-fifths\">\n        <lib-form-field-container\n          [title]=\"'Name'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n         @if (!useStrictReadonlyForm) {\n            <input class=\"form-field-input\" [(ngModel)]=\"formData.name\" [ngClass]=\"{error: errors['name']}\" placeholder=\"Name this JWT Signer\" #nameFieldInput/>\n          } @else {\n            <div class=\"form-field-readonly-value\">{{ formData.name }}</div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [layout]=\"'column'\"\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-header\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Issuer</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The &quot;issuer&quot; field on the JWT Signer must match the &quot;iss&quot; field on the JWT\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <span class=\"form-field-label\" >{{ useStrictReadonlyForm ? '' : 'REQUIRED' }}</span>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter issuer\" [(ngModel)]=\"formData.issuer\" [ngClass]=\"{error: errors['issuer']}\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Audience</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The expected &quot;aud&quot; (audience) field on the JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter audience\" [(ngModel)]=\"formData.audience\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-row\">\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-title-container\">\n                <span class=\"form-field-title\">Claims Property</span>\n                <div\n                  class=\"form-field-info infoicon\"\n                  matTooltip=\"The field on the JWT for mapping to an identity. Matches the identity's id or externalId if &quot;Use External Id&quot; is set to true. Defaults to &quot;sub&quot;\"\n                  matTooltipPosition=\"below\"\n                ></div>\n              </div>\n              <input class=\"form-field-input\" placeholder=\"Enter claims property\" [(ngModel)]=\"formData.claimsProperty\" (keyup)=\"checkExternalIdToggle()\" [ngClass]=\"{error: errors['claimsProperty']}\" [disabled]=\"useStrictReadonlyForm\" />\n            </div>\n            <div class=\"form-field-label-container\">\n              <div class=\"form-field-header\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"config-container-label\" style=\"font-weight: 600; font-size: 14px;\">External ID</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"If enabled, will match the &quot;claimsProperty&quot; to an identity's &quot;externalId&quot; field. If false, it will match to the identity's id field.\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"form-field-title-container\">\n                    <div class=\"config-container-label\">Use External ID</div>\n                  </div>\n                  <div\n                    (click)=\"!useStrictReadonlyForm && toggleUseExternalId()\"\n                    [ngClass]=\"{ on: formData.useExternalId, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.useExternalId\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.useExternalId\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Client ID</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The client id to use when authenticating to the IDP\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n              <input class=\"form-field-input\" placeholder=\"Enter client ID\" [(ngModel)]=\"formData.clientId\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">External Auth Url</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"The URL that users are directed to, to obtain a JWT\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <input class=\"form-field-input\" placeholder=\"Enter external auth URL\" [(ngModel)]=\"formData.externalAuthUrl\" [disabled]=\"useStrictReadonlyForm\" />\n          </div>\n          <div class=\"form-field-label-container\">\n            <div class=\"form-field-title-container\">\n              <span class=\"form-field-title\">Scopes</span>\n              <div\n                class=\"form-field-info infoicon\"\n                matTooltip=\"Enter as a comma or space seperated list of claims/permissions\"\n                matTooltipPosition=\"below\"\n              ></div>\n            </div>\n            <lib-chips-input\n              (keyup)=\"scopesOnKeyup($event)\"\n              [(ngModel)]=\"formData.scopes\"\n              [allowDuplicate]=\"false\"\n              placeholder=\"Enter scopes\"\n              [addOnBlur]=\"true\"\n              separator=\",\"\n              [disabled]=\"useStrictReadonlyForm\"\n            ></lib-chips-input>\n          </div>\n        </lib-form-field-container>\n        @if (showAutoEnrollment) {\n          <lib-form-field-container\n            [title]=\"'Auto Enrollment'\"\n            [helpText]=\"'Click for more information'\"\n            (helpClicked)=\"showAutoEnrollHelp()\"\n            >\n            <div class=\"form-field-row\">\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Cert</div>\n                  <div\n                    (click)=\"toggleEnrollToCertEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToCertEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToCertEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToCertEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"config-item\">\n                <div class=\"config-container toggle-container\">\n                  <div class=\"config-container-label\">Auto-Enroll to Token</div>\n                  <div\n                    (click)=\"toggleEnrollToTokenEnabled()\"\n                    [ngClass]=\"{ on: formData.enrollToTokenEnabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                    class=\"toggle\"\n                    >\n                    <span [hidden]=\"!formData.enrollToTokenEnabled\" class=\"on-label\">YES</span>\n                    <span [hidden]=\"formData.enrollToTokenEnabled\" class=\"off-label\">NO</span>\n                    <div class=\"switch\"></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </lib-form-field-container>\n        }\n        <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n        @if (showMore && showTokenType) {\n          <lib-form-field-container\n            [title]=\"'Target Token Type'\"\n            [label]=\"'Required'\"\n            [helpText]=\"'The target token type. Can be either Access or ID'\"\n            class=\"form-field-advanced\"\n            >\n            <select\n              [(ngModel)]=\"targetToken\"\n              id=\"authPolicyId\"\n              class=\"form-field-dropdown\"\n              [disabled]=\"useStrictReadonlyForm\"\n              >\n              <option value=\"ACCESS\">Access</option>\n              <option value=\"ID\">ID</option>\n            </select>\n          </lib-form-field-container>\n        }\n        <div [hidden]=\"!showMore\" class=\"form-group-column\">\n          @if (showAutoEnrollment) {\n            <lib-form-field-container\n              [title]=\"'Auto Enrollment Options'\"\n              class=\"form-field-advanced\"\n              >\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <span class=\"form-field-title\">Enrollment Auth Policy</span>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"The authentication policy assigned to identities created through auto-enrollment. Defaults to the &quot;default&quot; policy.\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <select\n                  [(ngModel)]=\"enrollAuthPolicyId\"\n                  class=\"form-field-dropdown\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  >\n                  <option value=\"\">Select an Authentication Policy</option>\n                  @for (policy of authPolicies; track policy.id) {\n                    <option [value]=\"policy.id\">{{ policy.name }}</option>\n                  }\n                </select>\n              </div>\n              <div class=\"form-field-row\">\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Name Claims Selector</span>\n                    <div\n                      class=\"form-field-info infoicon\"\n                      matTooltip=\"The claims JSON pointer selector or top level property used for the name of enrolling identities. Defaults to /sub\"\n                      matTooltipPosition=\"below\"\n                    ></div>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"Enter name claims selector\" [(ngModel)]=\"formData.enrollNameClaimsSelector\" [disabled]=\"useStrictReadonlyForm\" />\n                </div>\n                <div class=\"form-field-label-container\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">Attribute Claims Selector</span>\n                    <div\n                      class=\"form-field-info infoicon\"\n                      matTooltip=\"The claims JSON pointer selector or top level property used for the attributes of enrolling identities.\"\n                      matTooltipPosition=\"below\"\n                    ></div>\n                  </div>\n                  <input class=\"form-field-input\" placeholder=\"Enter attribute claims selector\" [(ngModel)]=\"formData.enrollAttributeClaimsSelector\" [disabled]=\"useStrictReadonlyForm\" />\n                </div>\n              </div>\n            </lib-form-field-container>\n          }\n          <lib-form-field-container\n            [title]=\"'Verify OIDC Authentication'\"\n            class=\"form-field-advanced\"\n            [ngClass]=\"{'formFieldError': !oidcVerified && oidcErrorMessageDetail, 'formFieldSuccess': oidcVerified}\"\n            >\n            <div class=\"form-field-row\" #oidcVerification>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-title-container\">\n                  <div class=\"form-field-title\">Callback URL</div>\n                  <div\n                    class=\"form-field-info infoicon\"\n                    matTooltip=\"This URL must be added to the list of allowed callback URLs in your OAuth provider configuration\"\n                    matTooltipPosition=\"below\"\n                  ></div>\n                </div>\n                <div class=\"copy-link-container\">\n                  <pre class=\"read-only-2\" (click)=\"copyCallbackURL()\">{{ callbackURL }}</pre>\n                  <div class=\"copy-button\" (click)=\"copyCallbackURL()\"></div>\n                </div>\n              </div>\n              @if (!useStrictReadonlyForm) {\n              <div class=\"test-oauth-button\"\n                [ngClass]=\"{'oidc-verified': oidcVerified}\"\n                (click)=\"testOIDCAuthentication()\"\n                >\n                {{oidcVerified ? 'Verified' : 'Authenticate' }}\n                @if (oauthLoading) {\n                  <div class=\"spinner\"></div>\n                }\n                @if (oidcVerified) {\n                  <input type=\"checkbox\" [disabled]=\"true\" [checked]=\"true\" class=\"success-check\">\n                }\n              </div>\n              }\n            </div>\n            @if (oidcErrorMessageDetail) {\n              <div class=\"oidc-error-message-container\">\n                <code class=\"oidc-error-message-source\">{{oidcErrorMessageSource}}: </code>\n                <code class=\"oidc-error-message-detail\">{{oidcErrorMessageDetail}}</code>\n                @if (oidcErrorMessageDetail2) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail2}}</code>\n                }\n                @if (oidcErrorMessageDetail3) {\n                  <code class=\"oidc-error-message-detail2\">{{oidcErrorMessageDetail3}}</code>\n                }\n              </div>\n            }\n            @if (oidcAuthTokenClaims) {\n              <div class=\"oidc-token-claims-container\">\n                <code class=\"oidc-token-claims-title\">OAuth Token Claims: </code>\n                <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"oidcAuthTokenClaims\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </div>\n            }\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Custom Tags'\"\n            [label]=\"'OPTIONAL'\"\n            class=\"form-field-advanced\"\n            >\n            <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n          </lib-form-field-container>\n        </div>\n      </div>\n      <div class=\"form-group-column two-fifths\">\n        <lib-form-field-container\n          [title]=\"'Verification'\"\n          [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\"\n          >\n          <div\n            class=\"radio-group-container\"\n            [class.radio-group-readonly]=\"useStrictReadonlyForm\"\n            (keydown)=\"radioKeyDownHandler($event)\"\n            [attr.tabindex]=\"useStrictReadonlyForm ? -1 : 0\"\n            >\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'JWKS_ENDPOINT', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('JWKS_ENDPOINT')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">JWKS Endpoint</span>\n            </div>\n            <div\n              class=\"radio-button-container\"\n              [ngClass]=\"{'selected': signatureMethod === 'CERT_PEM', 'toggle-readonly': useStrictReadonlyForm}\"\n              (click)=\"!useStrictReadonlyForm && selectSignatureMethod('CERT_PEM')\"\n              >\n              <div class=\"radio-button-circle\">\n                <div class=\"radio-button-inner-circle\"></div>\n              </div>\n              <span class=\"radio-button-label\">Cert PEM</span>\n            </div>\n          </div>\n          @if (signatureMethod === 'JWKS_ENDPOINT') {\n            <div class=\"form-field-input-group\">\n              <div class=\"form-field-label-container select-file-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">JWKS Endpoint</span>\n                  </div>\n                </div>\n                <input\n                  class=\"form-field-input\"\n                  placeholder=\"Enter endpoint URL\"\n                  [(ngModel)]=\"formData.jwksEndpoint\"\n                  [ngClass]=\"{error: errors['jwksEndpoint']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  />\n              </div>\n            </div>\n          }\n          @if (signatureMethod === 'CERT_PEM') {\n            <div class=\"form-field-input-group\">\n              <div class=\"form-field-label-container select-file-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">PEM</span>\n                  </div>\n                  <span\n                    class=\"select-file-button\"\n                    [class.toggle-readonly]=\"useStrictReadonlyForm\"\n                    (click)=\"!useStrictReadonlyForm && openFileSelect($event)\"\n                    >\n                    Select File\n                    @if (fileSelectOpening) {\n                      <div class=\"spinner\"></div>\n                    }\n                  </span>\n                  <input\n                    #fileSelect\n                    type=\"file\"\n                    style=\"display:none\"\n                    [disabled]=\"useStrictReadonlyForm\"\n                    (change)=\"selectPemFile($event)\"\n                    >\n                </div>\n                <textarea\n                  placeholder=\"Paste pem contents or select file\"\n                  [(ngModel)]=\"formData.certPem\"\n                  [ngClass]=\"{error: errors['certPem']}\"\n                  [disabled]=\"useStrictReadonlyForm\"\n                  ></textarea>\n              </div>\n              <div class=\"form-field-label-container\">\n                <div class=\"form-field-header\">\n                  <div class=\"form-field-title-container\">\n                    <span class=\"form-field-title\">KID</span>\n                  </div>\n                  <span class=\"form-field-label\" >Optional</span>\n                </div>\n                <input class=\"form-field-input\" placeholder=\"Enter KID\" [(ngModel)]=\"formData.kid\" [disabled]=\"useStrictReadonlyForm\"/>\n              </div>\n            </div>\n          }\n        </lib-form-field-container>\n        <lib-form-field-container\n          [showHeader]=\"false\"\n          >\n          <div class=\"config-item\">\n            <div class=\"config-container toggle-container\">\n              <div class=\"config-container-label\">ENABLED</div>\n              <div\n                (click)=\"!useStrictReadonlyForm && toggleEnabled()\"\n                [ngClass]=\"{ on: formData.enabled, 'toggle-readonly': useStrictReadonlyForm }\"\n                class=\"toggle\"\n                >\n                <span [hidden]=\"!formData.enabled\" class=\"on-label\">YES</span>\n                <span [hidden]=\"formData.enabled\" class=\"off-label\">NO</span>\n                <div class=\"switch\"></div>\n              </div>\n            </div>\n          </div>\n        </lib-form-field-container>\n        @if (showApiCalls) {\n          <lib-form-field-container\n            [title]=\"'API Calls'\"\n            [headerActions]=\"apiOptions\"\n            (actionRequested)=\"apiActionRequested($event)\"\n            [class]=\"'api-data-no-wrap'\"\n            >\n            <div class=\"form-row\">\n              <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n              <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n            </div>\n            @if (formData) {\n              <lib-json-view [showLineNumbers]=\"false\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n            }\n          </lib-form-field-container>\n        }\n      </div>\n    </div>\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n<lib-side-modal [(open)]=\"showAutoEnrollHelpModal\" [showClose]=\"true\">\n  <div class=\"help-panel-content\">\n    <h2 class=\"help-panel-title\">What is Auto Enrollment?</h2>\n    <p class=\"help-panel-intro\">\n      Auto Enrollment enables automatic identity creation when users authenticate via JWT tokens.\n    </p>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-certificate\"></span>\n        Auto-Enroll to Cert\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with a certificate when a user authenticates using a JWT token. This is useful for certificate-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-key\"></span>\n        Auto-Enroll to Token\n      </h3>\n      <p class=\"help-panel-text\">\n        When enabled, the controller will automatically create an identity and enroll it with an authentication token when a user authenticates using a JWT token. This is useful for token-based authentication workflows.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-lock\"></span>\n        Enrollment Auth Policy\n      </h3>\n      <p class=\"help-panel-text\">\n        The authentication policy assigned to identities that are created through auto-enrollment. When left unset, the controller's \"default\" authentication policy is used.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-identity\"></span>\n        Name Claims Selector\n      </h3>\n      <p class=\"help-panel-text\">\n        A JSON pointer selector (or top-level claim property) identifying which JWT claim supplies the name for enrolling identities. Defaults to <code>/sub</code> when unset.\n      </p>\n    </div>\n\n    <div class=\"help-panel-section\">\n      <h3 class=\"help-panel-subtitle\">\n        <span class=\"icon-identity\"></span>\n        Attribute Claims Selector\n      </h3>\n      <p class=\"help-panel-text\">\n        A JSON pointer selector (or top-level claim property) identifying which JWT claim supplies the role attributes for enrolling identities.\n      </p>\n    </div>\n\n    <div class=\"help-panel-note\">\n      <strong>Note:</strong> These options are only available in Ziti 2.0 and later versions.\n    </div>\n  </div>\n</lib-side-modal>\n", styles: ["@charset \"UTF-8\";.jwt-signer-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:var(--gapXL)}.jwt-signer-form-container .select-file-button{padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);height:1.5625rem;width:fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);border-style:solid;border-width:.0625rem;border-color:var(--stroke);color:var(--white);cursor:pointer;border-radius:var(--inputBorderRadius);gap:var(--marginMedium);margin-top:-.3125rem}.jwt-signer-form-container .select-file-button:hover{filter:brightness(.8)}.jwt-signer-form-container .select-file-button:active{filter:grayscale(1);transform:translateY(.0625rem)}.jwt-signer-form-container .select-file-button .spinner{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:transparent;border-top:.125rem solid white;border-right:.125rem solid white;border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;-webkit-animation:loading .5s infinite linear;animation:loading .5s infinite linear}.jwt-signer-form-container .select-file-label-container{gap:var(--marginMedium)}::ng-deep .jwt-signer-form-container select:disabled,::ng-deep .jwt-signer-form-container input:disabled{opacity:.75!important;cursor:text;background-color:var(--stroke)!important}::ng-deep .api-data-no-wrap .jse-text-mode{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller{width:100%}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content{width:100%;overflow:auto}::ng-deep .api-data-no-wrap .jse-text-mode .cm-editor .cm-scroller .cm-content .\\37cr{white-space:nowrap}.radio-group-container{display:flex;gap:var(--marginLarge)}.radio-group-container:focus .radio-button-container .radio-button-circle{border-color:var(--primaryColor)}.radio-group-container .radio-button-container{display:flex;flex-direction:row;align-items:center;background-color:var(--formGroup);border-radius:var(--inputBorderRadius);width:100%;padding-left:var(--paddingMedium);padding-right:var(--paddingMedium);padding-top:var(--paddingLarge);padding-bottom:var(--paddingLarge);cursor:pointer;gap:var(--marginMedium)}.radio-group-container .radio-button-container .radio-button-circle{display:flex;width:1.3125rem;height:1.3125rem;border-radius:1.3125rem;border-width:.125rem;border-style:solid;border-color:var(--offWhite_ALWAYS);align-items:center;justify-content:center;background-color:var(--offWhite)}.radio-group-container .radio-button-container .radio-button-circle .radio-button-inner-circle{display:none;width:.9375rem;height:.9375rem;border-radius:.9375rem;align-items:center;justify-content:center;background-color:var(--primaryColor)}.radio-group-container .radio-button-container.selected .radio-button-circle .radio-button-inner-circle{display:flex}.radio-group-container .radio-button-container:active .radio-button-circle .radio-button-inner-circle{display:flex;background-color:var(--menu)}.radio-group-container .radio-button-container .radio-button-label{color:var(--offWhite_ALWAYS);font-size:.875rem;font-weight:600}.radio-button-container.toggle-readonly{cursor:default;pointer-events:none;opacity:.92}.select-file-button.toggle-readonly{cursor:default;pointer-events:none;opacity:.85}.test-oauth-button{color:var(--offWhite_ALWAYS);height:var(--defaultInputHeight);border-style:solid;border-color:var(--inputBorder);border-radius:var(--inputBorderRadius);vertical-align:middle;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:color .2s;font-size:.9375rem;font-weight:600;font-family:Open Sans,sans-serif;text-transform:uppercase;cursor:pointer;width:100%;background-color:var(--primaryColor);margin-top:1.5rem;max-width:15rem}.test-oauth-button.oidc-verified{filter:brightness(.95);color:var(--offWhite_ALWAYS);background-color:var(--green)}.test-oauth-button .spinner{display:inline-block;width:var(--spinnerSizeMedium);height:var(--spinnerSizeMedium);border-radius:50%;background:transparent;border-top:var(--spinnerBorderTopMedium);border-right:var(--spinnerBorderRightMedium);border-bottom:var(--spinnerBorderBottomMedium);border-left:var(--spinnerBorderLeftMedium);animation:loading .5s infinite linear;margin-left:var(--marginSmall)}.test-oauth-button:hover{filter:brightness(.95)}.test-oauth-button:active{transform:translateY(1px)}.success-check{width:1.0625rem;height:1.0625rem;cursor:pointer;background-color:var(--navigation);margin:0;margin-top:.25rem;border-radius:2rem;margin-left:var(--marginSmall)}.success-check:checked{background-color:var(--green)!important;background-image:url(/assets/images/check.png);background-size:.675rem;background-position:center center;background-repeat:no-repeat;border:none}.success-check:checked:disabled{opacity:1!important}.oidc-token-claims-container{background-color:var(--backgroundMuted);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--tableText);font-weight:600;overflow:auto}.oidc-token-claims-container .oidc-token-claims-title{font-weight:600;font-size:1rem;white-space:nowrap;margin-bottom:var(--marginMedium)}.oidc-error-message-container{background-color:var(--lightRed);height:fit-content;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--paddingMedium);border-radius:var(--inputBorderRadius);color:var(--red);font-weight:600;overflow:auto}.oidc-error-message-container .oidc-error-message-source{font-weight:600;font-size:1rem;white-space:nowrap}.oidc-error-message-container .oidc-error-message-detail2,.oidc-error-message-container .oidc-error-message-detail{margin-top:var(--marginSmall);font-weight:400;white-space:nowrap}.oidc-error-message-container::-webkit-scrollbar{height:6px;width:6px}.oidc-error-message-container::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.oidc-error-message-container:hover::-webkit-scrollbar-thumb{background-clip:unset!important}.read-only-2{display:flex;overflow:auto;white-space:nowrap;opacity:1!important;cursor:pointer;padding:var(--paddingMedium);padding-bottom:var(--paddingSmall)}.read-only-2::-webkit-scrollbar{height:6px;width:6px}.read-only-2::-webkit-scrollbar-thumb{background-color:var(--menu);border-radius:10px}.read-only-2:hover{text-decoration:underline}.read-only-2:hover::-webkit-scrollbar-thumb{background-clip:unset}.copy-link-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;opacity:1!important;cursor:text;border-radius:var(--inputBorderRadius);height:var(--defaultInputHeight);background-color:var(--backgroundMuted)!important}.copy-button{display:flex;align-items:center;justify-content:center;height:100%;width:2.575rem;margin-left:.125rem;background:url(/assets/svgs/copy.svg) no-repeat;background-size:1.125rem 1.125rem;background-position:center;cursor:pointer;border-top-right-radius:var(--inputBorderRadius);border-bottom-right-radius:var(--inputBorderRadius);background-color:#0000000f}.copy-button:hover{filter:brightness(.95);background-color:#0000001f}.help-panel-content{display:flex;flex-direction:column;padding-top:3rem}.help-panel-content .help-panel-title{margin:0 0 .25rem;color:var(--primary);font-size:1.5rem;font-weight:600;line-height:1.3;padding-right:2rem}.help-panel-content .help-panel-intro{line-height:1.6;margin-bottom:1.5rem;color:var(--tableText);font-size:.9375rem}.help-panel-content .help-panel-section{margin-bottom:1.5rem;padding:1rem;background-color:var(--navigation);border-radius:var(--inputBorderRadius);border-left:.25rem solid var(--primary)}.help-panel-content .help-panel-section .help-panel-subtitle{margin:0 0 .75rem;color:var(--primary);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.help-panel-content .help-panel-section .help-panel-subtitle span[class^=icon-]{font-size:1rem;opacity:.8}.help-panel-content .help-panel-section .help-panel-text{margin:0;line-height:1.6;color:var(--tableText);font-size:.875rem}.help-panel-content .help-panel-note{padding:1rem;background-color:#ffc1071a;border-radius:var(--inputBorderRadius);border-left:.25rem solid #ffc107;color:var(--tableText);font-size:.875rem;line-height:1.6}.help-panel-content .help-panel-note strong{color:#ffc107}\n"] }]
         }], ctorParameters: () => [{ type: JwtSignerFormService }, { type: SchemaService }, { type: GrowlerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHAREDZ_EXTENSION]
@@ -31923,11 +34318,13 @@ class SettingsComponent {
         this.hideTags = false;
         this.transitions = true;
         this.isFilterAfterSave = false;
+        this.betaFeatures = false;
     }
     ngOnInit() {
         this.isDark = localStorage.getItem('mode') === 'dark';
         this.hideTags = localStorage.getItem('hideTags') === 'yes';
         this.isFilterAfterSave = localStorage.getItem('filterAfterSave') === 'on';
+        this.betaFeatures = localStorage.getItem('betaFeatures') === 'on';
         const transitions = localStorage.getItem('Transitions');
         this.transitions = transitions !== 'off';
         this.updateTransitions();
@@ -31945,6 +34342,10 @@ class SettingsComponent {
         const mode = this.isFilterAfterSave ? 'on' : 'off';
         localStorage.setItem('filterAfterSave', mode);
     }
+    betaFeaturesChanged() {
+        const mode = this.betaFeatures ? 'on' : 'off';
+        localStorage.setItem('betaFeatures', mode);
+    }
     transitionsChange() {
         const mode = this.transitions ? 'on' : 'off';
         localStorage.setItem('Transitions', mode);
@@ -31967,11 +34368,11 @@ class SettingsComponent {
         document.getElementsByTagName('html')[0].style.setProperty('--secondary', color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: SettingsComponent, isStandalone: false, selector: "lib-settings", ngImport: i0, template: "<div class=\"projectable-form-wrapper\">\n    <div class=\"header\">\n        <div class=\"title\">Manage <span>{{pageTitle}}</span></div>\n        <div class=\"line\"></div>\n        <div class=\"tabs\">\n          <div class=\"tab selected\">Manage <span>{{pageTitle}}</span></div>\n          <div class=\"tab\" routerLink=\"/profile\">Manage Profile</div>\n        </div>\n        <div class=\"constrained\">\n            <div class=\"grid split\">\n                <div>\n                    <label>Filter after Save</label>\n                    <div class=\"toggle\" [class.on]=\"isFilterAfterSave\" (click)=\"isFilterAfterSave = !isFilterAfterSave; filterAfter()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Dark mode</label>\n                    <div class=\"toggle\" [class.on]=\"isDark\" (click)=\"isDark = !isDark; swap()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Hide Tags</label>\n                    <div class=\"toggle\" [class.on]=\"hideTags\" (click)=\"hideTags = !hideTags; hide()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Transitions</label>\n                    <div class=\"toggle\" [class.on]=\"transitions\" (click)=\"transitions = !transitions; transitionsChange()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".header .constrained .grid.split{grid-template-columns:1fr 1fr}label{color:var(--dark);text-transform:uppercase;margin-top:var(--marginMedium);position:relative;display:inline-block;width:100%;margin-bottom:.1875rem;font-size:.875rem;white-space:nowrap;font-weight:600;font-family:Open Sans;overflow:hidden;text-overflow:ellipsis;line-height:var(--defaultLineHeight)}.toggle{width:3.75rem;height:1.875rem;background-color:var(--black);color:var(--white);cursor:pointer;border-radius:6.25rem;position:relative;display:inline-block;margin-top:var(--marginMedium);transition:var(--transition);float:left;margin-right:var(--marginXL)}.toggle.on{background-color:var(--green)}.toggle.on .switch{left:2.1875rem}.toggle.on .label{left:.625rem;content:\"YES\"}.toggle.on .label:before{content:\"YES\"}.toggle .switch{width:1.25rem;height:1.25rem;border-radius:.625rem;background-color:var(--white);transition:var(--transition);position:absolute;left:.3125rem;top:.3125rem;z-index:10}.toggle .label{right:.625rem;line-height:1.875rem;font-size:.75rem;color:var(--white);position:absolute;z-index:8;transition:var(--transition);text-transform:uppercase}.toggleLabel{line-height:3.125rem}.toggle .label:before{content:\"NO\"}.constrained{width:37.5rem;position:relative;margin-left:auto;margin-right:auto}.split{display:grid;grid-gap:.625rem;grid-template-columns:auto 50%}.header{position:relative;display:inline-block;width:100%}.line{position:absolute;width:100%;top:2.5rem;height:.25rem;background-color:var(--stroke)}.tabs{position:relative;display:inline-block;width:100%;font-size:.875rem;min-height:2.5rem;padding-top:.9375rem}.tabs .tab{position:relative;float:left;margin-right:1.25rem;padding-bottom:.3125rem;margin-bottom:.625rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition)}.tabs .tab.selected{border-bottom-width:.25rem;border-bottom-color:var(--primary);border-bottom-style:solid}\n"], dependencies: [{ kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: SettingsComponent, isStandalone: false, selector: "lib-settings", ngImport: i0, template: "<div class=\"projectable-form-wrapper\">\n    <div class=\"header\">\n        <div class=\"title\">Manage <span>{{pageTitle}}</span></div>\n        <div class=\"line\"></div>\n        <div class=\"tabs\">\n          <div class=\"tab selected\">Manage <span>{{pageTitle}}</span></div>\n          <div class=\"tab\" routerLink=\"/profile\">Manage Profile</div>\n        </div>\n        <div class=\"constrained\">\n            <div class=\"grid split\">\n                <div>\n                    <label>Filter after Save</label>\n                    <div class=\"toggle\" [class.on]=\"isFilterAfterSave\" (click)=\"isFilterAfterSave = !isFilterAfterSave; filterAfter()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Dark mode</label>\n                    <div class=\"toggle\" [class.on]=\"isDark\" (click)=\"isDark = !isDark; swap()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Hide Tags</label>\n                    <div class=\"toggle\" [class.on]=\"hideTags\" (click)=\"hideTags = !hideTags; hide()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Transitions</label>\n                    <div class=\"toggle\" [class.on]=\"transitions\" (click)=\"transitions = !transitions; transitionsChange()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Beta Features</label>\n                    <div class=\"toggle\" [class.on]=\"betaFeatures\" (click)=\"betaFeatures = !betaFeatures; betaFeaturesChanged()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".header .constrained .grid.split{grid-template-columns:1fr 1fr}label{color:var(--dark);text-transform:uppercase;margin-top:var(--marginMedium);position:relative;display:inline-block;width:100%;margin-bottom:.1875rem;font-size:.875rem;white-space:nowrap;font-weight:600;font-family:Open Sans;overflow:hidden;text-overflow:ellipsis;line-height:var(--defaultLineHeight)}.toggle{width:3.75rem;height:1.875rem;background-color:var(--black);color:var(--white);cursor:pointer;border-radius:6.25rem;position:relative;display:inline-block;margin-top:var(--marginMedium);transition:var(--transition);float:left;margin-right:var(--marginXL)}.toggle.on{background-color:var(--green)}.toggle.on .switch{left:2.1875rem}.toggle.on .label{left:.625rem;content:\"YES\"}.toggle.on .label:before{content:\"YES\"}.toggle .switch{width:1.25rem;height:1.25rem;border-radius:.625rem;background-color:var(--white);transition:var(--transition);position:absolute;left:.3125rem;top:.3125rem;z-index:10}.toggle .label{right:.625rem;line-height:1.875rem;font-size:.75rem;color:var(--white);position:absolute;z-index:8;transition:var(--transition);text-transform:uppercase}.toggleLabel{line-height:3.125rem}.toggle .label:before{content:\"NO\"}.constrained{width:37.5rem;position:relative;margin-left:auto;margin-right:auto}.split{display:grid;grid-gap:.625rem;grid-template-columns:auto 50%}.header{position:relative;display:inline-block;width:100%}.line{position:absolute;width:100%;top:2.5rem;height:.25rem;background-color:var(--stroke)}.tabs{position:relative;display:inline-block;width:100%;font-size:.875rem;min-height:2.5rem;padding-top:.9375rem}.tabs .tab{position:relative;float:left;margin-right:1.25rem;padding-bottom:.3125rem;margin-bottom:.625rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition)}.tabs .tab.selected{border-bottom-width:.25rem;border-bottom-color:var(--primary);border-bottom-style:solid}\n"], dependencies: [{ kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-settings', standalone: false, template: "<div class=\"projectable-form-wrapper\">\n    <div class=\"header\">\n        <div class=\"title\">Manage <span>{{pageTitle}}</span></div>\n        <div class=\"line\"></div>\n        <div class=\"tabs\">\n          <div class=\"tab selected\">Manage <span>{{pageTitle}}</span></div>\n          <div class=\"tab\" routerLink=\"/profile\">Manage Profile</div>\n        </div>\n        <div class=\"constrained\">\n            <div class=\"grid split\">\n                <div>\n                    <label>Filter after Save</label>\n                    <div class=\"toggle\" [class.on]=\"isFilterAfterSave\" (click)=\"isFilterAfterSave = !isFilterAfterSave; filterAfter()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Dark mode</label>\n                    <div class=\"toggle\" [class.on]=\"isDark\" (click)=\"isDark = !isDark; swap()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Hide Tags</label>\n                    <div class=\"toggle\" [class.on]=\"hideTags\" (click)=\"hideTags = !hideTags; hide()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Transitions</label>\n                    <div class=\"toggle\" [class.on]=\"transitions\" (click)=\"transitions = !transitions; transitionsChange()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".header .constrained .grid.split{grid-template-columns:1fr 1fr}label{color:var(--dark);text-transform:uppercase;margin-top:var(--marginMedium);position:relative;display:inline-block;width:100%;margin-bottom:.1875rem;font-size:.875rem;white-space:nowrap;font-weight:600;font-family:Open Sans;overflow:hidden;text-overflow:ellipsis;line-height:var(--defaultLineHeight)}.toggle{width:3.75rem;height:1.875rem;background-color:var(--black);color:var(--white);cursor:pointer;border-radius:6.25rem;position:relative;display:inline-block;margin-top:var(--marginMedium);transition:var(--transition);float:left;margin-right:var(--marginXL)}.toggle.on{background-color:var(--green)}.toggle.on .switch{left:2.1875rem}.toggle.on .label{left:.625rem;content:\"YES\"}.toggle.on .label:before{content:\"YES\"}.toggle .switch{width:1.25rem;height:1.25rem;border-radius:.625rem;background-color:var(--white);transition:var(--transition);position:absolute;left:.3125rem;top:.3125rem;z-index:10}.toggle .label{right:.625rem;line-height:1.875rem;font-size:.75rem;color:var(--white);position:absolute;z-index:8;transition:var(--transition);text-transform:uppercase}.toggleLabel{line-height:3.125rem}.toggle .label:before{content:\"NO\"}.constrained{width:37.5rem;position:relative;margin-left:auto;margin-right:auto}.split{display:grid;grid-gap:.625rem;grid-template-columns:auto 50%}.header{position:relative;display:inline-block;width:100%}.line{position:absolute;width:100%;top:2.5rem;height:.25rem;background-color:var(--stroke)}.tabs{position:relative;display:inline-block;width:100%;font-size:.875rem;min-height:2.5rem;padding-top:.9375rem}.tabs .tab{position:relative;float:left;margin-right:1.25rem;padding-bottom:.3125rem;margin-bottom:.625rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition)}.tabs .tab.selected{border-bottom-width:.25rem;border-bottom-color:var(--primary);border-bottom-style:solid}\n"] }]
+            args: [{ selector: 'lib-settings', standalone: false, template: "<div class=\"projectable-form-wrapper\">\n    <div class=\"header\">\n        <div class=\"title\">Manage <span>{{pageTitle}}</span></div>\n        <div class=\"line\"></div>\n        <div class=\"tabs\">\n          <div class=\"tab selected\">Manage <span>{{pageTitle}}</span></div>\n          <div class=\"tab\" routerLink=\"/profile\">Manage Profile</div>\n        </div>\n        <div class=\"constrained\">\n            <div class=\"grid split\">\n                <div>\n                    <label>Filter after Save</label>\n                    <div class=\"toggle\" [class.on]=\"isFilterAfterSave\" (click)=\"isFilterAfterSave = !isFilterAfterSave; filterAfter()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Dark mode</label>\n                    <div class=\"toggle\" [class.on]=\"isDark\" (click)=\"isDark = !isDark; swap()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Hide Tags</label>\n                    <div class=\"toggle\" [class.on]=\"hideTags\" (click)=\"hideTags = !hideTags; hide()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Transitions</label>\n                    <div class=\"toggle\" [class.on]=\"transitions\" (click)=\"transitions = !transitions; transitionsChange()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n                <div>\n                    <label>Beta Features</label>\n                    <div class=\"toggle\" [class.on]=\"betaFeatures\" (click)=\"betaFeatures = !betaFeatures; betaFeaturesChanged()\">\n                        <div class=\"switch\"></div>\n                        <div class=\"label\"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".header .constrained .grid.split{grid-template-columns:1fr 1fr}label{color:var(--dark);text-transform:uppercase;margin-top:var(--marginMedium);position:relative;display:inline-block;width:100%;margin-bottom:.1875rem;font-size:.875rem;white-space:nowrap;font-weight:600;font-family:Open Sans;overflow:hidden;text-overflow:ellipsis;line-height:var(--defaultLineHeight)}.toggle{width:3.75rem;height:1.875rem;background-color:var(--black);color:var(--white);cursor:pointer;border-radius:6.25rem;position:relative;display:inline-block;margin-top:var(--marginMedium);transition:var(--transition);float:left;margin-right:var(--marginXL)}.toggle.on{background-color:var(--green)}.toggle.on .switch{left:2.1875rem}.toggle.on .label{left:.625rem;content:\"YES\"}.toggle.on .label:before{content:\"YES\"}.toggle .switch{width:1.25rem;height:1.25rem;border-radius:.625rem;background-color:var(--white);transition:var(--transition);position:absolute;left:.3125rem;top:.3125rem;z-index:10}.toggle .label{right:.625rem;line-height:1.875rem;font-size:.75rem;color:var(--white);position:absolute;z-index:8;transition:var(--transition);text-transform:uppercase}.toggleLabel{line-height:3.125rem}.toggle .label:before{content:\"NO\"}.constrained{width:37.5rem;position:relative;margin-left:auto;margin-right:auto}.split{display:grid;grid-gap:.625rem;grid-template-columns:auto 50%}.header{position:relative;display:inline-block;width:100%}.line{position:absolute;width:100%;top:2.5rem;height:.25rem;background-color:var(--stroke)}.tabs{position:relative;display:inline-block;width:100%;font-size:.875rem;min-height:2.5rem;padding-top:.9375rem}.tabs .tab{position:relative;float:left;margin-right:1.25rem;padding-bottom:.3125rem;margin-bottom:.625rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition)}.tabs .tab.selected{border-bottom-width:.25rem;border-bottom-color:var(--primary);border-bottom-style:solid}\n"] }]
         }], ctorParameters: () => [] });
 
 class ProfileComponent {
@@ -39542,12 +41943,24 @@ class OpenZitiConsoleLibModule {
             ConfigTypesPageComponent,
             ConfigTypeFormComponent,
             ListPageHeaderComponent,
+            ListTableHeaderComponent,
             FilterBarComponent,
             ListPageFormComponent,
             IdentitiesPageComponent,
+            IdentitiesListPageComponent,
             EdgeRoutersPageComponent,
             TransitRoutersPageComponent,
             DataTableComponent,
+            ListTableComponent,
+            ListMenuComponent,
+            NameCellComponent,
+            SelectCellComponent,
+            ListHeaderCellComponent,
+            ListFilterCellComponent,
+            OsInfoTooltipComponent,
+            SdkInfoTooltipComponent,
+            BooleanCellComponent,
+            TokenCellComponent,
             TableCellSelectComponent,
             TableColumnSelectComponent,
             TableCellMenuComponent,
@@ -39650,6 +42063,7 @@ class OpenZitiConsoleLibModule {
             MatButtonModule,
             MatIconModule,
             OverlayModule,
+            DragDropModule,
             AgGridModule,
             QRCodeComponent,
             ClickOutsideModule,
@@ -39678,6 +42092,7 @@ class OpenZitiConsoleLibModule {
             EdgeRouterFormComponent,
             TransitRouterFormComponent,
             IdentitiesPageComponent,
+            IdentitiesListPageComponent,
             EdgeRoutersPageComponent,
             TransitRoutersPageComponent,
             ServicesPageComponent,
@@ -39721,7 +42136,8 @@ class OpenZitiConsoleLibModule {
             SideNavigatorComponent,
             FilterSelectComponent,
             FilterSelectOptionTemplateDirective,
-            FilterSelectTriggerTemplateDirective] }); }
+            FilterSelectTriggerTemplateDirective,
+            ListTableComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: OpenZitiConsoleLibModule, providers: [
             { provide: SHAREDZ_EXTENSION, useClass: ExtensionsNoopService },
             { provide: ZITI_NAVIGATOR, useValue: {} },
@@ -39746,6 +42162,7 @@ class OpenZitiConsoleLibModule {
             MatButtonModule,
             MatIconModule,
             OverlayModule,
+            DragDropModule,
             AgGridModule,
             QRCodeComponent,
             ClickOutsideModule,
@@ -39777,12 +42194,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         ConfigTypesPageComponent,
                         ConfigTypeFormComponent,
                         ListPageHeaderComponent,
+                        ListTableHeaderComponent,
                         FilterBarComponent,
                         ListPageFormComponent,
                         IdentitiesPageComponent,
+                        IdentitiesListPageComponent,
                         EdgeRoutersPageComponent,
                         TransitRoutersPageComponent,
                         DataTableComponent,
+                        ListTableComponent,
+                        ListMenuComponent,
+                        NameCellComponent,
+                        SelectCellComponent,
+                        ListHeaderCellComponent,
+                        ListFilterCellComponent,
+                        OsInfoTooltipComponent,
+                        SdkInfoTooltipComponent,
+                        BooleanCellComponent,
+                        TokenCellComponent,
                         TableCellSelectComponent,
                         TableColumnSelectComponent,
                         TableCellMenuComponent,
@@ -39896,6 +42325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         EdgeRouterFormComponent,
                         TransitRouterFormComponent,
                         IdentitiesPageComponent,
+                        IdentitiesListPageComponent,
                         EdgeRoutersPageComponent,
                         TransitRoutersPageComponent,
                         ServicesPageComponent,
@@ -39939,7 +42369,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         SideNavigatorComponent,
                         FilterSelectComponent,
                         FilterSelectOptionTemplateDirective,
-                        FilterSelectTriggerTemplateDirective
+                        FilterSelectTriggerTemplateDirective,
+                        ListTableComponent
                     ], imports: [
                         CommonModule,
                         FormsModule,
@@ -39954,6 +42385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         MatButtonModule,
                         MatIconModule,
                         OverlayModule,
+                        DragDropModule,
                         AgGridModule,
                         QRCodeComponent,
                         ClickOutsideModule,
@@ -41410,8 +43842,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     args: [SETTINGS_SERVICE]
                 }] }, { type: ZitiOidcService }, { type: GrowlerService }, { type: i0.Injector }] });
 
+/*
+    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.
+*/
+
 const ZAC_VERSION = {
-    "version": "4.5.2"
+    "version": "4.5.3"
 };
 
 /*
@@ -41422,5 +43870,5 @@ const ZAC_VERSION = {
  * Generated bundle index. Do not edit.
  */
 
-export { APISessionFormComponent, APISessionsPageComponent, API_RESOURCE_TO_ENTITY_PERMISSION, ApiSessionsPageService, AttributesComponent, AuthPoliciesPageComponent, AuthPoliciesPageService, AuthPolicyFormComponent, AuthPolicyFormService, AuthService, BooleanToggleInputComponent, CallbackComponent, CardListComponent, CertificateAuthoritiesPageComponent, CertificateAuthoritiesPageService, CertificateAuthorityFormComponent, CertificateAuthorityFormService, CheckboxListInputComponent, ChipsInputComponent, ConfigEditorComponent, ConfigTypeFormComponent, ConfigTypesPageComponent, ConfigurationFormComponent, ConfigurationService, ConfigurationsPageComponent, CsvDownloadService, DEACTIVATE_GUARD, DEFAULT_APP_CONFIG, DataTableFilterService, DeactivateGuardService, EDGE_ROUTER_EXTENSION_SERVICE, EDGE_ROUTER_POLICY_EXTENSION_SERVICE, EdgeRouter, EdgeRouterFormComponent, EdgeRouterFormService, EdgeRouterPoliciesPageComponent, EdgeRouterPoliciesPageService, EdgeRouterPolicyFormComponent, EdgeRouterPolicyFormService, EdgeRoutersPageComponent, EdgeRoutersPageService, Entity, ExtendableComponent, ExtensionsNoopService, FilterSelectComponent, FilterSelectOptionTemplateDirective, FilterSelectTriggerTemplateDirective, FormFieldContainerComponent, FormFieldToggleComponent, FormHeaderComponent, GeolocateComponent, GrowlerComponent, GrowlerModel, GrowlerModule, GrowlerService, HAControllerService, HaStatusIndicatorComponent, HeaderBarComponent, IDENTITY_EXTENSION_SERVICE, IdentitiesPageComponent, IdentitiesPageService, Identity$1 as Identity, IdentityFormComponent, IdentityFormService, IdentityServicePathComponent, InsecureContextError, JsonViewComponent, JwtSignerFormComponent, JwtSignerFormService, JwtSignersPageComponent, JwtSignersPageService, KEY_CODES, ListPageComponent, ListPageServiceClass, LoadingIndicatorComponent, LoggerService, LoginDialogComponent, LoginServiceClass, ManagementPermissionsService, NetworkVisualizerComponent, NodeDataService, NoopLoginService, NoopTabInterceptorService, NumberInputComponent, OIDC_CLIENT_ID, OIDC_CLIENT_ID_LEGACY, ObjectComponent, OidcEnvironmentalError, OidcSessionUnrecoverableError, OpenZitiConsoleLibModule, PasswordInputComponent, PostureCheckFormComponent, PostureChecksPageComponent, PostureChecksPageService, PreviewListComponent, ProfileComponent, ProgressMeterComponent, ProgressMeterStep, ProgressWizardComponent, ProgressWizardStep, ProjectableForm, ProtocolAddressPortInputComponent, QuickAddComponent, ResetEnrollmentService, SAVE_DENIED_BY_PERMISSION_TOOLTIP, SERVICE_EDGE_ROUTER_POLICY_EXTENSION_SERVICE, SERVICE_EXTENSION_SERVICE, SERVICE_POLICY_EXTENSION_SERVICE, SETTINGS_SERVICE, SHAREDZ_EXTENSION, SelectorInputComponent, ServiceEdgeRouterPoliciesPageComponent, ServiceEdgeRouterPoliciesPageService, ServiceEdgeRouterPolicyFormComponent, ServiceEdgeRouterPolicyFormService, ServiceFormComponent, ServiceFormService, ServicePoliciesPageComponent, ServicePoliciesPageService, ServicePolicyFormComponent, ServicePolicyFormService, ServicesPageComponent, ServicesPageService, Session, SessionFormComponent, SessionRefreshService, SessionsPageComponent, SessionsPageService, SettingsComponent, SettingsService, SettingsServiceClass, SideModalComponent, SideNavbarComponent, SideNavigatorComponent, SimpleServiceComponent, StringInputComponent, TabNameService, TagSelectorComponent, TerminatorFormComponent, TerminatorFormService, TerminatorsPageComponent, TerminatorsPageService, TextListInputComponent, TransitRouterFormComponent, TransitRouterFormService, TransitRoutersPageComponent, TransitRoutersPageService, ValidationService, VerifyCertificateComponent, VisualizerServiceClass, ZAC_LOGIN_SERVICE, ZAC_VERSION, ZITI_DATA_SERVICE, ZITI_DOMAIN_CONTROLLER, ZITI_NAVIGATOR, ZITI_TAB_OVERRIDES, ZITI_URLS, ZacRoutingModule, ZitiControllerDataService, ZitiDataService, ZitiOidcService, decodeJwtPayload, jwtExpMs, jwtIatMs, pkceChallengeS256, playerFactory, randomUrlSafeString };
+export { APISessionFormComponent, APISessionsPageComponent, API_RESOURCE_TO_ENTITY_PERMISSION, ApiSessionsPageService, AttributesComponent, AuthPoliciesPageComponent, AuthPoliciesPageService, AuthPolicyFormComponent, AuthPolicyFormService, AuthService, BooleanCellComponent, BooleanToggleInputComponent, CallbackComponent, CardListComponent, CertificateAuthoritiesPageComponent, CertificateAuthoritiesPageService, CertificateAuthorityFormComponent, CertificateAuthorityFormService, CheckboxListInputComponent, ChipsInputComponent, ConfigEditorComponent, ConfigTypeFormComponent, ConfigTypesPageComponent, ConfigurationFormComponent, ConfigurationService, ConfigurationsPageComponent, CsvDownloadService, DEACTIVATE_GUARD, DEFAULT_APP_CONFIG, DataTableFilterService, DeactivateGuardService, EDGE_ROUTER_EXTENSION_SERVICE, EDGE_ROUTER_POLICY_EXTENSION_SERVICE, EdgeRouter, EdgeRouterFormComponent, EdgeRouterFormService, EdgeRouterPoliciesPageComponent, EdgeRouterPoliciesPageService, EdgeRouterPolicyFormComponent, EdgeRouterPolicyFormService, EdgeRoutersPageComponent, EdgeRoutersPageService, Entity, ExtendableComponent, ExtensionsNoopService, FilterSelectComponent, FilterSelectOptionTemplateDirective, FilterSelectTriggerTemplateDirective, FormFieldContainerComponent, FormFieldToggleComponent, FormHeaderComponent, GeolocateComponent, GrowlerComponent, GrowlerModel, GrowlerModule, GrowlerService, HAControllerService, HaStatusIndicatorComponent, HeaderBarComponent, IDENTITY_EXTENSION_SERVICE, IdentitiesListPageComponent, IdentitiesPageComponent, IdentitiesPageService, Identity$1 as Identity, IdentityFormComponent, IdentityFormService, IdentityServicePathComponent, InsecureContextError, JsonViewComponent, JwtSignerFormComponent, JwtSignerFormService, JwtSignersPageComponent, JwtSignersPageService, KEY_CODES, ListFilterCellComponent, ListHeaderCellComponent, ListMenuComponent, ListPageComponent, ListPageServiceClass, ListTableComponent, ListTableService, LoadingIndicatorComponent, LoggerService, LoginDialogComponent, LoginServiceClass, ManagementPermissionsService, NameCellComponent, NetworkVisualizerComponent, NodeDataService, NoopLoginService, NoopTabInterceptorService, NumberInputComponent, OIDC_CLIENT_ID, OIDC_CLIENT_ID_LEGACY, ObjectComponent, OidcEnvironmentalError, OidcSessionUnrecoverableError, OpenZitiConsoleLibModule, OsInfoTooltipComponent, PasswordInputComponent, PostureCheckFormComponent, PostureChecksPageComponent, PostureChecksPageService, PreviewListComponent, ProfileComponent, ProgressMeterComponent, ProgressMeterStep, ProgressWizardComponent, ProgressWizardStep, ProjectableForm, ProtocolAddressPortInputComponent, QuickAddComponent, ResetEnrollmentService, SAVE_DENIED_BY_PERMISSION_TOOLTIP, SERVICE_EDGE_ROUTER_POLICY_EXTENSION_SERVICE, SERVICE_EXTENSION_SERVICE, SERVICE_POLICY_EXTENSION_SERVICE, SETTINGS_SERVICE, SHAREDZ_EXTENSION, SdkInfoTooltipComponent, SelectCellComponent, SelectorInputComponent, ServiceEdgeRouterPoliciesPageComponent, ServiceEdgeRouterPoliciesPageService, ServiceEdgeRouterPolicyFormComponent, ServiceEdgeRouterPolicyFormService, ServiceFormComponent, ServiceFormService, ServicePoliciesPageComponent, ServicePoliciesPageService, ServicePolicyFormComponent, ServicePolicyFormService, ServicesPageComponent, ServicesPageService, Session, SessionFormComponent, SessionRefreshService, SessionsPageComponent, SessionsPageService, SettingsComponent, SettingsService, SettingsServiceClass, SideModalComponent, SideNavbarComponent, SideNavigatorComponent, SimpleServiceComponent, StringInputComponent, TabNameService, TagSelectorComponent, TerminatorFormComponent, TerminatorFormService, TerminatorsPageComponent, TerminatorsPageService, TextListInputComponent, TokenCellComponent, TransitRouterFormComponent, TransitRouterFormService, TransitRoutersPageComponent, TransitRoutersPageService, ValidationService, VerifyCertificateComponent, VisualizerServiceClass, ZAC_LOGIN_SERVICE, ZAC_VERSION, ZITI_DATA_SERVICE, ZITI_DOMAIN_CONTROLLER, ZITI_NAVIGATOR, ZITI_TAB_OVERRIDES, ZITI_URLS, ZacRoutingModule, ZitiControllerDataService, ZitiDataService, ZitiOidcService, decodeJwtPayload, jwtExpMs, jwtIatMs, pkceChallengeS256, playerFactory, randomUrlSafeString };
 //# sourceMappingURL=openziti-ziti-console-lib.mjs.map