@openziti/ziti-console-lib 1.6.0 → 1.7.0

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

@@ -1800,6 +1800,27 @@ class ListTableService {
     pageSizeKey() {
         return `lt_${this.tableId}_page_size`;
     }
+    treeVariantKey() {
+        return `lt_${this.tableId}_tree_variant`;
+    }
+    /** Returns the saved tree layout ('card' | 'flat'), or `fallback` if none. */
+    restoreTreeVariant(fallback) {
+        try {
+            const raw = localStorage.getItem(this.treeVariantKey());
+            return raw === 'card' || raw === 'flat' ? raw : fallback;
+        }
+        catch {
+            return fallback;
+        }
+    }
+    saveTreeVariant(variant) {
+        try {
+            localStorage.setItem(this.treeVariantKey(), variant);
+        }
+        catch {
+            // ignore
+        }
+    }
     static pageSizeKeyFor(tableId) {
         return `lt_${tableId}_page_size`;
     }
@@ -1830,66 +1851,100 @@ class ListTableService {
      * 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
+    /** Parses a stored JSON value, or null when missing/unavailable/malformed. */
+    readJson(key) {
         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];
-                    }
-                });
-            }
+            const raw = localStorage.getItem(key);
+            return raw ? JSON.parse(raw) : null;
         }
         catch {
-            // ignore malformed / unavailable storage
+            return null;
         }
-        // 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);
+    }
+    /** Applies a widths map then a persisted order/visibility list onto a fresh copy of
+     *  `columns`. Shared by the top-level and per-depth restore paths. */
+    mergePersistedColumns(columns, widths, state) {
+        let cols = columns.map((c) => ({ ...c }));
+        cols.forEach((c) => {
+            if (widths[c.key] != null) {
+                c.width = widths[c.key];
+            }
+        });
+        if (state.length) {
+            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;
                     }
-                });
-                cols.forEach((c) => {
-                    if (!ordered.includes(c)) {
-                        ordered.push(c);
+                    if (s.width != null) {
+                        found.width = s.width;
                     }
-                });
-                if (ordered.length) {
-                    cols = ordered;
+                    ordered.push(found);
                 }
-            }
-        }
-        catch {
-            // ignore malformed / unavailable storage
+            });
+            cols.forEach((c) => {
+                if (!ordered.includes(c)) {
+                    ordered.push(c);
+                }
+            });
+            cols = ordered;
         }
         return cols;
     }
