@openziti/ziti-console-lib 1.5.3 → 1.5.5

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

@@ -10,7 +10,7 @@ import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i4 from '@angular/router';
 import { RouterModule, NavigationEnd } from '@angular/router';
 import { BehaviorSubject, Subject, firstValueFrom, tap, map, Subscription, fromEvent, of, interval } from 'rxjs';
-import _, { debounce, defer, isEmpty, isNumber, includes, isNil, isNaN as isNaN$1, cloneDeep, isString, forEach, isFunction, get, unset, isBoolean, keys, isEqual, isObject, isArray, forOwn, invert, map as map$2, some, filter, sortBy, sortedUniq, set, has, trim, delay, invoke } from 'lodash';
+import _, { debounce, defer, isEmpty, isNumber, includes, isNil, isNaN as isNaN$1, cloneDeep, isEqual, isBoolean, isArray, isString, forEach, isFunction, get, unset, keys, isObject, forOwn, invert, map as map$2, some, filter, sortBy, sortedUniq, set, has, trim, delay, invoke } from 'lodash';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i5$2 from 'angularx-qrcode';
@@ -156,6 +156,9 @@ class ExtensionsNoopService {
     processTableColumns(tableColumns) {
         return tableColumns;
     }
+    processListTableColumns(tableColumns) {
+        return tableColumns;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExtensionsNoopService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExtensionsNoopService, providedIn: 'root' }); }
 }