+    /** Order + visibility + width entries for one set of columns. */
+    columnStateEntries(columns) {
+        return columns.map((c) => ({ colId: c.key, hide: !!c.hidden, width: c.width }));
+    }
+    applyPersistedState(columns) {
+        const widths = this.readJson(this.widthsKey()) || {};
+        const state = this.readJson(this.stateKey()) || [];
+        return this.mergePersistedColumns(columns, widths, state);
+    }
     /** 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));
+            localStorage.setItem(this.stateKey(), JSON.stringify(this.columnStateEntries(columns)));
         }
         catch {
             // ignore
         }
     }
+    // ---- nested (per-depth) child columns: same contract as above, keyed by level ----
+    childStateKey() {
+        return `lt_${this.tableId}_child_state`;
+    }
+    childWidthsKey() {
+        return `lt_${this.tableId}_child_widths`;
+    }
+    /** Applies persisted order/visibility/width for one nested depth to its columns. */
+    applyPersistedChildState(level, columns) {
+        const widths = (this.readJson(this.childWidthsKey()) || {})[level] || {};
+        const state = (this.readJson(this.childStateKey()) || {})[level] || [];
+        return this.mergePersistedColumns(columns, widths, state);
+    }
+    saveChildState(level, columns) {
+        try {
+            const byLevel = this.readJson(this.childStateKey()) || {};
+            byLevel[level] = this.columnStateEntries(columns);
+            localStorage.setItem(this.childStateKey(), JSON.stringify(byLevel));
+        }
+        catch {
+            // ignore
+        }
+    }
+    saveChildWidth(level, colId, width, columns) {
+        try {
+            const byLevel = this.readJson(this.childWidthsKey()) || {};
+            byLevel[level] = { ...(byLevel[level] || {}), [colId]: width };
+            localStorage.setItem(this.childWidthsKey(), JSON.stringify(byLevel));
+        }
+        catch {
+            // ignore
+        }
+        this.saveChildState(level, columns);
+    }
     /** Persists a single column's width, then rewrites the ordered state. */
     saveWidth(colId, width, columns) {
         try {
@@ -1909,6 +1964,9 @@ class ListTableService {
             localStorage.removeItem(this.stateKey());
             localStorage.removeItem(this.widthsKey());
             localStorage.removeItem(this.pageSizeKey());
+            localStorage.removeItem(this.treeVariantKey());
+            localStorage.removeItem(this.childStateKey());
+            localStorage.removeItem(this.childWidthsKey());
         }
         catch {
             // ignore
@@ -6602,11 +6660,11 @@ class NameCellComponent {
         return val;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NameCellComponent, deps: [{ token: i4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: NameCellComponent, isStandalone: false, selector: "lib-name-cell", inputs: { row: "row", cellValue: "cellValue", cellConfig: "cellConfig" }, ngImport: i0, template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" class=\"cell-name-link\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            @if (cellParams.showIdentityIcons && item.edgeRouterConnectionStatus) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.edgeRouterConnectionStatus}}\" title=\"Edge Router Connection Status\"></span>\n                </div>\n            }\n            @if (cellParams.showIdentityIcons && !item.edgeRouterConnectionStatus) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                    <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n                </div>\n            }\n            @if (cellParams.showRouterIcons) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.isVerified}}\" title=\"{{item.isVerified ? 'Verified' : 'Unverified'}}\"></span>\n                    <span class=\"circle {{item.isOnline}}\" title=\"{{item.isOnline ? 'Online' : 'Offline'}}\"></span>\n                </div>\n            }\n            @if (namePrefix) {\n                <div class=\"cell-name-prefix-wrap\" [matTooltip]=\"namePrefix.tooltip\" [matTooltipShowDelay]=\"0\">\n                    <span class=\"cell-name-prefix-icon\" [ngClass]=\"namePrefix.iconClass\"></span>\n                </div>\n            }\n            <strong>{{cellText}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;align-items:center;gap:.3125rem}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-name-link{display:inline-flex;align-items:center}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem}.cell-name-prefix-wrap{display:flex;align-items:center;justify-content:center}.cell-name-prefix-icon{color:var(--highlighted);font-size:1rem}.circle.online{background-color:var(--green)}.circle.unknown{background-color:var(--highlighted)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: NameCellComponent, isStandalone: false, selector: "lib-name-cell", inputs: { row: "row", cellValue: "cellValue", cellConfig: "cellConfig" }, ngImport: i0, template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" class=\"cell-name-link\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            @if (cellParams.showIdentityIcons && item.edgeRouterConnectionStatus) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.edgeRouterConnectionStatus}}\" title=\"Edge Router Connection Status\"></span>\n                </div>\n            }\n            @if (cellParams.showIdentityIcons && !item.edgeRouterConnectionStatus) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                    <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n                </div>\n            }\n            @if (cellParams.showRouterIcons) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.isVerified}}\" title=\"{{item.isVerified ? 'Verified' : 'Unverified'}}\"></span>\n                    <span class=\"circle {{item.isOnline}}\" title=\"{{item.isOnline ? 'Online' : 'Offline'}}\"></span>\n                </div>\n            }\n            @if (namePrefix) {\n                <div class=\"cell-name-prefix-wrap\" [matTooltip]=\"namePrefix.tooltip\" [matTooltipShowDelay]=\"0\">\n                    <span class=\"cell-name-prefix-icon\" [ngClass]=\"namePrefix.iconClass\"></span>\n                </div>\n            }\n            <strong>{{cellText}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;align-items:center;gap:.3125rem}.cell-name-renderer strong{font-weight:600}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-name-link{display:inline-flex;align-items:center}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem}.cell-name-prefix-wrap{display:flex;align-items:center;justify-content:center}.cell-name-prefix-icon{color:var(--lt-warning, #f5a93d);font-size:1rem}.circle.online{background-color:var(--lt-positive, #16a34a)}.circle.unknown{background-color:var(--lt-warning, #f5a93d)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: NameCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-name-cell', standalone: false, template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" class=\"cell-name-link\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            @if (cellParams.showIdentityIcons && item.edgeRouterConnectionStatus) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.edgeRouterConnectionStatus}}\" title=\"Edge Router Connection Status\"></span>\n                </div>\n            }\n            @if (cellParams.showIdentityIcons && !item.edgeRouterConnectionStatus) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                    <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n                </div>\n            }\n            @if (cellParams.showRouterIcons) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.isVerified}}\" title=\"{{item.isVerified ? 'Verified' : 'Unverified'}}\"></span>\n                    <span class=\"circle {{item.isOnline}}\" title=\"{{item.isOnline ? 'Online' : 'Offline'}}\"></span>\n                </div>\n            }\n            @if (namePrefix) {\n                <div class=\"cell-name-prefix-wrap\" [matTooltip]=\"namePrefix.tooltip\" [matTooltipShowDelay]=\"0\">\n                    <span class=\"cell-name-prefix-icon\" [ngClass]=\"namePrefix.iconClass\"></span>\n                </div>\n            }\n            <strong>{{cellText}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;align-items:center;gap:.3125rem}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-name-link{display:inline-flex;align-items:center}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem}.cell-name-prefix-wrap{display:flex;align-items:center;justify-content:center}.cell-name-prefix-icon{color:var(--highlighted);font-size:1rem}.circle.online{background-color:var(--green)}.circle.unknown{background-color:var(--highlighted)}\n"] }]
+            args: [{ selector: 'lib-name-cell', standalone: false, template: "<span class=\"cell-name-container\">\n    <a href=\"./{{cellParams.pathRoot}}/{{item.id}}\" class=\"cell-name-link\" (click)=\"linkClicked($event)\">\n        <div class=\"col cell-name-renderer\" data-id=\"{{item.id}}\">\n            @if (cellParams.showIdentityIcons && item.edgeRouterConnectionStatus) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.edgeRouterConnectionStatus}}\" title=\"Edge Router Connection Status\"></span>\n                </div>\n            }\n            @if (cellParams.showIdentityIcons && !item.edgeRouterConnectionStatus) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.hasApiSession}}\" title=\"Api Session\"></span>\n                    <span class=\"circle {{item.hasEdgeRouterConnection}}\" title=\"Edge Router Connected\"></span>\n                </div>\n            }\n            @if (cellParams.showRouterIcons) {\n                <div class=\"cell-status-container\">\n                    <span class=\"circle {{item.isVerified}}\" title=\"{{item.isVerified ? 'Verified' : 'Unverified'}}\"></span>\n                    <span class=\"circle {{item.isOnline}}\" title=\"{{item.isOnline ? 'Online' : 'Offline'}}\"></span>\n                </div>\n            }\n            @if (namePrefix) {\n                <div class=\"cell-name-prefix-wrap\" [matTooltip]=\"namePrefix.tooltip\" [matTooltipShowDelay]=\"0\">\n                    <span class=\"cell-name-prefix-icon\" [ngClass]=\"namePrefix.iconClass\"></span>\n                </div>\n            }\n            <strong>{{cellText}}</strong>\n        </div>\n    </a>\n</span>\n", styles: [".cell-name-renderer{display:flex;flex-direction:row;align-items:center;gap:.3125rem}.cell-name-renderer strong{font-weight:600}.cell-name-container{display:flex;flex-direction:row;flex-wrap:nowrap}.cell-name-link{display:inline-flex;align-items:center}.cell-status-container{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem}.cell-name-prefix-wrap{display:flex;align-items:center;justify-content:center}.cell-name-prefix-icon{color:var(--lt-warning, #f5a93d);font-size:1rem}.circle.online{background-color:var(--lt-positive, #16a34a)}.circle.unknown{background-color:var(--lt-warning, #f5a93d)}\n"] }]
         }], ctorParameters: () => [{ type: i4.Router }], propDecorators: { row: [{
                 type: Input
             }], cellValue: [{
@@ -6750,11 +6808,11 @@ class BooleanCellComponent {
         return this.value === true || this.value === 'true';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BooleanCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: BooleanCellComponent, isStandalone: false, selector: "lib-boolean-cell", inputs: { value: "value", trueLabel: "trueLabel" }, ngImport: i0, template: "@if (isTrue) {\n  <span class=\"bool bool-true\">\n    <svg class=\"bool-check\" viewBox=\"0 0 14 14\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.5 7.6 5.7 10.8 11.5 3.6\"/>\n    </svg>\n    <span class=\"bool-label\">{{ trueLabel }}</span>\n  </span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.bool-true{display:inline-flex;align-items:center;gap:.3125rem;padding:.1875rem .5rem .1875rem .4375rem;font-family:var(--lt-font);font-size:.75rem;font-weight:600;line-height:1.2;color:#15803d;background:color-mix(in srgb,#16a34a 12%,transparent);border-radius:999px}.bool-check{flex:0 0 auto;display:block;color:#16a34a}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: BooleanCellComponent, isStandalone: false, selector: "lib-boolean-cell", inputs: { value: "value", trueLabel: "trueLabel" }, ngImport: i0, template: "@if (isTrue) {\n  <span class=\"bool bool-true\">\n    <svg class=\"bool-check\" viewBox=\"0 0 14 14\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.5 7.6 5.7 10.8 11.5 3.6\"/>\n    </svg>\n    <span class=\"bool-label\">{{ trueLabel }}</span>\n  </span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.bool-true{display:inline-flex;align-items:center;gap:.3375rem;min-height:1.575rem;box-sizing:border-box;padding:.140625rem .5625rem .140625rem .421875rem;font-family:var(--lt-font);font-size:.73125rem;font-weight:500;line-height:1.2;color:var(--lt-positive-text, #166534);background:color-mix(in srgb,var(--lt-positive, #16a34a) 14%,transparent);border:1px solid color-mix(in srgb,var(--lt-positive, #16a34a) 42%,var(--background));border-radius:999px}.bool-check{flex:0 0 auto;display:block;width:.75rem;height:.75rem;color:var(--lt-positive, #16a34a)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BooleanCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-boolean-cell', standalone: false, template: "@if (isTrue) {\n  <span class=\"bool bool-true\">\n    <svg class=\"bool-check\" viewBox=\"0 0 14 14\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.5 7.6 5.7 10.8 11.5 3.6\"/>\n    </svg>\n    <span class=\"bool-label\">{{ trueLabel }}</span>\n  </span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.bool-true{display:inline-flex;align-items:center;gap:.3125rem;padding:.1875rem .5rem .1875rem .4375rem;font-family:var(--lt-font);font-size:.75rem;font-weight:600;line-height:1.2;color:#15803d;background:color-mix(in srgb,#16a34a 12%,transparent);border-radius:999px}.bool-check{flex:0 0 auto;display:block;color:#16a34a}\n"] }]
+            args: [{ selector: 'lib-boolean-cell', standalone: false, template: "@if (isTrue) {\n  <span class=\"bool bool-true\">\n    <svg class=\"bool-check\" viewBox=\"0 0 14 14\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.5 7.6 5.7 10.8 11.5 3.6\"/>\n    </svg>\n    <span class=\"bool-label\">{{ trueLabel }}</span>\n  </span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.bool-true{display:inline-flex;align-items:center;gap:.3375rem;min-height:1.575rem;box-sizing:border-box;padding:.140625rem .5625rem .140625rem .421875rem;font-family:var(--lt-font);font-size:.73125rem;font-weight:500;line-height:1.2;color:var(--lt-positive-text, #166534);background:color-mix(in srgb,var(--lt-positive, #16a34a) 14%,transparent);border:1px solid color-mix(in srgb,var(--lt-positive, #16a34a) 42%,var(--background));border-radius:999px}.bool-check{flex:0 0 auto;display:block;width:.75rem;height:.75rem;color:var(--lt-positive, #16a34a)}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], trueLabel: [{
@@ -6777,7 +6835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
     limitations under the License.
 */
 /**
- * Enrollment-token cell for the identities list. Shows a status chip (Available /
+ * Enrollment-token cell for the identities list. Shows a status chip (Token /
  * Expired / —) that doubles as a dropdown of enrollment actions (Download JWT, Show
  * QR, Re-issue). Actions are emitted via the cell context's `emitAction`, so they run
  * through the same page handlers as the row ⋯ menu.
@@ -6795,7 +6853,14 @@ class TokenCellComponent {
         return this.tokenExpired ? 'expired' : 'available';
     }
     get statusLabel() {
-        return this.status === 'expired' ? 'Expired' : 'Available';
+        return this.status === 'expired' ? 'Expired' : 'Token';
+    }
+    /** A cert-enrolled identity with no pending token can have its enrollment
+     *  re-issued. Reset enrollment acts on the cert authenticator, so this is gated
+     *  on cert specifically: password (updb) and external-IdP/JWT-signer identities
+     *  have no cert to reset and are left as the empty state. */
+    get canReissue() {
+        return this.status === 'none' && !!this.row?.authenticators?.cert?.id;
     }
     get actions() {
         if (this.status === 'available') {
@@ -6845,11 +6910,11 @@ class TokenCellComponent {
         return expiration ? moment$1(expiration).isBefore() : false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TokenCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TokenCellComponent, isStandalone: false, selector: "lib-token-cell", inputs: { row: "row", emitAction: "emitAction" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: "@if (status !== 'none') {\n  <button\n    #trigger\n    type=\"button\"\n    class=\"token-chip {{ status }}\"\n    [class.is-open]=\"open\"\n    (click)=\"toggleMenu($event)\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open\"\n  >\n    <span class=\"token-chip-label\">{{ statusLabel }}</span>\n    <svg class=\"token-caret\" viewBox=\"0 0 10 6\" width=\"9\" height=\"6\" aria-hidden=\"true\">\n      <path fill=\"currentColor\" d=\"M0 0h10L5 6z\"/>\n    </svg>\n  </button>\n\n  @if (open) {\n    <div class=\"token-menu\" [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\" (clickOutside)=\"closeMenu()\">\n      @for (a of actions; track a.action) {\n        <button type=\"button\" class=\"token-menu-item\" (click)=\"runAction(a.action, $event)\">\n          <span class=\"token-menu-icon {{ a.icon }}\" aria-hidden=\"true\"></span>\n          <span class=\"token-menu-label\">{{ a.label }}</span>\n        </button>\n      }\n    </div>\n  }\n} @else {\n  <span class=\"token-empty\">&#8212;</span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.token-chip{display:inline-flex;align-items:center;gap:.3125rem;height:1.5rem;padding:0 .5rem;font-family:var(--lt-font);font-size:.75rem;font-weight:600;border:none;border-radius:.75rem;cursor:pointer;white-space:nowrap;transition:filter .15s}.token-chip .token-caret{display:block;opacity:.75}.token-chip:hover,.token-chip.is-open{filter:brightness(.96)}.token-chip.available{color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 12%,var(--lt-control-bg))}.token-chip.expired{color:color-mix(in srgb,var(--highlighted) 62%,#000);background:color-mix(in srgb,var(--highlighted) 26%,var(--lt-control-bg))}.token-empty{color:var(--groupText)}.token-menu{position:fixed;z-index:1000;min-width:11rem;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:token-in .1s ease-out}@keyframes token-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.token-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);text-align:left;background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer}.token-menu-item:hover{background:var(--lt-row-hover);color:var(--lt-link)}.token-menu-item:hover .token-menu-icon{color:var(--lt-link)}.token-menu-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;font-size:.9375rem;color:var(--lt-icon)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.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: TokenCellComponent, isStandalone: false, selector: "lib-token-cell", inputs: { row: "row", emitAction: "emitAction" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: "@if (status !== 'none') {\n  <button\n    #trigger\n    type=\"button\"\n    class=\"token-chip {{ status }}\"\n    [class.is-open]=\"open\"\n    (click)=\"toggleMenu($event)\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open\"\n  >\n    <span class=\"token-chip-label\">{{ statusLabel }}</span>\n    <svg class=\"token-caret\" viewBox=\"0 0 10 6\" width=\"9\" height=\"6\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M1 1.5 5 5 9 1.5\"/>\n    </svg>\n  </button>\n\n  @if (open) {\n    <div class=\"token-menu\" [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\" (clickOutside)=\"closeMenu()\">\n      @for (a of actions; track a.action) {\n        <button type=\"button\" class=\"token-menu-item\" (click)=\"runAction(a.action, $event)\">\n          <span class=\"token-menu-icon {{ a.icon }}\" aria-hidden=\"true\"></span>\n          <span class=\"token-menu-label\">{{ a.label }}</span>\n        </button>\n      }\n    </div>\n  }\n} @else if (canReissue) {\n  <button\n    type=\"button\"\n    class=\"token-chip reissue\"\n    (click)=\"runAction('reset-enrollment', $event)\"\n    aria-label=\"Reissue enrollment\"\n  >\n    <svg class=\"token-reissue-icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"\n         fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <path d=\"M12.5 5A5 5 0 0 0 3.5 6.5\"/>\n      <path d=\"M3.5 11A5 5 0 0 0 12.5 9.5\"/>\n      <path d=\"M12.5 2.5V5H10\"/>\n      <path d=\"M3.5 13.5V11H6\"/>\n    </svg>\n    <span class=\"token-chip-label\">Reissue</span>\n  </button>\n} @else {\n  <span class=\"token-empty\">&#8212;</span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.token-chip{display:inline-flex;align-items:center;gap:.3375rem;min-height:1.575rem;box-sizing:border-box;padding:.140625rem .5625rem;font-family:var(--lt-font);font-size:.73125rem;font-weight:500;line-height:1.2;border:1px solid transparent;border-radius:999px;cursor:pointer;white-space:nowrap;transition:filter .15s}.token-chip .token-caret{display:block;width:.5625rem;height:auto;opacity:.75}.token-chip:hover,.token-chip.is-open{filter:brightness(.96)}.token-chip.available{color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 14%,var(--lt-control-bg));border-color:color-mix(in srgb,var(--lt-link) 42%,var(--background))}.token-chip.expired,.token-chip.reissue{color:var(--lt-warning-text, #92400e);background:color-mix(in srgb,var(--lt-warning, #f5a93d) 20%,var(--lt-control-bg));border-color:color-mix(in srgb,var(--lt-warning, #f5a93d) 55%,var(--background))}.token-reissue-icon{flex:0 0 auto;display:block;width:.75rem;height:.75rem}.token-empty{color:var(--groupText)}.token-menu{position:fixed;z-index:1000;min-width:11rem;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:token-in .1s ease-out}@keyframes token-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.token-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);text-align:left;background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer}.token-menu-item:hover{background:var(--lt-row-hover);color:var(--lt-link)}.token-menu-item:hover .token-menu-icon{color:var(--lt-link)}.token-menu-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;font-size:.9375rem;color:var(--lt-icon)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TokenCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-token-cell', standalone: false, template: "@if (status !== 'none') {\n  <button\n    #trigger\n    type=\"button\"\n    class=\"token-chip {{ status }}\"\n    [class.is-open]=\"open\"\n    (click)=\"toggleMenu($event)\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open\"\n  >\n    <span class=\"token-chip-label\">{{ statusLabel }}</span>\n    <svg class=\"token-caret\" viewBox=\"0 0 10 6\" width=\"9\" height=\"6\" aria-hidden=\"true\">\n      <path fill=\"currentColor\" d=\"M0 0h10L5 6z\"/>\n    </svg>\n  </button>\n\n  @if (open) {\n    <div class=\"token-menu\" [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\" (clickOutside)=\"closeMenu()\">\n      @for (a of actions; track a.action) {\n        <button type=\"button\" class=\"token-menu-item\" (click)=\"runAction(a.action, $event)\">\n          <span class=\"token-menu-icon {{ a.icon }}\" aria-hidden=\"true\"></span>\n          <span class=\"token-menu-label\">{{ a.label }}</span>\n        </button>\n      }\n    </div>\n  }\n} @else {\n  <span class=\"token-empty\">&#8212;</span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.token-chip{display:inline-flex;align-items:center;gap:.3125rem;height:1.5rem;padding:0 .5rem;font-family:var(--lt-font);font-size:.75rem;font-weight:600;border:none;border-radius:.75rem;cursor:pointer;white-space:nowrap;transition:filter .15s}.token-chip .token-caret{display:block;opacity:.75}.token-chip:hover,.token-chip.is-open{filter:brightness(.96)}.token-chip.available{color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 12%,var(--lt-control-bg))}.token-chip.expired{color:color-mix(in srgb,var(--highlighted) 62%,#000);background:color-mix(in srgb,var(--highlighted) 26%,var(--lt-control-bg))}.token-empty{color:var(--groupText)}.token-menu{position:fixed;z-index:1000;min-width:11rem;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:token-in .1s ease-out}@keyframes token-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.token-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);text-align:left;background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer}.token-menu-item:hover{background:var(--lt-row-hover);color:var(--lt-link)}.token-menu-item:hover .token-menu-icon{color:var(--lt-link)}.token-menu-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;font-size:.9375rem;color:var(--lt-icon)}\n"] }]
+            args: [{ selector: 'lib-token-cell', standalone: false, template: "@if (status !== 'none') {\n  <button\n    #trigger\n    type=\"button\"\n    class=\"token-chip {{ status }}\"\n    [class.is-open]=\"open\"\n    (click)=\"toggleMenu($event)\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open\"\n  >\n    <span class=\"token-chip-label\">{{ statusLabel }}</span>\n    <svg class=\"token-caret\" viewBox=\"0 0 10 6\" width=\"9\" height=\"6\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M1 1.5 5 5 9 1.5\"/>\n    </svg>\n  </button>\n\n  @if (open) {\n    <div class=\"token-menu\" [ngStyle]=\"{ left: menuLeft + 'px', top: menuTop + 'px' }\" (clickOutside)=\"closeMenu()\">\n      @for (a of actions; track a.action) {\n        <button type=\"button\" class=\"token-menu-item\" (click)=\"runAction(a.action, $event)\">\n          <span class=\"token-menu-icon {{ a.icon }}\" aria-hidden=\"true\"></span>\n          <span class=\"token-menu-label\">{{ a.label }}</span>\n        </button>\n      }\n    </div>\n  }\n} @else if (canReissue) {\n  <button\n    type=\"button\"\n    class=\"token-chip reissue\"\n    (click)=\"runAction('reset-enrollment', $event)\"\n    aria-label=\"Reissue enrollment\"\n  >\n    <svg class=\"token-reissue-icon\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"\n         fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <path d=\"M12.5 5A5 5 0 0 0 3.5 6.5\"/>\n      <path d=\"M3.5 11A5 5 0 0 0 12.5 9.5\"/>\n      <path d=\"M12.5 2.5V5H10\"/>\n      <path d=\"M3.5 13.5V11H6\"/>\n    </svg>\n    <span class=\"token-chip-label\">Reissue</span>\n  </button>\n} @else {\n  <span class=\"token-empty\">&#8212;</span>\n}\n", styles: [":host{display:inline-flex;align-items:center}.token-chip{display:inline-flex;align-items:center;gap:.3375rem;min-height:1.575rem;box-sizing:border-box;padding:.140625rem .5625rem;font-family:var(--lt-font);font-size:.73125rem;font-weight:500;line-height:1.2;border:1px solid transparent;border-radius:999px;cursor:pointer;white-space:nowrap;transition:filter .15s}.token-chip .token-caret{display:block;width:.5625rem;height:auto;opacity:.75}.token-chip:hover,.token-chip.is-open{filter:brightness(.96)}.token-chip.available{color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 14%,var(--lt-control-bg));border-color:color-mix(in srgb,var(--lt-link) 42%,var(--background))}.token-chip.expired,.token-chip.reissue{color:var(--lt-warning-text, #92400e);background:color-mix(in srgb,var(--lt-warning, #f5a93d) 20%,var(--lt-control-bg));border-color:color-mix(in srgb,var(--lt-warning, #f5a93d) 55%,var(--background))}.token-reissue-icon{flex:0 0 auto;display:block;width:.75rem;height:.75rem}.token-empty{color:var(--groupText)}.token-menu{position:fixed;z-index:1000;min-width:11rem;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:token-in .1s ease-out}@keyframes token-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.token-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);text-align:left;background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer}.token-menu-item:hover{background:var(--lt-row-hover);color:var(--lt-link)}.token-menu-item:hover .token-menu-icon{color:var(--lt-link)}.token-menu-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;font-size:.9375rem;color:var(--lt-icon)}\n"] }]
         }], propDecorators: { row: [{
                 type: Input
             }], emitAction: [{
@@ -6859,6 +6924,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: ['trigger']
             }] } });
 
+/*
+    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.
+*/
+/**
+ * Role/attribute chips for list-table attribute columns. Each chip reveals two
+ * controls on hover: copy (puts the bare name on the clipboard) and filter (adds
+ * the attribute to this column's filter). Filtering goes through the shared
+ * DataTableFilterService so it stacks with, and stays in sync with, the column
+ * header's filter dropdown.
+ */
+class AttributeCellComponent {
+    set attributes(value) {
+        this.chips = this.toChips(value);
+    }
+    constructor(filterService) {
+        this.filterService = filterService;
+        /** Column field; used as the filter's columnId so the filter icon drives the
+         *  same filter as the column header dropdown. */
+        this.field = '';
+        /** Column label, shown on the applied-filter tag. */
+        this.filterLabel = '';
+        this.chips = [];
+    }
+    toChips(value) {
+        const list = Array.isArray(value) ? value : (value ? [value] : []);
+        return list.reduce((chips, attr) => {
+            const raw = String(attr?.name ?? attr ?? '').trim();
+            if (raw) {
+                const first = raw.charAt(0);
+                const isNamed = first === '@';
+                const bare = first === '#' || first === '@' ? raw.slice(1) : raw;
+                const label = isNamed || first === '#' ? raw : '#' + raw;
+                chips.push({ label, raw, bare, isNamed });
+            }
+            return chips;
+        }, []);
+    }
+    async copy(chip, event) {
+        event.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(chip.bare);
+            chip.copied = true;
+            setTimeout(() => (chip.copied = false), 1200);
+        }
+        catch {
+            // clipboard blocked (older browser or insecure context); nothing to do
+        }
+    }
+    filter(chip, event) {
+        event.stopPropagation();
+        if (!this.field) {
+            return;
+        }
+        const existing = this.filterService.filters.find((f) => f.columnId === this.field);
+        const values = Array.isArray(existing?.value)
+            ? [...existing.value]
+            : (existing?.value ? [existing.value] : []);
+        // filter on the source value (prefix intact) so a named @entity does not match a
+        // role of the same bare name, and so it stacks with the header dropdown's values
+        if (values.includes(chip.raw)) {
+            return;
+        }
+        values.push(chip.raw);
+        // keep whatever all-of/any-of the filter already uses so adding a chip does
+        // not quietly change the match mode
+        const semantic = existing?.semantic === 'AllOf' ? 'AllOf' : 'AnyOf';
+        const filter = {
+            filterName: this.filterLabel,
+            columnId: this.field,
+            value: values,
+            label: values.join(', '),
+            type: 'ATTRIBUTE',
+            semantic,
+        };
+        this.filterService.updateFilter(filter);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AttributeCellComponent, deps: [{ token: DataTableFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: AttributeCellComponent, isStandalone: false, selector: "lib-attribute-cell", inputs: { attributes: "attributes", field: "field", filterLabel: "filterLabel" }, ngImport: i0, template: "@for (chip of chips; track chip.raw) {\n  <span class=\"lt-chip\" [class.lt-chip-at]=\"chip.isNamed\">\n    <span class=\"lt-chip-label\">{{ chip.label }}</span>\n    <span class=\"lt-chip-actions\" (click)=\"$event.stopPropagation()\">\n      <button\n        type=\"button\"\n        class=\"lt-chip-action\"\n        [class.is-done]=\"chip.copied\"\n        (click)=\"copy(chip, $event)\"\n        [attr.aria-label]=\"'Copy ' + chip.bare\"\n        title=\"Copy\"\n      >\n        @if (chip.copied) {\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\"\n               stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M3.5 8.5 7 12l5.5-7\"/>\n          </svg>\n        } @else {\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\"\n               stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"5.5\" y=\"5.5\" width=\"8\" height=\"8\" rx=\"1.3\"/>\n            <path d=\"M10.5 5.5V3.3A1.3 1.3 0 0 0 9.2 2H3.3A1.3 1.3 0 0 0 2 3.3v5.9A1.3 1.3 0 0 0 3.3 10.5h2.2\"/>\n          </svg>\n        }\n      </button>\n      <button\n        type=\"button\"\n        class=\"lt-chip-action\"\n        (click)=\"filter(chip, $event)\"\n        [attr.aria-label]=\"'Filter by ' + chip.bare\"\n        title=\"Filter\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\"\n             stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M2 3.5h12l-4.6 5.4v3.6l-2.8 1.4V8.9z\"/>\n        </svg>\n      </button>\n    </span>\n  </span>\n}\n", styles: [":host{display:inline}.lt-chip{position:relative;--lt-chip-cover: color-mix(in srgb, var(--lt-link) 16%, var(--lt-row-bg, #f6f7fb))}.lt-chip.lt-chip-at{--lt-chip-cover: color-mix(in srgb, var(--secondary) 18%, var(--lt-row-bg, #f6f7fb))}.lt-chip-actions{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;gap:.1875rem;padding-left:.875rem;padding-right:.3125rem;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .12s ease;background:linear-gradient(to right,transparent,var(--lt-chip-cover) 38%)}.lt-chip:hover .lt-chip-actions,.lt-chip:focus-within .lt-chip-actions{opacity:1;pointer-events:auto}.lt-chip-action{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;color:var(--lt-link);background:var(--lt-control-bg);border:1px solid color-mix(in srgb,var(--lt-link) 40%,transparent);border-radius:.3125rem;cursor:pointer;transition:color .12s,background .12s,border-color .12s}.lt-chip-action svg{display:block;width:.875rem;height:.875rem}.lt-chip-action:hover{color:var(--lt-control-bg);background:var(--lt-link);border-color:var(--lt-link)}.lt-chip-action.is-done{color:var(--lt-positive, #16a34a);border-color:color-mix(in srgb,var(--lt-positive, #16a34a) 45%,transparent)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AttributeCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-attribute-cell', standalone: false, template: "@for (chip of chips; track chip.raw) {\n  <span class=\"lt-chip\" [class.lt-chip-at]=\"chip.isNamed\">\n    <span class=\"lt-chip-label\">{{ chip.label }}</span>\n    <span class=\"lt-chip-actions\" (click)=\"$event.stopPropagation()\">\n      <button\n        type=\"button\"\n        class=\"lt-chip-action\"\n        [class.is-done]=\"chip.copied\"\n        (click)=\"copy(chip, $event)\"\n        [attr.aria-label]=\"'Copy ' + chip.bare\"\n        title=\"Copy\"\n      >\n        @if (chip.copied) {\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\"\n               stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M3.5 8.5 7 12l5.5-7\"/>\n          </svg>\n        } @else {\n          <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\"\n               stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"5.5\" y=\"5.5\" width=\"8\" height=\"8\" rx=\"1.3\"/>\n            <path d=\"M10.5 5.5V3.3A1.3 1.3 0 0 0 9.2 2H3.3A1.3 1.3 0 0 0 2 3.3v5.9A1.3 1.3 0 0 0 3.3 10.5h2.2\"/>\n          </svg>\n        }\n      </button>\n      <button\n        type=\"button\"\n        class=\"lt-chip-action\"\n        (click)=\"filter(chip, $event)\"\n        [attr.aria-label]=\"'Filter by ' + chip.bare\"\n        title=\"Filter\"\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\"\n             stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M2 3.5h12l-4.6 5.4v3.6l-2.8 1.4V8.9z\"/>\n        </svg>\n      </button>\n    </span>\n  </span>\n}\n", styles: [":host{display:inline}.lt-chip{position:relative;--lt-chip-cover: color-mix(in srgb, var(--lt-link) 16%, var(--lt-row-bg, #f6f7fb))}.lt-chip.lt-chip-at{--lt-chip-cover: color-mix(in srgb, var(--secondary) 18%, var(--lt-row-bg, #f6f7fb))}.lt-chip-actions{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;gap:.1875rem;padding-left:.875rem;padding-right:.3125rem;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .12s ease;background:linear-gradient(to right,transparent,var(--lt-chip-cover) 38%)}.lt-chip:hover .lt-chip-actions,.lt-chip:focus-within .lt-chip-actions{opacity:1;pointer-events:auto}.lt-chip-action{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;color:var(--lt-link);background:var(--lt-control-bg);border:1px solid color-mix(in srgb,var(--lt-link) 40%,transparent);border-radius:.3125rem;cursor:pointer;transition:color .12s,background .12s,border-color .12s}.lt-chip-action svg{display:block;width:.875rem;height:.875rem}.lt-chip-action:hover{color:var(--lt-control-bg);background:var(--lt-link);border-color:var(--lt-link)}.lt-chip-action.is-done{color:var(--lt-positive, #16a34a);border-color:color-mix(in srgb,var(--lt-positive, #16a34a) 45%,transparent)}\n"] }]
+        }], ctorParameters: () => [{ type: DataTableFilterService }], propDecorators: { attributes: [{
+                type: Input
+            }], field: [{
+                type: Input
+            }], filterLabel: [{
+                type: Input
+            }] } });
+
 /*
     Copyright NetFoundry Inc.
 
@@ -7253,27 +7420,6 @@ class IdentitiesPageService extends ListPageServiceClass {
                     : 'lt-type-other';
             return `<span class="lt-type-badge ${cls}">${t}</span>`;
         };
-        // Light skinned role chips (the legacy rolesRenderer paints
-        // heavy dark overlap chips; this stays scoped to the beta page).
-        const rolesChipRenderer = (row) => {
-            const colId = row?.column?.colId;
-            const attrs = row?.data?.[colId + 'Display'] || row?.data?.[colId] || [];
-            if (!attrs?.length) {
-                return '';
-            }
-            return attrs.map((attr) => {
-                const raw = String(attr?.name ?? attr ?? '').trim();
-                if (!raw) {
-                    return '';
-                }
-                // named attributes (@) use the secondary color; role attributes (#)
-                // the primary color, matching the tag selector's distinction
-                const isNamed = raw.charAt(0) === '@';
-                const label = isNamed ? raw : (raw.charAt(0) === '#' ? raw : '#' + raw);
-                const cls = isNamed ? 'lt-chip lt-chip-at' : 'lt-chip';
-                return `<span class="${cls}">${label}</span>`;
-            }).join('');
-        };
         let tableColumns = [
             {
                 key: 'name',
@@ -7316,7 +7462,12 @@ class IdentitiesPageService extends ListPageServiceClass {
                 label: 'Roles',
                 filterType: 'ATTRIBUTE',
                 headerParams: identityRolesHeaderComponentParams,
-                cellHtml: rolesChipRenderer,
+                cell: AttributeCellComponent,
+                cellInputs: (ctx) => ({
+                    attributes: ctx.row?.roleAttributesDisplay ?? ctx.row?.roleAttributes,
+                    field: ctx.colId,
+                    filterLabel: 'Roles',
+                }),
                 onCellClick: (ctx) => {
                     if (this.hasSelectedText()) {
                         return;
@@ -7401,7 +7552,7 @@ class IdentitiesPageService extends ListPageServiceClass {
             {
                 key: 'token',
                 field: 'token',
-                label: 'Token',
+                label: 'Enrollment',
                 cell: TokenCellComponent,
                 cellInputs: (ctx) => ({ row: ctx.row, emitAction: ctx.emitAction }),
                 resizable: true,
@@ -10169,6 +10320,11 @@ class ListTableHeaderComponent {
         this.actionClicked = new EventEmitter();
         this.tabClicked = new EventEmitter();
     }
+    /** Only show the tab strip when there is more than one visible tab; a lone tab
+     *  is just a redundant label, so the strip is hidden. */
+    get showTabs() {
+        return (this.tabs || []).filter((t) => !t?.hidden).length > 1;
+    }
     clickAction(value) {
         this.actionClicked.emit(value);
     }
@@ -10210,11 +10366,11 @@ class ListTableHeaderComponent {
         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", 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"] }] }); }
+    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 (showTabs) {\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:.875rem;padding-bottom:.625rem}.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(--lt-header-icon, var(--primary));background:color-mix(in srgb,var(--lt-header-icon, var(--primary)) 12%,var(--background));border:1px solid color-mix(in srgb,var(--lt-header-icon, 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(--lt-header-icon, 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]=\"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"] }]
+            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 (showTabs) {\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:.875rem;padding-bottom:.625rem}.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(--lt-header-icon, var(--primary));background:color-mix(in srgb,var(--lt-header-icon, var(--primary)) 12%,var(--background));border:1px solid color-mix(in srgb,var(--lt-header-icon, 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(--lt-header-icon, 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: [{
@@ -11802,6 +11958,12 @@ class ListTableAutoRefreshComponent {
         this.refresh = new EventEmitter();
         this.secondsChange = new EventEmitter();
         this.open = false;
+        /** Menu geometry, all measured when the menu opens: left offset so labels line up
+         *  under the button's value, width so the right edge lands on the button's right
+         *  edge, and right padding so the check centers under the chevron. */
+        this.menuLeft = 0;
+        this.menuWidth = 0;
+        this.menuPadRight = 0;
     }
     /** Current interval in seconds; 0 means off. */
     set seconds(value) {
@@ -11823,7 +11985,37 @@ class ListTableAutoRefreshComponent {
     }
     toggleMenu(event) {
         event.stopPropagation();
-        this.open = !this.open;
+        if (this.open) {
+            this.open = false;
+            return;
+        }
+        this.alignMenuToValue();
+        this.open = true;
+    }
+    /** Position + size the menu so its labels sit directly under the button's value,
+     *  its right edge lands on the button's right edge (one shared border), and the
+     *  right-aligned check centers under the chevron. */
+    alignMenuToValue() {
+        const el = this.arEl?.nativeElement;
+        const btn = el?.querySelector('.lt-ar-btn');
+        const value = this.valueEl?.nativeElement?.getBoundingClientRect();
+        const chevron = this.chevronEl?.nativeElement?.getBoundingClientRect();
+        const container = el?.getBoundingClientRect();
+        if (!btn || !value || !chevron || !container) {
+            return;
+        }
+        const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+        // left padding we back out of the value position so labels sit under it
+        const itemPadLeft = 0.875 * rem;
+        // half the check's box, so we can land its center rather than its edge
+        const tickHalf = 0.375 * rem;
+        const borderWidth = parseFloat(getComputedStyle(btn).borderRightWidth) || 1;
+        this.menuLeft = Math.max(0, value.left - container.left - itemPadLeft);
+        this.menuWidth = container.width - this.menuLeft;
+        // the check is right-aligned, so its right padding is the gap from the menu's
+        // right edge to the chevron center, less the border and half the check box
+        const chevronCenter = (chevron.left + chevron.right) / 2;
+        this.menuPadRight = Math.max(0, container.right - chevronCenter - borderWidth - tickHalf);
     }
     closeMenu() {
         this.open = false;
@@ -11859,11 +12051,11 @@ class ListTableAutoRefreshComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListTableAutoRefreshComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListTableAutoRefreshComponent, isStandalone: false, selector: "lib-list-table-auto-refresh", inputs: { seconds: "seconds", loading: "loading", intervals: "intervals" }, outputs: { refresh: "refresh", secondsChange: "secondsChange" }, ngImport: i0, template: "<div class=\"lt-ar\" [class.is-open]=\"open\">\n  <button\n    type=\"button\"\n    class=\"lt-ar-btn\"\n    [class.is-on]=\"enabled\"\n    [class.is-open]=\"open\"\n    (click)=\"toggleMenu($event)\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-label]=\"'Auto-refresh: ' + valueLabel\"\n    id=\"AutoRefreshButton\"\n  >\n    <svg class=\"lt-ar-icon\" viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 6.4A5.6 5.6 0 1 1 2.4 9\"/>\n      <path fill=\"currentColor\" d=\"M1.4 3.1l.7 3.3 3.2-.9z\"/>\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8 5.3V8.2l2 1.3\"/>\n    </svg>\n    <span class=\"lt-ar-prefix\">Auto-refresh:</span>\n    <span class=\"lt-ar-value\">{{ valueLabel }}</span>\n    <svg class=\"lt-ar-chevron\" viewBox=\"0 0 10 6\" width=\"9\" height=\"6\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M0 0h10L5 6z\"/></svg>\n  </button>\n\n  @if (open) {\n    <div class=\"lt-ar-menu\" (clickOutside)=\"closeMenu()\" role=\"menu\">\n      <button type=\"button\" class=\"lt-ar-item\" [class.is-selected]=\"!enabled\" (click)=\"select(0)\" role=\"menuitemradio\" [attr.aria-checked]=\"!enabled\">\n        <span class=\"lt-ar-tick\" aria-hidden=\"true\">\n          @if (!enabled) {\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>Off</span>\n      </button>\n      @for (interval of intervals; track interval.seconds) {\n        <button type=\"button\" class=\"lt-ar-item\" [class.is-selected]=\"isSelected(interval.seconds)\" (click)=\"select(interval.seconds)\" role=\"menuitemradio\" [attr.aria-checked]=\"isSelected(interval.seconds)\">\n          <span class=\"lt-ar-tick\" aria-hidden=\"true\">\n            @if (isSelected(interval.seconds)) {\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>{{ interval.label }}</span>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex}.lt-ar{position:relative;display:inline-flex}.lt-ar-btn{display:inline-flex;align-items:center;gap:var(--lt-control-gap);height:var(--lt-toolbar-height);padding:0 var(--lt-control-padding-x);font-family:var(--lt-font);font-size:var(--lt-control-font-size);font-weight:var(--lt-control-font-weight);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-ar-btn svg{display:block}.lt-ar-btn:hover,.lt-ar-btn.is-on{border-color:var(--lt-link);color:var(--lt-link)}.lt-ar-btn.is-open{border-color:var(--lt-link);color:var(--lt-link);border-bottom-left-radius:0;border-bottom-right-radius:0}.lt-ar-value{font-weight:700}.lt-ar-chevron{opacity:.7}.lt-ar-menu{position:absolute;top:100%;right:0;z-index:1000;min-width:100%;display:flex;flex-direction:column;padding:.25rem 0;background:var(--lt-control-bg);border:1px solid var(--lt-link);border-top:none;border-bottom-left-radius:var(--lt-radius);border-bottom-right-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:lt-ar-in .12s ease-out}@keyframes lt-ar-in{0%{opacity:0;transform:translateY(-.125rem)}to{opacity:1;transform:translateY(0)}}.lt-ar-item{display:inline-flex;align-items:center;gap:.375rem;justify-content:flex-end;min-height:2rem;padding:0 .75rem 0 .625rem;font-family:var(--lt-font);font-size:var(--lt-control-font-size);color:var(--lt-cell-text);background:transparent;border:none;cursor:pointer;text-align:right;transition:background .1s,color .1s}.lt-ar-item:hover{background:var(--lt-row-hover)}.lt-ar-item.is-selected{color:var(--lt-link);font-weight:var(--lt-control-font-weight)}.lt-ar-tick{display:inline-flex;justify-content:center;width:.625rem;color:var(--lt-link)}.lt-ar-tick svg{display:block}\n"], dependencies: [{ kind: "directive", type: i1$4.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: ListTableAutoRefreshComponent, isStandalone: false, selector: "lib-list-table-auto-refresh", inputs: { seconds: "seconds", loading: "loading", intervals: "intervals" }, outputs: { refresh: "refresh", secondsChange: "secondsChange" }, viewQueries: [{ propertyName: "arEl", first: true, predicate: ["arEl"], descendants: true }, { propertyName: "valueEl", first: true, predicate: ["valueEl"], descendants: true }, { propertyName: "chevronEl", first: true, predicate: ["chevronEl"], descendants: true }], ngImport: i0, template: "<div class=\"lt-ar\" #arEl [class.is-open]=\"open\">\n  <button\n    type=\"button\"\n    class=\"lt-ar-btn\"\n    [class.is-on]=\"enabled\"\n    [class.is-open]=\"open\"\n    (click)=\"toggleMenu($event)\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-label]=\"'Auto-refresh: ' + valueLabel\"\n    id=\"AutoRefreshButton\"\n  >\n    <svg class=\"lt-ar-icon\" viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 6.4A5.6 5.6 0 1 1 2.4 9\"/>\n      <path fill=\"currentColor\" d=\"M1.4 3.1l.7 3.3 3.2-.9z\"/>\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8 5.3V8.2l2 1.3\"/>\n    </svg>\n    <span class=\"lt-ar-prefix\">Auto-refresh:</span>\n    <span class=\"lt-ar-value\" #valueEl>{{ valueLabel }}</span>\n    <svg class=\"lt-ar-chevron\" #chevronEl viewBox=\"0 0 10 6\" width=\"9\" height=\"6\" aria-hidden=\"true\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M1 1.5 5 5 9 1.5\"/></svg>\n  </button>\n\n  @if (open) {\n    <div class=\"lt-ar-menu\" [style.left.px]=\"menuLeft\" [style.width.px]=\"menuWidth\" [style.--lt-ar-pad-right]=\"menuPadRight + 'px'\" (clickOutside)=\"closeMenu()\" role=\"menu\">\n      <button type=\"button\" class=\"lt-ar-item\" [class.is-selected]=\"!enabled\" (click)=\"select(0)\" role=\"menuitemradio\" [attr.aria-checked]=\"!enabled\">\n        <span class=\"lt-ar-label\">Off</span>\n        <span class=\"lt-ar-tick\" aria-hidden=\"true\">\n          @if (!enabled) {\n            <svg viewBox=\"0 0 12 12\" width=\"11\" height=\"11\"><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      </button>\n      @for (interval of intervals; track interval.seconds) {\n        <button type=\"button\" class=\"lt-ar-item\" [class.is-selected]=\"isSelected(interval.seconds)\" (click)=\"select(interval.seconds)\" role=\"menuitemradio\" [attr.aria-checked]=\"isSelected(interval.seconds)\">\n          <span class=\"lt-ar-label\">{{ interval.label }}</span>\n          <span class=\"lt-ar-tick\" aria-hidden=\"true\">\n            @if (isSelected(interval.seconds)) {\n              <svg viewBox=\"0 0 12 12\" width=\"11\" height=\"11\"><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        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex}.lt-ar{position:relative;display:inline-flex}.lt-ar-btn{display:inline-flex;align-items:center;gap:var(--lt-control-gap);height:var(--lt-toolbar-height);padding:0 var(--lt-control-padding-x);font-family:var(--lt-font);font-size:var(--lt-control-font-size);font-weight:var(--lt-control-font-weight);color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--lt-control-border-full);border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.lt-ar-btn svg{display:block}.lt-ar-btn:hover,.lt-ar-btn.is-on{border-color:var(--lt-link);color:var(--lt-link)}.lt-ar-btn.is-on{background:color-mix(in srgb,var(--lt-link) 8%,var(--lt-control-bg))}.lt-ar-btn.is-open{border-color:var(--lt-link);color:var(--lt-link);border-bottom-right-radius:0}.lt-ar-value{font-weight:700}.lt-ar-chevron{opacity:.7}.lt-ar-menu{position:absolute;top:100%;left:0;z-index:1000;min-width:0;margin-top:calc(var(--lt-control-border-width) * -1);display:flex;flex-direction:column;padding:.25rem 0;background:var(--lt-control-bg);border:var(--lt-control-border-width) solid var(--lt-link);border-radius:0 0 var(--lt-radius) var(--lt-radius);box-shadow:var(--shadowLarge);animation:lt-ar-in .12s ease-out}@keyframes lt-ar-in{0%{opacity:0;transform:translateY(-.125rem)}to{opacity:1;transform:translateY(0)}}.lt-ar-item{display:flex;align-items:center;justify-content:space-between;gap:0;min-height:2rem;padding:0 var(--lt-ar-pad-right, .875rem) 0 .875rem;font-family:var(--lt-font);font-size:var(--lt-control-font-size);color:var(--lt-cell-text);background:transparent;border:none;cursor:pointer;text-align:left;transition:background .1s,color .1s}.lt-ar-item:hover{background:var(--lt-row-hover)}.lt-ar-item.is-selected{color:var(--lt-link);font-weight:700}.lt-ar-tick{display:inline-flex;flex:0 0 auto;justify-content:center;width:.75rem;color:var(--lt-link)}.lt-ar-tick svg{display:block}\n"], dependencies: [{ kind: "directive", type: i1$4.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: ListTableAutoRefreshComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-list-table-auto-refresh', standalone: false, template: "<div class=\"lt-ar\" [class.is-open]=\"open\">\n  <button\n    type=\"button\"\n    class=\"lt-ar-btn\"\n    [class.is-on]=\"enabled\"\n    [class.is-open]=\"open\"\n    (click)=\"toggleMenu($event)\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-label]=\"'Auto-refresh: ' + valueLabel\"\n    id=\"AutoRefreshButton\"\n  >\n    <svg class=\"lt-ar-icon\" viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 6.4A5.6 5.6 0 1 1 2.4 9\"/>\n      <path fill=\"currentColor\" d=\"M1.4 3.1l.7 3.3 3.2-.9z\"/>\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8 5.3V8.2l2 1.3\"/>\n    </svg>\n    <span class=\"lt-ar-prefix\">Auto-refresh:</span>\n    <span class=\"lt-ar-value\">{{ valueLabel }}</span>\n    <svg class=\"lt-ar-chevron\" viewBox=\"0 0 10 6\" width=\"9\" height=\"6\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M0 0h10L5 6z\"/></svg>\n  </button>\n\n  @if (open) {\n    <div class=\"lt-ar-menu\" (clickOutside)=\"closeMenu()\" role=\"menu\">\n      <button type=\"button\" class=\"lt-ar-item\" [class.is-selected]=\"!enabled\" (click)=\"select(0)\" role=\"menuitemradio\" [attr.aria-checked]=\"!enabled\">\n        <span class=\"lt-ar-tick\" aria-hidden=\"true\">\n          @if (!enabled) {\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>Off</span>\n      </button>\n      @for (interval of intervals; track interval.seconds) {\n        <button type=\"button\" class=\"lt-ar-item\" [class.is-selected]=\"isSelected(interval.seconds)\" (click)=\"select(interval.seconds)\" role=\"menuitemradio\" [attr.aria-checked]=\"isSelected(interval.seconds)\">\n          <span class=\"lt-ar-tick\" aria-hidden=\"true\">\n            @if (isSelected(interval.seconds)) {\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>{{ interval.label }}</span>\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex}.lt-ar{position:relative;display:inline-flex}.lt-ar-btn{display:inline-flex;align-items:center;gap:var(--lt-control-gap);height:var(--lt-toolbar-height);padding:0 var(--lt-control-padding-x);font-family:var(--lt-font);font-size:var(--lt-control-font-size);font-weight:var(--lt-control-font-weight);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-ar-btn svg{display:block}.lt-ar-btn:hover,.lt-ar-btn.is-on{border-color:var(--lt-link);color:var(--lt-link)}.lt-ar-btn.is-open{border-color:var(--lt-link);color:var(--lt-link);border-bottom-left-radius:0;border-bottom-right-radius:0}.lt-ar-value{font-weight:700}.lt-ar-chevron{opacity:.7}.lt-ar-menu{position:absolute;top:100%;right:0;z-index:1000;min-width:100%;display:flex;flex-direction:column;padding:.25rem 0;background:var(--lt-control-bg);border:1px solid var(--lt-link);border-top:none;border-bottom-left-radius:var(--lt-radius);border-bottom-right-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:lt-ar-in .12s ease-out}@keyframes lt-ar-in{0%{opacity:0;transform:translateY(-.125rem)}to{opacity:1;transform:translateY(0)}}.lt-ar-item{display:inline-flex;align-items:center;gap:.375rem;justify-content:flex-end;min-height:2rem;padding:0 .75rem 0 .625rem;font-family:var(--lt-font);font-size:var(--lt-control-font-size);color:var(--lt-cell-text);background:transparent;border:none;cursor:pointer;text-align:right;transition:background .1s,color .1s}.lt-ar-item:hover{background:var(--lt-row-hover)}.lt-ar-item.is-selected{color:var(--lt-link);font-weight:var(--lt-control-font-weight)}.lt-ar-tick{display:inline-flex;justify-content:center;width:.625rem;color:var(--lt-link)}.lt-ar-tick svg{display:block}\n"] }]
+            args: [{ selector: 'lib-list-table-auto-refresh', standalone: false, template: "<div class=\"lt-ar\" #arEl [class.is-open]=\"open\">\n  <button\n    type=\"button\"\n    class=\"lt-ar-btn\"\n    [class.is-on]=\"enabled\"\n    [class.is-open]=\"open\"\n    (click)=\"toggleMenu($event)\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-label]=\"'Auto-refresh: ' + valueLabel\"\n    id=\"AutoRefreshButton\"\n  >\n    <svg class=\"lt-ar-icon\" viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 6.4A5.6 5.6 0 1 1 2.4 9\"/>\n      <path fill=\"currentColor\" d=\"M1.4 3.1l.7 3.3 3.2-.9z\"/>\n      <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8 5.3V8.2l2 1.3\"/>\n    </svg>\n    <span class=\"lt-ar-prefix\">Auto-refresh:</span>\n    <span class=\"lt-ar-value\" #valueEl>{{ valueLabel }}</span>\n    <svg class=\"lt-ar-chevron\" #chevronEl viewBox=\"0 0 10 6\" width=\"9\" height=\"6\" aria-hidden=\"true\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M1 1.5 5 5 9 1.5\"/></svg>\n  </button>\n\n  @if (open) {\n    <div class=\"lt-ar-menu\" [style.left.px]=\"menuLeft\" [style.width.px]=\"menuWidth\" [style.--lt-ar-pad-right]=\"menuPadRight + 'px'\" (clickOutside)=\"closeMenu()\" role=\"menu\">\n      <button type=\"button\" class=\"lt-ar-item\" [class.is-selected]=\"!enabled\" (click)=\"select(0)\" role=\"menuitemradio\" [attr.aria-checked]=\"!enabled\">\n        <span class=\"lt-ar-label\">Off</span>\n        <span class=\"lt-ar-tick\" aria-hidden=\"true\">\n          @if (!enabled) {\n            <svg viewBox=\"0 0 12 12\" width=\"11\" height=\"11\"><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      </button>\n      @for (interval of intervals; track interval.seconds) {\n        <button type=\"button\" class=\"lt-ar-item\" [class.is-selected]=\"isSelected(interval.seconds)\" (click)=\"select(interval.seconds)\" role=\"menuitemradio\" [attr.aria-checked]=\"isSelected(interval.seconds)\">\n          <span class=\"lt-ar-label\">{{ interval.label }}</span>\n          <span class=\"lt-ar-tick\" aria-hidden=\"true\">\n            @if (isSelected(interval.seconds)) {\n              <svg viewBox=\"0 0 12 12\" width=\"11\" height=\"11\"><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        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex}.lt-ar{position:relative;display:inline-flex}.lt-ar-btn{display:inline-flex;align-items:center;gap:var(--lt-control-gap);height:var(--lt-toolbar-height);padding:0 var(--lt-control-padding-x);font-family:var(--lt-font);font-size:var(--lt-control-font-size);font-weight:var(--lt-control-font-weight);color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--lt-control-border-full);border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.lt-ar-btn svg{display:block}.lt-ar-btn:hover,.lt-ar-btn.is-on{border-color:var(--lt-link);color:var(--lt-link)}.lt-ar-btn.is-on{background:color-mix(in srgb,var(--lt-link) 8%,var(--lt-control-bg))}.lt-ar-btn.is-open{border-color:var(--lt-link);color:var(--lt-link);border-bottom-right-radius:0}.lt-ar-value{font-weight:700}.lt-ar-chevron{opacity:.7}.lt-ar-menu{position:absolute;top:100%;left:0;z-index:1000;min-width:0;margin-top:calc(var(--lt-control-border-width) * -1);display:flex;flex-direction:column;padding:.25rem 0;background:var(--lt-control-bg);border:var(--lt-control-border-width) solid var(--lt-link);border-radius:0 0 var(--lt-radius) var(--lt-radius);box-shadow:var(--shadowLarge);animation:lt-ar-in .12s ease-out}@keyframes lt-ar-in{0%{opacity:0;transform:translateY(-.125rem)}to{opacity:1;transform:translateY(0)}}.lt-ar-item{display:flex;align-items:center;justify-content:space-between;gap:0;min-height:2rem;padding:0 var(--lt-ar-pad-right, .875rem) 0 .875rem;font-family:var(--lt-font);font-size:var(--lt-control-font-size);color:var(--lt-cell-text);background:transparent;border:none;cursor:pointer;text-align:left;transition:background .1s,color .1s}.lt-ar-item:hover{background:var(--lt-row-hover)}.lt-ar-item.is-selected{color:var(--lt-link);font-weight:700}.lt-ar-tick{display:inline-flex;flex:0 0 auto;justify-content:center;width:.75rem;color:var(--lt-link)}.lt-ar-tick svg{display:block}\n"] }]
         }], propDecorators: { seconds: [{
                 type: Input
             }], loading: [{
@@ -11874,6 +12066,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Output
             }], secondsChange: [{
                 type: Output
+            }], arEl: [{
+                type: ViewChild,
+                args: ['arEl']
+            }], valueEl: [{
+                type: ViewChild,
+                args: ['valueEl']
+            }], chevronEl: [{
+                type: ViewChild,
+                args: ['chevronEl']
             }] } });
 
 /**
@@ -11941,11 +12142,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-/** Header cell for {@link ListTableComponent}: label, 3-state sort (asc/desc), and hide. */
+/** Header cell for {@link ListTableComponent}: label and 3-state sort (asc/desc). */
 class ListHeaderCellComponent {
     constructor() {
         this.sortChanged = new EventEmitter();
-        this.hideColumn = new EventEmitter();
     }
     get enableSorting() {
         return !!(this.column?.sortable || this.column?.enableSorting);
@@ -11959,24 +12159,18 @@ class ListHeaderCellComponent {
         this.column.onSort?.(this.column.key, dir);
         this.sortChanged.emit({ colId: this.column.key, dir });
     }
-    hide(event) {
-        event.stopPropagation();
-        this.hideColumn.emit(this.column);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListHeaderCellComponent, isStandalone: false, selector: "lib-list-header-cell", inputs: { column: "column", sortDir: "sortDir" }, outputs: { sortChanged: "sortChanged", hideColumn: "hideColumn" }, ngImport: i0, template: "<div\n  (click)=\"sort()\"\n  [ngClass]=\"{ 'nf-can-sort': enableSorting }\"\n  class=\"lt-header-container\"\n  id=\"TableHeaderContainer_{{ column.key }}\"\n>\n  @if (column.hideable !== false) {\n    <span\n      (click)=\"hide($event)\"\n      class=\"lt-header-icon lt-col-hide-button\"\n      id=\"HeaderHide_{{ column.key }}\"\n      title=\"Hide Column\"\n    >\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n        <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"\n          d=\"M1 8s2.7-4.5 7-4.5S15 8 15 8s-2.7 4.5-7 4.5S1 8 1 8Z\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/>\n        <line x1=\"2.5\" y1=\"13.5\" x2=\"13.5\" y2=\"2.5\" stroke=\"currentColor\" stroke-width=\"1.3\"/>\n      </svg>\n    </span>\n  }\n  <div class=\"lt-header-label\">\n    <span\n      [title]=\"column.label || null\"\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"] }] }); }
+    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" }, 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  <div class=\"lt-header-label\">\n    <span\n      [title]=\"column.label || null\"\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;position:relative}.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-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 || null\"\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"] }]
+            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  <div class=\"lt-header-label\">\n    <span\n      [title]=\"column.label || null\"\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;position:relative}.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-sort{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:auto;margin-right:.375rem}.lt-sort svg{display:block}.lt-sort .lt-sort-up,.lt-sort .lt-sort-down{fill:var(--lt-icon);opacity:.35;transition:opacity .15s,fill .15s}.lt-sort.asc .lt-sort-up,.lt-sort.desc .lt-sort-down{fill:var(--lt-icon-active);opacity:1}.nf-hidden{display:none}\n"] }]
         }], propDecorators: { column: [{
                 type: Input
             }], sortDir: [{
                 type: Input
             }], sortChanged: [{
                 type: Output
-            }], hideColumn: [{
-                type: Output
             }] } });
 
 /*
@@ -12018,6 +12212,8 @@ class ListFilterCellComponent {
         this.selectedValues = [];
         /** In-dropdown search text for the multi-select attribute combo. */
         this.attrSearch = '';