@@ -1755,6 +1758,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 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.
+*/
+/**
+ * Per-instance state + localStorage persistence for {@link ListTableComponent}.
+ * Uses its own `lt_<tableId>_*` keys (separate from the legacy ag-grid table) so a
+ * first visit starts from the column defs' default widths, not a carried-over ag layout.
+ */
+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 `lt_${this.tableId}_table_state`;
+    }
+    widthsKey() {
+        return `lt_${this.tableId}_column_widths`;
+    }
+    pageSizeKey() {
+        return `lt_${this.tableId}_page_size`;
+    }
+    static pageSizeKeyFor(tableId) {
+        return `lt_${tableId}_page_size`;
+    }
+    restorePageSize(fallback) {
+        return ListTableService.readPersistedPageSize(this.tableId, fallback);
+    }
+    savePageSize(size) {
+        try {
+            localStorage.setItem(this.pageSizeKey(), String(size));
+        }
+        catch {
+            // ignore
+        }
+    }
+    /** Reads a table's remembered rows-per-page without an instance (for host pre-seeding). */
+    static readPersistedPageSize(tableId, fallback) {
+        try {
+            const raw = localStorage.getItem(ListTableService.pageSizeKeyFor(tableId));
+            const n = raw ? parseInt(raw, 10) : NaN;
+            return Number.isFinite(n) && n > 0 ? n : fallback;
+        }
+        catch {
+            return fallback;
+        }
+    }
+    /**
+     * 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());
+            localStorage.removeItem(this.pageSizeKey());
+        }
+        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
+        }] });
+
 /*
     Copyright NetFoundry Inc.
 
@@ -2563,6 +2728,37 @@ class ZitiDataService {
         }
         return filters;
     }
+    /**
+     * Copies unknown fields (on `formData` but not the model or `excludedProperties`) onto
+     * `saveModel` so raw-JSON-editor edits aren't dropped. On update, pass `originalData` (the
+     * loaded entity) to skip unchanged server-supplied fields (_links, createdAt, enrollment).
+     */
+    mergeUnknownFormProperties(saveModel, formData, modelProperties, excludedProperties = ['id'], originalData) {
+        Object.keys(formData || {}).forEach((prop) => {
+            if (modelProperties.includes(prop) || excludedProperties.includes(prop)) {
+                return;
+            }
+            if (originalData && isEqual(formData[prop], originalData[prop])) {
+                return;
+            }
+            saveModel[prop] = formData[prop];
+        });
+        return saveModel;
+    }
+    // escape ziti-ql string contents so a value with a quote/backslash can't alter the query
+    escapeQlString(v) {
+        return String(v).replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+    }
+    // generic multi-select over a scalar field: `col = "a" or col = "b"` (vs anyOf() for collections)
+    getMultiSelectFilter(val, columnId, semantic = 'AnyOf') {
+        const join = semantic === 'AllOf' ? 'and' : 'or';
+        const clause = (v) => `${columnId} = ${(isNumber(v) || isBoolean(v)) ? `${v}` : `"${this.escapeQlString(v)}"`}`;
+        if (isArray(val)) {
+            const parts = val.map(clause);
+            return parts.length > 1 ? `(${parts.join(` ${join} `)})` : (parts[0] || '');
+        }
+        return clause(val);
+    }
     getErrorMessage(resp) {
         let errorMessage;
         if (resp?.error?.error?.cause?.message) {
@@ -2910,6 +3106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 }] }] });
 
 class DataTableFilterService {
+    // filter params live under this prefix so unrelated params (e.g. ?tab=) aren't treated as filters
+    static { this.URL_FILTER_PREFIX = 'f.'; }
     constructor(location, router, activatedRoute) {
         this.location = location;
         this.router = router;
@@ -2987,18 +3185,25 @@ class DataTableFilterService {
         return filters;
     }
     updateUrlParameters(filtersToRemove = []) {
+        const prefix = DataTableFilterService.URL_FILTER_PREFIX;
         const urlFiltersMap = this.getUrlFiltersMap();
-        let params = new HttpParams();
         this.filters.forEach(filter => {
             urlFiltersMap[filter.columnId] = filter;
         });
+        const currentParamString = window.location.href.split("?")[1] || '';
+        let params = new HttpParams({ fromString: currentParamString });
+        params.keys()
+            .filter((key) => key.startsWith(prefix))
+            .forEach((key) => {
+            params = params.delete(key);
+        });
         const newFilters = [];
         forEach(urlFiltersMap, (value, key) => {
             const filterRemoved = filtersToRemove.some((removed) => {
                 return removed.columnId === key;
             });
             if (!filterRemoved) {
-                params = params.append(key, value.value);
+                params = params.append(prefix + key, value.value);
                 newFilters.push(value);
             }
         });
@@ -3008,11 +3213,16 @@ class DataTableFilterService {
         this.storeFilters();
     }
     getUrlFiltersMap() {
+        const prefix = DataTableFilterService.URL_FILTER_PREFIX;
         const paramString = window.location.href.split("?")[1];
         const params = new HttpParams({ fromString: paramString });
         const storedFilters = this.getStoredFilters();
         const appliedFiltersMap = {};
-        params.keys().forEach((key) => {
+        params.keys().forEach((rawKey) => {
+            if (!rawKey.startsWith(prefix)) {
+                return;
+            }
+            const key = rawKey.slice(prefix.length);
             const storedFilter = storedFilters.find((filter) => {
                 return filter.columnId === key;
             });
@@ -3020,7 +3230,7 @@ class DataTableFilterService {
                 appliedFiltersMap[key] = storedFilter;
             }
             else {
-                let val = params.get(key);
+                let val = params.get(rawKey);
                 let type = 'TEXTINPUT';
                 let label = val;
                 if (val?.split(',')?.length > 1) {
@@ -3728,6 +3938,11 @@ class ListPageComponent {
     }
     ngOnInit() {
         this.filterService.currentPage = 1;
+        // new list-table pages: adopt this table's remembered rows-per-page before the
+        // first fetch so the initial load honors it (consumers get this without copying)
+        if (this.tableId) {
+            this.filterService.pageSize = ListTableService.readPersistedPageSize(this.tableId, this.initialPageSize ?? this.filterService.pageSize);
+        }
         this.svc.sideModalOpen = false;
         this.svc.refreshData = this.refreshData.bind(this);
         this.svc.resetMenusForInit();
@@ -6230,9 +6445,9 @@ class IdentityFormService {
         this.zitiService = zitiService;
         this.growlerService = growlerService;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getIdentityDataModel(formData, isUpdate);
+        const data = this.getIdentityDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('identities', data, formData.id).then((result) => {
             const growlerData = new GrowlerModel('success', 'Success', `Identity ${isUpdate ? 'Updated' : 'Created'}`, `Successfully ${isUpdate ? 'updated' : 'created'} Identity: ${formData.name}`);
@@ -6244,7 +6459,7 @@ class IdentityFormService {
             throw resp;
         });
     }
-    getIdentityDataModel(formData, isUpdate) {
+    getIdentityDataModel(formData, isUpdate, originalData) {
         const saveModel = new Identity$1();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -6269,7 +6484,7 @@ class IdentityFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id', 'badges'], isUpdate ? originalData : undefined);
     }
     testService(identityId, serviceId) {
         const url = `/identities/${identityId}/policy-advice/${serviceId}`;
@@ -7221,8 +7436,8 @@ class IdentitiesPageService extends ListPageServiceClass {
                 hidden: true,
             },
         ];
-        if (this.extService.processTableColumns) {
-            tableColumns = this.extService.processTableColumns(tableColumns);
+        if (this.extService.processListTableColumns) {
+            tableColumns = this.extService.processListTableColumns(tableColumns);
         }
         return tableColumns;
     }
@@ -7518,9 +7733,9 @@ class EdgeRouterFormService {
         this.associatedServices = [];
         this.associatedServiceNames = [];
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getEdgeRouterDataModel(formData, isUpdate);
+        const data = this.getEdgeRouterDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('edge-routers', data, formData.id).then(async (result) => {
             const id = result?.data?.id || formData.id;
@@ -7545,7 +7760,7 @@ class EdgeRouterFormService {
             throw resp;
         });
     }
-    getEdgeRouterDataModel(formData, isUpdate) {
+    getEdgeRouterDataModel(formData, isUpdate, originalData) {
         const saveModel = new EdgeRouter();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -7554,7 +7769,7 @@ class EdgeRouterFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id', 'badges'], isUpdate ? originalData : undefined);
     }
     getAuthPolicies() {
         const paging = {
@@ -9943,12 +10158,29 @@ class ListTableHeaderComponent {
         this.blockCreate = false;
         /** Hide the bulk-delete control shown when rows are selected. */
         this.blockDelete = false;
+        /** When true (default) tabs navigate via routerLink and highlight by matching the
+         *  URL path. Set false for a consumer that owns navigation (e.g. query-param tabs):
+         *  tabs then only emit `tabClicked`, and the active one is driven by `activeTab`. */
+        this.tabsUseRouter = true;
+        /** Active tab when `tabsUseRouter` is false. Matched by identity or by the tab's
+         *  `id` / `value` / `url` / `label`. */
+        this.activeTab = null;
         this.actionClicked = new EventEmitter();
+        this.tabClicked = new EventEmitter();
     }
     clickAction(value) {
         this.actionClicked.emit(value);
     }
+    onTabClick(tab) {
+        this.tabClicked.emit(tab);
+    }
     tabSelected(tab) {
+        if (!this.tabsUseRouter) {
+            return this.tabMatchesActive(tab);
+        }
+        if (!tab?.url) {
+            return false;
+        }
         const parsedUrl = new URL(window.location.href);
         let path = parsedUrl.pathname;
         if (document.baseURI) {
@@ -9966,12 +10198,22 @@ class ListTableHeaderComponent {
         }
         return tabUrl === path;
     }
+    tabMatchesActive(tab) {
+        const active = this.activeTab;
+        if (active == null) {
+            return false;
+        }
+        if (active === tab) {
+            return true;
+        }
+        return active === tab?.id || active === tab?.value || active === tab?.url || active === tab?.label;
+    }
     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"] }] }); }
+    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", tabsUseRouter: "tabsUseRouter", activeTab: "activeTab" }, outputs: { actionClicked: "actionClicked", tabClicked: "tabClicked" }, 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]=\"tabsUseRouter ? tab.url : null\"\n          [hidden]=\"tab.hidden\"\n          [attr.role]=\"tabsUseRouter ? null : 'button'\"\n          [attr.tabindex]=\"tabsUseRouter ? null : 0\"\n          (click)=\"onTabClick(tab)\"\n          (keydown.enter)=\"tabsUseRouter ? null : onTabClick(tab)\"\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"] }]
+            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]=\"tabsUseRouter ? tab.url : null\"\n          [hidden]=\"tab.hidden\"\n          [attr.role]=\"tabsUseRouter ? null : 'button'\"\n          [attr.tabindex]=\"tabsUseRouter ? null : 0\"\n          (click)=\"onTabClick(tab)\"\n          (keydown.enter)=\"tabsUseRouter ? null : onTabClick(tab)\"\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: [{
@@ -9988,8 +10230,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], blockDelete: [{
                 type: Input
+            }], tabsUseRouter: [{
+                type: Input
+            }], activeTab: [{
+                type: Input
             }], actionClicked: [{
                 type: Output
+            }], tabClicked: [{
+                type: Output
             }] } });
 
 /*
@@ -10458,9 +10706,9 @@ class TerminatorFormService {
         this.identityNamedAttributesMap = {};
         this.routerNamedAttributesMap = {};
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getTerminatorDataModel(formData, isUpdate);
+        const data = this.getTerminatorDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.patch('terminators', data, formData.id, true);
@@ -10502,7 +10750,7 @@ class TerminatorFormService {
             throw resp;
         });
     }
-    getTerminatorDataModel(formData, isUpdate) {
+    getTerminatorDataModel(formData, isUpdate, originalData) {
         const saveModel = new Terminator();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -10511,7 +10759,7 @@ class TerminatorFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     getIdentityNamedAttributes() {
         return this.dataService.get('identities', { rawFilter: true, filter: '', sort: 'name', order: 'asc', total: -1, page: 1 }, []).then((result) => {
@@ -11202,7 +11450,7 @@ class TerminatorFormComponent extends ProjectableForm {
         }
         const apiData = this.apiData;
         this.isLoading = true;
-        this.svc.save(apiData).then((result) => {
+        this.svc.save(apiData, this.initData).then((result) => {
             if (this.isModal) {
                 this.closeModal(true, true);
                 return;
@@ -11472,139 +11720,6 @@ 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)`.
@@ -11744,11 +11859,11 @@ class ListHeaderCellComponent {
         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"] }] }); }
+    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-header-sorted-text, var(--lt-icon-active));font-weight:var(--lt-header-sorted-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"] }]
+            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-header-sorted-text, var(--lt-icon-active));font-weight:var(--lt-header-sorted-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: [{
@@ -11829,11 +11944,16 @@ class ListFilterCellComponent {
     get placeholder() {
         return this.column.filterPlaceholder || 'All';
     }
+    /** True only for the Ziti role-attribute flavor of multi-select (adds #/@ prefixing). */
+    get isAttributeMode() {
+        return this.column.filterType === 'ATTRIBUTE';
+    }
     resolveMode() {
         switch (this.column.filterType) {
             case 'TEXTINPUT':
                 return 'text';
             case 'ATTRIBUTE':
+            case 'MULTISELECT':
                 return 'multi';
             case 'DATETIME':
                 return 'daterange';
@@ -11846,19 +11966,29 @@ class ListFilterCellComponent {
             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));
+            let raw;
+            if (this.isAttributeMode) {
+                const getAttrs = this.column.headerParams?.['getRoleAttributes'];
+                raw = (typeof getAttrs === 'function' ? getAttrs() : null) || this.column.filterOptions || [];
+            }
+            else {
+                raw = this.column.getFilterOptions ? this.column.getFilterOptions() : (this.column.filterOptions || []);
+            }
+            return raw.map((a) => (typeof a === 'string' ? { label: a, value: a } : a));
         }
         const raw = this.column.getFilterOptions ? this.column.getFilterOptions() : this.column.filterOptions || [];
         return raw;
     }
     // ------------------------------------------------------------------ display
+    labelForValue(value) {
+        const opt = this.options.find((o) => `${o.value}` === `${value}`);
+        return opt ? opt.label : `${value}`;
+    }
     /** 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.labelForValue(this.selectedValues[0]);
             }
             return `${this.selectedValues.length}`;
         }
@@ -11896,11 +12026,14 @@ class ListFilterCellComponent {
     }
     /** A named attribute (rendered with @ + secondary color) vs a role attribute (# + primary). */
     isNamedOption(opt) {
-        return String(opt?.value ?? opt?.label ?? '').charAt(0) === '@';
+        return this.isAttributeMode && String(opt?.value ?? opt?.label ?? '').charAt(0) === '@';
     }
-    /** Option label with its #/@ prefix, matching the Roles column chips. */
-    attrLabel(opt) {
+    /** Option label. The attribute flavor prefixes # (role) / keeps @ (named); others render plain. */
+    optionLabel(opt) {
         const raw = String(opt?.label ?? opt?.value ?? '');
+        if (!this.isAttributeMode) {
+            return raw;
+        }
         if (raw.charAt(0) === '@' || raw.charAt(0) === '#') {
             return raw;
         }
@@ -11977,8 +12110,8 @@ class ListFilterCellComponent {
             filterName: this.column.label,
             columnId: this.field,
             value: [...this.selectedValues],
-            label: this.selectedValues.join(', '),
-            type: 'ATTRIBUTE',
+            label: this.selectedValues.map((v) => this.labelForValue(v)).join(', '),
+            type: this.isAttributeMode ? 'ATTRIBUTE' : 'MULTISELECT',
             semantic: 'AnyOf',
         };
         this.filterService.updateFilter(filter);
@@ -12090,11 +12223,11 @@ class ListFilterCellComponent {
         }
     }
     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"] }] }); }
+    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]=\"isAttributeMode ? 'Search attributes' : 'Search'\"\n              (click)=\"$event.stopPropagation()\"\n              autocomplete=\"off\"\n            />\n          </div>\n          @if (!filteredOptions.length) {\n            <div class=\"fc-empty\">{{ options.length ? 'No matches' : (isAttributeMode ? 'No attributes available' : 'No options 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                @if (isAttributeMode) {\n                  <span class=\"fc-attr\" [class.at]=\"isNamedOption(opt)\">{{ optionLabel(opt) }}</span>\n                } @else if (opt.chipClass) {\n                  <span [ngClass]=\"opt.chipClass\">{{ opt.label }}</span>\n                } @else {\n                  <span class=\"fc-opt-label\">{{ optionLabel(opt) }}</span>\n                }\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-control-border, 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"] }]
+            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]=\"isAttributeMode ? 'Search attributes' : 'Search'\"\n              (click)=\"$event.stopPropagation()\"\n              autocomplete=\"off\"\n            />\n          </div>\n          @if (!filteredOptions.length) {\n            <div class=\"fc-empty\">{{ options.length ? 'No matches' : (isAttributeMode ? 'No attributes available' : 'No options 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                @if (isAttributeMode) {\n                  <span class=\"fc-attr\" [class.at]=\"isNamedOption(opt)\">{{ optionLabel(opt) }}</span>\n                } @else if (opt.chipClass) {\n                  <span [ngClass]=\"opt.chipClass\">{{ opt.label }}</span>\n                } @else {\n                  <span class=\"fc-opt-label\">{{ optionLabel(opt) }}</span>\n                }\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-control-border, 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: [{
@@ -12148,6 +12281,8 @@ class ListTableComponent {
         this.rowData = [];
         this.isLoading = false;
         this.options = { noSelect: false, noMenu: false };
+        this.hasNext = false;
+        this.hasPrev = false;
         this.startCount = '-';
         this.endCount = '-';
         this.totalCount = '-';
@@ -12234,6 +12369,8 @@ class ListTableComponent {
         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];
+        /** Default rows-per-page when nothing is remembered (the persisted choice wins). */
+        this.initialPageSize = 50;
         // ---- auto-refresh (the skin toolbar toggle) ----
         this.autoRefresh = false;
         this.autoRefreshIntervalMs = 30000;
@@ -12244,6 +12381,8 @@ class ListTableComponent {
     }
     ngOnInit() {
         this._initialized = true;
+        // set directly (no emit) to avoid forcing a second fetch when a host pre-seeded it
+        this.tableFilterService.pageSize = this.svc.restorePageSize(this.initialPageSize);
         this.buildColumns();
         this.updateEntityTypeLabel();
         this.subscription.add(this.tableFilterService.filtersChanged.subscribe((filters) => {
@@ -12736,14 +12875,29 @@ class ListTableComponent {
         }
         this.tableFilterService.changePage((this.tableFilterService.currentPage || 1) - 1);
     }
+    get cursorPager() {
+        return this.options?.pager === 'cursor';
+    }
     get nextDisabled() {
-        if (!_.isNumber(this.totalCount) || !_.isNumber(this.endCount) || this.filtering) {
+        if (this.filtering) {
+            return true;
+        }
+        if (this.cursorPager) {
+            return !this.hasNext;
+        }
+        if (!_.isNumber(this.totalCount) || !_.isNumber(this.endCount)) {
             return true;
         }
         return Number(this.endCount) >= Number(this.totalCount);
     }
     get prevDisabled() {
-        if (!_.isNumber(this.startCount) || !_.isNumber(this.totalCount) || this.filtering) {
+        if (this.filtering) {
+            return true;
+        }
+        if (this.cursorPager) {
+            return !this.hasPrev;
+        }
+        if (!_.isNumber(this.startCount) || !_.isNumber(this.totalCount)) {
             return true;
         }
         return Number(this.startCount) <= 1;
@@ -12791,6 +12945,7 @@ class ListTableComponent {
         if (!size || size === this.pageSize) {
             return;
         }
+        this.svc.savePageSize(size);
         this.tableFilterService.changePageSize(size);
     }
     /** Re-fetch the current page (re-emits the page so the host reloads its data). */
@@ -12840,11 +12995,11 @@ class ListTableComponent {
         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"] }] }); }
+    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", hasNext: "hasNext", hasPrev: "hasPrev", 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", initialPageSize: "initialPageSize" }, 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          @if (!cursorPager) {\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          }\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-control-border, 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% - var(--lt-container-reserve, 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-control-border, 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;margin:var(--lt-toolbar-margin-y, 0) 0;padding:0 0 var(--lt-toolbar-pad-bottom, .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-control-border, 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-control-border, 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-control-border, 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-control-border, 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-control-border, 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"] }]
+            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          @if (!cursorPager) {\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          }\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-control-border, 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% - var(--lt-container-reserve, 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-control-border, 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;margin:var(--lt-toolbar-margin-y, 0) 0;padding:0 0 var(--lt-toolbar-pad-bottom, .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-control-border, 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-control-border, 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-control-border, 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-control-border, 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-control-border, 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: [{
@@ -12855,6 +13010,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], hasNext: [{
+                type: Input
+            }], hasPrev: [{
+                type: Input
             }], startCount: [{
                 type: Input
             }], endCount: [{
@@ -12894,6 +13053,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             }], filtersRow: [{
                 type: ViewChild,
                 args: ['filtersRow']
+            }], initialPageSize: [{
+                type: Input
             }] } });
 
 class Link {
@@ -15679,6 +15840,8 @@ class IdentitiesListPageComponent extends ListPageComponent {
         this.title = 'Identities';
         this.isLoading = false;
         this.formDataChanged = false;
+        this.tableId = 'identities';
+        this.initialPageSize = 50;
     }
     /** The new table consumes the declarative ListColumn set. */
     loadTableColumns() {
@@ -15859,11 +16022,11 @@ class IdentitiesListPageComponent extends ListPageComponent {
         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"] }] }); }
+    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]=\"tableId\" [initialPageSize]=\"initialPageSize\"\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", "tabsUseRouter", "activeTab"], outputs: ["actionClicked", "tabClicked"] }, { kind: "component", type: ListTableComponent, selector: "lib-list-table", inputs: ["tableId", "columns", "rowData", "isLoading", "options", "hasNext", "hasPrev", "startCount", "endCount", "totalCount", "filterApplied", "menuItems", "headerActions", "noItemsImage", "showNoItemsAdd", "noItemsReadonly", "accessDenied", "entityTypeName", "filterName", "filterColumn", "initialPageSize"], 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"] }]
+            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]=\"tableId\" [initialPageSize]=\"initialPageSize\"\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]
@@ -16462,9 +16625,9 @@ class ServiceFormService {
         this.errors = {};
         this.newConfigName = '';
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getServiceDataModel(formData, isUpdate);
+        const data = this.getServiceDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.zitiService.patch('services', data, formData.id, true);
@@ -16626,7 +16789,7 @@ class ServiceFormService {
             promises.push(this.zitiService.post('terminators', terminator));
         });
     }
-    getServiceDataModel(formData, isUpdate) {
+    getServiceDataModel(formData, isUpdate, originalData) {
         const saveModel = new Service$1();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -16635,7 +16798,7 @@ class ServiceFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     getConfigTypes() {
         this.zitiService.get('config-types', this.paging, []).then((result) => {
@@ -16971,9 +17134,9 @@ class ServicePolicyFormService {
         this.serviceNamedAttributesRequestId = 0;
         this.postureNamedAttributesRequestId = 0;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getServicePolicyDataModel(formData, isUpdate);
+        const data = this.getServicePolicyDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('service-policies', data, formData.id).then(async (result) => {
             const id = result?.data?.id || formData.id;
@@ -17081,7 +17244,7 @@ class ServicePolicyFormService {
             this.associatedPostureCheckNames = sortedUniq(this.associatedPostureCheckNames);
         });
     }
-    getServicePolicyDataModel(formData, isUpdate) {
+    getServicePolicyDataModel(formData, isUpdate, originalData) {
         const saveModel = new ServicePolicy$1();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -17090,7 +17253,7 @@ class ServicePolicyFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     copyToClipboard(val) {
         navigator.clipboard.writeText(val);
@@ -18572,7 +18735,7 @@ class IdentityFormComponent extends ProjectableForm {
             });
         }
         this.isLoading = true;
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             if (this.isModal) {
                 this.closeModal(true, true);
                 return;
@@ -21772,8 +21935,8 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         })
             .append('xhtml:body')
             .style('background', 'transparent')
-            .html(function (d) {
-            return `<div class="node-text-container"><span>${d.data.name}</span></div>`;
+            .html((d) => {
+            return `<div class="node-text-container"><span>${this.escapeHtml(d.data.name)}</span></div>`;
         });
         this.nodeUpdate = this.nodeEnter.merge(this.node);
         this.nodeUpdate
@@ -21992,7 +22155,11 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
         this.treetooltip.style('top', y);
         document.getElementById('tooltip').innerHTML = this.readTreeKeyValues(event, s);
     }
+    escapeHtml(value) {
+        return String(value == null ? '' : value).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+    }
     readTreeKeyValues(event, d) {
+        const self = this;
         const startIndex = d.data.name.indexOf('(');
         const finIndex = d.data.name.indexOf(')');
         const countStr = startIndex > 0 ? d.data.name.substring(startIndex + 1, finIndex) : 0;
@@ -22021,14 +22188,14 @@ class NetworkVisualizerComponent extends VisualizerServiceClass {
                 info =
                     info +
                         '<div class="prop-row"><div class="prop-name">' +
-                        k +
+                        self.escapeHtml(k) +
                         ':</div><div class="prop-val">' +
-                        d[k].join('<br> &nbsp;&nbsp; &nbsp;&nbsp;') +
+                        d[k].map((v) => self.escapeHtml(v)).join('<br> &nbsp;&nbsp; &nbsp;&nbsp;') +
                         '</div></div>';
             }
             else {
                 const propVal = d.data[k] || '';
-                info = info + '<div class="prop-row"><div class="prop-name">' + k + ':</div><div class="prop-val">' + propVal + '</div></div>';
+                info = info + '<div class="prop-row"><div class="prop-name">' + self.escapeHtml(k) + ':</div><div class="prop-val">' + self.escapeHtml(propVal) + '</div></div>';
             }
         });
         if (d.data.firstChild && d.data.firstChild === 'Yes' && countStr > this.maxObjectsPerNode - 1) {
@@ -22171,7 +22338,7 @@ class EdgeRouterFormComponent extends ProjectableForm {
             return;
         }
         this.isLoading = true;
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             if (result?.close) {
                 if (this.isModal) {
                     this.closeModal(true, true);
@@ -22244,16 +22411,13 @@ 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 (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"] }] }); }
+        ], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{
             type: Component,
@@ -22262,7 +22426,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 (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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -22292,9 +22456,9 @@ class TransitRouterFormService {
         this.associatedServices = [];
         this.associatedServiceNames = [];
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getEdgeRouterDataModel(formData, isUpdate);
+        const data = this.getEdgeRouterDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('transit-routers', data, formData.id).then(async (result) => {
             const id = result?.data?.id || formData.id;
@@ -22319,7 +22483,7 @@ class TransitRouterFormService {
             throw resp;
         });
     }
-    getEdgeRouterDataModel(formData, isUpdate) {
+    getEdgeRouterDataModel(formData, isUpdate, originalData) {
         const saveModel = new EdgeRouter();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -22328,7 +22492,7 @@ class TransitRouterFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id', 'badges'], isUpdate ? originalData : undefined);
     }
     getAuthPolicies() {
         const paging = {
@@ -22499,7 +22663,7 @@ class TransitRouterFormComponent extends ProjectableForm {
             return;
         }
         this.isLoading = true;
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             if (result?.close) {
                 if (this.isModal) {
                     this.closeModal(true, true);
@@ -23282,7 +23446,7 @@ class ServiceFormComponent extends ProjectableForm {
             return;
         }
         this.isLoading = true;
-        const serviceId = await this.svc.save(this.formData).then((result) => {
+        const serviceId = await this.svc.save(this.formData, this.initData).then((result) => {
             if (!isEmpty(result?.id)) {
                 this.formData = result;
                 this.initData = this.formData;
@@ -26043,7 +26207,7 @@ class ServicePolicyFormComponent extends ProjectableForm {
         }
         this.isLoading = true;
         this.applySelectedAttributes();
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             if (result?.close) {
                 this.closeModal(true, true);
             }
@@ -26182,9 +26346,9 @@ class EdgeRouterPolicyFormService {
         this.identityNamedAttributesRequestId = 0;
         this.edgeRouterNamedAttributesRequestId = 0;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getEdgeRouterPolicyDataModel(formData, isUpdate);
+        const data = this.getEdgeRouterPolicyDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('edge-router-policies', data, formData.id).then(async (result) => {
             const id = result?.data?.id || formData.id;
@@ -26347,7 +26511,7 @@ class EdgeRouterPolicyFormService {
             }
         });
     }
-    getEdgeRouterPolicyDataModel(formData, isUpdate) {
+    getEdgeRouterPolicyDataModel(formData, isUpdate, originalData) {
         const saveModel = new EdgeRouterPolicy();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -26356,7 +26520,7 @@ class EdgeRouterPolicyFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     copyToClipboard(val) {
         navigator.clipboard.writeText(val);
@@ -26561,7 +26725,7 @@ class EdgeRouterPolicyFormComponent extends ProjectableForm {
         }
         this.isLoading = true;
         this.applySelectedAttributes();
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             const data = result?.data?.id ? result.data : result;
             this._dataChange = false;
             if (!isEmpty(data.id)) {
@@ -27177,9 +27341,9 @@ class ServiceEdgeRouterPolicyFormService {
         this.serviceNamedAttributesRequestId = 0;
         this.edgeRouterNamedAttributesRequestId = 0;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getEdgeRouterPolicyDataModel(formData, isUpdate);
+        const data = this.getEdgeRouterPolicyDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('service-edge-router-policies', data, formData.id).then(async (result) => {
             const id = result?.data?.id || formData.id;
@@ -27325,7 +27489,7 @@ class ServiceEdgeRouterPolicyFormService {
             }
         });
     }
-    getEdgeRouterPolicyDataModel(formData, isUpdate) {
+    getEdgeRouterPolicyDataModel(formData, isUpdate, originalData) {
         const saveModel = new ServiceEdgeRouterPolicy();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -27334,7 +27498,7 @@ class ServiceEdgeRouterPolicyFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     copyToClipboard(val) {
         navigator.clipboard.writeText(val);
@@ -27534,7 +27698,7 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
         }
         this.isLoading = true;
         this.applySelectedAttributes();
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             const data = result?.data?.id ? result.data : result;
             this._dataChange = false;
             if (!isEmpty(data.id)) {
@@ -28044,9 +28208,9 @@ class ConfigurationService {
             //this.configSubscriptions.unsubscribe();
         }
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getConfigDataModel(formData, isUpdate);
+        const data = this.getConfigDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.patch('configs', data, formData.id, true);
@@ -28076,7 +28240,7 @@ class ConfigurationService {
             throw resp;
         });
     }
-    getConfigDataModel(formData, isUpdate) {
+    getConfigDataModel(formData, isUpdate, originalData) {
         const saveModel = new Config();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -28086,7 +28250,7 @@ class ConfigurationService {
             }
         });
         saveModel.data = this.validationService.redefineObject(saveModel.data);
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigurationService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: SchemaService }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigurationService, providedIn: 'root' }); }
@@ -28273,7 +28437,7 @@ class ConfigurationFormComponent extends ProjectableForm {
             this.isLoading = false;
             return;
         }
-        const configId = await this.svc.save(this.formData).then((result) => {
+        const configId = await this.svc.save(this.formData, this.initData).then((result) => {
             if (!isEmpty(result?.id)) {
                 this.formData = result;
                 this.initData = this.formData;
@@ -28779,9 +28943,9 @@ class JwtSignerFormService {
         this.errors = [];
         this.saveDisabled = false;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getJwtSignerDataModel(formData, isUpdate);
+        const data = this.getJwtSignerDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.put('external-jwt-signers', data, formData.id, true);
@@ -28811,7 +28975,7 @@ class JwtSignerFormService {
             throw resp;
         });
     }
-    getJwtSignerDataModel(formData, isUpdate) {
+    getJwtSignerDataModel(formData, isUpdate, originalData) {
         const saveModel = new JwtSigner();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -28820,7 +28984,7 @@ class JwtSignerFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: JwtSignerFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: JwtSignerFormService, providedIn: 'root' }); }
@@ -29083,7 +29247,7 @@ class JwtSignerFormComponent extends ProjectableForm {
         }
         const apiData = this.apiData;
         this.isLoading = true;
-        this.svc.save(apiData).then((result) => {
+        this.svc.save(apiData, this.initData).then((result) => {
             if (this.isModal) {
                 this.closeModal(true, true);
                 return;
@@ -29912,9 +30076,9 @@ class AuthPolicyFormService {
             this.jwtSignersLoading = false;
         });
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getAuthPolicyDataModel(formData, isUpdate);
+        const data = this.getAuthPolicyDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.put('auth-policies', data, formData.id, true);
@@ -29944,7 +30108,7 @@ class AuthPolicyFormService {
             throw resp;
         });
     }
-    getAuthPolicyDataModel(formData, isUpdate) {
+    getAuthPolicyDataModel(formData, isUpdate, originalData) {
         const saveModel = new AuthPolicy();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -29953,7 +30117,7 @@ class AuthPolicyFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthPolicyFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthPolicyFormService, providedIn: 'root' }); }
@@ -30097,7 +30261,7 @@ class AuthPolicyFormComponent extends ProjectableForm {
         const apiData = this.apiData;
         apiData.id = this.formData.id;
         this.isLoading = true;
-        this.svc.save(apiData).then((result) => {
+        this.svc.save(apiData, this.initData).then((result) => {
             if (this.isModal) {
                 this.closeModal(true, true);
                 return;
@@ -30712,7 +30876,7 @@ class CertificateAuthorityFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CertificateAuthorityFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CertificateAuthorityFormService, providedIn: 'root' }); }
@@ -31750,9 +31914,9 @@ class ConfigTypeFormService {
                 return this.configTypes[idx].schema;
         }
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getConfigTypeDataModel(formData, isUpdate);
+        const data = this.getConfigTypeDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.patch('config-types', data, formData.id, true);
@@ -31782,7 +31946,7 @@ class ConfigTypeFormService {
             throw resp;
         });
     }
-    getConfigTypeDataModel(formData, isUpdate) {
+    getConfigTypeDataModel(formData, isUpdate, originalData) {
         const saveModel = new ConfigType();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -31791,7 +31955,7 @@ class ConfigTypeFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigTypeFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: SchemaService }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigTypeFormService, providedIn: 'root' }); }
@@ -31950,7 +32114,7 @@ class ConfigTypeFormComponent extends ProjectableForm {
             this.isLoading = false;
             return;
         }
-        const configId = await this.svc.save(this.formData).then((result) => {
+        const configId = await this.svc.save(this.formData, this.initData).then((result) => {
             if (!isEmpty(result?.id)) {
                 this.formData = result;
                 this.initData = cloneDeep(this.formData);
@@ -32376,9 +32540,9 @@ class PostureCheckFormService {
         this.errors = [];
         this.saveDisabled = false;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getConfigTypeDataModel(formData, isUpdate);
+        const data = this.getConfigTypeDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.patch('posture-checks', data, formData.id, true);
@@ -32408,7 +32572,7 @@ class PostureCheckFormService {
             throw resp;
         });
     }
-    getConfigTypeDataModel(formData, isUpdate) {
+    getConfigTypeDataModel(formData, isUpdate, originalData) {
         const saveModel = new PostureCheck();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -32417,7 +32581,7 @@ class PostureCheckFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureCheckFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: SchemaService }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureCheckFormService, providedIn: 'root' }); }
@@ -32735,7 +32899,7 @@ class PostureCheckFormComponent extends ProjectableForm {
                 this.formData.processes = this.processMultiItems;
             }
         }
-        const configId = await this.svc.save(this.formData).then((result) => {
+        const configId = await this.svc.save(this.formData, this.initData).then((result) => {
             if (!isEmpty(result?.id)) {
                 this.formData = result;
                 this.initData = cloneDeep(this.formData);
@@ -41893,11 +42057,11 @@ class HeaderBarComponent {
         this.router.navigate(['/dashboard']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: HeaderBarComponent, deps: [{ token: i4.Router }, { token: i5.MatDialog }, { token: ZAC_LOGIN_SERVICE }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: HeaderBarComponent, isStandalone: false, selector: "lib-header-bar", inputs: { headerTitle: "headerTitle" }, ngImport: i0, template: "<header>\n  <div class=\"overlay\"></div>\n  <div class=\"left-side-buttons\">\n    <div class=\"apps-button clickable\" mattooltip=\"Select Application\" mattooltipposition=\"below\" mattooltipshowdelay=\"500\" (click)=\"goToDashboard()\">\n      <div class=\"icon\"></div>\n    </div>\n    <div class=\"divider-line\"></div>\n    <div class=\"header-title-wrapper\">\n      <div class=\"header-title-container\" (click)=\"goToDashboard()\">\n        <div class=\"header-title-label\">{{headerTitle}}</div>\n        <div class=\"title-text-row title-bottom-text\">By <a class=\"nf-name-text\" href=\"https://netfoundry.io\" target=\"_blank\">NetFoundry</a></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"right-side-buttons\">\n    <div\n      (click)=\"openQuickAdd()\"\n      [ngClass]=\"{ open: supportOpen }\"\n      class=\"clickable\"\n      id=\"QuickAddButton\"\n      matTooltip=\"Support\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      >\n      <div class=\"clicked\"></div>\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-Icon_Add\"></div>\n    </div>\n    <div\n      class=\"clickable\"\n      id=\"AttributesButton\"\n      matTooltip=\"Attributes Explorer\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      routerLink=\"/attributes/\"\n      >\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-hash\"></div>\n    </div>\n    <div\n      (click)=\"openAlerts()\"\n      class=\"clickable\"\n      id=\"RecentAlertsButton\"\n      matTooltip=\"Recent Alerts\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      >\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-Bell\"></div>\n    </div>\n    <div\n      class=\"clickable main\"\n      id=\"UserButton\"\n      (clickOutside)=\"closeProfileMenu()\"\n      (click)=\"openProfileMenu()\"\n      >\n      <div class=\"main clickable\"></div>\n      <div class=\"circle\"></div>\n      <div\n        [ngStyle]=\"{ 'background-image': 'url(' + profilePhoto + ')' }\"\n        class=\"icon icon-profile\"\n      ></div>\n      <div [ngClass]=\"{ open: profileOpen }\" class=\"header-menu\" id=\"UserMenu\">\n        @if (profileOpen) {\n          <div class=\"menutitle\">{{ username }}</div>\n        }\n        @if (profileOpen) {\n          <div\n            class=\"link\"\n            id=\"EditProfile\"\n            routerLink=\"/profile/\"\n            >\n            Edit Profile\n          </div>\n        }\n        @if (profileOpen) {\n          <div\n            class=\"link\"\n            id=\"PersonalSettings\"\n            routerLink=\"/settings/\"\n            >\n            Personal Settings\n          </div>\n        }\n        @if (profileOpen) {\n          <div (click)=\"confirmLogout()\" class=\"link\" id=\"LogoutButton\">Logout</div>\n        }\n      </div>\n    </div>\n  </div>\n</header>\n", styles: ["header{position:relative;top:0rem;left:0;bottom:unset;width:100%;height:var(--headerHeight);z-index:99999999;background:var(--formBackground);border-bottom-style:solid;border-bottom-color:var(--inputBorder);border-bottom-width:1px}header .overlay{width:100%;height:100%;position:absolute;z-index:1;opacity:1!important}header .left-side-buttons{position:absolute;top:0rem;left:0rem;right:0rem;width:50%;z-index:5;height:100%;padding-left:1.25rem;display:flex;align-items:center}header .left-side-buttons .apps-button .icon{width:2.25rem;height:2.25rem;position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center center;transition:.3s;top:unset;left:unset;background-image:url(/assets/svgs/ziti-logo.svg)}header .left-side-buttons #NavigationButton{height:1.5rem;width:1.625rem}header .left-side-buttons #NavigationButton .status{height:1.375rem;width:1.5rem;top:unset;left:unset;animation:none}header .left-side-buttons #NavigationButton .circle{height:1.5rem;width:1.625rem}header .left-side-buttons #NavigationButton.header-nav-icon{width:2.8125rem;height:2.75rem;cursor:pointer}header .left-side-buttons #NavigationButton.header-nav-icon .status{height:2.125rem;width:2.125rem;top:unset;left:unset;animation:none}header .left-side-buttons #NavigationButton.header-nav-icon .circle{height:2.625rem;width:2.625rem;top:unset;left:unset}header .left-side-buttons #NavigationButton.header-nav-icon.nav-logo .status{display:none}header .left-side-buttons #NavigationButton.header-nav-icon.nav-logo .icon{background-image:url(/assets/svgs/icon.svg);display:flex;top:unset;left:unset;height:2.125rem;width:2.125rem}header .right-side-buttons{position:absolute;right:0rem;bottom:unset;left:unset;z-index:5;width:50%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding-right:1.25rem}header .clickable{position:relative;clear:both;float:left;width:2.8125rem;height:3.125rem;display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:var(--transition)}header .clickable .icon{width:1.6875rem;height:1.6875rem;position:absolute;left:.625rem;top:.75rem;background-size:contain;background-repeat:no-repeat;background-position:center center;transition:.3s}header .clickable .icon:active{transform:scale(.95);transition:.3s}header .clickable .icon.icon-Bell{font-weight:600}header .clickable .icon:before{color:var(--headerButtonColor)!important}header .clickable .icon-profile{font-size:1.7rem;font-weight:600;margin-top:.075rem}header .clickable .icon-Bell{top:.65rem;left:.575rem}header .clickable .main{opacity:1;width:2.3125rem;height:2.3125rem;left:.5625rem;top:.5625rem;border-radius:2.3125rem;position:absolute;transition:var(--transition)}header .clickable .circle{opacity:0;z-index:-2;background-color:var(--white);width:2.8125rem;height:2.8125rem;left:1px;top:.1875rem;border-radius:2.0625rem;position:absolute;transition:var(--transition)}header .clickable.open .circle{opacity:.2}header .clickable:hover .circle{opacity:.2;background-color:var(--menu)}header .clickable:active .circle{opacity:.1}header .divider-line{height:2.8125rem;width:0;margin-right:.625rem;margin-left:.625rem;border-style:solid;border-width:1px;border-color:var(--inputBorder)}header .header-title-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;height:100%;padding-top:.875rem;padding-bottom:.75rem}header .header-title-wrapper .header-title-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;height:100%;cursor:pointer}header .header-title-wrapper .header-title-container .header-title-label{font-family:Russo One;text-align:center;line-height:1.5rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark));cursor:pointer;font-size:1.75rem;font-variant:small-caps;font-size-adjust:.46;word-spacing:-4px}header .header-breadcrumb{display:flex;align-items:center;justify-content:flex-start;height:100%}header .header-breadcrumb .breadcrumb-path-label{font-size:.875rem;font-weight:900;filter:brightness(var(--brightnessDark));color:var(--primary)}header .header-breadcrumb .breadcrumb-path-label.non-click{text-transform:capitalize}header .header-breadcrumb .breadcrumb-path-label:hover{text-decoration:underline;cursor:pointer}header .header-breadcrumb .breadcrumb-path-label:hover.non-click{text-decoration:none;cursor:default}header .header-breadcrumb .breadcrumb-path-divider{font-size:.875rem;font-weight:600;filter:brightness(var(--brightnessDark));text-transform:uppercase;color:var(--primary);margin-left:.3125rem;margin-right:.3125rem}header .icon{font-size:1.8125rem;text-align:center;color:#fff}header #ApplicationButton{width:3.125rem}header #ApplicationButton .icon{font-size:1.5625rem;height:2.3125rem;width:2.3125rem;display:flex;justify-content:center;align-items:center;border-radius:1.875rem;font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--primaryColor);color:var(--mainBackground);left:.4375rem;top:.4375rem}header #ApplicationButton .circle{left:.1875rem}header #ApplicationButton.nav-button-organization .icon:before{content:\"\\e948\"}header #ApplicationButton.nav-button-browzer .icon:before{content:\"\\e96a\"}header #ApplicationButton.nav-button-billing .icon:before{content:\"\\e932\"}#AlertButton .count{width:.8125rem;height:.8125rem;border-radius:50%;font-weight:400;font-family:Open Sans,Arial,sans-serif;background-color:var(--secondaryColor);z-index:20;color:var(--white);font-size:.5rem;line-height:.75rem;font-weight:700;position:absolute;right:.8125rem;top:.9375rem;text-align:center;box-shadow:var(--shadows)}#UserButton #UserMenu{position:absolute;top:2.5rem;right:.3125rem;bottom:unset;left:unset}#UserButton #UserMenu .menutitle{color:var(--lightText)}#UserButton #UserMenu .link{color:#fff}#UserButton #UserMenu.header-menu{background-color:var(--menu);border-radius:.4375rem;box-shadow:0 0 0 1px var(--shadow),0 .5rem 1rem var(--shadow);font-size:.875rem;font-weight:600;text-transform:uppercase;color:var(--white);letter-spacing:1px;height:0rem;opacity:0;transition:.2s;z-index:50;padding-bottom:.625rem;padding-top:.625rem}#UserButton #UserMenu.header-menu .link{cursor:pointer;line-height:2.25rem;white-space:nowrap;padding-left:1.25rem;padding-right:1.25rem;transition:.2s}#UserButton #UserMenu.header-menu .link:hover{background-color:var(--primaryColor)}#UserButton #UserMenu.header-menu.open{height:unset;opacity:1}#UserButton #UserMenu .menutitle{opacity:.8;white-space:nowrap;line-height:2.25rem;padding-left:1.25rem;padding-right:1.25rem}.title-text-row{color:var(--primaryColor)!important;filter:brightness(var(--brightnessDark));opacity:1;font-family:Russo One,Arial,sans-serif;font-size:3rem;font-weight:400!important;margin:0!important;text-align:center}.title-text-row.title-top-text{font-size:4.25rem!important;line-height:3.25rem;font-variant:small-caps;font-size-adjust:.47}.title-text-row.title-bottom-text{display:flex;justify-content:flex-start;align-items:baseline;gap:.175rem;font-size:1rem}.title-text-row.title-bottom-text .nf-name-text{font-variant:small-caps;font-size-adjust:.47;font-size:1.125rem;font-weight:400;color:var(--primaryColor)}.title-text-row.title-bottom-text .nf-name-text:hover{text-decoration:underline!important}\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: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: HeaderBarComponent, isStandalone: false, selector: "lib-header-bar", inputs: { headerTitle: "headerTitle" }, ngImport: i0, template: "<header>\n  <div class=\"overlay\"></div>\n  <div class=\"left-side-buttons\">\n    <div class=\"apps-button clickable\" mattooltip=\"Select Application\" mattooltipposition=\"below\" mattooltipshowdelay=\"500\" (click)=\"goToDashboard()\">\n      <div class=\"icon\"></div>\n    </div>\n    <div class=\"divider-line\"></div>\n    <div class=\"header-title-wrapper\">\n      <div class=\"header-title-container\" (click)=\"goToDashboard()\">\n        <div class=\"header-title-label\">{{headerTitle}}</div>\n        <div class=\"title-text-row title-bottom-text\">By <a class=\"nf-name-text\" href=\"https://netfoundry.io\" target=\"_blank\">NetFoundry</a></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"right-side-buttons\">\n    <div\n      (click)=\"openQuickAdd()\"\n      class=\"clickable\"\n      id=\"QuickAddButton\"\n      matTooltip=\"Add Entity\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      >\n      <div class=\"clicked\"></div>\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-Icon_Add\"></div>\n    </div>\n    <div\n      class=\"clickable\"\n      id=\"AttributesButton\"\n      matTooltip=\"Attributes Explorer\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      routerLink=\"/attributes/\"\n      >\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-hash\"></div>\n    </div>\n    <div\n      (click)=\"openAlerts()\"\n      class=\"clickable\"\n      id=\"RecentAlertsButton\"\n      matTooltip=\"Recent Alerts\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      >\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-Bell\"></div>\n    </div>\n    <div\n      class=\"clickable main\"\n      id=\"UserButton\"\n      (clickOutside)=\"closeProfileMenu()\"\n      (click)=\"openProfileMenu()\"\n      >\n      <div class=\"main clickable\"></div>\n      <div class=\"circle\"></div>\n      <div\n        [ngStyle]=\"{ 'background-image': 'url(' + profilePhoto + ')' }\"\n        class=\"icon icon-profile\"\n      ></div>\n      <div [ngClass]=\"{ open: profileOpen }\" class=\"header-menu\" id=\"UserMenu\">\n        @if (profileOpen) {\n          <div class=\"menutitle\">{{ username }}</div>\n        }\n        @if (profileOpen) {\n          <div\n            class=\"link\"\n            id=\"EditProfile\"\n            routerLink=\"/profile/\"\n            >\n            Edit Profile\n          </div>\n        }\n        @if (profileOpen) {\n          <div\n            class=\"link\"\n            id=\"PersonalSettings\"\n            routerLink=\"/settings/\"\n            >\n            Personal Settings\n          </div>\n        }\n        @if (profileOpen) {\n          <div (click)=\"confirmLogout()\" class=\"link\" id=\"LogoutButton\">Logout</div>\n        }\n      </div>\n    </div>\n  </div>\n</header>\n", styles: ["header{position:relative;top:0rem;left:0;bottom:unset;width:100%;height:var(--headerHeight);z-index:99999999;background:var(--formBackground);border-bottom-style:solid;border-bottom-color:var(--inputBorder);border-bottom-width:1px}header .overlay{width:100%;height:100%;position:absolute;z-index:1;opacity:1!important}header .left-side-buttons{position:absolute;top:0rem;left:0rem;right:0rem;width:50%;z-index:5;height:100%;padding-left:1.25rem;display:flex;align-items:center}header .left-side-buttons .apps-button .icon{width:2.25rem;height:2.25rem;position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center center;transition:.3s;top:unset;left:unset;background-image:url(/assets/svgs/ziti-logo.svg)}header .left-side-buttons #NavigationButton{height:1.5rem;width:1.625rem}header .left-side-buttons #NavigationButton .status{height:1.375rem;width:1.5rem;top:unset;left:unset;animation:none}header .left-side-buttons #NavigationButton .circle{height:1.5rem;width:1.625rem}header .left-side-buttons #NavigationButton.header-nav-icon{width:2.8125rem;height:2.75rem;cursor:pointer}header .left-side-buttons #NavigationButton.header-nav-icon .status{height:2.125rem;width:2.125rem;top:unset;left:unset;animation:none}header .left-side-buttons #NavigationButton.header-nav-icon .circle{height:2.625rem;width:2.625rem;top:unset;left:unset}header .left-side-buttons #NavigationButton.header-nav-icon.nav-logo .status{display:none}header .left-side-buttons #NavigationButton.header-nav-icon.nav-logo .icon{background-image:url(/assets/svgs/icon.svg);display:flex;top:unset;left:unset;height:2.125rem;width:2.125rem}header .right-side-buttons{position:absolute;right:0rem;bottom:unset;left:unset;z-index:5;width:50%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding-right:1.25rem}header .clickable{position:relative;clear:both;float:left;width:2.8125rem;height:3.125rem;display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:var(--transition)}header .clickable .icon{width:1.6875rem;height:1.6875rem;position:absolute;left:.625rem;top:.75rem;background-size:contain;background-repeat:no-repeat;background-position:center center;transition:.3s}header .clickable .icon:active{transform:scale(.95);transition:.3s}header .clickable .icon.icon-Bell{font-weight:600}header .clickable .icon:before{color:var(--headerButtonColor)!important}header .clickable .icon-profile{font-size:1.7rem;font-weight:600;margin-top:.075rem}header .clickable .icon-Bell{top:.65rem;left:.575rem}header .clickable .main{opacity:1;width:2.3125rem;height:2.3125rem;left:.5625rem;top:.5625rem;border-radius:2.3125rem;position:absolute;transition:var(--transition)}header .clickable .circle{opacity:0;z-index:-2;background-color:var(--white);width:2.8125rem;height:2.8125rem;left:1px;top:.1875rem;border-radius:2.0625rem;position:absolute;transition:var(--transition)}header .clickable.open .circle{opacity:.2}header .clickable:hover .circle{opacity:.2;background-color:var(--menu)}header .clickable:active .circle{opacity:.1}header .divider-line{height:2.8125rem;width:0;margin-right:.625rem;margin-left:.625rem;border-style:solid;border-width:1px;border-color:var(--inputBorder)}header .header-title-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;height:100%;padding-top:.875rem;padding-bottom:.75rem}header .header-title-wrapper .header-title-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;height:100%;cursor:pointer}header .header-title-wrapper .header-title-container .header-title-label{font-family:Russo One;text-align:center;line-height:1.5rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark));cursor:pointer;font-size:1.75rem;font-variant:small-caps;font-size-adjust:.46;word-spacing:-4px}header .header-breadcrumb{display:flex;align-items:center;justify-content:flex-start;height:100%}header .header-breadcrumb .breadcrumb-path-label{font-size:.875rem;font-weight:900;filter:brightness(var(--brightnessDark));color:var(--primary)}header .header-breadcrumb .breadcrumb-path-label.non-click{text-transform:capitalize}header .header-breadcrumb .breadcrumb-path-label:hover{text-decoration:underline;cursor:pointer}header .header-breadcrumb .breadcrumb-path-label:hover.non-click{text-decoration:none;cursor:default}header .header-breadcrumb .breadcrumb-path-divider{font-size:.875rem;font-weight:600;filter:brightness(var(--brightnessDark));text-transform:uppercase;color:var(--primary);margin-left:.3125rem;margin-right:.3125rem}header .icon{font-size:1.8125rem;text-align:center;color:#fff}header #ApplicationButton{width:3.125rem}header #ApplicationButton .icon{font-size:1.5625rem;height:2.3125rem;width:2.3125rem;display:flex;justify-content:center;align-items:center;border-radius:1.875rem;font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--primaryColor);color:var(--mainBackground);left:.4375rem;top:.4375rem}header #ApplicationButton .circle{left:.1875rem}header #ApplicationButton.nav-button-organization .icon:before{content:\"\\e948\"}header #ApplicationButton.nav-button-browzer .icon:before{content:\"\\e96a\"}header #ApplicationButton.nav-button-billing .icon:before{content:\"\\e932\"}#AlertButton .count{width:.8125rem;height:.8125rem;border-radius:50%;font-weight:400;font-family:Open Sans,Arial,sans-serif;background-color:var(--secondaryColor);z-index:20;color:var(--white);font-size:.5rem;line-height:.75rem;font-weight:700;position:absolute;right:.8125rem;top:.9375rem;text-align:center;box-shadow:var(--shadows)}#UserButton #UserMenu{position:absolute;top:2.5rem;right:.3125rem;bottom:unset;left:unset}#UserButton #UserMenu .menutitle{color:var(--lightText)}#UserButton #UserMenu .link{color:#fff}#UserButton #UserMenu.header-menu{background-color:var(--menu);border-radius:.4375rem;box-shadow:0 0 0 1px var(--shadow),0 .5rem 1rem var(--shadow);font-size:.875rem;font-weight:600;text-transform:uppercase;color:var(--white);letter-spacing:1px;height:0rem;opacity:0;transition:.2s;z-index:50;padding-bottom:.625rem;padding-top:.625rem}#UserButton #UserMenu.header-menu .link{cursor:pointer;line-height:2.25rem;white-space:nowrap;padding-left:1.25rem;padding-right:1.25rem;transition:.2s}#UserButton #UserMenu.header-menu .link:hover{background-color:var(--primaryColor)}#UserButton #UserMenu.header-menu.open{height:unset;opacity:1}#UserButton #UserMenu .menutitle{opacity:.8;white-space:nowrap;line-height:2.25rem;padding-left:1.25rem;padding-right:1.25rem}.title-text-row{color:var(--primaryColor)!important;filter:brightness(var(--brightnessDark));opacity:1;font-family:Russo One,Arial,sans-serif;font-size:3rem;font-weight:400!important;margin:0!important;text-align:center}.title-text-row.title-top-text{font-size:4.25rem!important;line-height:3.25rem;font-variant:small-caps;font-size-adjust:.47}.title-text-row.title-bottom-text{display:flex;justify-content:flex-start;align-items:baseline;gap:.175rem;font-size:1rem}.title-text-row.title-bottom-text .nf-name-text{font-variant:small-caps;font-size-adjust:.47;font-size:1.125rem;font-weight:400;color:var(--primaryColor)}.title-text-row.title-bottom-text .nf-name-text:hover{text-decoration:underline!important}\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: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { 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: HeaderBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-header-bar', standalone: false, template: "<header>\n  <div class=\"overlay\"></div>\n  <div class=\"left-side-buttons\">\n    <div class=\"apps-button clickable\" mattooltip=\"Select Application\" mattooltipposition=\"below\" mattooltipshowdelay=\"500\" (click)=\"goToDashboard()\">\n      <div class=\"icon\"></div>\n    </div>\n    <div class=\"divider-line\"></div>\n    <div class=\"header-title-wrapper\">\n      <div class=\"header-title-container\" (click)=\"goToDashboard()\">\n        <div class=\"header-title-label\">{{headerTitle}}</div>\n        <div class=\"title-text-row title-bottom-text\">By <a class=\"nf-name-text\" href=\"https://netfoundry.io\" target=\"_blank\">NetFoundry</a></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"right-side-buttons\">\n    <div\n      (click)=\"openQuickAdd()\"\n      [ngClass]=\"{ open: supportOpen }\"\n      class=\"clickable\"\n      id=\"QuickAddButton\"\n      matTooltip=\"Support\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      >\n      <div class=\"clicked\"></div>\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-Icon_Add\"></div>\n    </div>\n    <div\n      class=\"clickable\"\n      id=\"AttributesButton\"\n      matTooltip=\"Attributes Explorer\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      routerLink=\"/attributes/\"\n      >\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-hash\"></div>\n    </div>\n    <div\n      (click)=\"openAlerts()\"\n      class=\"clickable\"\n      id=\"RecentAlertsButton\"\n      matTooltip=\"Recent Alerts\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      >\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-Bell\"></div>\n    </div>\n    <div\n      class=\"clickable main\"\n      id=\"UserButton\"\n      (clickOutside)=\"closeProfileMenu()\"\n      (click)=\"openProfileMenu()\"\n      >\n      <div class=\"main clickable\"></div>\n      <div class=\"circle\"></div>\n      <div\n        [ngStyle]=\"{ 'background-image': 'url(' + profilePhoto + ')' }\"\n        class=\"icon icon-profile\"\n      ></div>\n      <div [ngClass]=\"{ open: profileOpen }\" class=\"header-menu\" id=\"UserMenu\">\n        @if (profileOpen) {\n          <div class=\"menutitle\">{{ username }}</div>\n        }\n        @if (profileOpen) {\n          <div\n            class=\"link\"\n            id=\"EditProfile\"\n            routerLink=\"/profile/\"\n            >\n            Edit Profile\n          </div>\n        }\n        @if (profileOpen) {\n          <div\n            class=\"link\"\n            id=\"PersonalSettings\"\n            routerLink=\"/settings/\"\n            >\n            Personal Settings\n          </div>\n        }\n        @if (profileOpen) {\n          <div (click)=\"confirmLogout()\" class=\"link\" id=\"LogoutButton\">Logout</div>\n        }\n      </div>\n    </div>\n  </div>\n</header>\n", styles: ["header{position:relative;top:0rem;left:0;bottom:unset;width:100%;height:var(--headerHeight);z-index:99999999;background:var(--formBackground);border-bottom-style:solid;border-bottom-color:var(--inputBorder);border-bottom-width:1px}header .overlay{width:100%;height:100%;position:absolute;z-index:1;opacity:1!important}header .left-side-buttons{position:absolute;top:0rem;left:0rem;right:0rem;width:50%;z-index:5;height:100%;padding-left:1.25rem;display:flex;align-items:center}header .left-side-buttons .apps-button .icon{width:2.25rem;height:2.25rem;position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center center;transition:.3s;top:unset;left:unset;background-image:url(/assets/svgs/ziti-logo.svg)}header .left-side-buttons #NavigationButton{height:1.5rem;width:1.625rem}header .left-side-buttons #NavigationButton .status{height:1.375rem;width:1.5rem;top:unset;left:unset;animation:none}header .left-side-buttons #NavigationButton .circle{height:1.5rem;width:1.625rem}header .left-side-buttons #NavigationButton.header-nav-icon{width:2.8125rem;height:2.75rem;cursor:pointer}header .left-side-buttons #NavigationButton.header-nav-icon .status{height:2.125rem;width:2.125rem;top:unset;left:unset;animation:none}header .left-side-buttons #NavigationButton.header-nav-icon .circle{height:2.625rem;width:2.625rem;top:unset;left:unset}header .left-side-buttons #NavigationButton.header-nav-icon.nav-logo .status{display:none}header .left-side-buttons #NavigationButton.header-nav-icon.nav-logo .icon{background-image:url(/assets/svgs/icon.svg);display:flex;top:unset;left:unset;height:2.125rem;width:2.125rem}header .right-side-buttons{position:absolute;right:0rem;bottom:unset;left:unset;z-index:5;width:50%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding-right:1.25rem}header .clickable{position:relative;clear:both;float:left;width:2.8125rem;height:3.125rem;display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:var(--transition)}header .clickable .icon{width:1.6875rem;height:1.6875rem;position:absolute;left:.625rem;top:.75rem;background-size:contain;background-repeat:no-repeat;background-position:center center;transition:.3s}header .clickable .icon:active{transform:scale(.95);transition:.3s}header .clickable .icon.icon-Bell{font-weight:600}header .clickable .icon:before{color:var(--headerButtonColor)!important}header .clickable .icon-profile{font-size:1.7rem;font-weight:600;margin-top:.075rem}header .clickable .icon-Bell{top:.65rem;left:.575rem}header .clickable .main{opacity:1;width:2.3125rem;height:2.3125rem;left:.5625rem;top:.5625rem;border-radius:2.3125rem;position:absolute;transition:var(--transition)}header .clickable .circle{opacity:0;z-index:-2;background-color:var(--white);width:2.8125rem;height:2.8125rem;left:1px;top:.1875rem;border-radius:2.0625rem;position:absolute;transition:var(--transition)}header .clickable.open .circle{opacity:.2}header .clickable:hover .circle{opacity:.2;background-color:var(--menu)}header .clickable:active .circle{opacity:.1}header .divider-line{height:2.8125rem;width:0;margin-right:.625rem;margin-left:.625rem;border-style:solid;border-width:1px;border-color:var(--inputBorder)}header .header-title-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;height:100%;padding-top:.875rem;padding-bottom:.75rem}header .header-title-wrapper .header-title-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;height:100%;cursor:pointer}header .header-title-wrapper .header-title-container .header-title-label{font-family:Russo One;text-align:center;line-height:1.5rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark));cursor:pointer;font-size:1.75rem;font-variant:small-caps;font-size-adjust:.46;word-spacing:-4px}header .header-breadcrumb{display:flex;align-items:center;justify-content:flex-start;height:100%}header .header-breadcrumb .breadcrumb-path-label{font-size:.875rem;font-weight:900;filter:brightness(var(--brightnessDark));color:var(--primary)}header .header-breadcrumb .breadcrumb-path-label.non-click{text-transform:capitalize}header .header-breadcrumb .breadcrumb-path-label:hover{text-decoration:underline;cursor:pointer}header .header-breadcrumb .breadcrumb-path-label:hover.non-click{text-decoration:none;cursor:default}header .header-breadcrumb .breadcrumb-path-divider{font-size:.875rem;font-weight:600;filter:brightness(var(--brightnessDark));text-transform:uppercase;color:var(--primary);margin-left:.3125rem;margin-right:.3125rem}header .icon{font-size:1.8125rem;text-align:center;color:#fff}header #ApplicationButton{width:3.125rem}header #ApplicationButton .icon{font-size:1.5625rem;height:2.3125rem;width:2.3125rem;display:flex;justify-content:center;align-items:center;border-radius:1.875rem;font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--primaryColor);color:var(--mainBackground);left:.4375rem;top:.4375rem}header #ApplicationButton .circle{left:.1875rem}header #ApplicationButton.nav-button-organization .icon:before{content:\"\\e948\"}header #ApplicationButton.nav-button-browzer .icon:before{content:\"\\e96a\"}header #ApplicationButton.nav-button-billing .icon:before{content:\"\\e932\"}#AlertButton .count{width:.8125rem;height:.8125rem;border-radius:50%;font-weight:400;font-family:Open Sans,Arial,sans-serif;background-color:var(--secondaryColor);z-index:20;color:var(--white);font-size:.5rem;line-height:.75rem;font-weight:700;position:absolute;right:.8125rem;top:.9375rem;text-align:center;box-shadow:var(--shadows)}#UserButton #UserMenu{position:absolute;top:2.5rem;right:.3125rem;bottom:unset;left:unset}#UserButton #UserMenu .menutitle{color:var(--lightText)}#UserButton #UserMenu .link{color:#fff}#UserButton #UserMenu.header-menu{background-color:var(--menu);border-radius:.4375rem;box-shadow:0 0 0 1px var(--shadow),0 .5rem 1rem var(--shadow);font-size:.875rem;font-weight:600;text-transform:uppercase;color:var(--white);letter-spacing:1px;height:0rem;opacity:0;transition:.2s;z-index:50;padding-bottom:.625rem;padding-top:.625rem}#UserButton #UserMenu.header-menu .link{cursor:pointer;line-height:2.25rem;white-space:nowrap;padding-left:1.25rem;padding-right:1.25rem;transition:.2s}#UserButton #UserMenu.header-menu .link:hover{background-color:var(--primaryColor)}#UserButton #UserMenu.header-menu.open{height:unset;opacity:1}#UserButton #UserMenu .menutitle{opacity:.8;white-space:nowrap;line-height:2.25rem;padding-left:1.25rem;padding-right:1.25rem}.title-text-row{color:var(--primaryColor)!important;filter:brightness(var(--brightnessDark));opacity:1;font-family:Russo One,Arial,sans-serif;font-size:3rem;font-weight:400!important;margin:0!important;text-align:center}.title-text-row.title-top-text{font-size:4.25rem!important;line-height:3.25rem;font-variant:small-caps;font-size-adjust:.47}.title-text-row.title-bottom-text{display:flex;justify-content:flex-start;align-items:baseline;gap:.175rem;font-size:1rem}.title-text-row.title-bottom-text .nf-name-text{font-variant:small-caps;font-size-adjust:.47;font-size:1.125rem;font-weight:400;color:var(--primaryColor)}.title-text-row.title-bottom-text .nf-name-text:hover{text-decoration:underline!important}\n"] }]
+            args: [{ selector: 'lib-header-bar', standalone: false, template: "<header>\n  <div class=\"overlay\"></div>\n  <div class=\"left-side-buttons\">\n    <div class=\"apps-button clickable\" mattooltip=\"Select Application\" mattooltipposition=\"below\" mattooltipshowdelay=\"500\" (click)=\"goToDashboard()\">\n      <div class=\"icon\"></div>\n    </div>\n    <div class=\"divider-line\"></div>\n    <div class=\"header-title-wrapper\">\n      <div class=\"header-title-container\" (click)=\"goToDashboard()\">\n        <div class=\"header-title-label\">{{headerTitle}}</div>\n        <div class=\"title-text-row title-bottom-text\">By <a class=\"nf-name-text\" href=\"https://netfoundry.io\" target=\"_blank\">NetFoundry</a></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"right-side-buttons\">\n    <div\n      (click)=\"openQuickAdd()\"\n      class=\"clickable\"\n      id=\"QuickAddButton\"\n      matTooltip=\"Add Entity\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      >\n      <div class=\"clicked\"></div>\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-Icon_Add\"></div>\n    </div>\n    <div\n      class=\"clickable\"\n      id=\"AttributesButton\"\n      matTooltip=\"Attributes Explorer\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      routerLink=\"/attributes/\"\n      >\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-hash\"></div>\n    </div>\n    <div\n      (click)=\"openAlerts()\"\n      class=\"clickable\"\n      id=\"RecentAlertsButton\"\n      matTooltip=\"Recent Alerts\"\n      matTooltipPosition=\"below\"\n      matTooltipShowDelay=\"500\"\n      >\n      <div class=\"circle\"></div>\n      <div class=\"icon icon-Bell\"></div>\n    </div>\n    <div\n      class=\"clickable main\"\n      id=\"UserButton\"\n      (clickOutside)=\"closeProfileMenu()\"\n      (click)=\"openProfileMenu()\"\n      >\n      <div class=\"main clickable\"></div>\n      <div class=\"circle\"></div>\n      <div\n        [ngStyle]=\"{ 'background-image': 'url(' + profilePhoto + ')' }\"\n        class=\"icon icon-profile\"\n      ></div>\n      <div [ngClass]=\"{ open: profileOpen }\" class=\"header-menu\" id=\"UserMenu\">\n        @if (profileOpen) {\n          <div class=\"menutitle\">{{ username }}</div>\n        }\n        @if (profileOpen) {\n          <div\n            class=\"link\"\n            id=\"EditProfile\"\n            routerLink=\"/profile/\"\n            >\n            Edit Profile\n          </div>\n        }\n        @if (profileOpen) {\n          <div\n            class=\"link\"\n            id=\"PersonalSettings\"\n            routerLink=\"/settings/\"\n            >\n            Personal Settings\n          </div>\n        }\n        @if (profileOpen) {\n          <div (click)=\"confirmLogout()\" class=\"link\" id=\"LogoutButton\">Logout</div>\n        }\n      </div>\n    </div>\n  </div>\n</header>\n", styles: ["header{position:relative;top:0rem;left:0;bottom:unset;width:100%;height:var(--headerHeight);z-index:99999999;background:var(--formBackground);border-bottom-style:solid;border-bottom-color:var(--inputBorder);border-bottom-width:1px}header .overlay{width:100%;height:100%;position:absolute;z-index:1;opacity:1!important}header .left-side-buttons{position:absolute;top:0rem;left:0rem;right:0rem;width:50%;z-index:5;height:100%;padding-left:1.25rem;display:flex;align-items:center}header .left-side-buttons .apps-button .icon{width:2.25rem;height:2.25rem;position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center center;transition:.3s;top:unset;left:unset;background-image:url(/assets/svgs/ziti-logo.svg)}header .left-side-buttons #NavigationButton{height:1.5rem;width:1.625rem}header .left-side-buttons #NavigationButton .status{height:1.375rem;width:1.5rem;top:unset;left:unset;animation:none}header .left-side-buttons #NavigationButton .circle{height:1.5rem;width:1.625rem}header .left-side-buttons #NavigationButton.header-nav-icon{width:2.8125rem;height:2.75rem;cursor:pointer}header .left-side-buttons #NavigationButton.header-nav-icon .status{height:2.125rem;width:2.125rem;top:unset;left:unset;animation:none}header .left-side-buttons #NavigationButton.header-nav-icon .circle{height:2.625rem;width:2.625rem;top:unset;left:unset}header .left-side-buttons #NavigationButton.header-nav-icon.nav-logo .status{display:none}header .left-side-buttons #NavigationButton.header-nav-icon.nav-logo .icon{background-image:url(/assets/svgs/icon.svg);display:flex;top:unset;left:unset;height:2.125rem;width:2.125rem}header .right-side-buttons{position:absolute;right:0rem;bottom:unset;left:unset;z-index:5;width:50%;height:100%;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding-right:1.25rem}header .clickable{position:relative;clear:both;float:left;width:2.8125rem;height:3.125rem;display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:var(--transition)}header .clickable .icon{width:1.6875rem;height:1.6875rem;position:absolute;left:.625rem;top:.75rem;background-size:contain;background-repeat:no-repeat;background-position:center center;transition:.3s}header .clickable .icon:active{transform:scale(.95);transition:.3s}header .clickable .icon.icon-Bell{font-weight:600}header .clickable .icon:before{color:var(--headerButtonColor)!important}header .clickable .icon-profile{font-size:1.7rem;font-weight:600;margin-top:.075rem}header .clickable .icon-Bell{top:.65rem;left:.575rem}header .clickable .main{opacity:1;width:2.3125rem;height:2.3125rem;left:.5625rem;top:.5625rem;border-radius:2.3125rem;position:absolute;transition:var(--transition)}header .clickable .circle{opacity:0;z-index:-2;background-color:var(--white);width:2.8125rem;height:2.8125rem;left:1px;top:.1875rem;border-radius:2.0625rem;position:absolute;transition:var(--transition)}header .clickable.open .circle{opacity:.2}header .clickable:hover .circle{opacity:.2;background-color:var(--menu)}header .clickable:active .circle{opacity:.1}header .divider-line{height:2.8125rem;width:0;margin-right:.625rem;margin-left:.625rem;border-style:solid;border-width:1px;border-color:var(--inputBorder)}header .header-title-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;height:100%;padding-top:.875rem;padding-bottom:.75rem}header .header-title-wrapper .header-title-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;height:100%;cursor:pointer}header .header-title-wrapper .header-title-container .header-title-label{font-family:Russo One;text-align:center;line-height:1.5rem;color:var(--primaryColor);filter:brightness(var(--brightnessDark));cursor:pointer;font-size:1.75rem;font-variant:small-caps;font-size-adjust:.46;word-spacing:-4px}header .header-breadcrumb{display:flex;align-items:center;justify-content:flex-start;height:100%}header .header-breadcrumb .breadcrumb-path-label{font-size:.875rem;font-weight:900;filter:brightness(var(--brightnessDark));color:var(--primary)}header .header-breadcrumb .breadcrumb-path-label.non-click{text-transform:capitalize}header .header-breadcrumb .breadcrumb-path-label:hover{text-decoration:underline;cursor:pointer}header .header-breadcrumb .breadcrumb-path-label:hover.non-click{text-decoration:none;cursor:default}header .header-breadcrumb .breadcrumb-path-divider{font-size:.875rem;font-weight:600;filter:brightness(var(--brightnessDark));text-transform:uppercase;color:var(--primary);margin-left:.3125rem;margin-right:.3125rem}header .icon{font-size:1.8125rem;text-align:center;color:#fff}header #ApplicationButton{width:3.125rem}header #ApplicationButton .icon{font-size:1.5625rem;height:2.3125rem;width:2.3125rem;display:flex;justify-content:center;align-items:center;border-radius:1.875rem;font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--primaryColor);color:var(--mainBackground);left:.4375rem;top:.4375rem}header #ApplicationButton .circle{left:.1875rem}header #ApplicationButton.nav-button-organization .icon:before{content:\"\\e948\"}header #ApplicationButton.nav-button-browzer .icon:before{content:\"\\e96a\"}header #ApplicationButton.nav-button-billing .icon:before{content:\"\\e932\"}#AlertButton .count{width:.8125rem;height:.8125rem;border-radius:50%;font-weight:400;font-family:Open Sans,Arial,sans-serif;background-color:var(--secondaryColor);z-index:20;color:var(--white);font-size:.5rem;line-height:.75rem;font-weight:700;position:absolute;right:.8125rem;top:.9375rem;text-align:center;box-shadow:var(--shadows)}#UserButton #UserMenu{position:absolute;top:2.5rem;right:.3125rem;bottom:unset;left:unset}#UserButton #UserMenu .menutitle{color:var(--lightText)}#UserButton #UserMenu .link{color:#fff}#UserButton #UserMenu.header-menu{background-color:var(--menu);border-radius:.4375rem;box-shadow:0 0 0 1px var(--shadow),0 .5rem 1rem var(--shadow);font-size:.875rem;font-weight:600;text-transform:uppercase;color:var(--white);letter-spacing:1px;height:0rem;opacity:0;transition:.2s;z-index:50;padding-bottom:.625rem;padding-top:.625rem}#UserButton #UserMenu.header-menu .link{cursor:pointer;line-height:2.25rem;white-space:nowrap;padding-left:1.25rem;padding-right:1.25rem;transition:.2s}#UserButton #UserMenu.header-menu .link:hover{background-color:var(--primaryColor)}#UserButton #UserMenu.header-menu.open{height:unset;opacity:1}#UserButton #UserMenu .menutitle{opacity:.8;white-space:nowrap;line-height:2.25rem;padding-left:1.25rem;padding-right:1.25rem}.title-text-row{color:var(--primaryColor)!important;filter:brightness(var(--brightnessDark));opacity:1;font-family:Russo One,Arial,sans-serif;font-size:3rem;font-weight:400!important;margin:0!important;text-align:center}.title-text-row.title-top-text{font-size:4.25rem!important;line-height:3.25rem;font-variant:small-caps;font-size-adjust:.47}.title-text-row.title-bottom-text{display:flex;justify-content:flex-start;align-items:baseline;gap:.175rem;font-size:1rem}.title-text-row.title-bottom-text .nf-name-text{font-variant:small-caps;font-size-adjust:.47;font-size:1.125rem;font-weight:400;color:var(--primaryColor)}.title-text-row.title-bottom-text .nf-name-text:hover{text-decoration:underline!important}\n"] }]
         }], ctorParameters: () => [{ type: i4.Router }, { type: i5.MatDialog }, { type: LoginServiceClass, decorators: [{
                     type: Inject,
                     args: [ZAC_LOGIN_SERVICE]
@@ -42137,7 +42301,8 @@ class OpenZitiConsoleLibModule {
             FilterSelectComponent,
             FilterSelectOptionTemplateDirective,
             FilterSelectTriggerTemplateDirective,
-            ListTableComponent] }); }
+            ListTableComponent,
+            ListTableHeaderComponent] }); }
     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: {} },
@@ -42370,7 +42535,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         FilterSelectComponent,
                         FilterSelectOptionTemplateDirective,
                         FilterSelectTriggerTemplateDirective,
-                        ListTableComponent
+                        ListTableComponent,
+                        ListTableHeaderComponent
                     ], imports: [
                         CommonModule,
                         FormsModule,
@@ -42792,6 +42958,10 @@ class NodeDataService extends ZitiDataService {
                     paging.rawFilter = true;
                     filterVal = this.getAttributeFilter(filter.value, filter.columnId);
                     break;
+                case 'MULTISELECT':
+                    paging.rawFilter = true;
+                    filterVal = this.getMultiSelectFilter(filter.value, filter.columnId, filter.semantic);
+                    break;
                 default:
                     filterVal = `${filter.columnId} contains "${filter.value}"`;
                     break;
@@ -43233,6 +43403,9 @@ class ZitiControllerDataService extends ZitiDataService {
                 case 'ATTRIBUTE':
                     filterVal = this.getAttributeFilter(filter.value, filter.columnId, filter.semantic);
                     break;
+                case 'MULTISELECT':
+                    filterVal = this.getMultiSelectFilter(filter.value, filter.columnId, filter.semantic);
+                    break;
                 case 'BOOLEAN':
                     filterVal = `${filter.columnId}=${filter.value}`;
                     break;
@@ -43859,7 +44032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 */
 
 const ZAC_VERSION = {
-    "version": "4.5.3"
+    "version": "4.5.5"
 };
 
 /*
@@ -43870,5 +44043,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, 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 };
+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, ListTableHeaderComponent, 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