+        /** Match any selected attribute (or) vs every one (and); attribute filters only. */
+        this.attrSemantic = 'AnyOf';
         this.open = false;
         this.menuLeft = 0;
         this.menuTop = 0;
@@ -12217,10 +12413,19 @@ class ListFilterCellComponent {
             value: [...this.selectedValues],
             label: this.selectedValues.map((v) => this.labelForValue(v)).join(', '),
             type: this.isAttributeMode ? 'ATTRIBUTE' : 'MULTISELECT',
-            semantic: 'AnyOf',
+            semantic: this.isAttributeMode ? this.attrSemantic : 'AnyOf',
         };
         this.filterService.updateFilter(filter);
     }
+    setSemantic(semantic) {
+        if (this.attrSemantic === semantic) {
+            return;
+        }
+        this.attrSemantic = semantic;
+        if (this.selectedValues.length) {
+            this.emitMulti();
+        }
+    }
     // ------------------------------------------------------------------ date range
     selectDatePreset(opt) {
         this.selectedValue = opt.value;
@@ -12293,6 +12498,7 @@ class ListFilterCellComponent {
         this.textValue = '';
         this.dateRangeStart = null;
         this.dateRangeEnd = null;
+        this.attrSemantic = 'AnyOf';
         this.removeThis();
     }
     removeThis() {
@@ -12319,6 +12525,9 @@ class ListFilterCellComponent {
         }
         else if (this.mode === 'multi') {
             this.selectedValues = _.isArray(match.value) ? [...match.value] : [match.value];
+            if (this.isAttributeMode) {
+                this.attrSemantic = match.semantic === 'AllOf' ? 'AllOf' : 'AnyOf';
+            }
         }
         else if (this.mode === 'daterange') {
             // keep the locally chosen preset label; match.value is the raw [start,end] range
@@ -12328,11 +12537,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]=\"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: i1$4.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=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M1 1.5 5 5 9 1.5\"/></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 (isAttributeMode) {\n            <div class=\"fc-semantic\" role=\"group\" aria-label=\"Match\" (click)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"fc-semantic-opt\" [class.active]=\"attrSemantic === 'AnyOf'\" (click)=\"setSemantic('AnyOf')\">Any of</button>\n              <button type=\"button\" class=\"fc-semantic-opt\" [class.active]=\"attrSemantic === 'AllOf'\" (click)=\"setSemantic('AllOf')\">All of</button>\n            </div>\n          }\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 var(--lt-control-padding-x);font-family:var(--lt-font);font-size:.8125rem;font-weight:var(--lt-control-font-weight);color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--lt-control-border-full);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:20rem;overflow-y:auto;padding:.375rem;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-semantic{display:flex;gap:.1875rem;margin:.125rem 0 .4375rem;padding:.1875rem;background:color-mix(in srgb,var(--lt-border) 30%,var(--lt-control-bg));border:1px solid var(--lt-border);border-radius:var(--lt-radius)}.fc-semantic-opt{flex:1 1 0;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:500;color:var(--lt-cell-text);background:transparent;border:none;border-radius:calc(var(--lt-radius) - .0625rem);cursor:pointer}.fc-semantic-opt:hover:not(.active){color:var(--lt-link)}.fc-semantic-opt.active{color:var(--lt-link);background:var(--lt-control-bg);box-shadow:0 1px 2px color-mix(in srgb,var(--lt-cell-text) 14%,transparent)}.fc-opt{display:flex;align-items:center;gap:.5625rem;width:100%;padding:.5rem;font-family:var(--lt-font);font-size:.875rem;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:1.125rem;height:1.125rem;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;padding:.125rem 0 .4375rem;background:var(--lt-control-bg)}.fc-search-icon{position:absolute;left:.625rem;top:.125rem;display:flex;align-items:center;height:2.125rem;color:var(--lt-icon);pointer-events:none}.fc-search-input{width:100%;box-sizing:border-box;height:2.125rem;padding:0 .625rem 0 2rem;font-family:var(--lt-font);font-size:.8125rem;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:.1875rem .5rem;font-size:.8125rem;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: i1$4.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]=\"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"] }]
+            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=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M1 1.5 5 5 9 1.5\"/></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 (isAttributeMode) {\n            <div class=\"fc-semantic\" role=\"group\" aria-label=\"Match\" (click)=\"$event.stopPropagation()\">\n              <button type=\"button\" class=\"fc-semantic-opt\" [class.active]=\"attrSemantic === 'AnyOf'\" (click)=\"setSemantic('AnyOf')\">Any of</button>\n              <button type=\"button\" class=\"fc-semantic-opt\" [class.active]=\"attrSemantic === 'AllOf'\" (click)=\"setSemantic('AllOf')\">All of</button>\n            </div>\n          }\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 var(--lt-control-padding-x);font-family:var(--lt-font);font-size:.8125rem;font-weight:var(--lt-control-font-weight);color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--lt-control-border-full);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:20rem;overflow-y:auto;padding:.375rem;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-semantic{display:flex;gap:.1875rem;margin:.125rem 0 .4375rem;padding:.1875rem;background:color-mix(in srgb,var(--lt-border) 30%,var(--lt-control-bg));border:1px solid var(--lt-border);border-radius:var(--lt-radius)}.fc-semantic-opt{flex:1 1 0;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:500;color:var(--lt-cell-text);background:transparent;border:none;border-radius:calc(var(--lt-radius) - .0625rem);cursor:pointer}.fc-semantic-opt:hover:not(.active){color:var(--lt-link)}.fc-semantic-opt.active{color:var(--lt-link);background:var(--lt-control-bg);box-shadow:0 1px 2px color-mix(in srgb,var(--lt-cell-text) 14%,transparent)}.fc-opt{display:flex;align-items:center;gap:.5625rem;width:100%;padding:.5rem;font-family:var(--lt-font);font-size:.875rem;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:1.125rem;height:1.125rem;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;padding:.125rem 0 .4375rem;background:var(--lt-control-bg)}.fc-search-icon{position:absolute;left:.625rem;top:.125rem;display:flex;align-items:center;height:2.125rem;color:var(--lt-icon);pointer-events:none}.fc-search-input{width:100%;box-sizing:border-box;height:2.125rem;padding:0 .625rem 0 2rem;font-family:var(--lt-font);font-size:.8125rem;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:.1875rem .5rem;font-size:.8125rem;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: [{
@@ -12376,6 +12585,87 @@ class ListTableComponent {
             this.buildColumns();
         }
     }
+    set rowData(value) {
+        this._rowData = value || [];
+        this.rebuildFlatRows();
+    }
+    get rowData() {
+        return this._rowData;
+    }
+    // fitColumns: keep the table within its visible width when resizing - a column can only grow until
+    // the other columns reach their set or minimum width, then the drag stops, so nothing is pushed
+    // off screen into the horizontal scroll. Off by default (columns can grow past the view and scroll).
+    set options(value) {
+        const wasTree = !!this._options?.tree;
+        this._options = value || {};
+        // rebuild the render list if tree mode was flipped after init, otherwise flatRows
+        // keeps the pre-toggle shape
+        if (this._initialized && !!this._options.tree !== wasTree) {
+            this.rebuildFlatRows();
+        }
+    }
+    get options() {
+        return this._options;
+    }
+    /** Tree mode: columns per depth level (index = level; level 0 uses `columns`).
+     *  Nested rows render in their own grid with a per-level sub-header, so children
+     *  need not match the parent. Unset renders children with the parent's columns.
+     *  The bound value is the default; users can show/hide/reorder/resize child columns
+     *  per depth from the Columns menu, persisted per table. */
+    set childColumnsByLevel(v) {
+        this._declaredChildColumnsByLevel = v;
+        this.buildChildColumns();
+    }
+    get childColumnsByLevel() {
+        return this._childColumnsByLevel;
+    }
+    invalidateColumnCache() {
+        this._childColsVersion++;
+    }
+    syncTreeMemo() {
+        if (this._treeMemoVersion !== this._childColsVersion) {
+            this._treeKeyCache.clear();
+            this._leadOffsetCache.clear();
+            this._treeMemoVersion = this._childColsVersion;
+        }
+    }
+    /** Rebuilds the effective per-level child columns from the declared defaults with
+     *  any persisted order/visibility/width applied. */
+    buildChildColumns() {
+        const declared = this._declaredChildColumnsByLevel;
+        if (!declared) {
+            this._childColumnsByLevel = undefined;
+            this.invalidateColumnCache();
+            return;
+        }
+        this._childColumnsByLevel = declared.map((set, level) => set && set.length ? this.svc.applyPersistedChildState(level, set) : (set ? [...set] : set));
+        this.invalidateColumnCache();
+    }
+    /** Tree look: 'card' floats each nested level as a bordered card; 'flat' renders
+     *  nested rows inline with the table, sub-headers as plain strips, no card chrome.
+     *  The bound value is the default; the user can switch it from the Columns menu and
+     *  the choice is remembered per table. */
+    set treeVariant(v) {
+        this._declaredTreeVariant = v;
+        this._treeVariant = v;
+    }
+    get treeVariant() {
+        return this._treeVariant;
+    }
+    get isFlatTree() {
+        return this.isTreeMode && this.treeVariant === 'flat';
+    }
+    /** Show the flat/nested switch only when the table actually renders nested rows. */
+    get canSwitchTreeVariant() {
+        return this.isTreeMode && this.hasChildColumns;
+    }
+    setTreeVariant(variant) {
+        if (this._treeVariant === variant) {
+            return;
+        }
+        this._treeVariant = variant;
+        this.svc.saveTreeVariant(variant);
+    }
     constructor(svc, tableFilterService, el, ngZone, sanitizer) {
         this.svc = svc;
         this.tableFilterService = tableFilterService;
@@ -12383,9 +12673,19 @@ class ListTableComponent {
         this.ngZone = ngZone;
         this.sanitizer = sanitizer;
         this._tableId = '';
-        this.rowData = [];
+        this._rowData = [];
         this.isLoading = false;
-        this.options = { noSelect: false, noMenu: false };
+        this._options = { noSelect: false, noMenu: false };
+        // Cached per level; a width change mutates the same column objects, so no rebuild is needed.
+        this._childLevelCache = new Map();
+        this._childColsVersion = 0;
+        this._childLevelCacheVersion = -1;
+        // per-level derived values, recomputed only when the column set changes, so the
+        // template's per-cell/per-row calls stay cheap on every change-detection pass
+        this._treeKeyCache = new Map();
+        this._leadOffsetCache = new Map();
+        this._treeMemoVersion = -1;
+        this.nodeToggled = new EventEmitter();
         this.hasNext = false;
         this.hasPrev = false;
         this.startCount = '-';
@@ -12403,6 +12703,8 @@ class ListTableComponent {
         this.filterColumn = 'name';
         this.actionRequested = new EventEmitter();
         this.tableReady = new EventEmitter();
+        /** Full set of selected rows (all depths) whenever the selection changes. */
+        this.selectionChanged = new EventEmitter();
         /** Full column list (includes hidden), after persisted state. */
         this.allColumns = [];
         /** Currently rendered columns (visible + ordered). */
@@ -12418,6 +12720,28 @@ class ListTableComponent {
         this.selectedItem = { actionList: [] };
         // ---- selection ----
         this.allToggled = false;
+        /** Rows actually rendered: in tree mode this is the roots plus the expanded
+         *  descendants in order; otherwise it is `rowData` unchanged. */
+        this.flatRows = [];
+        this._treeVariant = 'card';
+        this._declaredTreeVariant = 'card';
+        /** Show the flat/nested row-layout switch in the Columns menu. Hidden for now;
+         *  the variant still comes from the `treeVariant` input. */
+        this.showTreeVariantToggle = false;
+        /** Flat variant only: draw a running guide rail down the left of each nested level. */
+        this.treeRail = false;
+        this.treeIndentRem = 1.25;
+        // nudges cards past the first nested level right so their edge lands on the
+        // parent chevron (a nested chevron sits one grid-padding deeper than the root's)
+        this.treeDeepAlignRem = 0.625;
+        // flat first-column indent: base clears the select gutter, then one chevron-width
+        // per level so each sub-header lines up under its parent row's name
+        this.treeFlatBaseRem = 3.75;
+        this.treeFlatStepRem = 2.125;
+        // nested card's left inset before per-depth indent; must match the --lt-card-inset token
+        this.treeCardBaseRem = 4;
+        // width of the leading checkbox column injected into nested grids when selectChildren is on
+        this.treeSelectColRem = 2.25;
         // ---- column chooser (skinned show/hide + reorder panel) ----
         this.showColumnChooser = false;
         // ---- integrated toolbar: search + filter chips + pagination ----
@@ -12440,16 +12764,28 @@ class ListTableComponent {
         this._initialColumns = [];
         this._initialized = false;
         this.subscription = new Subscription();
-        this.trackRow = (index, row) => row?.id ?? row?.name ?? index;
+        // expansion + lazily-loaded children keyed by __treeRowKey, so a rowData refresh
+        // (auto-refresh, paging, filter) keeps the tree open instead of collapsing it
+        this._expandedKeys = new Set();
+        this._childrenCache = new Map();
+        this._destroyed = false;
+        this.trackRow = (index, row) => row?.__treeRowKey ?? row?.id ?? row?.name ?? index;
         this.trackCol = (index, col) => col.key;
         // ---------------------------------------------------------------- hover tooltip
         this.hoverTooltip = null;
-        // ---------------------------------------------------------------- selection
         this.toggleItem = (item) => {
             item.selected = !item.selected;
-            this.allToggled = !_.isEmpty(this.rowData) && _.every(this.rowData, { selected: true });
+            this.syncSelectAll();
             this.actionRequested.emit({ action: 'toggleItem', item });
-        };
+            this.emitSelection();
+        };
+        this._railCache = new Map();
+        // The whole chooser row is draggable, and the label sits inside the visibility
+        // toggle button, so a reorder drag ends with a click on that button. This guard
+        // swallows that one click so dragging a row never also hides its column.
+        this._chooserDragged = false;
+        // ---- nested-column chooser: one expandable group per depth level ----
+        this.nestedChooserOpen = new Set();
         // ---------------------------------------------------------------- action menus
         this.openActionMenu = (event, item) => {
             this.selectedItem = item;
@@ -12485,7 +12821,12 @@ class ListTableComponent {
         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._treeVariant = this.svc.restoreTreeVariant(this._declaredTreeVariant);
+        this.buildChildColumns();
         this.buildColumns();
+        // all inputs are bound by now, so settle the render list against the final
+        // tree flag (the rowData setter may have run before `options` arrived)
+        this.rebuildFlatRows();
         this.updateEntityTypeLabel();
         this.subscription.add(this.tableFilterService.filtersChanged.subscribe((filters) => {
             // chips: every non-hidden filter except the free-text search (shown in the box)
@@ -12514,6 +12855,7 @@ class ListTableComponent {
         this.ensureFilterResizeObserver();
     }
     ngOnDestroy() {
+        this._destroyed = true;
         this.subscription.unsubscribe();
         this.detachResizeListeners();
         this.filterRO?.disconnect();
@@ -12683,6 +13025,7 @@ class ListTableComponent {
         this.hiddenColumns = this.allColumns
             .filter((c) => c.hidden)
             .map((c) => ({ ...c, headerName: c.label }));
+        this.invalidateColumnCache();
     }
     colWidth(col) {
         return col.width != null ? `${col.width}px` : null;
@@ -12751,17 +13094,325 @@ class ListTableComponent {
     onCellLeave() {
         this.hoverTooltip = null;
     }
+    // ---------------------------------------------------------------- selection
+    /** True when nested rows get checkboxes and join the selection (opt-in). */
+    get childSelectEnabled() {
+        return !!this.options?.selectChildren && !this.options?.noSelect;
+    }
+    /** Rows the checkboxes and select-all act on: top-level only, unless selectChildren
+     *  is set. Keeps select-all from marking nested rows a host that reads rowData never sees. */
+    get selectableRows() {
+        if (!this.isTreeMode || this.childSelectEnabled) {
+            return this.flatRows;
+        }
+        return this.flatRows.filter((r) => (r.__treeLevel ?? 0) === 0);
+    }
     /** Some rows selected but the header select-all isn't fully on (indeterminate). */
     get someSelected() {
-        return !this.allToggled && _.some(this.rowData, { selected: true });
+        return !this.allToggled && this.selectableRows.some((r) => r.selected);
     }
     toggleAll() {
         const newState = !this.allToggled;
         this.allToggled = newState;
-        _.forEach(this.rowData, (row) => {
-            row.selected = newState;
-        });
+        this.selectableRows.forEach((row) => (row.selected = newState));
         this.actionRequested.emit({ action: 'toggleAll' });
+        this.emitSelection();
+    }
+    syncSelectAll() {
+        const rows = this.selectableRows;
+        this.allToggled = rows.length > 0 && rows.every((r) => r.selected);
+    }
+    /** Emit every selected row across all depths. Walks the full data, not just the rendered
+     *  rows, so a collapsed parent's selected children are still reported. */
+    emitSelection() {
+        const out = [];
+        const walk = (rows) => {
+            (rows || []).forEach((r) => {
+                if (r.selected) {
+                    out.push(r);
+                }
+                if (Array.isArray(r.children)) {
+                    walk(r.children);
+                }
+            });
+        };
+        walk(this._rowData);
+        this.selectionChanged.emit(out);
+    }
+    // ---------------------------------------------------------------- tree rows
+    get isTreeMode() {
+        return !!this.options?.tree;
+    }
+    /** True when per-level child columns are configured (children render in their own
+     *  grid with a sub-header rather than the parent's columns). */
+    get hasChildColumns() {
+        return !!(this.childColumnsByLevel && this.childColumnsByLevel.length);
+    }
+    /** Columns used at a given depth: level 0 is the main (visible) columns; deeper
+     *  levels use `childColumnsByLevel`, falling back to the deepest set defined. */
+    columnsForLevel(level) {
+        if (level <= 0 || !this.hasChildColumns) {
+            return this.visibleColumns;
+        }
+        if (this._childLevelCacheVersion !== this._childColsVersion) {
+            this._childLevelCache.clear();
+            this._childLevelCacheVersion = this._childColsVersion;
+        }
+        const cached = this._childLevelCache.get(level);
+        if (cached) {
+            return cached;
+        }
+        const sets = this.childColumnsByLevel;
+        const set = sets[level] ?? sets[sets.length - 1];
+        const cols = (set ?? this.visibleColumns).filter((c) => !c.hidden);
+        this._childLevelCache.set(level, cols);
+        return cols;
+    }
+    /** Child columns the chooser lists at a depth: all declared ones (including hidden),
+     *  minus structural columns like the select checkbox or row-actions gutter. */
+    allColumnsForLevel(level) {
+        return (this._childColumnsByLevel?.[level] ?? []).filter((c) => !c.excludeFromChooser);
+    }
+    /** Depths that offer configurable columns (skips the level-0 placeholder and any
+     *  level that only holds structural columns), one chooser group per level. */
+    get childLevels() {
+        const sets = this._childColumnsByLevel;
+        if (!sets) {
+            return [];
+        }
+        const levels = [];
+        sets.forEach((_set, level) => {
+            if (level > 0 && this.allColumnsForLevel(level).length) {
+                levels.push(level);
+            }
+        });
+        return levels;
+    }
+    /** Chooser hint for a nested level: its first few column labels, then "+N". */
+    childLevelLabel(level) {
+        const labels = this.allColumnsForLevel(level)
+            .map((c) => c.label)
+            .filter(Boolean);
+        const max = 3;
+        if (labels.length <= max) {
+            return labels.join(' / ');
+        }
+        return labels.slice(0, max).join(' / ') + ' +' + (labels.length - max);
+    }
+    /** Key of the column that carries the expand control + indentation for a column set:
+     *  the flagged one, else the first real data column (skipping a leading structural
+     *  column such as a select checkbox the host put at the start). */
+    treeColumnKeyFor(cols) {
+        return (cols.find((c) => c.treeColumn) || cols.find((c) => !c.excludeFromChooser) || cols[0])?.key;
+    }
+    treeColumnKeyForLevel(level) {
+        this.syncTreeMemo();
+        if (!this._treeKeyCache.has(level)) {
+            this._treeKeyCache.set(level, this.treeColumnKeyFor(this.columnsForLevel(level)));
+        }
+        return this._treeKeyCache.get(level);
+    }
+    /** Width of the columns before the tree column, used to pull the flat first-column
+     *  indent back by whatever structural columns (like a select checkbox) sit ahead of
+     *  it, so its content still lands under the parent row's name. */
+    treeLeadOffset(level) {
+        this.syncTreeMemo();
+        const cacheKey = `${level}|${this.childSelectEnabled}`;
+        const hit = this._leadOffsetCache.get(cacheKey);
+        if (hit !== undefined) {
+            return hit;
+        }
+        const cols = this.columnsForLevel(level);
+        const treeKey = this.treeColumnKeyForLevel(level);
+        let px = 0;
+        let count = 0;
+        for (const c of cols) {
+            if (c.key === treeKey) {
+                break;
+            }
+            px += c.width ?? 0;
+            count++;
+        }
+        const gap = 'var(--lt-tree-col-gap, 0.5rem)';
+        // the injected select column (when on) sits before every data column
+        const selRem = this.childSelectEnabled ? this.treeSelectColRem : 0;
+        const gaps = count + (this.childSelectEnabled ? 1 : 0);
+        const result = (!gaps && !selRem && !px) ? '0px' : `calc(${selRem}rem + ${px}px + ${gaps} * ${gap})`;
+        this._leadOffsetCache.set(cacheKey, result);
+        return result;
+    }
+    isTreeColumn(col, level) {
+        return this.isTreeMode && col.key === this.treeColumnKeyForLevel(level);
+    }
+    isTreeCell(col) {
+        return this.isTreeColumn(col, 0);
+    }
+    /** Columns a full-width nested row spans: the data columns plus the select and
+     *  menu gutters, matching the header's cell count. */
+    get treeSpanCount() {
+        return this.visibleColumns.length + (this.options?.noSelect ? 0 : 1) + (this.options?.noMenu ? 0 : 1);
+    }
+    /** Per-level indent (rem); the card variant nudges levels past the first so the edge meets the parent chevron. */
+    treeIndentFor(level) {
+        const align = this.treeVariant === 'card' && level >= 2 ? this.treeDeepAlignRem : 0;
+        return level * this.treeIndentRem + align;
+    }
+    /** Flat variant: left pad (rem) of a nested row's first column (sub-header + data),
+     *  one chevron-width per level so it lines up under the parent row's name. */
+    treeFlatFirstIndentRem(level) {
+        return this.treeFlatBaseRem + level * this.treeFlatStepRem;
+    }
+    /** Flat variant: drop the chevron slot for a leaf-only level so values sit under their header. */
+    showTreeLead(row) {
+        return !(this.isFlatTree && row?.__treeSiblingsCanExpand === false);
+    }
+    /** Left inset (rem) of a nested card at a given depth, matching the td padding. */
+    treeCardLeftRem(level) {
+        return this.treeCardBaseRem + this.treeIndentFor(level);
+    }
+    /** Vertical guide lines redrawing each ancestor card's left edge at this row's
+     *  position, so a card's left border stays continuous where a nested card is
+     *  inserted between its rows. Returns a stack of 1px background gradients, or null
+     *  when there is no ancestor to redraw (roots and the first nested level). */
+    treeAncestorRails(level) {
+        const key = `${level}|${this._treeVariant}|${this.treeRail}|${this.isTreeMode}`;
+        const cached = this._railCache.get(key);
+        if (cached !== undefined) {
+            return cached;
+        }
+        const rails = this.computeAncestorRails(level);
+        this._railCache.set(key, rails);
+        return rails;
+    }
+    computeAncestorRails(level) {
+        if (!this.isTreeMode || level < 2) {
+            return null;
+        }
+        const flat = this.treeVariant === 'flat';
+        // card mode always redraws ancestor card borders; flat mode draws the rail
+        // only when the optional running rail is turned on
+        if (flat && !this.treeRail) {
+            return null;
+        }
+        const color = flat
+            ? 'var(--lt-tree-rail, color-mix(in srgb, var(--lt-border) 55%, var(--lt-icon)))'
+            : 'var(--lt-tree-card-border, color-mix(in srgb, var(--lt-border) 70%, var(--lt-icon)))';
+        const rails = [];
+        for (let k = 1; k < level; k++) {
+            const x = this.treeCardLeftRem(k);
+            rails.push(`linear-gradient(90deg, transparent ${x}rem, ${color} ${x}rem, ${color} calc(${x}rem + 1px), transparent calc(${x}rem + 1px))`);
+        }
+        return rails.join(', ');
+    }
+    gridTemplate(level) {
+        const tracks = this.columnsForLevel(level)
+            .map((c) => (c.width != null ? `${c.width}px` : 'minmax(0, 1fr)'));
+        if (this.childSelectEnabled) {
+            tracks.unshift(`${this.treeSelectColRem}rem`);
+        }
+        return tracks.join(' ');
+    }
+    hasChildren(row) {
+        return Array.isArray(row?.children) && row.children.length > 0;
+    }
+    /** A row can be expanded unless it is a leaf, has no loaded children, and has no
+     *  loader left to try. */
+    canExpand(row) {
+        if (!this.isTreeMode || row?.leaf === true) {
+            return false;
+        }
+        if (this.hasChildren(row)) {
+            return true;
+        }
+        const key = row?.__treeRowKey;
+        if (key && this._childrenCache.has(key)) {
+            return true;
+        }
+        return !!this.loadChildren && row?.__treeLoaded !== true;
+    }
+    toggleNode(row) {
+        if (!this.isTreeMode || row?.__treeLoading) {
+            return;
+        }
+        const key = row.__treeRowKey;
+        if (this._expandedKeys.has(key)) {
+            this._expandedKeys.delete(key);
+            this.rebuildFlatRows();
+            this.nodeToggled.emit({ row, expanded: false });
+            return;
+        }
+        if (this.loadChildren && !this.hasChildren(row) && !this._childrenCache.has(key)) {
+            row.__treeLoading = true;
+            row.__treeLoadError = false; // clear any previous failure on retry
+            this.rebuildFlatRows(); // surface the spinner while children load
+            // run the loader inside the executor so a synchronous throw rejects the
+            // promise instead of escaping and leaving __treeLoading stuck on forever
+            new Promise((resolve) => resolve(this.loadChildren(row))).then((children) => this.onChildrenLoaded(row, children), () => this.onChildrenLoaded(row, [], true));
+            return;
+        }
+        this._expandedKeys.add(key);
+        this.rebuildFlatRows();
+        this.nodeToggled.emit({ row, expanded: true });
+    }
+    onChildrenLoaded(row, children, failed = false) {
+        if (this._destroyed) {
+            return;
+        }
+        row.__treeLoading = false;
+        if (failed) {
+            // flag the failure so the toggle shows a retry affordance, and leave it collapsed
+            row.__treeLoadError = true;
+            this.rebuildFlatRows();
+            return;
+        }
+        const list = Array.isArray(children) ? children : [];
+        this._childrenCache.set(row.__treeRowKey, list);
+        row.children = list;
+        row.__treeLoaded = true;
+        if (!list.length) {
+            row.leaf = true; // nothing under it, so stop offering the control
+        }
+        this._expandedKeys.add(row.__treeRowKey);
+        this.rebuildFlatRows();
+        this.nodeToggled.emit({ row, expanded: true });
+    }
+    /** Flatten the tree into the ordered render list, tagging each row with its depth.
+     *  Outside tree mode the render list is `rowData` as-is. */
+    rebuildFlatRows() {
+        if (!this.isTreeMode) {
+            this.flatRows = this._rowData;
+            return;
+        }
+        const out = [];
+        const walk = (rows, level, parentKey) => {
+            const list = rows || [];
+            // when no sibling can expand, the level needs no chevron slot
+            const siblingsCanExpand = list.some((r) => this.canExpand(r));
+            list.forEach((row, idx) => {
+                row.__treeLevel = level;
+                row.__treeSiblingsCanExpand = siblingsCanExpand;
+                // first child of a group drives the per-expansion sub-header;
+                // first and last mark the top and bottom of the nested card
+                row.__treeFirstChild = level > 0 && idx === 0;
+                row.__treeLastChild = level > 0 && idx === list.length - 1;
+                // branch-unique track key: the same entity can appear under two parents
+                // in a flat tree, so fold the parent path in to keep @for keys distinct
+                row.__treeRowKey = parentKey + '/' + (row?.id ?? row?.name ?? idx);
+                // a rowData refresh replaces the row object; re-attach children we loaded
+                // earlier so an expanded lazy node stays populated instead of emptying out
+                if (!this.hasChildren(row) && this._childrenCache.has(row.__treeRowKey)) {
+                    row.children = this._childrenCache.get(row.__treeRowKey);
+                    row.__treeLoaded = true;
+                }
+                row.__treeExpanded = this._expandedKeys.has(row.__treeRowKey);
+                out.push(row);
+                if (row.__treeExpanded && this.hasChildren(row)) {
+                    walk(row.children, level + 1, row.__treeRowKey);
+                }
+            });
+        };
+        walk(this._rowData, 0, '');
+        this.flatRows = out;
     }
     // ---------------------------------------------------------------- sort
     onHeaderSort(event) {
@@ -12769,16 +13420,7 @@ class ListTableComponent {
             c.sortDir = c.key === event.colId ? event.dir : undefined;
         });
     }
-    // ---------------------------------------------------------------- hide / show / reorder
-    hideColumn(col) {
-        const target = this.allColumns.find((c) => c.key === col.key);
-        if (!target) {
-            return;
-        }
-        target.hidden = true;
-        this.updateVisible();
-        this.svc.saveState(this.allColumns);
-    }
+    // ---------------------------------------------------------------- show / reorder
     showColumn(event) {
         const target = this.allColumns.find((c) => c.key === event.column?.key);
         if (!target) {
@@ -12801,7 +13443,9 @@ class ListTableComponent {
     }
     resetTableColumns() {
         this.svc.reset();
+        this._treeVariant = this._declaredTreeVariant;
         this.allColumns = this._initialColumns.map((c) => ({ ...c }));
+        this._childColumnsByLevel = this._declaredChildColumnsByLevel?.map((set) => set ? set.map((c) => ({ ...c })) : set);
         this.updateVisible();
         this.closeActionMenu();
     }
@@ -12811,14 +13455,45 @@ class ListTableComponent {
     get hiddenColumnCount() {
         return this.allColumns.filter((c) => c.hidden && !c.excludeFromChooser && !this.isDefaultHidden(c)).length;
     }
-    /** True when visibility + order match the originally declared columns. */
+    /** True when visibility, order, and width all match the originally declared
+     *  columns. Width is included so resizing a column alone still enables the
+     *  reset button; a column with no declared width uses null on both sides so
+     *  it only counts as changed once the user drags it to a concrete width. */
     get columnsAtDefault() {
+        if (this.canSwitchTreeVariant && this._treeVariant !== this._declaredTreeVariant) {
+            return false;
+        }
         if (this.allColumns.length !== this._initialColumns.length) {
             return false;
         }
-        return this.allColumns.every((c, i) => {
+        const parentAtDefault = this.allColumns.every((c, i) => {
             const init = this._initialColumns[i];
-            return init && init.key === c.key && !!init.hidden === !!c.hidden;
+            return init
+                && init.key === c.key
+                && !!init.hidden === !!c.hidden
+                && (init.width ?? null) === (c.width ?? null);
+        });
+        return parentAtDefault && this.childColumnsAtDefault;
+    }
+    /** True when every nested level's columns match their declared order/visibility/width. */
+    get childColumnsAtDefault() {
+        const declared = this._declaredChildColumnsByLevel;
+        const current = this._childColumnsByLevel;
+        if (!declared || !current) {
+            return true;
+        }
+        return declared.every((set, level) => {
+            const cur = current[level] ?? [];
+            if (!set || set.length !== cur.length) {
+                return set ? set.length === cur.length : true;
+            }
+            return set.every((d, i) => {
+                const c = cur[i];
+                return c
+                    && d.key === c.key
+                    && !!d.hidden === !!c.hidden
+                    && (d.width ?? null) === (c.width ?? null);
+            });
         });
     }
     /** True when the column is hidden in the originally declared defaults. */
@@ -12836,36 +13511,82 @@ class ListTableComponent {
     closeColumnChooser() {
         this.showColumnChooser = false;
     }
-    toggleColumnVisible(col) {
-        if (col.hideable === false) {
+    onChooserDragStarted() {
+        this._chooserDragged = true;
+    }
+    onChooserDragEnded() {
+        // clear after the post-drag click has been handled (and skipped) below
+        setTimeout(() => (this._chooserDragged = false));
+    }
+    /** Toggle a column's visibility. `level` undefined targets the top-level columns;
+     *  a number targets that nested depth's columns. */
+    toggleColumnVisible(col, level) {
+        if (this._chooserDragged || col.hideable === false) {
             return;
         }
-        const target = this.allColumns.find((c) => c.key === col.key);
+        const set = level == null ? this.allColumns : this._childColumnsByLevel?.[level];
+        const target = set?.find((c) => c.key === col.key);
         if (!target) {
             return;
         }
+        if (!target.hidden && this.isLastVisibleColumn(target, level)) {
+            return;
+        }
         target.hidden = !target.hidden;
-        this.updateVisible();
-        this.svc.saveState(this.allColumns);
+        this.afterColumnChange(level, set);
     }
-    /** Columns shown in the Columns menu. */
+    /** True when this is the only visible column at its level, so its toggle is disabled
+     *  to keep at least one column on screen. */
+    isLastVisibleColumn(col, level) {
+        const list = level == null ? this.chooserColumns : this.allColumnsForLevel(level);
+        return !col.hidden && list.filter((c) => !c.hidden).length <= 1;
+    }
+    /** Columns shown in the top-level Columns menu. */
     get chooserColumns() {
         return this.allColumns.filter((c) => !c.excludeFromChooser);
     }
-    chooserReorder(event) {
+    /** Reorder columns from a chooser drag. `level` undefined targets the top-level
+     *  columns; a number targets that nested depth's columns. */
+    chooserReorder(event, level) {
         if (event.previousIndex === event.currentIndex) {
             return;
         }
-        // menu lists a subset, so map the drag indices back onto allColumns
-        const list = this.chooserColumns;
-        const from = this.allColumns.indexOf(list[event.previousIndex]);
-        const to = this.allColumns.indexOf(list[event.currentIndex]);
+        // the menu lists a chooser subset, so map the drag indices back onto the full set
+        const full = level == null ? this.allColumns : this._childColumnsByLevel?.[level];
+        const list = level == null ? this.chooserColumns : this.allColumnsForLevel(level);
+        if (!full) {
+            return;
+        }
+        const from = full.indexOf(list[event.previousIndex]);
+        const to = full.indexOf(list[event.currentIndex]);
         if (from < 0 || to < 0) {
             return;
         }
-        moveItemInArray(this.allColumns, from, to);
-        this.updateVisible();
-        this.svc.saveState(this.allColumns);
+        moveItemInArray(full, from, to);
+        this.afterColumnChange(level, full);
+    }
+    /** Refresh and persist after a column visibility/order change, routing to the
+     *  top-level or nested-level persistence as appropriate. */
+    afterColumnChange(level, set) {
+        if (level == null) {
+            this.updateVisible();
+            this.svc.saveState(this.allColumns);
+        }
+        else {
+            this.invalidateColumnCache();
+            this.svc.saveChildState(level, set);
+        }
+    }
+    isNestedGroupOpen(id) {
+        return this.nestedChooserOpen.has(id);
+    }
+    toggleNestedGroup(id) {
+        if (this.nestedChooserOpen.has(id)) {
+            this.nestedChooserOpen.delete(id);
+        }
+        else {
+            this.nestedChooserOpen.add(id);
+        }
     }
     // ---------------------------------------------------------------- resize
     startResize(col, event) {
@@ -12876,7 +13597,25 @@ class ListTableComponent {
         event.stopPropagation();
         const th = event.target?.closest('th');
         const startWidth = col.width ?? th?.offsetWidth ?? 150;
-        this.resizing = { col, startX: event.clientX, startWidth };
+        this.resizing = { col, startX: event.clientX, startWidth, persist: true };
+        this.setupFitCompensation(col, startWidth, this.visibleColumns, (key) => this.measuredHeaderWidth(key));
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
+    }
+    /** Resize a nested row's column. Measures the sub-header cell's current rendered
+     *  width so a flexible (1fr) column converts to a concrete width before dragging;
+     *  the grid reflows live because its template reads each column's width. */
+    startChildResize(col, level, event) {
+        if (col.resizable === false) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const cell = event.target?.closest('.lt-tree-subhead-cell');
+        const startWidth = col.width ?? Math.round(cell?.getBoundingClientRect().width ?? 150);
+        const grid = cell?.closest('.lt-tree-grid');
+        this.resizing = { col, startX: event.clientX, startWidth, persist: true, level };
+        this.setupFitCompensation(col, startWidth, this.columnsForLevel(level), (key) => this.measuredCellWidth(grid, level, key));
         document.addEventListener('pointermove', this.onPointerMove);
         document.addEventListener('pointerup', this.onPointerUp);
     }
@@ -12884,13 +13623,94 @@ class ListTableComponent {
         if (!this.resizing) {
             return;
         }
-        const delta = event.clientX - this.resizing.startX;
-        const min = this.resizing.col.minWidth ?? 40;
-        this.resizing.col.width = Math.max(min, Math.round(this.resizing.startWidth + delta));
+        const r = this.resizing;
+        const delta = event.clientX - r.startX;
+        if (r.sink && r.sinkStart != null) {
+            // fitColumns: the column grows and the sink shrinks by the same amount, so the table stays
+            // the same width and no other column (notably the tree column) shifts. The drag stops once
+            // the column or the sink reaches its minimum.
+            const d = Math.min(r.maxDelta ?? delta, Math.max(r.minDelta ?? delta, delta));
+            r.col.width = Math.round(r.startWidth + d);
+            r.sink.width = Math.round(r.sinkStart - d);
+        }
+        else {
+            const min = r.col.minWidth ?? 40;
+            r.col.width = Math.max(min, Math.round(r.startWidth + delta));
+        }
+    }
+    /** fitColumns: pick the sink column and the range the drag may travel, so the column and the sink
+     *  trade width while every other column stays fixed. No-op (plain resize) when fitColumns is off. */
+    setupFitCompensation(col, startWidth, columns, measure) {
+        if (!this.options?.fitColumns || !this.resizing) {
+            return;
+        }
+        const sink = this.pickSink(col, columns);
+        if (!sink) {
+            return;
+        }
+        const FLOOR = 60;
+        // measure() returns 0 when the element isn't found; fall back so a width of 0
+        // never gets frozen in (and later persisted) for the sink or a flex column
+        const sinkStart = sink.width ?? (measure(sink.key) || startWidth);
+        // Freeze any other flexible column to its rendered width so only the column and the sink move
+        // (otherwise the browser would still redistribute slack among the flexible columns). These are
+        // restored to flexible when the drag ends, so one resize doesn't pin the whole table to px.
+        const frozen = [];
+        columns.forEach((c) => {
+            if (c.key !== col.key && c.key !== sink.key && c.width == null) {
+                const w = measure(c.key);
+                if (w > 0) {
+                    c.width = w;
+                    frozen.push(c);
+                }
+            }
+        });
+        this.resizing.sink = sink;
+        this.resizing.sinkStart = sinkStart;
+        this.resizing.frozen = frozen;
+        this.resizing.maxDelta = Math.max(0, sinkStart - (sink.minWidth ?? FLOOR)); // grow until the sink hits its min
+        this.resizing.minDelta = Math.min(0, (col.minWidth ?? 40) - startWidth); // shrink until the column hits its min
+    }
+    /** The column that absorbs a resize: a flexible column first (it is meant to take up slack), else
+     *  the nearest resizable column that is not the tree column, so indentation never shifts. */
+    pickSink(col, columns) {
+        // never pick the tree column (explicit or implicit) as the sink, or resizing
+        // would move the expand chevrons
+        const treeKey = this.treeColumnKeyFor(columns);
+        const usable = columns.filter((c) => c.key !== col.key && c.resizable !== false && c.key !== treeKey);
+        const flex = usable.find((c) => c.width == null);
+        if (flex) {
+            return flex;
+        }
+        const idx = columns.findIndex((c) => c.key === col.key);
+        return usable.find((c) => columns.indexOf(c) > idx) ?? usable[usable.length - 1];
+    }
+    measuredHeaderWidth(key) {
+        const host = this.el?.nativeElement;
+        const th = host?.querySelector(`[id="Header_${key}"]`);
+        return th ? Math.round(th.getBoundingClientRect().width) : 0;
+    }
+    measuredCellWidth(grid, level, key) {
+        const idx = this.columnsForLevel(level).findIndex((c) => c.key === key);
+        const cells = grid?.querySelectorAll('.lt-tree-subhead-cell');
+        const cell = cells ? cells[idx] : undefined;
+        return cell ? Math.round(cell.getBoundingClientRect().width) : 0;
     }
     handleResizeEnd() {
-        if (this.resizing) {
-            this.svc.saveWidth(this.resizing.col.key, this.resizing.col.width, this.allColumns);
+        const r = this.resizing;
+        // columns frozen only to steady the drag go back to flexible, so the table keeps
+        // filling the viewport and their temporary px widths are not persisted by saveState
+        r?.frozen?.forEach((c) => (c.width = undefined));
+        if (r?.persist) {
+            if (r.level != null) {
+                const set = this._childColumnsByLevel?.[r.level];
+                if (set) {
+                    this.svc.saveChildWidth(r.level, r.col.key, r.col.width, set);
+                }
+            }
+            else {
+                this.svc.saveWidth(r.col.key, r.col.width, this.allColumns);
+            }
         }
         this.resizing = undefined;
         this.detachResizeListeners();
@@ -13095,11 +13915,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", 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        <lib-list-table-auto-refresh [loading]=\"filtering\" (refresh)=\"refresh()\"></lib-list-table-auto-refresh>\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 chooserColumns; 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-refresh-btn,.lt-filter-more-btn{display:inline-flex;align-items:center;gap:var(--lt-control-gap);height:var(--lt-toolbar-height);padding:0 var(--lt-control-padding-x);font-family:var(--lt-font);font-size:var(--lt-control-font-size);font-weight:var(--lt-control-font-weight);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-refresh-btn svg,.lt-filter-more-btn svg{display:block}.lt-columns-btn:hover,.lt-refresh-btn:hover,.lt-filter-more-btn:hover,.is-open.lt-columns-btn,.is-open.lt-refresh-btn,.is-open.lt-filter-more-btn,.is-on.lt-columns-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: i1$4.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: ListTableAutoRefreshComponent, selector: "lib-list-table-auto-refresh", inputs: ["seconds", "loading", "intervals"], outputs: ["refresh", "secondsChange"] }, { 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", loadChildren: "loadChildren", childColumnsByLevel: "childColumnsByLevel", 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", treeVariant: "treeVariant", showTreeVariantToggle: "showTreeVariantToggle", treeRail: "treeRail", initialPageSize: "initialPageSize" }, outputs: { nodeToggled: "nodeToggled", actionRequested: "actionRequested", tableReady: "tableReady", selectionChanged: "selectionChanged" }, host: { properties: { "class.lt-tree-flat": "this.isFlatTree" } }, 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        <!-- Consumer-supplied toolbar controls (e.g. page-specific filters), rendered inline beside search. -->\n        <ng-content select=\"[toolbar-filters]\"></ng-content>\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        <lib-list-table-auto-refresh [loading]=\"filtering\" (refresh)=\"refresh()\"></lib-list-table-auto-refresh>\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              @if (canSwitchTreeVariant && showTreeVariantToggle) {\n                <div class=\"lt-chooser-view\" role=\"group\" aria-label=\"Expanded row layout\">\n                  <span class=\"lt-chooser-view-label\">Expanded rows</span>\n                  <div class=\"lt-chooser-view-toggle\">\n                    <button type=\"button\" class=\"lt-chooser-view-opt\" [class.active]=\"treeVariant === 'flat'\" (click)=\"setTreeVariant('flat')\">Flat</button>\n                    <button type=\"button\" class=\"lt-chooser-view-opt\" [class.active]=\"treeVariant === 'card'\" (click)=\"setTreeVariant('card')\">Nested</button>\n                  </div>\n                </div>\n              }\n              <div class=\"lt-chooser-scroll\">\n              <ul class=\"lt-chooser-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"chooserReorder($event)\">\n                @for (col of chooserColumns; track col.key) {\n                  <li class=\"lt-chooser-row\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"col.reorderable === false\"\n                      (cdkDragStarted)=\"onChooserDragStarted()\" (cdkDragEnded)=\"onChooserDragEnded()\">\n                    <ng-container *ngTemplateOutlet=\"chooserRowBody; context: { col: col }\"></ng-container>\n                  </li>\n                }\n              </ul>\n              @if (canSwitchTreeVariant && childLevels.length) {\n                <div class=\"lt-chooser-nested\">\n                  <button\n                    type=\"button\"\n                    class=\"lt-chooser-group\"\n                    (click)=\"toggleNestedGroup('__root')\"\n                    [attr.aria-expanded]=\"isNestedGroupOpen('__root')\"\n                  >\n                    <span class=\"lt-chooser-chevron\" [class.open]=\"isNestedGroupOpen('__root')\" aria-hidden=\"true\">\n                      <svg viewBox=\"0 0 16 16\" width=\"11\" height=\"11\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 4l4 4-4 4\"/></svg>\n                    </span>\n                    <span class=\"lt-chooser-group-label\">Nested rows</span>\n                  </button>\n                  @if (isNestedGroupOpen('__root')) {\n                    @for (level of childLevels; track level) {\n                      <button\n                        type=\"button\"\n                        class=\"lt-chooser-group lt-chooser-group-sub\"\n                        (click)=\"toggleNestedGroup('lvl' + level)\"\n                        [attr.aria-expanded]=\"isNestedGroupOpen('lvl' + level)\"\n                      >\n                        <span class=\"lt-chooser-chevron\" [class.open]=\"isNestedGroupOpen('lvl' + level)\" aria-hidden=\"true\">\n                          <svg viewBox=\"0 0 16 16\" width=\"11\" height=\"11\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 4l4 4-4 4\"/></svg>\n                        </span>\n                        <span class=\"lt-chooser-group-label\">Level {{ level }}</span>\n                        <span class=\"lt-chooser-group-hint\">{{ childLevelLabel(level) }}</span>\n                      </button>\n                      @if (isNestedGroupOpen('lvl' + level)) {\n                        <ul class=\"lt-chooser-list lt-chooser-sublist\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"chooserReorder($event, level)\">\n                          @for (col of allColumnsForLevel(level); track col.key) {\n                            <li class=\"lt-chooser-row\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"col.reorderable === false\"\n                                (cdkDragStarted)=\"onChooserDragStarted()\" (cdkDragEnded)=\"onChooserDragEnded()\">\n                              <ng-container *ngTemplateOutlet=\"chooserRowBody; context: { col: col, level: level }\"></ng-container>\n                            </li>\n                          }\n                        </ul>\n                      }\n                    }\n                  }\n                </div>\n              }\n              </div>\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    <!-- inner content of a Columns-chooser row, shared by the top-level and nested lists.\n         The <li cdkDrag> wrapper stays inline in each list (above) so cdkDropList's content\n         query still registers it as a draggable; only the body is shared here.\n         `level` undefined targets the top-level columns, a number targets that nested depth. -->\n    <ng-template #chooserRowBody let-col=\"col\" let-level=\"level\">\n      <button\n        type=\"button\"\n        class=\"lt-chooser-toggle\"\n        [class.checked]=\"!col.hidden\"\n        [disabled]=\"col.hideable === false || isLastVisibleColumn(col, level)\"\n        [attr.title]=\"isLastVisibleColumn(col, level) ? 'At least one column must stay visible' : null\"\n        (click)=\"toggleColumnVisible(col, level)\"\n        [attr.aria-pressed]=\"!col.hidden\"\n      >\n        <span class=\"lt-chooser-box\" aria-hidden=\"true\">\n          <!-- always rendered: the check is white, so it stays invisible until the box\n               turns blue when checked. Keeping it in the DOM means clicking to hide a\n               column never detaches the click target, which would otherwise make the\n               click-outside handler think the click was outside and close the menu. -->\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        </span>\n        <span class=\"lt-chooser-text\">{{ col.label }}</span>\n        @if (level == null && isDefaultHidden(col)) {\n          <span class=\"lt-chooser-default-tag\">hidden by default</span>\n        }\n      </button>\n      @if (col.reorderable !== false) {\n        <!-- the whole row is the drag target (cdkDrag on the <li>); this is just the grip affordance -->\n        <span class=\"lt-chooser-handle\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 10 16\" width=\"10\" height=\"15\" fill=\"currentColor\">\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    </ng-template>\n\n    <div class=\"lt-scroll\" id=\"ItemTable\">\n      <!-- expand/collapse control, reused by root rows and nested child rows -->\n      <ng-template #treeToggle let-row=\"row\">\n        @if (canExpand(row)) {\n          <button\n            type=\"button\"\n            class=\"lt-tree-toggle\"\n            [class.is-expanded]=\"row.__treeExpanded\"\n            [class.is-loading]=\"row.__treeLoading\"\n            [class.is-error]=\"row.__treeLoadError\"\n            (click)=\"$event.stopPropagation(); toggleNode(row)\"\n            [attr.aria-expanded]=\"!!row.__treeExpanded\"\n            [attr.aria-busy]=\"!!row.__treeLoading\"\n            [attr.title]=\"row.__treeLoadError ? 'Could not load children - click to retry' : null\"\n            [attr.aria-label]=\"row.__treeExpanded ? 'Collapse row' : 'Expand row'\"\n          >\n            <svg class=\"lt-tree-chevron\" viewBox=\"0 0 16 16\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n              <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 4l4 4-4 4\"/>\n            </svg>\n            @if (row.__treeLoading) {\n              <span class=\"lt-tree-spinner\" aria-hidden=\"true\"></span>\n            }\n          </button>\n        } @else {\n          <span class=\"lt-tree-spacer\" aria-hidden=\"true\"></span>\n        }\n      </ng-template>\n\n      <!-- a single cell's content, reused across the fixed grid and the nested grid -->\n      <ng-template #cellBody let-col=\"col\" let-row=\"row\" let-i=\"i\">\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      </ng-template>\n\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                [class.lt-th-tree]=\"isTreeCell(col)\"\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                ></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 flatRows; track trackRow($index, row); let i = $index) {\n            @if (isTreeMode && row.__treeLevel > 0 && hasChildColumns) {\n              <!-- nested rows with their own per-level columns, laid out in a grid\n                   that spans the full table width (so they need not match the parent) -->\n              @if (row.__treeFirstChild) {\n                <tr class=\"lt-tree-subhead-row\">\n                  <td\n                    [attr.colspan]=\"treeSpanCount\"\n                    [style.--lt-tree-indent.rem]=\"treeIndentFor(row.__treeLevel)\"\n                    [style.--lt-tree-first-indent.rem]=\"treeFlatFirstIndentRem(row.__treeLevel)\"\n                    [style.--lt-tree-lead-offset]=\"treeLeadOffset(row.__treeLevel)\"\n                    [style.background-image]=\"treeAncestorRails(row.__treeLevel)\"\n                  >\n                    <div\n                      class=\"lt-tree-grid\"\n                      [style.grid-template-columns]=\"gridTemplate(row.__treeLevel)\"\n                    >\n                      @if (childSelectEnabled) {\n                        <span class=\"lt-tree-subhead-cell lt-tree-select-cell\"></span>\n                      }\n                      @for (col of columnsForLevel(row.__treeLevel); track col.key; let last = $last) {\n                        <span class=\"lt-tree-subhead-cell\" [class.lt-tree-indent-col]=\"isTreeColumn(col, row.__treeLevel)\" [ngClass]=\"cellClass(col)\">\n                          {{ col.label }}\n                          @if (!last && col.resizable !== false) {\n                            <span class=\"lt-resize lt-tree-resize\" (pointerdown)=\"startChildResize(col, row.__treeLevel, $event)\"></span>\n                          }\n                        </span>\n                      }\n                    </div>\n                  </td>\n                </tr>\n              }\n              <tr\n                class=\"lt-row lt-tree-child-row\"\n                [class.lt-tree-last-child]=\"row.__treeLastChild\"\n                [class.lt-row-selected]=\"row.selected\"\n                [class.lt-row-expanded]=\"row.__treeExpanded\"\n              >\n                <td\n                  [attr.colspan]=\"treeSpanCount\"\n                  [style.--lt-tree-indent.rem]=\"treeIndentFor(row.__treeLevel)\"\n                  [style.--lt-tree-first-indent.rem]=\"treeFlatFirstIndentRem(row.__treeLevel)\"\n                  [style.--lt-tree-lead-offset]=\"treeLeadOffset(row.__treeLevel)\"\n                  [style.background-image]=\"treeAncestorRails(row.__treeLevel)\"\n                >\n                  <div\n                    class=\"lt-tree-grid\"\n                    [style.grid-template-columns]=\"gridTemplate(row.__treeLevel)\"\n                  >\n                    @if (childSelectEnabled) {\n                      <div class=\"lt-tree-cellbox lt-tree-select-cell\">\n                        <lib-select-cell [row]=\"row\" [toggleItem]=\"toggleItem\"></lib-select-cell>\n                      </div>\n                    }\n                    @for (col of columnsForLevel(row.__treeLevel); track col.key) {\n                      <div\n                        class=\"lt-tree-cellbox\"\n                        [class.lt-tree-indent-col]=\"isTreeColumn(col, row.__treeLevel)\"\n                        [ngClass]=\"cellClass(col)\"\n                        (click)=\"onCellClick(col, row, i)\"\n                        (mouseenter)=\"onCellHover(col, row, i, $event)\"\n                        (mouseleave)=\"onCellLeave()\"\n                      >\n                        @if (isTreeColumn(col, row.__treeLevel) && showTreeLead(row)) {\n                          <span class=\"lt-tree-lead\">\n                            <ng-container *ngTemplateOutlet=\"treeToggle; context: {row: row}\"></ng-container>\n                          </span>\n                        }\n                        <ng-container *ngTemplateOutlet=\"cellBody; context: {col: col, row: row, i: i}\"></ng-container>\n                      </div>\n                    }\n                  </div>\n                </td>\n              </tr>\n            } @else {\n              <tr\n                class=\"lt-row\"\n                [class.lt-row-odd]=\"i % 2 === 1\"\n                [class.lt-row-selected]=\"row.selected\"\n                [class.lt-row-expanded]=\"row.__treeExpanded\"\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                    [class.lt-tree-cell]=\"isTreeCell(col)\"\n                    [ngClass]=\"cellClass(col)\"\n                    (click)=\"onCellClick(col, row, i)\"\n                    (mouseenter)=\"onCellHover(col, row, i, $event)\"\n                    (mouseleave)=\"onCellLeave()\"\n                  >\n                    @if (isTreeCell(col)) {\n                      <span class=\"lt-tree-cell-inner\">\n                        <span class=\"lt-tree-lead\" [style.margin-left.rem]=\"(row.__treeLevel || 0) * treeIndentRem\">\n                          <ng-container *ngTemplateOutlet=\"treeToggle; context: {row: row}\"></ng-container>\n                        </span>\n                        <ng-container *ngTemplateOutlet=\"cellBody; context: {col: col, row: row, i: i}\"></ng-container>\n                      </span>\n                    } @else {\n                      <ng-container *ngTemplateOutlet=\"cellBody; context: {col: col, row: row, i: i}\"></ng-container>\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          }\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-refresh-btn,.lt-filter-more-btn{display:inline-flex;align-items:center;gap:var(--lt-control-gap);height:var(--lt-toolbar-height);padding:0 var(--lt-control-padding-x);font-family:var(--lt-font);font-size:var(--lt-control-font-size);font-weight:var(--lt-control-font-weight);color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--lt-control-border-full);border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.lt-columns-btn svg,.lt-refresh-btn svg,.lt-filter-more-btn svg{display:block}.lt-columns-btn:hover,.lt-refresh-btn:hover,.lt-filter-more-btn:hover,.is-open.lt-columns-btn,.is-open.lt-refresh-btn,.is-open.lt-filter-more-btn,.is-on.lt-columns-btn,.is-on.lt-refresh-btn,.is-on.lt-filter-more-btn{border-color:var(--lt-link);color:var(--lt-link)}.is-on.lt-columns-btn,.is-on.lt-refresh-btn,.is-on.lt-filter-more-btn{background:color-mix(in srgb,var(--lt-link) 8%,var(--lt-control-bg))}.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.6rem;padding:0 .3125rem 0 1.25rem;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-tree{padding-left:2.75rem}.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:.75rem;height:2.25rem;cursor:col-resize}.lt-resize:before,.lt-resize:after{content:\"\";position:absolute;top:50%;height:1.25rem;transform:translateY(-50%);width:1px;background:color-mix(in srgb,var(--lt-border) 50%,var(--lt-icon));transition:background .15s}.lt-resize:before{right:.3125rem}.lt-resize:after{right:.125rem}.lt-resize:hover:before,.lt-resize:hover:after{background:color-mix(in srgb,var(--lt-icon) 72%,var(--lt-cell-text))}.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-tree-cell{padding-left:.625rem}.lt-tree-cell-inner{display:flex;align-items:center}.lt-tree-lead{display:inline-flex;align-items:center;flex:0 0 auto;margin-right:.375rem}.lt-tree-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;color:var(--lt-icon);background:transparent;border:none;border-radius:50%;cursor:pointer;transition:color .15s,background .15s}.lt-tree-toggle:hover{color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 18%,transparent)}.lt-tree-chevron{display:block;width:13.8px;height:13.8px;transition:transform .15s ease}.lt-tree-toggle.is-expanded .lt-tree-chevron{transform:rotate(90deg)}.lt-tree-toggle.is-error .lt-tree-chevron{color:var(--lt-negative, #dc2626)}.lt-tree-spacer{display:inline-block;width:1.75rem;height:1.75rem}.lt-tree-spinner{position:absolute;top:50%;left:50%;box-sizing:border-box;width:1.875rem;height:1.875rem;margin:-.9375rem 0 0 -.9375rem;border:2px solid color-mix(in srgb,var(--lt-link) 25%,transparent);border-top-color:var(--lt-link);border-radius:50%;animation:loading .6s linear infinite;pointer-events:none}.lt-row-expanded>.lt-tree-cell .lt-cell-text{font-weight:600}.lt-tree-subhead-row>td,.lt-tree-child-row>td{padding:0 1rem 0 calc(var(--lt-card-inset, 4rem) + var(--lt-tree-indent, 0rem));background:transparent;border-bottom:none}.lt-tree-subhead-row,.lt-tree-child-row,.lt-tree-child-row:hover{background-color:var(--lt-tree-well, color-mix(in srgb, var(--lt-border) 22%, var(--lt-row-bg)))}.lt-tree-subhead-row>td{padding-top:1rem}.lt-tree-child-row.lt-tree-last-child>td{padding-bottom:1rem}.lt-tree-grid{display:grid;align-items:center;--lt-tree-col-gap: .5rem;column-gap:var(--lt-tree-col-gap);min-height:var(--lt-row-height);padding-left:.625rem;padding-right:.625rem;background:var(--lt-row-bg);border-left:1px solid var(--lt-tree-card-border, color-mix(in srgb, var(--lt-border) 70%, var(--lt-icon)));border-right:1px solid var(--lt-tree-card-border, color-mix(in srgb, var(--lt-border) 70%, var(--lt-icon)))}.lt-tree-child-row:hover .lt-tree-grid{background:var(--lt-row-hover)}.lt-tree-subhead-row .lt-tree-grid{min-height:2rem;background:var(--lt-header-bg);border-top:1px solid var(--lt-tree-card-border, color-mix(in srgb, var(--lt-border) 70%, var(--lt-icon)));border-top-left-radius:var(--lt-radius, 8px);border-top-right-radius:var(--lt-radius, 8px)}.lt-tree-child-row.lt-tree-last-child .lt-tree-grid{border-bottom:1px solid var(--lt-tree-card-border, color-mix(in srgb, var(--lt-border) 70%, var(--lt-icon)));border-bottom-left-radius:var(--lt-radius, 8px);border-bottom-right-radius:var(--lt-radius, 8px);box-shadow:var(--lt-tree-card-shadow, 0 2px 4px color-mix(in srgb, #000 10%, transparent))}.lt-tree-child-row:not(.lt-tree-last-child) .lt-tree-grid{border-bottom:1px solid color-mix(in srgb,var(--lt-border) 55%,transparent)}.lt-tree-subhead-cell{position:relative;padding:0 .3125rem;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lt-header-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lt-tree-cellbox{display:flex;align-items:center;min-width:0;padding:0 .3125rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lt-tree-cellbox .lt-cell-text{overflow:hidden;text-overflow:ellipsis}.lt-tree-grid>.lt-tree-select-cell{display:flex;align-items:center;justify-content:center;padding:0;overflow:visible}:host(.lt-tree-flat) .lt-tree-subhead-row,:host(.lt-tree-flat) .lt-tree-child-row,:host(.lt-tree-flat) .lt-tree-child-row:hover{background-color:transparent}:host(.lt-tree-flat) .lt-tree-subhead-row>td,:host(.lt-tree-flat) .lt-tree-child-row>td{padding:0}:host(.lt-tree-flat) .lt-tree-grid>.lt-tree-indent-col{padding-left:calc(var(--lt-tree-first-indent, 5.875rem) - var(--lt-tree-lead-offset, 0px))}:host(.lt-tree-flat) .lt-tree-grid{background:transparent;border-left:none;border-right:none;border-radius:0}:host(.lt-tree-flat) .lt-tree-subhead-row .lt-tree-grid{background:var(--lt-header-bg);border:none;border-bottom:1px solid var(--lt-border);border-radius:0}:host(.lt-tree-flat) .lt-tree-child-row .lt-tree-grid,:host(.lt-tree-flat) .lt-tree-child-row.lt-tree-last-child .lt-tree-grid{border-left:none;border-right:none;border-radius:0;box-shadow:none;border-bottom:1px solid color-mix(in srgb,var(--lt-border) 55%,transparent)}.lt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:var(--lt-toolbar-margin-top, .75rem) 0 var(--lt-toolbar-margin-bottom, 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:var(--lt-control-row-gap);flex:1 1 auto;min-width:0;flex-wrap:nowrap}.lt-filter-zone{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--lt-control-row-gap);flex:0 1 auto;min-width:0}.lt-filters{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--lt-control-row-gap);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:var(--lt-control-row-gap);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(--lt-control-border-full);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(--lt-control-border-full);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-view{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .75rem;border-bottom:1px solid var(--lt-border)}.lt-chooser-view-label{font-size:.75rem;font-weight:600;color:var(--lt-cell-text)}.lt-chooser-view-toggle{display:flex;gap:.1875rem;padding:.1875rem;background:color-mix(in srgb,var(--lt-border) 30%,var(--lt-control-bg));border:1px solid var(--lt-border);border-radius:var(--lt-radius)}.lt-chooser-view-opt{padding:.25rem .625rem;font-family:var(--lt-font);font-size:.75rem;font-weight:500;color:var(--lt-cell-text);background:transparent;border:none;border-radius:calc(var(--lt-radius) - .0625rem);cursor:pointer}.lt-chooser-view-opt:hover:not(.active){color:var(--lt-link)}.lt-chooser-view-opt.active{color:var(--lt-link);background:var(--lt-control-bg);box-shadow:0 1px 2px color-mix(in srgb,var(--lt-cell-text) 14%,transparent)}.lt-chooser-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}.lt-chooser-list{list-style:none;margin:0;padding:.375rem .5rem}.lt-chooser-nested{padding:0 .5rem .375rem;border-top:1px solid var(--lt-border)}.lt-chooser-group{display:flex;align-items:center;gap:.375rem;width:100%;min-height:2.25rem;padding:.375rem .25rem;font-family:var(--lt-font);font-size:.75rem;font-weight:600;color:var(--lt-cell-text);background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer;text-align:left}.lt-chooser-group:hover{background:var(--lt-row-hover)}.lt-chooser-group-sub{padding-left:1.25rem;font-weight:500}.lt-chooser-group-label{flex:0 0 auto}.lt-chooser-chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:.875rem;color:var(--lt-icon);transition:transform .15s ease}.lt-chooser-chevron svg{display:block}.lt-chooser-chevron.open{transform:rotate(90deg)}.lt-chooser-group-hint{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;font-weight:400;color:var(--groupText)}.lt-chooser-sublist{padding-left:1.75rem}.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);cursor:grab}.lt-chooser-row:active{cursor:grabbing}.lt-chooser-row.cdk-drag-disabled{cursor:default}.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(--lt-control-border-full);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(--lt-control-border-full);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: i1$4.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: ListTableAutoRefreshComponent, selector: "lib-list-table-auto-refresh", inputs: ["seconds", "loading", "intervals"], outputs: ["refresh", "secondsChange"] }, { 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"] }, { 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        <lib-list-table-auto-refresh [loading]=\"filtering\" (refresh)=\"refresh()\"></lib-list-table-auto-refresh>\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 chooserColumns; 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-refresh-btn,.lt-filter-more-btn{display:inline-flex;align-items:center;gap:var(--lt-control-gap);height:var(--lt-toolbar-height);padding:0 var(--lt-control-padding-x);font-family:var(--lt-font);font-size:var(--lt-control-font-size);font-weight:var(--lt-control-font-weight);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-refresh-btn svg,.lt-filter-more-btn svg{display:block}.lt-columns-btn:hover,.lt-refresh-btn:hover,.lt-filter-more-btn:hover,.is-open.lt-columns-btn,.is-open.lt-refresh-btn,.is-open.lt-filter-more-btn,.is-on.lt-columns-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"] }]
+            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        <!-- Consumer-supplied toolbar controls (e.g. page-specific filters), rendered inline beside search. -->\n        <ng-content select=\"[toolbar-filters]\"></ng-content>\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        <lib-list-table-auto-refresh [loading]=\"filtering\" (refresh)=\"refresh()\"></lib-list-table-auto-refresh>\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              @if (canSwitchTreeVariant && showTreeVariantToggle) {\n                <div class=\"lt-chooser-view\" role=\"group\" aria-label=\"Expanded row layout\">\n                  <span class=\"lt-chooser-view-label\">Expanded rows</span>\n                  <div class=\"lt-chooser-view-toggle\">\n                    <button type=\"button\" class=\"lt-chooser-view-opt\" [class.active]=\"treeVariant === 'flat'\" (click)=\"setTreeVariant('flat')\">Flat</button>\n                    <button type=\"button\" class=\"lt-chooser-view-opt\" [class.active]=\"treeVariant === 'card'\" (click)=\"setTreeVariant('card')\">Nested</button>\n                  </div>\n                </div>\n              }\n              <div class=\"lt-chooser-scroll\">\n              <ul class=\"lt-chooser-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"chooserReorder($event)\">\n                @for (col of chooserColumns; track col.key) {\n                  <li class=\"lt-chooser-row\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"col.reorderable === false\"\n                      (cdkDragStarted)=\"onChooserDragStarted()\" (cdkDragEnded)=\"onChooserDragEnded()\">\n                    <ng-container *ngTemplateOutlet=\"chooserRowBody; context: { col: col }\"></ng-container>\n                  </li>\n                }\n              </ul>\n              @if (canSwitchTreeVariant && childLevels.length) {\n                <div class=\"lt-chooser-nested\">\n                  <button\n                    type=\"button\"\n                    class=\"lt-chooser-group\"\n                    (click)=\"toggleNestedGroup('__root')\"\n                    [attr.aria-expanded]=\"isNestedGroupOpen('__root')\"\n                  >\n                    <span class=\"lt-chooser-chevron\" [class.open]=\"isNestedGroupOpen('__root')\" aria-hidden=\"true\">\n                      <svg viewBox=\"0 0 16 16\" width=\"11\" height=\"11\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 4l4 4-4 4\"/></svg>\n                    </span>\n                    <span class=\"lt-chooser-group-label\">Nested rows</span>\n                  </button>\n                  @if (isNestedGroupOpen('__root')) {\n                    @for (level of childLevels; track level) {\n                      <button\n                        type=\"button\"\n                        class=\"lt-chooser-group lt-chooser-group-sub\"\n                        (click)=\"toggleNestedGroup('lvl' + level)\"\n                        [attr.aria-expanded]=\"isNestedGroupOpen('lvl' + level)\"\n                      >\n                        <span class=\"lt-chooser-chevron\" [class.open]=\"isNestedGroupOpen('lvl' + level)\" aria-hidden=\"true\">\n                          <svg viewBox=\"0 0 16 16\" width=\"11\" height=\"11\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 4l4 4-4 4\"/></svg>\n                        </span>\n                        <span class=\"lt-chooser-group-label\">Level {{ level }}</span>\n                        <span class=\"lt-chooser-group-hint\">{{ childLevelLabel(level) }}</span>\n                      </button>\n                      @if (isNestedGroupOpen('lvl' + level)) {\n                        <ul class=\"lt-chooser-list lt-chooser-sublist\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"chooserReorder($event, level)\">\n                          @for (col of allColumnsForLevel(level); track col.key) {\n                            <li class=\"lt-chooser-row\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"col.reorderable === false\"\n                                (cdkDragStarted)=\"onChooserDragStarted()\" (cdkDragEnded)=\"onChooserDragEnded()\">\n                              <ng-container *ngTemplateOutlet=\"chooserRowBody; context: { col: col, level: level }\"></ng-container>\n                            </li>\n                          }\n                        </ul>\n                      }\n                    }\n                  }\n                </div>\n              }\n              </div>\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    <!-- inner content of a Columns-chooser row, shared by the top-level and nested lists.\n         The <li cdkDrag> wrapper stays inline in each list (above) so cdkDropList's content\n         query still registers it as a draggable; only the body is shared here.\n         `level` undefined targets the top-level columns, a number targets that nested depth. -->\n    <ng-template #chooserRowBody let-col=\"col\" let-level=\"level\">\n      <button\n        type=\"button\"\n        class=\"lt-chooser-toggle\"\n        [class.checked]=\"!col.hidden\"\n        [disabled]=\"col.hideable === false || isLastVisibleColumn(col, level)\"\n        [attr.title]=\"isLastVisibleColumn(col, level) ? 'At least one column must stay visible' : null\"\n        (click)=\"toggleColumnVisible(col, level)\"\n        [attr.aria-pressed]=\"!col.hidden\"\n      >\n        <span class=\"lt-chooser-box\" aria-hidden=\"true\">\n          <!-- always rendered: the check is white, so it stays invisible until the box\n               turns blue when checked. Keeping it in the DOM means clicking to hide a\n               column never detaches the click target, which would otherwise make the\n               click-outside handler think the click was outside and close the menu. -->\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        </span>\n        <span class=\"lt-chooser-text\">{{ col.label }}</span>\n        @if (level == null && isDefaultHidden(col)) {\n          <span class=\"lt-chooser-default-tag\">hidden by default</span>\n        }\n      </button>\n      @if (col.reorderable !== false) {\n        <!-- the whole row is the drag target (cdkDrag on the <li>); this is just the grip affordance -->\n        <span class=\"lt-chooser-handle\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 10 16\" width=\"10\" height=\"15\" fill=\"currentColor\">\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    </ng-template>\n\n    <div class=\"lt-scroll\" id=\"ItemTable\">\n      <!-- expand/collapse control, reused by root rows and nested child rows -->\n      <ng-template #treeToggle let-row=\"row\">\n        @if (canExpand(row)) {\n          <button\n            type=\"button\"\n            class=\"lt-tree-toggle\"\n            [class.is-expanded]=\"row.__treeExpanded\"\n            [class.is-loading]=\"row.__treeLoading\"\n            [class.is-error]=\"row.__treeLoadError\"\n            (click)=\"$event.stopPropagation(); toggleNode(row)\"\n            [attr.aria-expanded]=\"!!row.__treeExpanded\"\n            [attr.aria-busy]=\"!!row.__treeLoading\"\n            [attr.title]=\"row.__treeLoadError ? 'Could not load children - click to retry' : null\"\n            [attr.aria-label]=\"row.__treeExpanded ? 'Collapse row' : 'Expand row'\"\n          >\n            <svg class=\"lt-tree-chevron\" viewBox=\"0 0 16 16\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n              <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 4l4 4-4 4\"/>\n            </svg>\n            @if (row.__treeLoading) {\n              <span class=\"lt-tree-spinner\" aria-hidden=\"true\"></span>\n            }\n          </button>\n        } @else {\n          <span class=\"lt-tree-spacer\" aria-hidden=\"true\"></span>\n        }\n      </ng-template>\n\n      <!-- a single cell's content, reused across the fixed grid and the nested grid -->\n      <ng-template #cellBody let-col=\"col\" let-row=\"row\" let-i=\"i\">\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      </ng-template>\n\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                [class.lt-th-tree]=\"isTreeCell(col)\"\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                ></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 flatRows; track trackRow($index, row); let i = $index) {\n            @if (isTreeMode && row.__treeLevel > 0 && hasChildColumns) {\n              <!-- nested rows with their own per-level columns, laid out in a grid\n                   that spans the full table width (so they need not match the parent) -->\n              @if (row.__treeFirstChild) {\n                <tr class=\"lt-tree-subhead-row\">\n                  <td\n                    [attr.colspan]=\"treeSpanCount\"\n                    [style.--lt-tree-indent.rem]=\"treeIndentFor(row.__treeLevel)\"\n                    [style.--lt-tree-first-indent.rem]=\"treeFlatFirstIndentRem(row.__treeLevel)\"\n                    [style.--lt-tree-lead-offset]=\"treeLeadOffset(row.__treeLevel)\"\n                    [style.background-image]=\"treeAncestorRails(row.__treeLevel)\"\n                  >\n                    <div\n                      class=\"lt-tree-grid\"\n                      [style.grid-template-columns]=\"gridTemplate(row.__treeLevel)\"\n                    >\n                      @if (childSelectEnabled) {\n                        <span class=\"lt-tree-subhead-cell lt-tree-select-cell\"></span>\n                      }\n                      @for (col of columnsForLevel(row.__treeLevel); track col.key; let last = $last) {\n                        <span class=\"lt-tree-subhead-cell\" [class.lt-tree-indent-col]=\"isTreeColumn(col, row.__treeLevel)\" [ngClass]=\"cellClass(col)\">\n                          {{ col.label }}\n                          @if (!last && col.resizable !== false) {\n                            <span class=\"lt-resize lt-tree-resize\" (pointerdown)=\"startChildResize(col, row.__treeLevel, $event)\"></span>\n                          }\n                        </span>\n                      }\n                    </div>\n                  </td>\n                </tr>\n              }\n              <tr\n                class=\"lt-row lt-tree-child-row\"\n                [class.lt-tree-last-child]=\"row.__treeLastChild\"\n                [class.lt-row-selected]=\"row.selected\"\n                [class.lt-row-expanded]=\"row.__treeExpanded\"\n              >\n                <td\n                  [attr.colspan]=\"treeSpanCount\"\n                  [style.--lt-tree-indent.rem]=\"treeIndentFor(row.__treeLevel)\"\n                  [style.--lt-tree-first-indent.rem]=\"treeFlatFirstIndentRem(row.__treeLevel)\"\n                  [style.--lt-tree-lead-offset]=\"treeLeadOffset(row.__treeLevel)\"\n                  [style.background-image]=\"treeAncestorRails(row.__treeLevel)\"\n                >\n                  <div\n                    class=\"lt-tree-grid\"\n                    [style.grid-template-columns]=\"gridTemplate(row.__treeLevel)\"\n                  >\n                    @if (childSelectEnabled) {\n                      <div class=\"lt-tree-cellbox lt-tree-select-cell\">\n                        <lib-select-cell [row]=\"row\" [toggleItem]=\"toggleItem\"></lib-select-cell>\n                      </div>\n                    }\n                    @for (col of columnsForLevel(row.__treeLevel); track col.key) {\n                      <div\n                        class=\"lt-tree-cellbox\"\n                        [class.lt-tree-indent-col]=\"isTreeColumn(col, row.__treeLevel)\"\n                        [ngClass]=\"cellClass(col)\"\n                        (click)=\"onCellClick(col, row, i)\"\n                        (mouseenter)=\"onCellHover(col, row, i, $event)\"\n                        (mouseleave)=\"onCellLeave()\"\n                      >\n                        @if (isTreeColumn(col, row.__treeLevel) && showTreeLead(row)) {\n                          <span class=\"lt-tree-lead\">\n                            <ng-container *ngTemplateOutlet=\"treeToggle; context: {row: row}\"></ng-container>\n                          </span>\n                        }\n                        <ng-container *ngTemplateOutlet=\"cellBody; context: {col: col, row: row, i: i}\"></ng-container>\n                      </div>\n                    }\n                  </div>\n                </td>\n              </tr>\n            } @else {\n              <tr\n                class=\"lt-row\"\n                [class.lt-row-odd]=\"i % 2 === 1\"\n                [class.lt-row-selected]=\"row.selected\"\n                [class.lt-row-expanded]=\"row.__treeExpanded\"\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                    [class.lt-tree-cell]=\"isTreeCell(col)\"\n                    [ngClass]=\"cellClass(col)\"\n                    (click)=\"onCellClick(col, row, i)\"\n                    (mouseenter)=\"onCellHover(col, row, i, $event)\"\n                    (mouseleave)=\"onCellLeave()\"\n                  >\n                    @if (isTreeCell(col)) {\n                      <span class=\"lt-tree-cell-inner\">\n                        <span class=\"lt-tree-lead\" [style.margin-left.rem]=\"(row.__treeLevel || 0) * treeIndentRem\">\n                          <ng-container *ngTemplateOutlet=\"treeToggle; context: {row: row}\"></ng-container>\n                        </span>\n                        <ng-container *ngTemplateOutlet=\"cellBody; context: {col: col, row: row, i: i}\"></ng-container>\n                      </span>\n                    } @else {\n                      <ng-container *ngTemplateOutlet=\"cellBody; context: {col: col, row: row, i: i}\"></ng-container>\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          }\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-refresh-btn,.lt-filter-more-btn{display:inline-flex;align-items:center;gap:var(--lt-control-gap);height:var(--lt-toolbar-height);padding:0 var(--lt-control-padding-x);font-family:var(--lt-font);font-size:var(--lt-control-font-size);font-weight:var(--lt-control-font-weight);color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--lt-control-border-full);border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.lt-columns-btn svg,.lt-refresh-btn svg,.lt-filter-more-btn svg{display:block}.lt-columns-btn:hover,.lt-refresh-btn:hover,.lt-filter-more-btn:hover,.is-open.lt-columns-btn,.is-open.lt-refresh-btn,.is-open.lt-filter-more-btn,.is-on.lt-columns-btn,.is-on.lt-refresh-btn,.is-on.lt-filter-more-btn{border-color:var(--lt-link);color:var(--lt-link)}.is-on.lt-columns-btn,.is-on.lt-refresh-btn,.is-on.lt-filter-more-btn{background:color-mix(in srgb,var(--lt-link) 8%,var(--lt-control-bg))}.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.6rem;padding:0 .3125rem 0 1.25rem;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-tree{padding-left:2.75rem}.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:.75rem;height:2.25rem;cursor:col-resize}.lt-resize:before,.lt-resize:after{content:\"\";position:absolute;top:50%;height:1.25rem;transform:translateY(-50%);width:1px;background:color-mix(in srgb,var(--lt-border) 50%,var(--lt-icon));transition:background .15s}.lt-resize:before{right:.3125rem}.lt-resize:after{right:.125rem}.lt-resize:hover:before,.lt-resize:hover:after{background:color-mix(in srgb,var(--lt-icon) 72%,var(--lt-cell-text))}.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-tree-cell{padding-left:.625rem}.lt-tree-cell-inner{display:flex;align-items:center}.lt-tree-lead{display:inline-flex;align-items:center;flex:0 0 auto;margin-right:.375rem}.lt-tree-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;color:var(--lt-icon);background:transparent;border:none;border-radius:50%;cursor:pointer;transition:color .15s,background .15s}.lt-tree-toggle:hover{color:var(--lt-link);background:color-mix(in srgb,var(--lt-link) 18%,transparent)}.lt-tree-chevron{display:block;width:13.8px;height:13.8px;transition:transform .15s ease}.lt-tree-toggle.is-expanded .lt-tree-chevron{transform:rotate(90deg)}.lt-tree-toggle.is-error .lt-tree-chevron{color:var(--lt-negative, #dc2626)}.lt-tree-spacer{display:inline-block;width:1.75rem;height:1.75rem}.lt-tree-spinner{position:absolute;top:50%;left:50%;box-sizing:border-box;width:1.875rem;height:1.875rem;margin:-.9375rem 0 0 -.9375rem;border:2px solid color-mix(in srgb,var(--lt-link) 25%,transparent);border-top-color:var(--lt-link);border-radius:50%;animation:loading .6s linear infinite;pointer-events:none}.lt-row-expanded>.lt-tree-cell .lt-cell-text{font-weight:600}.lt-tree-subhead-row>td,.lt-tree-child-row>td{padding:0 1rem 0 calc(var(--lt-card-inset, 4rem) + var(--lt-tree-indent, 0rem));background:transparent;border-bottom:none}.lt-tree-subhead-row,.lt-tree-child-row,.lt-tree-child-row:hover{background-color:var(--lt-tree-well, color-mix(in srgb, var(--lt-border) 22%, var(--lt-row-bg)))}.lt-tree-subhead-row>td{padding-top:1rem}.lt-tree-child-row.lt-tree-last-child>td{padding-bottom:1rem}.lt-tree-grid{display:grid;align-items:center;--lt-tree-col-gap: .5rem;column-gap:var(--lt-tree-col-gap);min-height:var(--lt-row-height);padding-left:.625rem;padding-right:.625rem;background:var(--lt-row-bg);border-left:1px solid var(--lt-tree-card-border, color-mix(in srgb, var(--lt-border) 70%, var(--lt-icon)));border-right:1px solid var(--lt-tree-card-border, color-mix(in srgb, var(--lt-border) 70%, var(--lt-icon)))}.lt-tree-child-row:hover .lt-tree-grid{background:var(--lt-row-hover)}.lt-tree-subhead-row .lt-tree-grid{min-height:2rem;background:var(--lt-header-bg);border-top:1px solid var(--lt-tree-card-border, color-mix(in srgb, var(--lt-border) 70%, var(--lt-icon)));border-top-left-radius:var(--lt-radius, 8px);border-top-right-radius:var(--lt-radius, 8px)}.lt-tree-child-row.lt-tree-last-child .lt-tree-grid{border-bottom:1px solid var(--lt-tree-card-border, color-mix(in srgb, var(--lt-border) 70%, var(--lt-icon)));border-bottom-left-radius:var(--lt-radius, 8px);border-bottom-right-radius:var(--lt-radius, 8px);box-shadow:var(--lt-tree-card-shadow, 0 2px 4px color-mix(in srgb, #000 10%, transparent))}.lt-tree-child-row:not(.lt-tree-last-child) .lt-tree-grid{border-bottom:1px solid color-mix(in srgb,var(--lt-border) 55%,transparent)}.lt-tree-subhead-cell{position:relative;padding:0 .3125rem;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lt-header-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lt-tree-cellbox{display:flex;align-items:center;min-width:0;padding:0 .3125rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lt-tree-cellbox .lt-cell-text{overflow:hidden;text-overflow:ellipsis}.lt-tree-grid>.lt-tree-select-cell{display:flex;align-items:center;justify-content:center;padding:0;overflow:visible}:host(.lt-tree-flat) .lt-tree-subhead-row,:host(.lt-tree-flat) .lt-tree-child-row,:host(.lt-tree-flat) .lt-tree-child-row:hover{background-color:transparent}:host(.lt-tree-flat) .lt-tree-subhead-row>td,:host(.lt-tree-flat) .lt-tree-child-row>td{padding:0}:host(.lt-tree-flat) .lt-tree-grid>.lt-tree-indent-col{padding-left:calc(var(--lt-tree-first-indent, 5.875rem) - var(--lt-tree-lead-offset, 0px))}:host(.lt-tree-flat) .lt-tree-grid{background:transparent;border-left:none;border-right:none;border-radius:0}:host(.lt-tree-flat) .lt-tree-subhead-row .lt-tree-grid{background:var(--lt-header-bg);border:none;border-bottom:1px solid var(--lt-border);border-radius:0}:host(.lt-tree-flat) .lt-tree-child-row .lt-tree-grid,:host(.lt-tree-flat) .lt-tree-child-row.lt-tree-last-child .lt-tree-grid{border-left:none;border-right:none;border-radius:0;box-shadow:none;border-bottom:1px solid color-mix(in srgb,var(--lt-border) 55%,transparent)}.lt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:var(--lt-toolbar-margin-top, .75rem) 0 var(--lt-toolbar-margin-bottom, 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:var(--lt-control-row-gap);flex:1 1 auto;min-width:0;flex-wrap:nowrap}.lt-filter-zone{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--lt-control-row-gap);flex:0 1 auto;min-width:0}.lt-filters{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--lt-control-row-gap);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:var(--lt-control-row-gap);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(--lt-control-border-full);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(--lt-control-border-full);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-view{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .75rem;border-bottom:1px solid var(--lt-border)}.lt-chooser-view-label{font-size:.75rem;font-weight:600;color:var(--lt-cell-text)}.lt-chooser-view-toggle{display:flex;gap:.1875rem;padding:.1875rem;background:color-mix(in srgb,var(--lt-border) 30%,var(--lt-control-bg));border:1px solid var(--lt-border);border-radius:var(--lt-radius)}.lt-chooser-view-opt{padding:.25rem .625rem;font-family:var(--lt-font);font-size:.75rem;font-weight:500;color:var(--lt-cell-text);background:transparent;border:none;border-radius:calc(var(--lt-radius) - .0625rem);cursor:pointer}.lt-chooser-view-opt:hover:not(.active){color:var(--lt-link)}.lt-chooser-view-opt.active{color:var(--lt-link);background:var(--lt-control-bg);box-shadow:0 1px 2px color-mix(in srgb,var(--lt-cell-text) 14%,transparent)}.lt-chooser-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}.lt-chooser-list{list-style:none;margin:0;padding:.375rem .5rem}.lt-chooser-nested{padding:0 .5rem .375rem;border-top:1px solid var(--lt-border)}.lt-chooser-group{display:flex;align-items:center;gap:.375rem;width:100%;min-height:2.25rem;padding:.375rem .25rem;font-family:var(--lt-font);font-size:.75rem;font-weight:600;color:var(--lt-cell-text);background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer;text-align:left}.lt-chooser-group:hover{background:var(--lt-row-hover)}.lt-chooser-group-sub{padding-left:1.25rem;font-weight:500}.lt-chooser-group-label{flex:0 0 auto}.lt-chooser-chevron{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:.875rem;color:var(--lt-icon);transition:transform .15s ease}.lt-chooser-chevron svg{display:block}.lt-chooser-chevron.open{transform:rotate(90deg)}.lt-chooser-group-hint{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;font-weight:400;color:var(--groupText)}.lt-chooser-sublist{padding-left:1.75rem}.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);cursor:grab}.lt-chooser-row:active{cursor:grabbing}.lt-chooser-row.cdk-drag-disabled{cursor:default}.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(--lt-control-border-full);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(--lt-control-border-full);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: [{
@@ -13110,6 +13930,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], loadChildren: [{
+                type: Input
+            }], childColumnsByLevel: [{
+                type: Input
+            }], nodeToggled: [{
+                type: Output
             }], hasNext: [{
                 type: Input
             }], hasPrev: [{
@@ -13144,6 +13970,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Output
             }], tableReady: [{
                 type: Output
+            }], selectionChanged: [{
+                type: Output
             }], contextMenu: [{
                 type: ViewChild,
                 args: ['contextMenu']
@@ -13153,6 +13981,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             }], filtersRow: [{
                 type: ViewChild,
                 args: ['filtersRow']
+            }], treeVariant: [{
+                type: Input
+            }], showTreeVariantToggle: [{
+                type: Input
+            }], treeRail: [{
+                type: Input
+            }], isFlatTree: [{
+                type: HostBinding,
+                args: ['class.lt-tree-flat']
             }], initialPageSize: [{
                 type: Input
             }] } });
@@ -16122,7 +16959,7 @@ 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]=\"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"] }] }); }
+    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", "loadChildren", "childColumnsByLevel", "hasNext", "hasPrev", "startCount", "endCount", "totalCount", "filterApplied", "menuItems", "headerActions", "noItemsImage", "showNoItemsAdd", "noItemsReadonly", "accessDenied", "entityTypeName", "filterName", "filterColumn", "treeVariant", "showTreeVariantToggle", "treeRail", "initialPageSize"], outputs: ["nodeToggled", "actionRequested", "tableReady", "selectionChanged"] }, { 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,
@@ -25067,12 +25904,12 @@ class EdgeRouterPoliciesPageService extends ListPageServiceClass {
             createdAt: '',
         };
         this.menuItems = [
-            { name: 'Edit', action: 'update' },
-            { name: 'Delete', action: 'delete' },
+            { name: 'Edit', action: 'update', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M11.2 2.6 13.4 4.8 6 12.2l-2.8.6.6-2.8z"/></svg>' },
+            { name: 'Delete', action: 'delete', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M3.4 4.6h9.2M6.4 4.6V3.2h3.2v1.4M4.6 4.6 5 13h6l.4-8.4"/></svg>' },
         ];
         this.tableHeaderActions = [
-            { name: 'Download All', action: 'download-all' },
-            { name: 'Download Selected', action: 'download-selected' },
+            { name: 'Download All', action: 'download-all', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5v7M5 6.6 8 9.6l3-3M3.2 12.6h9.6"/></svg>' },
+            { name: 'Download Selected', action: 'download-selected', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5v7M5 6.6 8 9.6l3-3M3.2 12.6h9.6"/></svg>' },
         ];
         this.resourceType = 'edge-router-policies';
         this.validate = (formData) => {
@@ -25310,9 +26147,163 @@ class EdgeRouterPoliciesPageService extends ListPageServiceClass {
             this.ID_COLUMN_DEF
         ];
     }
-    getData(filters, sort, page) {
+    // Declarative ListColumn set for the new `lib-list-table` (Beta Features on).
+    initListTableColumns() {
+        this.initMenuActions();
+        const routerRolesHeaderComponentParams = {
+            filterType: 'ATTRIBUTE',
+            enableSorting: true,
+            getRoleAttributes: () => this.routerRoleAttributes,
+            getNamedAttributes: () => this.routerNamedAttributes,
+            getSelectedRoleAttributes: () => this.selectedRouterRoleAttributes,
+            getSelectedNamedAttributes: () => this.selectedRouterNamedAttributes,
+            setSelectedRoleAttributes: (attributes) => {
+                this.selectedRouterRoleAttributes = attributes;
+            },
+            setSelectedNamedAttributes: (attributes) => {
+                this.selectedRouterNamedAttributes = attributes;
+            },
+            getNamedAttributesMap: () => this.routerNamedAttributesMap,
+        };
+        const identityRolesHeaderComponentParams = {
+            filterType: 'ATTRIBUTE',
+            enableSorting: true,
+            getRoleAttributes: () => this.identityRoleAttributes,
+            getNamedAttributes: () => this.identityNamedAttributes,
+            getSelectedRoleAttributes: () => this.selectedIdentityRoleAttributes,
+            getSelectedNamedAttributes: () => this.selectedIdentityNamedAttributes,
+            setSelectedRoleAttributes: (attributes) => {
+                this.selectedIdentityRoleAttributes = attributes;
+            },
+            setSelectedNamedAttributes: (attributes) => {
+                this.selectedIdentityNamedAttributes = attributes;
+            },
+            getNamedAttributesMap: () => this.identityNamedAttributesMap,
+        };
+        // @ marks a named attribute, # a role attribute (matches the tag selector)
+        const rolesChipRenderer = (row) => {
+            const colId = row?.column?.colId;
+            const attrs = row?.data?.[colId + 'Display'] || row?.data?.[colId] || [];
+            return attrs.map((attr) => {
+                const raw = String(attr?.name ?? attr ?? '').trim();
+                if (!raw) {
+                    return '';
+                }
+                const isNamed = raw.charAt(0) === '@';
+                const label = isNamed || raw.charAt(0) === '#' ? raw : '#' + raw;
+                return `<span class="${isNamed ? 'lt-chip lt-chip-at' : 'lt-chip'}">${label}</span>`;
+            }).join('');
+        };
+        const semanticFilterOptions = [
+            { label: 'Show All', value: '' },
+            { label: 'Any Of', value: 'AnyOf' },
+            { label: 'All Of', value: 'AllOf' },
+        ];
+        const semanticRenderer = (row) => row?.data?.semantic === 'AnyOf' ? 'Any Of' : 'All Of';
+        const openForm = (ctx) => {
+            if (this.hasSelectedText()) {
+                return;
+            }
+            this.serviceType = 'advanced';
+            this.openEditForm(ctx.row?.id);
+        };
+        let tableColumns = [
+            {
+                key: 'name',
+                field: 'name',
+                label: 'Name',
+                filterType: 'TEXTINPUT',
+                cell: NameCellComponent,
+                cellInputs: (ctx) => ({
+                    row: ctx.row,
+                    cellValue: ctx.value,
+                    cellConfig: { pathRoot: this.basePath, showIdentityIcons: false },
+                }),
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: true,
+                onSort: this.sort.bind(this),
+                sortDir: 'asc',
+                width: 300,
+            },
+            {
+                key: 'edgeRouterRoles',
+                field: 'edgeRouterRoles',
+                label: 'Router Attributes',
+                filterType: 'ATTRIBUTE',
+                headerParams: routerRolesHeaderComponentParams,
+                cellHtml: rolesChipRenderer,
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: false,
+            },
+            {
+                key: 'identityRoles',
+                field: 'identityRoles',
+                label: 'Identity Attributes',
+                filterType: 'ATTRIBUTE',
+                headerParams: identityRolesHeaderComponentParams,
+                cellHtml: rolesChipRenderer,
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: false,
+            },
+            {
+                key: 'semantic',
+                field: 'semantic',
+                label: 'Semantic',
+                filterType: 'SELECT',
+                filterPlaceholder: 'Any semantic',
+                filterOptions: semanticFilterOptions,
+                cellHtml: semanticRenderer,
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                width: 120,
+            },
+            {
+                key: 'createdAt',
+                field: 'createdAt',
+                label: 'Created At',
+                valueFormatter: this.createdAtFormatter,
+                filterType: 'DATETIME',
+                filterPlaceholder: 'Any time',
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                hidden: true,
+            },
+            {
+                key: 'id',
+                field: 'id',
+                label: 'ID',
+                filterType: 'TEXTINPUT',
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                hidden: true,
+            },
+        ];
+        if (this.extService?.processListTableColumns) {
+            tableColumns = this.extService.processListTableColumns(tableColumns);
+        }
+        return tableColumns;
+    }
+    getData(filters, sort, page, pageSize) {
         // we can customize filters or sorting here before moving on...
         this.paging.page = page || this.paging.page;
+        if (pageSize) {
+            this.paging.total = pageSize;
+        }
         return super.getTableData('edge-router-policies', this.paging, filters, sort)
             .then((results) => {
             return this.processData(results);
@@ -25536,6 +26527,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     args: [SHAREDZ_EXTENSION]
                 }] }] });
 
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+// Edge Router Policies page on `lib-list-table`, selected by the route when Beta Features is on.
+class EdgeRouterPoliciesListPageComponent extends ListPageComponent {
+    constructor(svc, filterService, dialogForm, tabNames, consoleEvents, extService) {
+        super(filterService, svc, consoleEvents, dialogForm, extService);
+        this.svc = svc;
+        this.tabNames = tabNames;
+        this.extService = extService;
+        this.title = 'Edge Router Policies';
+        this.isLoading = false;
+        this.formDataChanged = false;
+        this.tableId = 'edge-router-policies';
+        this.initialPageSize = 50;
+    }
+    loadTableColumns() {
+        return this.svc.initListTableColumns();
+    }
+    ngOnInit() {
+        this.tabs = this.tabNames.getTabs('policies');
+        this.svc.refreshData = this.refreshData;
+        this.getRoleAttributes();
+        super.ngOnInit();
+    }
+    headerActionClicked(action) {
+        switch (action) {
+            case 'add':
+                this.svc.serviceType = '';
+                this.svc.openEditForm();
+                break;
+            case 'edit':
+                this.svc.openEditForm();
+                break;
+            case 'delete':
+                const selectedItems = this.rowData.filter((row) => {
+                    return row.selected;
+                });
+                const label = selectedItems.length > 1 ? 'edge router policies' : 'edge router policy';
+                this.openBulkDelete(selectedItems, label);
+                break;
+            default:
+        }
+    }
+    tableAction(event) {
+        this.trackMenuAction(event?.action, event?.item);
+        switch (event?.action) {
+            case 'toggleAll':
+            case 'toggleItem':
+                this.itemToggled(event.item);
+                this.rowData.forEach((item) => {
+                    if (item.isSystem) {
+                        item.selected = false;
+                    }
+                });
+                break;
+            case 'update':
+                this.svc.serviceType = 'advanced';
+                this.svc.openEditForm(event.item?.id);
+                break;
+            case 'create':
+                this.svc.openEditForm();
+                break;
+            case 'delete':
+                this.deleteItem(event.item);
+                break;
+            case 'download-all':
+                this.downloadAllItems();
+                break;
+            case 'download-selected':
+                this.svc.downloadItems(this.selectedItems);
+                break;
+            default:
+                break;
+        }
+    }
+    trackMenuAction(action, item) {
+        this.extService?.consoleActionTriggered?.emit({
+            action,
+            page: 'edge-router-policy',
+            item,
+            type: 'menu-action'
+        });
+    }
+    getRoleAttributes() {
+        this.svc.getEdgeRouterRoleAttributes();
+        this.svc.getIdentityRoleAttributes();
+        this.svc.getServiceNamedAttributes();
+        this.svc.getIdentityNamedAttributes();
+        this.svc.getPostureNamedAttributes();
+    }
+    deleteItem(item) {
+        this.openBulkDelete([item], 'edge-router-policies');
+    }
+    closeModal(event) {
+        this.svc.sideModalOpen = false;
+        if (event?.refresh) {
+            this.refreshData();
+        }
+    }
+    dataChanged(event) {
+        this.formDataChanged = event;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterPoliciesListPageComponent, deps: [{ token: EdgeRouterPoliciesPageService }, { token: DataTableFilterService }, { token: i5.MatDialog }, { token: TabNameService }, { token: ConsoleEventsService }, { token: SHAREDZ_EXTENSION }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: EdgeRouterPoliciesListPageComponent, isStandalone: false, selector: "lib-edge-router-policies-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-edge-router-policies-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Control which identities can use which edge routers\"\n    createLabel=\"Create Edge Router Policy\"\n    infoText=\"Edge router policies grant identities access to edge routers.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-routerpolicy\" 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@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [""], 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", "loadChildren", "childColumnsByLevel", "hasNext", "hasPrev", "startCount", "endCount", "totalCount", "filterApplied", "menuItems", "headerActions", "noItemsImage", "showNoItemsAdd", "noItemsReadonly", "accessDenied", "entityTypeName", "filterName", "filterColumn", "treeVariant", "showTreeVariantToggle", "treeRail", "initialPageSize"], outputs: ["nodeToggled", "actionRequested", "tableReady", "selectionChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterPoliciesListPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-edge-router-policies-list', standalone: false, template: "<div class=\"ziti-page-container ziti-edge-router-policies-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Control which identities can use which edge routers\"\n    createLabel=\"Create Edge Router Policy\"\n    infoText=\"Edge router policies grant identities access to edge routers.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-routerpolicy\" 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@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n" }]
+        }], ctorParameters: () => [{ type: EdgeRouterPoliciesPageService }, { type: DataTableFilterService }, { type: i5.MatDialog }, { type: TabNameService }, { type: ConsoleEventsService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SHAREDZ_EXTENSION]
+                }] }] });
+
 /*
     Copyright NetFoundry Inc.
 
@@ -25584,13 +26704,14 @@ class ServicePoliciesPageService extends ListPageServiceClass {
             os: '',
             createdAt: '',
         };
+        // `icon` is rendered by the new list-table's menus; the legacy ag-grid menu ignores it.
         this.menuItems = [
-            { name: 'Edit', action: 'update' },
-            { name: 'Delete', action: 'delete' },
+            { name: 'Edit', action: 'update', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M11.2 2.6 13.4 4.8 6 12.2l-2.8.6.6-2.8z"/></svg>' },
+            { name: 'Delete', action: 'delete', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M3.4 4.6h9.2M6.4 4.6V3.2h3.2v1.4M4.6 4.6 5 13h6l.4-8.4"/></svg>' },
         ];
         this.tableHeaderActions = [
-            { name: 'Download All', action: 'download-all' },
-            { name: 'Download Selected', action: 'download-selected' },
+            { name: 'Download All', action: 'download-all', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5v7M5 6.6 8 9.6l3-3M3.2 12.6h9.6"/></svg>' },
+            { name: 'Download Selected', action: 'download-selected', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5v7M5 6.6 8 9.6l3-3M3.2 12.6h9.6"/></svg>' },
         ];
         this.resourceType = 'service-policies';
         this.validate = (formData) => {
@@ -25607,6 +26728,7 @@ class ServicePoliciesPageService extends ListPageServiceClass {
                         identityFilter = true;
                         break;
                     case 'postureRoles':
+                    case 'postureCheckRoles':
                         postureFilter = true;
                         break;
                 }
@@ -25619,6 +26741,10 @@ class ServicePoliciesPageService extends ListPageServiceClass {
                 this.selectedIdentityRoleAttributes = [];
                 this.selectedIdentityNamedAttributes = [];
             }
+            if (!postureFilter) {
+                this.selectedPostureRoleAttributes = [];
+                this.selectedPostureNamedAttributes = [];
+            }
         });
     }
     initTableColumns() {
@@ -25872,9 +26998,209 @@ class ServicePoliciesPageService extends ListPageServiceClass {
         }
         return tableColumns;
     }
-    getData(filters, sort, page) {
+    // Declarative ListColumn set for the new `lib-list-table` (Beta Features on).
+    initListTableColumns() {
+        this.initMenuActions();
+        const serviceRolesHeaderComponentParams = {
+            filterType: 'ATTRIBUTE',
+            enableSorting: true,
+            getRoleAttributes: () => this.serviceRoleAttributes,
+            getNamedAttributes: () => this.serviceNamedAttributes,
+            getSelectedRoleAttributes: () => this.selectedServiceRoleAttributes,
+            getSelectedNamedAttributes: () => this.selectedServiceNamedAttributes,
+            setSelectedRoleAttributes: (attributes) => {
+                this.selectedServiceRoleAttributes = attributes;
+            },
+            setSelectedNamedAttributes: (attributes) => {
+                this.selectedServiceNamedAttributes = attributes;
+            },
+            getNamedAttributesMap: () => this.serviceNamedAttributesMap,
+        };
+        const identityRolesHeaderComponentParams = {
+            filterType: 'ATTRIBUTE',
+            enableSorting: true,
+            getRoleAttributes: () => this.identityRoleAttributes,
+            getNamedAttributes: () => this.identityNamedAttributes,
+            getSelectedRoleAttributes: () => this.selectedIdentityRoleAttributes,
+            getSelectedNamedAttributes: () => this.selectedIdentityNamedAttributes,
+            setSelectedRoleAttributes: (attributes) => {
+                this.selectedIdentityRoleAttributes = attributes;
+            },
+            setSelectedNamedAttributes: (attributes) => {
+                this.selectedIdentityNamedAttributes = attributes;
+            },
+            getNamedAttributesMap: () => this.identityNamedAttributesMap,
+        };
+        const postureRolesHeaderComponentParams = {
+            filterType: 'ATTRIBUTE',
+            enableSorting: true,
+            getRoleAttributes: () => this.postureRoleAttributes,
+            getNamedAttributes: () => this.postureNamedAttributes,
+            getSelectedRoleAttributes: () => this.selectedPostureRoleAttributes,
+            getSelectedNamedAttributes: () => this.selectedPostureNamedAttributes,
+            setSelectedRoleAttributes: (attributes) => {
+                this.selectedPostureRoleAttributes = attributes;
+            },
+            setSelectedNamedAttributes: (attributes) => {
+                this.selectedPostureNamedAttributes = attributes;
+            },
+            getNamedAttributesMap: () => this.postureNamedAttributesMap,
+        };
+        // @ marks a named attribute, # a role attribute (matches the tag selector)
+        const rolesChipRenderer = (row) => {
+            const colId = row?.column?.colId;
+            const attrs = row?.data?.[colId + 'Display'] || row?.data?.[colId] || [];
+            return attrs.map((attr) => {
+                const raw = String(attr?.name ?? attr ?? '').trim();
+                if (!raw) {
+                    return '';
+                }
+                const isNamed = raw.charAt(0) === '@';
+                const label = isNamed || raw.charAt(0) === '#' ? raw : '#' + raw;
+                return `<span class="${isNamed ? 'lt-chip lt-chip-at' : 'lt-chip'}">${label}</span>`;
+            }).join('');
+        };
+        const semanticFilterOptions = [
+            { label: 'Show All', value: '' },
+            { label: 'Any Of', value: 'AnyOf' },
+            { label: 'All Of', value: 'AllOf' },
+        ];
+        const semanticRenderer = (row) => row?.data?.semantic === 'AnyOf' ? 'Any Of' : 'All Of';
+        const openForm = (ctx) => {
+            if (this.hasSelectedText()) {
+                return;
+            }
+            this.serviceType = 'advanced';
+            this.openEditForm(ctx.row?.id);
+        };
+        let tableColumns = [
+            {
+                key: 'name',
+                field: 'name',
+                label: 'Name',
+                filterType: 'TEXTINPUT',
+                cell: NameCellComponent,
+                cellInputs: (ctx) => ({
+                    row: ctx.row,
+                    cellValue: ctx.value,
+                    cellConfig: { pathRoot: this.basePath, showIdentityIcons: false },
+                }),
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: true,
+                onSort: this.sort.bind(this),
+                sortDir: 'asc',
+                width: 300,
+            },
+            {
+                key: 'serviceRoles',
+                field: 'serviceRoles',
+                label: 'Service Attributes',
+                filterType: 'ATTRIBUTE',
+                headerParams: serviceRolesHeaderComponentParams,
+                cellHtml: rolesChipRenderer,
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: false,
+            },
+            {
+                key: 'identityRoles',
+                field: 'identityRoles',
+                label: 'Identity Attributes',
+                filterType: 'ATTRIBUTE',
+                headerParams: identityRolesHeaderComponentParams,
+                cellHtml: rolesChipRenderer,
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: false,
+            },
+            {
+                key: 'postureCheckRoles',
+                field: 'postureCheckRoles',
+                label: 'Posture Check Attributes',
+                filterType: 'ATTRIBUTE',
+                headerParams: postureRolesHeaderComponentParams,
+                cellHtml: rolesChipRenderer,
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: false,
+            },
+            {
+                key: 'semantic',
+                field: 'semantic',
+                label: 'Semantic',
+                filterType: 'SELECT',
+                filterPlaceholder: 'Any semantic',
+                filterOptions: semanticFilterOptions,
+                cellHtml: semanticRenderer,
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                width: 120,
+            },
+            {
+                key: 'type',
+                field: 'type',
+                label: 'Type',
+                filterType: 'SELECT',
+                filterPlaceholder: 'Any type',
+                filterOptions: [
+                    { label: 'Show All', value: '' },
+                    { label: 'Dial', value: 'Dial' },
+                    { label: 'Bind', value: 'Bind' },
+                ],
+                cellHtml: (row) => row?.data?.type ?? '',
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                width: 100,
+            },
+            {
+                key: 'createdAt',
+                field: 'createdAt',
+                label: 'Created At',
+                valueFormatter: this.createdAtFormatter,
+                filterType: 'DATETIME',
+                filterPlaceholder: 'Any time',
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                hidden: true,
+            },
+            {
+                key: 'id',
+                field: 'id',
+                label: 'ID',
+                filterType: 'TEXTINPUT',
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                hidden: true,
+            },
+        ];
+        if (this.extService?.processListTableColumns) {
+            tableColumns = this.extService.processListTableColumns(tableColumns);
+        }
+        return tableColumns;
+    }
+    getData(filters, sort, page, pageSize) {
         // we can customize filters or sorting here before moving on...
         this.paging.page = page || this.paging.page;
+        if (pageSize) {
+            this.paging.total = pageSize;
+        }
         return super.getTableData('service-policies', this.paging, filters, sort)
             .then((results) => {
             return this.processData(results);
@@ -26113,6 +27439,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     args: [SERVICE_POLICY_EXTENSION_SERVICE]
                 }] }] });
 
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+// Service Policies page on `lib-list-table`, selected by the route when Beta Features is on.
+class ServicePoliciesListPageComponent extends ListPageComponent {
+    constructor(svc, filterService, dialogForm, tabNames, consoleEvents, extService) {
+        super(filterService, svc, consoleEvents, dialogForm, extService);
+        this.svc = svc;
+        this.tabNames = tabNames;
+        this.extService = extService;
+        this.title = 'Service Policies';
+        this.isLoading = false;
+        this.formDataChanged = false;
+        this.tableId = 'service-policies';
+        this.initialPageSize = 50;
+    }
+    loadTableColumns() {
+        return this.svc.initListTableColumns();
+    }
+    ngOnInit() {
+        this.tabs = this.tabNames.getTabs('policies');
+        this.svc.refreshData = this.refreshData;
+        this.getRoleAttributes();
+        super.ngOnInit();
+    }
+    headerActionClicked(action) {
+        switch (action) {
+            case 'add':
+                this.svc.serviceType = '';
+                this.svc.openEditForm();
+                break;
+            case 'edit':
+                this.svc.openEditForm();
+                break;
+            case 'delete':
+                const selectedItems = this.rowData.filter((row) => {
+                    return row.selected;
+                });
+                const label = selectedItems.length > 1 ? 'service policies' : 'service policy';
+                this.openBulkDelete(selectedItems, label);
+                break;
+            default:
+        }
+    }
+    tableAction(event) {
+        const extensionActionFound = this.handleExtensionActions(event);
+        this.trackMenuAction(event?.action, event?.item);
+        if (extensionActionFound) {
+            return;
+        }
+        switch (event?.action) {
+            case 'toggleAll':
+            case 'toggleItem':
+                this.itemToggled(event.item);
+                break;
+            case 'update':
+                this.svc.serviceType = 'advanced';
+                this.svc.openEditForm(event.item.id);
+                break;
+            case 'create':
+                this.svc.openEditForm();
+                break;
+            case 'delete':
+                this.deleteItem(event.item);
+                break;
+            case 'download-all':
+                this.downloadAllItems();
+                break;
+            case 'download-selected':
+                this.svc.downloadItems(this.selectedItems);
+                break;
+            default:
+                break;
+        }
+    }
+    trackMenuAction(action, item) {
+        this.extService?.consoleActionTriggered?.emit({
+            action,
+            page: 'service-policy',
+            item,
+            type: 'menu-action'
+        });
+    }
+    getRoleAttributes() {
+        this.svc.getServiceRoleAttributes();
+        this.svc.getIdentityRoleAttributes();
+        this.svc.getServiceNamedAttributes();
+        this.svc.getIdentityNamedAttributes();
+        this.svc.getPostureNamedAttributes();
+    }
+    deleteItem(item) {
+        this.openBulkDelete([item], 'service-policies');
+    }
+    closeModal(event) {
+        this.svc.sideModalOpen = false;
+        if (event?.refresh) {
+            this.refreshData();
+        }
+    }
+    dataChanged(event) {
+        this.formDataChanged = event;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServicePoliciesListPageComponent, deps: [{ token: ServicePoliciesPageService }, { token: DataTableFilterService }, { token: i5.MatDialog }, { token: TabNameService }, { token: ConsoleEventsService }, { token: SERVICE_POLICY_EXTENSION_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ServicePoliciesListPageComponent, isStandalone: false, selector: "lib-service-policies-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-service-policies-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Control which identities can dial or bind which services\"\n    createLabel=\"Create Service Policy\"\n    infoText=\"Service policies grant identities access to dial or bind services.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-policies\" 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@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [""], 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", "loadChildren", "childColumnsByLevel", "hasNext", "hasPrev", "startCount", "endCount", "totalCount", "filterApplied", "menuItems", "headerActions", "noItemsImage", "showNoItemsAdd", "noItemsReadonly", "accessDenied", "entityTypeName", "filterName", "filterColumn", "treeVariant", "showTreeVariantToggle", "treeRail", "initialPageSize"], outputs: ["nodeToggled", "actionRequested", "tableReady", "selectionChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServicePoliciesListPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-service-policies-list', standalone: false, template: "<div class=\"ziti-page-container ziti-service-policies-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Control which identities can dial or bind which services\"\n    createLabel=\"Create Service Policy\"\n    infoText=\"Service policies grant identities access to dial or bind services.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-policies\" 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@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n" }]
+        }], ctorParameters: () => [{ type: ServicePoliciesPageService }, { type: DataTableFilterService }, { type: i5.MatDialog }, { type: TabNameService }, { type: ConsoleEventsService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SERVICE_POLICY_EXTENSION_SERVICE]
+                }] }] });
+
 class ServicePolicyFormComponent extends ProjectableForm {
     constructor(settingsService, svc, zitiService, growlerService, extService, router, route, location, dialogForm) {
         super(growlerService, extService, zitiService, router, route, location, settingsService, dialogForm);
@@ -26985,12 +28439,12 @@ class ServiceEdgeRouterPoliciesPageService extends ListPageServiceClass {
             createdAt: '',
         };
         this.menuItems = [
-            { name: 'Edit', action: 'update' },
-            { name: 'Delete', action: 'delete' },
+            { name: 'Edit', action: 'update', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M11.2 2.6 13.4 4.8 6 12.2l-2.8.6.6-2.8z"/></svg>' },
+            { name: 'Delete', action: 'delete', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M3.4 4.6h9.2M6.4 4.6V3.2h3.2v1.4M4.6 4.6 5 13h6l.4-8.4"/></svg>' },
         ];
         this.tableHeaderActions = [
-            { name: 'Download All', action: 'download-all' },
-            { name: 'Download Selected', action: 'download-selected' },
+            { name: 'Download All', action: 'download-all', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5v7M5 6.6 8 9.6l3-3M3.2 12.6h9.6"/></svg>' },
+            { name: 'Download Selected', action: 'download-selected', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5v7M5 6.6 8 9.6l3-3M3.2 12.6h9.6"/></svg>' },
         ];
         this.resourceType = 'service-edge-router-policies';
         this.validate = (formData) => {
@@ -27203,9 +28657,163 @@ class ServiceEdgeRouterPoliciesPageService extends ListPageServiceClass {
             this.ID_COLUMN_DEF
         ];
     }
-    getData(filters, sort, page) {
+    // Declarative ListColumn set for the new `lib-list-table` (Beta Features on).
+    initListTableColumns() {
+        this.initMenuActions();
+        const serviceRolesHeaderComponentParams = {
+            filterType: 'ATTRIBUTE',
+            enableSorting: true,
+            getRoleAttributes: () => this.serviceRoleAttributes,
+            getNamedAttributes: () => this.serviceNamedAttributes,
+            getSelectedRoleAttributes: () => this.selectedServiceRoleAttributes,
+            getSelectedNamedAttributes: () => this.selectedServiceNamedAttributes,
+            setSelectedRoleAttributes: (attributes) => {
+                this.selectedServiceRoleAttributes = attributes;
+            },
+            setSelectedNamedAttributes: (attributes) => {
+                this.selectedServiceNamedAttributes = attributes;
+            },
+            getNamedAttributesMap: () => this.serviceNamedAttributesMap,
+        };
+        const routerRolesHeaderComponentParams = {
+            filterType: 'ATTRIBUTE',
+            enableSorting: true,
+            getRoleAttributes: () => this.routerRoleAttributes,
+            getNamedAttributes: () => this.routerNamedAttributes,
+            getSelectedRoleAttributes: () => this.selectedRouterRoleAttributes,
+            getSelectedNamedAttributes: () => this.selectedRouterNamedAttributes,
+            setSelectedRoleAttributes: (attributes) => {
+                this.selectedRouterRoleAttributes = attributes;
+            },
+            setSelectedNamedAttributes: (attributes) => {
+                this.selectedRouterNamedAttributes = attributes;
+            },
+            getNamedAttributesMap: () => this.routerNamedAttributesMap,
+        };
+        // @ marks a named attribute, # a role attribute (matches the tag selector)
+        const rolesChipRenderer = (row) => {
+            const colId = row?.column?.colId;
+            const attrs = row?.data?.[colId + 'Display'] || row?.data?.[colId] || [];
+            return attrs.map((attr) => {
+                const raw = String(attr?.name ?? attr ?? '').trim();
+                if (!raw) {
+                    return '';
+                }
+                const isNamed = raw.charAt(0) === '@';
+                const label = isNamed || raw.charAt(0) === '#' ? raw : '#' + raw;
+                return `<span class="${isNamed ? 'lt-chip lt-chip-at' : 'lt-chip'}">${label}</span>`;
+            }).join('');
+        };
+        const semanticFilterOptions = [
+            { label: 'Show All', value: '' },
+            { label: 'Any Of', value: 'AnyOf' },
+            { label: 'All Of', value: 'AllOf' },
+        ];
+        const semanticRenderer = (row) => row?.data?.semantic === 'AnyOf' ? 'Any Of' : 'All Of';
+        const openForm = (ctx) => {
+            if (this.hasSelectedText()) {
+                return;
+            }
+            this.serviceType = 'advanced';
+            this.openEditForm(ctx.row?.id);
+        };
+        let tableColumns = [
+            {
+                key: 'name',
+                field: 'name',
+                label: 'Name',
+                filterType: 'TEXTINPUT',
+                cell: NameCellComponent,
+                cellInputs: (ctx) => ({
+                    row: ctx.row,
+                    cellValue: ctx.value,
+                    cellConfig: { pathRoot: this.basePath, showIdentityIcons: false },
+                }),
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: true,
+                onSort: this.sort.bind(this),
+                sortDir: 'asc',
+                width: 300,
+            },
+            {
+                key: 'serviceRoles',
+                field: 'serviceRoles',
+                label: 'Service Attributes',
+                filterType: 'ATTRIBUTE',
+                headerParams: serviceRolesHeaderComponentParams,
+                cellHtml: rolesChipRenderer,
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: false,
+            },
+            {
+                key: 'edgeRouterRoles',
+                field: 'edgeRouterRoles',
+                label: 'Router Attributes',
+                filterType: 'ATTRIBUTE',
+                headerParams: routerRolesHeaderComponentParams,
+                cellHtml: rolesChipRenderer,
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: false,
+            },
+            {
+                key: 'semantic',
+                field: 'semantic',
+                label: 'Semantic',
+                filterType: 'SELECT',
+                filterPlaceholder: 'Any semantic',
+                filterOptions: semanticFilterOptions,
+                cellHtml: semanticRenderer,
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                width: 120,
+            },
+            {
+                key: 'createdAt',
+                field: 'createdAt',
+                label: 'Created At',
+                valueFormatter: this.createdAtFormatter,
+                filterType: 'DATETIME',
+                filterPlaceholder: 'Any time',
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                hidden: true,
+            },
+            {
+                key: 'id',
+                field: 'id',
+                label: 'ID',
+                filterType: 'TEXTINPUT',
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                hidden: true,
+            },
+        ];
+        if (this.extService?.processListTableColumns) {
+            tableColumns = this.extService.processListTableColumns(tableColumns);
+        }
+        return tableColumns;
+    }
+    getData(filters, sort, page, pageSize) {
         // we can customize filters or sorting here before moving on...
         this.paging.page = page || this.paging.page;
+        if (pageSize) {
+            this.paging.total = pageSize;
+        }
         return super.getTableData('service-edge-router-policies', this.paging, filters, sort)
             .then((results) => {
             return this.processData(results);
@@ -27413,6 +29021,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     args: [SHAREDZ_EXTENSION]
                 }] }] });
 
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+// Service Edge Router Policies page on `lib-list-table`, selected by the route when Beta Features is on.
+class ServiceEdgeRouterPoliciesListPageComponent extends ListPageComponent {
+    constructor(svc, filterService, dialogForm, tabNames, consoleEvents, extService) {
+        super(filterService, svc, consoleEvents, dialogForm, extService);
+        this.svc = svc;
+        this.tabNames = tabNames;
+        this.extService = extService;
+        this.title = 'Service Edge Router Policies';
+        this.isLoading = false;
+        this.formDataChanged = false;
+        this.tableId = 'service-edge-router-policies';
+        this.initialPageSize = 50;
+    }
+    loadTableColumns() {
+        return this.svc.initListTableColumns();
+    }
+    ngOnInit() {
+        this.tabs = this.tabNames.getTabs('policies');
+        this.svc.refreshData = this.refreshData;
+        this.getRoleAttributes();
+        super.ngOnInit();
+    }
+    headerActionClicked(action) {
+        switch (action) {
+            case 'add':
+                this.svc.serviceType = '';
+                this.svc.openEditForm();
+                break;
+            case 'edit':
+                this.svc.openEditForm();
+                break;
+            case 'delete':
+                const selectedItems = this.rowData.filter((row) => {
+                    return row.selected;
+                });
+                const label = selectedItems.length > 1 ? 'service edge router policies' : 'service edge router policy';
+                this.openBulkDelete(selectedItems, label);
+                break;
+            default:
+        }
+    }
+    tableAction(event) {
+        this.trackMenuAction(event?.action, event?.item);
+        switch (event?.action) {
+            case 'toggleAll':
+            case 'toggleItem':
+                this.itemToggled(event.item);
+                break;
+            case 'update':
+                this.svc.serviceType = 'advanced';
+                this.svc.openEditForm(event.item?.id);
+                break;
+            case 'create':
+                this.svc.openEditForm();
+                break;
+            case 'delete':
+                this.deleteItem(event.item);
+                break;
+            case 'download-all':
+                this.downloadAllItems();
+                break;
+            case 'download-selected':
+                this.svc.downloadItems(this.selectedItems);
+                break;
+            default:
+                break;
+        }
+    }
+    trackMenuAction(action, item) {
+        this.extService?.consoleActionTriggered?.emit({
+            action,
+            page: 'service-edge-router-policy',
+            item,
+            type: 'menu-action'
+        });
+    }
+    getRoleAttributes() {
+        this.svc.getEdgeRouterRoleAttributes();
+        this.svc.getServiceRoleAttributes();
+        this.svc.getServiceNamedAttributes();
+        this.svc.getRouterNamedAttributes();
+    }
+    deleteItem(item) {
+        this.openBulkDelete([item], 'service-edge-router-policies');
+    }
+    closeModal(event) {
+        this.svc.sideModalOpen = false;
+        if (event?.refresh) {
+            this.refreshData();
+        }
+    }
+    dataChanged(event) {
+        this.formDataChanged = event;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServiceEdgeRouterPoliciesListPageComponent, deps: [{ token: ServiceEdgeRouterPoliciesPageService }, { token: DataTableFilterService }, { token: i5.MatDialog }, { token: TabNameService }, { token: ConsoleEventsService }, { token: SHAREDZ_EXTENSION }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ServiceEdgeRouterPoliciesListPageComponent, isStandalone: false, selector: "lib-service-edge-router-policies-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-service-edge-router-policies-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Control which edge routers can carry which services\"\n    createLabel=\"Create Service Edge Router Policy\"\n    infoText=\"Service edge router policies define which edge routers can carry traffic for which services.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-routerpolicy\" 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@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [""], 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", "loadChildren", "childColumnsByLevel", "hasNext", "hasPrev", "startCount", "endCount", "totalCount", "filterApplied", "menuItems", "headerActions", "noItemsImage", "showNoItemsAdd", "noItemsReadonly", "accessDenied", "entityTypeName", "filterName", "filterColumn", "treeVariant", "showTreeVariantToggle", "treeRail", "initialPageSize"], outputs: ["nodeToggled", "actionRequested", "tableReady", "selectionChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ServiceEdgeRouterPoliciesListPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-service-edge-router-policies-list', standalone: false, template: "<div class=\"ziti-page-container ziti-service-edge-router-policies-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Control which edge routers can carry which services\"\n    createLabel=\"Create Service Edge Router Policy\"\n    infoText=\"Service edge router policies define which edge routers can carry traffic for which services.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-routerpolicy\" 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@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n" }]
+        }], ctorParameters: () => [{ type: ServiceEdgeRouterPoliciesPageService }, { type: DataTableFilterService }, { type: i5.MatDialog }, { type: TabNameService }, { type: ConsoleEventsService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SHAREDZ_EXTENSION]
+                }] }] });
+
 class ServiceEdgeRouterPolicy {
     constructor() {
         this.name = '';
@@ -32331,32 +34062,20 @@ class PostureChecksPageService extends ListPageServiceClass {
     constructor(schemaSvc, settings, filterService, csvDownloadService, extService, router) {
         super(settings, filterService, csvDownloadService, extService, router);
         this.schemaSvc = schemaSvc;
+        this.extService = extService;
         this.router = router;
         this.paging = this.DEFAULT_PAGING;
         this.resourceType = 'posture-checks';
         this.modalType = '';
         this.menuItems = [
-            { name: 'Edit', action: 'update' },
-            { name: 'Delete', action: 'delete' },
+            { name: 'Edit', action: 'update', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M11.2 2.6 13.4 4.8 6 12.2l-2.8.6.6-2.8z"/></svg>' },
+            { name: 'Delete', action: 'delete', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M3.4 4.6h9.2M6.4 4.6V3.2h3.2v1.4M4.6 4.6 5 13h6l.4-8.4"/></svg>' },
         ];
-    }
-    initTableColumns() {
-        const osTypeFilterOptions = {
-            filterType: 'SELECT',
-            enableSorting: true,
-            filterOptions: [
-                { label: 'Domain', value: 'DOMAIN' },
-                { label: 'MAC', value: 'MAC' },
-                { label: 'MFA', value: 'MFA' },
-                { label: 'OS', value: 'OS' },
-                { label: 'Process', value: 'PROCESS' },
-                { label: 'Process Multi', value: 'MULTI_PROCESS' },
-            ]
-        };
-        const createdAtHeaderComponentParams = {
-            filterType: 'DATETIME',
-        };
-        const detailsRenderer = (row) => {
+        this.tableHeaderActions = [
+            { name: 'Download All', action: 'download-all', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5v7M5 6.6 8 9.6l3-3M3.2 12.6h9.6"/></svg>' },
+            { name: 'Download Selected', action: 'download-selected', icon: '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="M8 2.5v7M5 6.6 8 9.6l3-3M3.2 12.6h9.6"/></svg>' },
+        ];
+        this.detailsRenderer = (row) => {
             const data = row?.data || '';
             let details = '';
             if (data.typeId == "DOMAIN") {
@@ -32387,6 +34106,23 @@ class PostureChecksPageService extends ListPageServiceClass {
             }
             return details;
         };
+    }
+    initTableColumns() {
+        const osTypeFilterOptions = {
+            filterType: 'SELECT',
+            enableSorting: true,
+            filterOptions: [
+                { label: 'Domain', value: 'DOMAIN' },
+                { label: 'MAC', value: 'MAC' },
+                { label: 'MFA', value: 'MFA' },
+                { label: 'OS', value: 'OS' },
+                { label: 'Process', value: 'PROCESS' },
+                { label: 'Process Multi', value: 'MULTI_PROCESS' },
+            ]
+        };
+        const createdAtHeaderComponentParams = {
+            filterType: 'DATETIME',
+        };
         return [
             {
                 colId: 'name',
@@ -32432,7 +34168,7 @@ class PostureChecksPageService extends ListPageServiceClass {
                 field: 'details',
                 headerName: 'Details',
                 headerComponent: TableColumnDefaultComponent,
-                cellRenderer: detailsRenderer,
+                cellRenderer: this.detailsRenderer,
                 cellRendererParams: { pathRoot: this.basePath },
                 onCellClicked: (data) => {
                     if (this.hasSelectedText()) {
@@ -32460,8 +34196,102 @@ class PostureChecksPageService extends ListPageServiceClass {
             this.ID_COLUMN_DEF
         ];
     }
-    getData(filters, sort) {
+    // Declarative ListColumn set for the new `lib-list-table` (Beta Features on).
+    initListTableColumns() {
+        this.initMenuActions();
+        const escapeHtml = (v) => String(v ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        const openForm = (ctx) => {
+            if (this.hasSelectedText()) {
+                return;
+            }
+            this.openEditForm(ctx.row?.id);
+        };
+        let tableColumns = [
+            {
+                key: 'name',
+                field: 'name',
+                label: 'Name',
+                filterType: 'TEXTINPUT',
+                cell: NameCellComponent,
+                cellInputs: (ctx) => ({
+                    row: ctx.row,
+                    cellValue: ctx.value,
+                    cellConfig: { pathRoot: this.basePath, showIdentityIcons: false },
+                }),
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                sortable: true,
+                onSort: this.sort.bind(this),
+                width: 300,
+            },
+            {
+                key: 'typeId',
+                field: 'typeId',
+                label: 'Type',
+                filterType: 'SELECT',
+                filterPlaceholder: 'Any type',
+                filterOptions: [
+                    { label: 'Show All', value: '' },
+                    { label: 'Domain', value: 'DOMAIN' },
+                    { label: 'MAC', value: 'MAC' },
+                    { label: 'MFA', value: 'MFA' },
+                    { label: 'OS', value: 'OS' },
+                    { label: 'Process', value: 'PROCESS' },
+                    { label: 'Process Multi', value: 'MULTI_PROCESS' },
+                ],
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+                width: 140,
+            },
+            {
+                key: 'details',
+                field: 'details',
+                label: 'Details',
+                cellHtml: (row) => escapeHtml(this.detailsRenderer(row)),
+                onCellClick: openForm,
+                resizable: true,
+                cellClass: 'nf-cell-vert-align',
+            },
+            {
+                key: 'createdAt',
+                field: 'createdAt',
+                label: 'Created At',
+                valueFormatter: this.createdAtFormatter,
+                filterType: 'DATETIME',
+                filterPlaceholder: 'Any time',
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                width: this.remToPx(10),
+            },
+            {
+                key: 'id',
+                field: 'id',
+                label: 'ID',
+                filterType: 'TEXTINPUT',
+                onCellClick: openForm,
+                resizable: true,
+                sortable: true,
+                onSort: this.sort.bind(this),
+                cellClass: 'nf-cell-vert-align',
+                hidden: true,
+            },
+        ];
+        if (this.extService?.processListTableColumns) {
+            tableColumns = this.extService.processListTableColumns(tableColumns);
+        }
+        return tableColumns;
+    }
+    getData(filters, sort, page, pageSize) {
         // we can customize filters or sorting here before moving on...
+        this.paging.page = page || this.paging.page;
+        if (pageSize) {
+            this.paging.total = pageSize;
+        }
         return super.getTableData('posture-checks', this.paging, filters, sort)
             .then((results) => {
             return this.processData(results);
@@ -32603,6 +34433,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     args: [SHAREDZ_EXTENSION]
                 }] }] });
 
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+// Posture Checks page on `lib-list-table`, selected by the route when Beta Features is on.
+class PostureChecksListPageComponent extends ListPageComponent {
+    constructor(svc, filterService, dialogForm, tabNames, consoleEvents, extService) {
+        super(filterService, svc, consoleEvents, dialogForm, extService);
+        this.svc = svc;
+        this.tabNames = tabNames;
+        this.extService = extService;
+        this.title = 'Posture Checks';
+        this.isLoading = false;
+        this.formDataChanged = false;
+        this.tableId = 'posture-checks';
+        this.initialPageSize = 50;
+    }
+    loadTableColumns() {
+        return this.svc.initListTableColumns();
+    }
+    ngOnInit() {
+        this.tabs = this.tabNames.getTabs('policies');
+        this.svc.refreshData = this.refreshData;
+        super.ngOnInit();
+    }
+    headerActionClicked(action) {
+        switch (action) {
+            case 'add':
+                this.svc.openEditForm();
+                break;
+            case 'edit':
+                this.svc.openEditForm();
+                break;
+            case 'delete':
+                const selectedItems = this.rowData.filter((row) => {
+                    return row.selected;
+                });
+                const label = selectedItems.length > 1 ? 'posture checks' : 'posture check';
+                this.openBulkDelete(selectedItems, label);
+                break;
+            default:
+        }
+    }
+    tableAction(event) {
+        this.trackMenuAction(event?.action, event?.item);
+        switch (event?.action) {
+            case 'toggleAll':
+            case 'toggleItem':
+                this.itemToggled(event.item);
+                break;
+            case 'update':
+                this.svc.openEditForm(event.item?.id);
+                break;
+            case 'create':
+                this.svc.openEditForm();
+                break;
+            case 'delete':
+                this.deleteItem(event.item);
+                break;
+            case 'download-all':
+                this.downloadAllItems();
+                break;
+            case 'download-selected':
+                this.svc.downloadItems(this.selectedItems);
+                break;
+            default:
+                break;
+        }
+    }
+    trackMenuAction(action, item) {
+        this.extService?.consoleActionTriggered?.emit({
+            action,
+            page: 'posture-check',
+            item,
+            type: 'menu-action'
+        });
+    }
+    deleteItem(item) {
+        this.openBulkDelete([item], 'posture-checks');
+    }
+    closeModal(event) {
+        this.svc.sideModalOpen = false;
+        if (event?.refresh) {
+            this.refreshData();
+        }
+    }
+    dataChanged(event) {
+        this.formDataChanged = event;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureChecksListPageComponent, deps: [{ token: PostureChecksPageService }, { token: DataTableFilterService }, { token: i5.MatDialog }, { token: TabNameService }, { token: ConsoleEventsService }, { token: SHAREDZ_EXTENSION }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PostureChecksListPageComponent, isStandalone: false, selector: "lib-posture-checks-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-posture-checks-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Verify the state of identities before granting access\"\n    createLabel=\"Create Posture Check\"\n    infoText=\"Posture checks verify attributes of an identity, such as its OS or MFA status, before access is granted.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-posturechecks\" 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@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [""], 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", "loadChildren", "childColumnsByLevel", "hasNext", "hasPrev", "startCount", "endCount", "totalCount", "filterApplied", "menuItems", "headerActions", "noItemsImage", "showNoItemsAdd", "noItemsReadonly", "accessDenied", "entityTypeName", "filterName", "filterColumn", "treeVariant", "showTreeVariantToggle", "treeRail", "initialPageSize"], outputs: ["nodeToggled", "actionRequested", "tableReady", "selectionChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureChecksListPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-posture-checks-list', standalone: false, template: "<div class=\"ziti-page-container ziti-posture-checks-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Verify the state of identities before granting access\"\n    createLabel=\"Create Posture Check\"\n    infoText=\"Posture checks verify attributes of an identity, such as its OS or MFA status, before access is granted.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-posturechecks\" 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@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n" }]
+        }], ctorParameters: () => [{ type: PostureChecksPageService }, { type: DataTableFilterService }, { type: i5.MatDialog }, { type: TabNameService }, { type: ConsoleEventsService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SHAREDZ_EXTENSION]
+                }] }] });
+
 class PostureCheck {
     constructor() {
         this.name = '';
@@ -44280,6 +46224,7 @@ class OpenZitiConsoleLibModule {
             SdkInfoTooltipComponent,
             BooleanCellComponent,
             TokenCellComponent,
+            AttributeCellComponent,
             TableCellSelectComponent,
             TableColumnSelectComponent,
             TableCellMenuComponent,
@@ -44319,12 +46264,15 @@ class OpenZitiConsoleLibModule {
             CreationSummaryDialogComponent,
             ConfigEditorComponent,
             ServicePoliciesPageComponent,
+            ServicePoliciesListPageComponent,
             ServicePolicyFormComponent,
             EdgeRouterPoliciesPageComponent,
+            EdgeRouterPoliciesListPageComponent,
             EdgeRouterPolicyFormComponent,
             MultiActionButtonComponent,
             TableCellNameComponent,
             ServiceEdgeRouterPoliciesPageComponent,
+            ServiceEdgeRouterPoliciesListPageComponent,
             ServiceEdgeRouterPolicyFormComponent,
             TerminatorsPageComponent,
             ConfigurationFormComponent,
@@ -44338,6 +46286,7 @@ class OpenZitiConsoleLibModule {
             VerifyCertificateComponent,
             LoginDialogComponent,
             PostureChecksPageComponent,
+            PostureChecksListPageComponent,
             PostureCheckFormComponent,
             SessionsPageComponent,
             SessionFormComponent,
@@ -44425,8 +46374,10 @@ class OpenZitiConsoleLibModule {
             FormFieldToggleComponent,
             ServiceFormComponent,
             ServicePoliciesPageComponent,
+            ServicePoliciesListPageComponent,
             ServicePolicyFormComponent,
             EdgeRouterPoliciesPageComponent,
+            EdgeRouterPoliciesListPageComponent,
             TerminatorsPageComponent,
             TerminatorFormComponent,
             JwtSignersPageComponent,
@@ -44435,6 +46386,7 @@ class OpenZitiConsoleLibModule {
             AuthPolicyFormComponent,
             LoginDialogComponent,
             PostureChecksPageComponent,
+            PostureChecksListPageComponent,
             PostureCheckFormComponent,
             SessionsPageComponent,
             SessionFormComponent,
@@ -44536,6 +46488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         SdkInfoTooltipComponent,
                         BooleanCellComponent,
                         TokenCellComponent,
+                        AttributeCellComponent,
                         TableCellSelectComponent,
                         TableColumnSelectComponent,
                         TableCellMenuComponent,
@@ -44575,12 +46528,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         CreationSummaryDialogComponent,
                         ConfigEditorComponent,
                         ServicePoliciesPageComponent,
+                        ServicePoliciesListPageComponent,
                         ServicePolicyFormComponent,
                         EdgeRouterPoliciesPageComponent,
+                        EdgeRouterPoliciesListPageComponent,
                         EdgeRouterPolicyFormComponent,
                         MultiActionButtonComponent,
                         TableCellNameComponent,
                         ServiceEdgeRouterPoliciesPageComponent,
+                        ServiceEdgeRouterPoliciesListPageComponent,
                         ServiceEdgeRouterPolicyFormComponent,
                         TerminatorsPageComponent,
                         ConfigurationFormComponent,
@@ -44594,6 +46550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         VerifyCertificateComponent,
                         LoginDialogComponent,
                         PostureChecksPageComponent,
+                        PostureChecksListPageComponent,
                         PostureCheckFormComponent,
                         SessionsPageComponent,
                         SessionFormComponent,
@@ -44662,8 +46619,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         FormFieldToggleComponent,
                         ServiceFormComponent,
                         ServicePoliciesPageComponent,
+                        ServicePoliciesListPageComponent,
                         ServicePolicyFormComponent,
                         EdgeRouterPoliciesPageComponent,
+                        EdgeRouterPoliciesListPageComponent,
                         TerminatorsPageComponent,
                         TerminatorFormComponent,
                         JwtSignersPageComponent,
@@ -44672,6 +46631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         AuthPolicyFormComponent,
                         LoginDialogComponent,
                         PostureChecksPageComponent,
+                        PostureChecksListPageComponent,
                         PostureCheckFormComponent,
                         SessionsPageComponent,
                         SessionFormComponent,
@@ -46197,7 +48157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 */
 
 const ZAC_VERSION = {
-    "version": "4.6.0"
+    "version": "4.7.0"
 };
 
 /*
@@ -46208,5 +48168,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, ConfigBuilderComponent, ConfigBuilderModule, 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, ListTableAutoRefreshComponent, 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 };
+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, ConfigBuilderComponent, ConfigBuilderModule, 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, EdgeRouterPoliciesListPageComponent, 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, ListTableAutoRefreshComponent, 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, PostureChecksListPageComponent, 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, ServiceEdgeRouterPoliciesListPageComponent, ServiceEdgeRouterPoliciesPageComponent, ServiceEdgeRouterPoliciesPageService, ServiceEdgeRouterPolicyFormComponent, ServiceEdgeRouterPolicyFormService, ServiceFormComponent, ServiceFormService, ServicePoliciesListPageComponent, 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