@openziti/ziti-console-lib 1.7.2 → 1.8.0

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

@@ -0,0 +1,3067 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, PLATFORM_ID, Output, Inject, Directive, Input, Component, ViewChild, HostBinding } from '@angular/core';
+import { BehaviorSubject, Subject, Subscription } from 'rxjs';
+import _, { isEmpty, forEach } from 'lodash';
+import { HttpParams } from '@angular/common/http';
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i2 from '@angular/router';
+import * as i5 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i6 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import moment from 'moment';
+import * as i5$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import * as i2$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3 from '@angular/platform-browser';
+
+class DataTableFilterService {
+    // filter params live under this prefix so unrelated params (e.g. ?tab=) aren't treated as filters
+    static { this.URL_FILTER_PREFIX = 'f.'; }
+    constructor(location, router, activatedRoute) {
+        this.location = location;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.filters = [];
+        this.currentPage = 1;
+        /** Rows requested per page. Defaults to the legacy page size; the list-table's
+         *  rows-per-page control changes it via {@link changePageSize}. */
+        this.pageSize = 50;
+        this.filtersChanged = new BehaviorSubject(this.filters);
+        this.filtering = new BehaviorSubject(false);
+        this.pageChanged = new BehaviorSubject(this.currentPage);
+        this.pageSizeChanged = new BehaviorSubject(this.pageSize);
+        this.currentQueryParams = [];
+    }
+    updateFilter(filterObj) {
+        if (isEmpty(filterObj.value) && (isNaN(filterObj.value) || filterObj.value === ''))
+            this.removeFilter(filterObj);
+        else {
+            let isFound = false;
+            for (let idx = 0; idx < this.filters.length; idx++) {
+                if (this.filters[idx].columnId === filterObj.columnId) {
+                    this.filters[idx] = filterObj;
+                    isFound = true;
+                    break;
+                }
+            }
+            if (!isFound) {
+                this.filters.push(filterObj);
+            }
+        }
+        this.updateUrlParameters();
+        this.filtersChanged.next(this.filters);
+    }
+    removeFilter(filterObj) {
+        for (let idx = 0; idx < this.filters.length; idx++) {
+            if (this.filters[idx].columnId === filterObj.columnId) {
+                this.filters.splice(idx, 1);
+                break;
+            }
+        }
+        this.updateUrlParameters([filterObj]);
+        this.filtersChanged.next(this.filters);
+    }
+    getFilterString(key) {
+        let value = '';
+        for (let idx = 0; idx < this.filters.length; idx++) {
+            if (this.filters[idx].columnId === key) {
+                value = this.filters[idx].value;
+                break;
+            }
+        }
+        return value;
+    }
+    changePage(page) {
+        this.currentPage = page;
+        this.pageChanged.next(page);
+    }
+    changePageSize(size) {
+        this.pageSize = size;
+        this.currentPage = 1;
+        this.pageSizeChanged.next(size);
+    }
+    clearFilters() {
+        this.filters = [];
+        this.updateUrlParameters();
+        this.filtersChanged.next(this.filters);
+    }
+    /**
+     * Remove every active filter (the toolbar/empty-state "clear filters" action).
+     * clearFilters() above re-reads the URL and so is really a load-time sync; this one
+     * passes the active filters to updateUrlParameters so they are dropped from the URL
+     * and storage instead of being restored, then emits the now-empty list.
+     */
+    clearAllFilters() {
+        const toRemove = Object.values(this.getUrlFiltersMap());
+        this.filters = [];
+        this.updateUrlParameters(toRemove);
+        this.filtersChanged.next(this.filters);
+    }
+    storeFilters() {
+        localStorage.setItem('search_filters', JSON.stringify(this.filters));
+    }
+    getStoredFilters() {
+        const storageItem = localStorage.getItem('search_filters');
+        const filters = storageItem ? JSON.parse(storageItem) : [];
+        return filters;
+    }
+    updateUrlParameters(filtersToRemove = []) {
+        const prefix = DataTableFilterService.URL_FILTER_PREFIX;
+        const urlFiltersMap = this.getUrlFiltersMap();
+        this.filters.forEach(filter => {
+            urlFiltersMap[filter.columnId] = filter;
+        });
+        const currentParamString = window.location.href.split("?")[1] || '';
+        let params = new HttpParams({ fromString: currentParamString });
+        params.keys()
+            .filter((key) => key.startsWith(prefix))
+            .forEach((key) => {
+            params = params.delete(key);
+        });
+        const newFilters = [];
+        forEach(urlFiltersMap, (value, key) => {
+            const filterRemoved = filtersToRemove.some((removed) => {
+                return removed.columnId === key;
+            });
+            if (!filterRemoved) {
+                params = params.append(prefix + key, value.value);
+                newFilters.push(value);
+            }
+        });
+        this.filters = newFilters;
+        const path = this.router.url.split("?")[0];
+        this.location.replaceState(path, params.toString());
+        this.storeFilters();
+    }
+    getUrlFiltersMap() {
+        const prefix = DataTableFilterService.URL_FILTER_PREFIX;
+        const paramString = window.location.href.split("?")[1];
+        const params = new HttpParams({ fromString: paramString });
+        const storedFilters = this.getStoredFilters();
+        const appliedFiltersMap = {};
+        params.keys().forEach((rawKey) => {
+            if (!rawKey.startsWith(prefix)) {
+                return;
+            }
+            const key = rawKey.slice(prefix.length);
+            const storedFilter = storedFilters.find((filter) => {
+                return filter.columnId === key;
+            });
+            if (storedFilter) {
+                appliedFiltersMap[key] = storedFilter;
+            }
+            else {
+                let val = params.get(rawKey);
+                let type = 'TEXTINPUT';
+                let label = val;
+                if (val?.split(',')?.length > 1) {
+                    val = val?.split(',');
+                    label = val[0];
+                    type = 'ATTRIBUTE';
+                }
+                appliedFiltersMap[key] = {
+                    columnId: key,
+                    value: val,
+                    label: decodeURIComponent(label),
+                    filterName: key,
+                    type: type
+                };
+            }
+        });
+        return appliedFiltersMap;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: DataTableFilterService, deps: [{ token: i1.Location }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: DataTableFilterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: DataTableFilterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Location }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
+
+/*
+    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.
+*/
+
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+/**
+ * Per-instance state + localStorage persistence for {@link ListTableComponent}.
+ * Uses its own `lt_<tableId>_*` keys (separate from the legacy ag-grid table) so a
+ * first visit starts from the column defs' default widths, not a carried-over ag layout.
+ */
+class ListTableService {
+    constructor() {
+        this.tableId = '';
+        /** Coordinates the toolbar dropdowns so only one (filter pill or column chooser)
+         *  is open at a time. Openers emit themselves; others close when they see an
+         *  owner that isn't them. */
+        this.menuOpenedSubject = new Subject();
+        this.menuOpened$ = this.menuOpenedSubject.asObservable();
+    }
+    notifyMenuOpened(owner) {
+        this.menuOpenedSubject.next(owner);
+    }
+    stateKey() {
+        return `lt_${this.tableId}_table_state`;
+    }
+    widthsKey() {
+        return `lt_${this.tableId}_column_widths`;
+    }
+    pageSizeKey() {
+        return `lt_${this.tableId}_page_size`;
+    }
+    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`;
+    }
+    restorePageSize(fallback) {
+        return ListTableService.readPersistedPageSize(this.tableId, fallback);
+    }
+    savePageSize(size) {
+        try {
+            localStorage.setItem(this.pageSizeKey(), String(size));
+        }
+        catch {
+            // ignore
+        }
+    }
+    /** Reads a table's remembered rows-per-page without an instance (for host pre-seeding). */
+    static readPersistedPageSize(tableId, fallback) {
+        try {
+            const raw = localStorage.getItem(ListTableService.pageSizeKeyFor(tableId));
+            const n = raw ? parseInt(raw, 10) : NaN;
+            return Number.isFinite(n) && n > 0 ? n : fallback;
+        }
+        catch {
+            return fallback;
+        }
+    }
+    /**
+     * Returns a shallow-cloned copy of `columns` with any persisted width, visibility,
+     * and order applied. Columns not present in the saved state keep their declared
+     * position (appended after the saved ones).
+     */
+    /** Parses a stored JSON value, or null when missing/unavailable/malformed. */
+    readJson(key) {
+        try {
+            const raw = localStorage.getItem(key);
+            return raw ? JSON.parse(raw) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /** 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;
+                    }
+                    if (s.width != null) {
+                        found.width = s.width;
+                    }
+                    ordered.push(found);
+                }
+            });
+            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) {
+        try {
+            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 {
+            const raw = localStorage.getItem(this.widthsKey());
+            const widths = raw ? JSON.parse(raw) : {};
+            widths[colId] = width;
+            localStorage.setItem(this.widthsKey(), JSON.stringify(widths));
+        }
+        catch {
+            // ignore
+        }
+        this.saveState(columns);
+    }
+    /** Clears all persisted layout for this table ("Restore Default Table"). */
+    reset() {
+        try {
+            localStorage.removeItem(this.stateKey());
+            localStorage.removeItem(this.widthsKey());
+            localStorage.removeItem(this.pageSizeKey());
+            localStorage.removeItem(this.treeVariantKey());
+            localStorage.removeItem(this.childStateKey());
+            localStorage.removeItem(this.childWidthsKey());
+        }
+        catch {
+            // ignore
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListTableService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListTableService, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+    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.
+*/
+/**
+ * Emits `clickOutside` when a click lands outside the host element. A local,
+ * dependency-free standalone replacement for `ng-click-outside`, so the table and
+ * its cells can be consumed from the package without pulling an undeclared dependency.
+ *
+ * The document listener runs outside Angular to avoid a change-detection pass on every
+ * click anywhere on the page; the emit re-enters the zone so bound handlers run normally.
+ */
+class ClickOutsideDirective {
+    constructor(el, ngZone, platformId) {
+        this.el = el;
+        this.ngZone = ngZone;
+        this.platformId = platformId;
+        this.clickOutside = new EventEmitter();
+        this.onDocumentClick = this.onDocumentClick.bind(this);
+    }
+    ngOnInit() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            document.addEventListener('click', this.onDocumentClick);
+        });
+    }
+    ngOnDestroy() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            document.removeEventListener('click', this.onDocumentClick);
+        });
+    }
+    onDocumentClick(event) {
+        if (!this.el.nativeElement.contains(event.target)) {
+            this.ngZone.run(() => this.clickOutside.emit(event));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.34", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clickOutside]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { clickOutside: [{
+                type: Output
+            }] } });
+
+/**
+ * Generic, theme-driven action menu popover. Presentational only: the host owns
+ * open state and position and handles `(itemClick)` / `(closed)`.
+ */
+class ListMenuComponent {
+    constructor() {
+        /** Whether the menu is rendered. */
+        this.open = false;
+        /** Rows to render. */
+        this.items = [];
+        /** Fixed-position left offset (px). */
+        this.left = 0;
+        /** Fixed-position top offset (px). */
+        this.top = 0;
+        /** Emitted when a clickable row is selected. */
+        this.itemClick = new EventEmitter();
+        /** Emitted when the user clicks outside the open menu. */
+        this.closed = new EventEmitter();
+        this.trackItem = (_, item) => item.action ?? item.label;
+    }
+    onItem(item, event) {
+        if (item.disabled) {
+            return;
+        }
+        this.itemClick.emit({ item, event });
+    }
+    onClickOutside(event) {
+        this.closed.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.34", type: ListMenuComponent, isStandalone: true, selector: "lib-list-menu", inputs: { open: "open", items: "items", left: "left", top: "top", menuId: "menuId" }, outputs: { itemClick: "itemClick", closed: "closed" }, ngImport: i0, template: "@if (open) {\n  <div\n    class=\"lt-menu\"\n    [attr.id]=\"menuId || null\"\n    [ngStyle]=\"{ left: left + 'px', top: top + 'px' }\"\n    (clickOutside)=\"onClickOutside($event)\"\n  >\n    @for (item of items; track trackItem($index, item)) {\n      <button\n        type=\"button\"\n        class=\"lt-menu-item\"\n        [class.has-icon]=\"!!item.icon || !!item.iconSvg\"\n        [class.is-hidden]=\"item.hidden\"\n        [disabled]=\"!!item.disabled\"\n        [attr.id]=\"item.id || null\"\n        (click)=\"onItem(item, $event)\"\n      >\n        @if (item.iconSvg) {\n          <span class=\"lt-menu-icon\" aria-hidden=\"true\" [innerHTML]=\"item.iconSvg\"></span>\n        } @else if (item.icon) {\n          <span class=\"lt-menu-icon {{ item.icon }}\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"lt-menu-label\">{{ item.label }}</span>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.lt-menu{position:fixed;z-index:1000;min-width:11rem;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);font-family:var(--lt-font);animation:lt-menu-in .1s ease-out}@keyframes lt-menu-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.lt-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);text-align:left;background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer}.lt-menu-item:hover{background:var(--lt-row-hover);color:var(--lt-link)}.lt-menu-item:hover .lt-menu-icon{color:var(--lt-link)}.lt-menu-item.is-hidden{display:none}.lt-menu-item:disabled{opacity:.45;cursor:default}.lt-menu-item:disabled:hover{background:transparent;color:var(--lt-cell-text)}.lt-menu-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;font-size:.9375rem;color:var(--lt-icon)}.lt-menu-icon ::ng-deep svg{display:block;width:.9375rem;height:.9375rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-menu', standalone: true, imports: [CommonModule, ClickOutsideDirective], template: "@if (open) {\n  <div\n    class=\"lt-menu\"\n    [attr.id]=\"menuId || null\"\n    [ngStyle]=\"{ left: left + 'px', top: top + 'px' }\"\n    (clickOutside)=\"onClickOutside($event)\"\n  >\n    @for (item of items; track trackItem($index, item)) {\n      <button\n        type=\"button\"\n        class=\"lt-menu-item\"\n        [class.has-icon]=\"!!item.icon || !!item.iconSvg\"\n        [class.is-hidden]=\"item.hidden\"\n        [disabled]=\"!!item.disabled\"\n        [attr.id]=\"item.id || null\"\n        (click)=\"onItem(item, $event)\"\n      >\n        @if (item.iconSvg) {\n          <span class=\"lt-menu-icon\" aria-hidden=\"true\" [innerHTML]=\"item.iconSvg\"></span>\n        } @else if (item.icon) {\n          <span class=\"lt-menu-icon {{ item.icon }}\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"lt-menu-label\">{{ item.label }}</span>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.lt-menu{position:fixed;z-index:1000;min-width:11rem;padding:.25rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);font-family:var(--lt-font);animation:lt-menu-in .1s ease-out}@keyframes lt-menu-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.lt-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4375rem .5rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);text-align:left;background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer}.lt-menu-item:hover{background:var(--lt-row-hover);color:var(--lt-link)}.lt-menu-item:hover .lt-menu-icon{color:var(--lt-link)}.lt-menu-item.is-hidden{display:none}.lt-menu-item:disabled{opacity:.45;cursor:default}.lt-menu-item:disabled:hover{background:transparent;color:var(--lt-cell-text)}.lt-menu-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1rem;font-size:.9375rem;color:var(--lt-icon)}.lt-menu-icon ::ng-deep svg{display:block;width:.9375rem;height:.9375rem}\n"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], left: [{
+                type: Input
+            }], top: [{
+                type: Input
+            }], menuId: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+const DATE_PRESETS = [
+    { label: 'Any time', value: '' },
+    { label: 'Last Hour', value: 'hour' },
+    { label: 'Last Day', value: 'day' },
+    { label: 'Last Week', value: 'week' },
+    { label: 'Last Month', value: 'month' },
+];
+/**
+ * A single control in the table's filter row. Renders the right widget for the
+ * column's `filterType` (text input / single-select / multi-select / date-range)
+ * and pushes changes through {@link DataTableFilterService}, whose value contract the
+ * controller query-builder already understands (icontains / = / anyOf() / datetime range).
+ */
+class ListFilterCellComponent {
+    constructor(filterService, listSvc) {
+        this.filterService = filterService;
+        this.listSvc = listSvc;
+        this.mode = 'text';
+        this.options = [];
+        this.textValue = '';
+        this.selectedValue = '';
+        this.selectedValues = [];
+        /** In-dropdown search text for the multi-select attribute combo. */
+        this.attrSearch = '';
+        /** Match any selected attribute (or) vs every one (and); attribute filters only. */
+        this.attrSemantic = 'AnyOf';
+        this.open = false;
+        this.menuLeft = 0;
+        this.menuTop = 0;
+        this.menuWidth = 0;
+        // custom date range (daterange mode)
+        this.dateRangeStart = null;
+        this.dateRangeEnd = null;
+        this.sub = new Subscription();
+        this.textDebounced = _.debounce(() => this.emitText(), 400);
+    }
+    ngOnInit() {
+        this.mode = this.resolveMode();
+        this.options = this.resolveOptions();
+        this.sub.add(this.filterService.filtersChanged.subscribe((filters) => this.syncFromFilters(filters)));
+        // close this menu whenever another dropdown opens
+        this.sub.add(this.listSvc.menuOpened$.subscribe((owner) => {
+            if (owner !== this) {
+                this.open = false;
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+    // ------------------------------------------------------------------ config
+    get field() {
+        return this.column.filterField || this.column.field || this.column.key;
+    }
+    get placeholder() {
+        return this.column.filterPlaceholder || 'All';
+    }
+    /** True only for the Ziti role-attribute flavor of multi-select (adds #/@ prefixing). */
+    get isAttributeMode() {
+        return this.column.filterType === 'ATTRIBUTE';
+    }
+    resolveMode() {
+        switch (this.column.filterType) {
+            case 'TEXTINPUT':
+                return 'text';
+            case 'ATTRIBUTE':
+            case 'MULTISELECT':
+                return 'multi';
+            case 'DATETIME':
+                return 'daterange';
+            default:
+                return 'single';
+        }
+    }
+    resolveOptions() {
+        if (this.mode === 'daterange') {
+            return DATE_PRESETS;
+        }
+        if (this.mode === 'multi') {
+            let raw;
+            if (this.isAttributeMode) {
+                const getAttrs = this.column.headerParams?.['getRoleAttributes'];
+                raw = (typeof getAttrs === 'function' ? getAttrs() : null) || this.column.filterOptions || [];
+            }
+            else {
+                raw = this.column.getFilterOptions ? this.column.getFilterOptions() : (this.column.filterOptions || []);
+            }
+            return raw.map((a) => (typeof a === 'string' ? { label: a, value: a } : a));
+        }
+        const raw = this.column.getFilterOptions ? this.column.getFilterOptions() : this.column.filterOptions || [];
+        return raw;
+    }
+    // ------------------------------------------------------------------ display
+    labelForValue(value) {
+        const opt = this.options.find((o) => `${o.value}` === `${value}`);
+        return opt ? opt.label : `${value}`;
+    }
+    /** Short display of the current selection, shown after the field label when set. */
+    get valueLabel() {
+        if (this.mode === 'multi') {
+            if (this.selectedValues.length === 1) {
+                return this.labelForValue(this.selectedValues[0]);
+            }
+            return `${this.selectedValues.length}`;
+        }
+        if (this.mode === 'daterange') {
+            if (this.selectedValue === 'custom' && this.dateRangeStart) {
+                const start = moment(this.dateRangeStart).format('M/D/YY');
+                const end = this.dateRangeEnd ? moment(this.dateRangeEnd).format('M/D/YY') : '';
+                return end ? `${start} – ${end}` : start;
+            }
+            const found = this.options.find((o) => o.value === this.selectedValue);
+            return found && found.value ? found.label : '';
+        }
+        const match = this.options.find((o) => `${o.value}` === `${this.selectedValue}`);
+        return match && match.value !== '' && match.value != null ? match.label : '';
+    }
+    get hasValue() {
+        if (this.mode === 'multi') {
+            return this.selectedValues.length > 0;
+        }
+        return this.selectedValue !== '' && this.selectedValue != null;
+    }
+    isOptionSelected(opt) {
+        if (this.mode === 'multi') {
+            return this.selectedValues.includes(opt.value);
+        }
+        return `${opt.value}` === `${this.selectedValue}`;
+    }
+    /** Attribute options filtered by the in-dropdown search box (multi mode). */
+    get filteredOptions() {
+        if (this.mode !== 'multi' || !this.attrSearch) {
+            return this.options;
+        }
+        const q = this.attrSearch.toLowerCase();
+        return this.options.filter((o) => `${o.label ?? o.value}`.toLowerCase().includes(q));
+    }
+    /** A named attribute (rendered with @ + secondary color) vs a role attribute (# + primary). */
+    isNamedOption(opt) {
+        return this.isAttributeMode && String(opt?.value ?? opt?.label ?? '').charAt(0) === '@';
+    }
+    /** Option label. The attribute flavor prefixes # (role) / keeps @ (named); others render plain. */
+    optionLabel(opt) {
+        const raw = String(opt?.label ?? opt?.value ?? '');
+        if (!this.isAttributeMode) {
+            return raw;
+        }
+        if (raw.charAt(0) === '@' || raw.charAt(0) === '#') {
+            return raw;
+        }
+        return '#' + raw;
+    }
+    // ------------------------------------------------------------------ open/close
+    toggleMenu(event) {
+        event.stopPropagation();
+        if (this.open) {
+            this.open = false;
+            return;
+        }
+        const rect = this.trigger?.nativeElement.getBoundingClientRect();
+        if (rect) {
+            this.menuLeft = rect.left;
+            this.menuTop = rect.bottom + 4;
+            this.menuWidth = Math.max(rect.width, this.mode === 'multi' ? 220 : 160);
+        }
+        // refresh dynamic option sources (e.g. role attributes) each open
+        this.options = this.resolveOptions();
+        this.attrSearch = '';
+        this.open = true;
+        this.listSvc.notifyMenuOpened(this);
+    }
+    closeMenu() {
+        this.open = false;
+    }
+    // ------------------------------------------------------------------ text
+    onTextInput() {
+        this.textDebounced();
+    }
+    emitText() {
+        this.filterService.updateFilter({
+            filterName: this.column.label,
+            columnId: this.field,
+            value: this.textValue,
+            label: this.textValue,
+            type: 'TEXTINPUT',
+        });
+    }
+    // ------------------------------------------------------------------ single
+    selectOption(opt) {
+        this.selectedValue = opt.value;
+        this.open = false;
+        if (opt.value === '' || opt.value == null) {
+            this.removeThis();
+            return;
+        }
+        this.filterService.updateFilter({
+            filterName: this.column.label,
+            columnId: this.field,
+            value: opt.value,
+            label: opt.label,
+            type: this.column.filterType || 'SELECT',
+        });
+    }
+    // ------------------------------------------------------------------ multi
+    toggleOption(opt) {
+        const idx = this.selectedValues.indexOf(opt.value);
+        if (idx >= 0) {
+            this.selectedValues.splice(idx, 1);
+        }
+        else {
+            this.selectedValues.push(opt.value);
+        }
+        this.emitMulti();
+    }
+    emitMulti() {
+        if (!this.selectedValues.length) {
+            this.removeThis();
+            return;
+        }
+        const filter = {
+            filterName: this.column.label,
+            columnId: this.field,
+            value: [...this.selectedValues],
+            label: this.selectedValues.map((v) => this.labelForValue(v)).join(', '),
+            type: this.isAttributeMode ? 'ATTRIBUTE' : 'MULTISELECT',
+            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;
+        this.dateRangeStart = null;
+        this.dateRangeEnd = null;
+        this.open = false;
+        if (!opt.value) {
+            this.removeThis();
+            return;
+        }
+        const end = moment();
+        let start;
+        switch (opt.value) {
+            case 'hour':
+                start = moment().subtract(1, 'hours');
+                break;
+            case 'week':
+                start = moment().subtract(7, 'days');
+                break;
+            case 'month':
+                start = moment().subtract(1, 'month');
+                break;
+            case 'day':
+            default:
+                start = moment().subtract(24, 'hours');
+                break;
+        }
+        this.filterService.updateFilter({
+            filterName: this.column.label,
+            columnId: this.field,
+            value: [encodeURIComponent(start.toISOString()), encodeURIComponent(end.toISOString())],
+            label: opt.label,
+            type: 'DATETIME',
+        });
+    }
+    openCustomRange(event) {
+        event.stopPropagation();
+        this.open = false;
+        // open the Material calendar on the next tick (after the menu closes)
+        _.delay(() => this.rangePicker?.open(), 0);
+    }
+    onRangeStartChanged(date) {
+        this.dateRangeStart = date;
+        this.emitCustomRange();
+    }
+    onRangeEndChanged(date) {
+        this.dateRangeEnd = date;
+        this.emitCustomRange();
+    }
+    emitCustomRange() {
+        if (!this.dateRangeStart || !this.dateRangeEnd) {
+            return;
+        }
+        this.selectedValue = 'custom';
+        const start = moment(this.dateRangeStart).startOf('day');
+        const end = moment(this.dateRangeEnd).endOf('day');
+        this.filterService.updateFilter({
+            filterName: this.column.label,
+            columnId: this.field,
+            value: [encodeURIComponent(start.toISOString()), encodeURIComponent(end.toISOString())],
+            label: `${start.format('M/D/YY')} – ${end.format('M/D/YY')}`,
+            type: 'DATETIME',
+        });
+    }
+    // ------------------------------------------------------------------ clear
+    clear(event) {
+        event.stopPropagation();
+        this.selectedValue = '';
+        this.selectedValues = [];
+        this.textValue = '';
+        this.dateRangeStart = null;
+        this.dateRangeEnd = null;
+        this.attrSemantic = 'AnyOf';
+        this.removeThis();
+    }
+    removeThis() {
+        this.filterService.removeFilter({
+            filterName: this.column.label,
+            columnId: this.field,
+            value: '',
+            label: '',
+        });
+    }
+    // ------------------------------------------------------------------ sync
+    syncFromFilters(filters) {
+        const match = filters.find((f) => f.columnId === this.field);
+        if (!match) {
+            this.textValue = '';
+            this.selectedValue = '';
+            this.selectedValues = [];
+            this.dateRangeStart = null;
+            this.dateRangeEnd = null;
+            return;
+        }
+        if (this.mode === 'text') {
+            this.textValue = match.value ?? '';
+        }
+        else if (this.mode === 'multi') {
+            this.selectedValues = _.isArray(match.value) ? [...match.value] : [match.value];
+            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
+        }
+        else {
+            this.selectedValue = match.value;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", 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.34", type: ListFilterCellComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListFilterCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-filter-cell', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        ClickOutsideDirective,
+                    ], 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: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], rangePicker: [{
+                type: ViewChild,
+                args: ['rangePicker']
+            }] } });
+
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+/** Header cell for {@link ListTableComponent}: label and 3-state sort (asc/desc). */
+class ListHeaderCellComponent {
+    constructor() {
+        this.sortChanged = new EventEmitter();
+    }
+    get enableSorting() {
+        return !!(this.column?.sortable || this.column?.enableSorting);
+    }
+    sort() {
+        if (!this.enableSorting) {
+            return;
+        }
+        const dir = !this.sortDir || this.sortDir === 'desc' ? 'asc' : 'desc';
+        this.sortDir = dir;
+        this.column.onSort?.(this.column.key, dir);
+        this.sortChanged.emit({ colId: this.column.key, dir });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.34", type: ListHeaderCellComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListHeaderCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-header-cell', standalone: true, imports: [CommonModule], 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
+            }] } });
+
+/*
+    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.
+*/
+/** Auto-refresh control: a pill + interval menu. Owns the timer and emits `refresh` each tick. */
+class ListTableAutoRefreshComponent {
+    constructor() {
+        this._seconds = 0;
+        /** Skip a tick while a refresh is already in flight. */
+        this.loading = false;
+        this.intervals = [
+            { label: '15s', seconds: 15 },
+            { label: '30s', seconds: 30 },
+            { label: '1m', seconds: 60 },
+            { label: '5m', seconds: 300 },
+        ];
+        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) {
+        this._seconds = value || 0;
+        this.restartTimer();
+    }
+    get seconds() {
+        return this._seconds;
+    }
+    get enabled() {
+        return this._seconds > 0;
+    }
+    get valueLabel() {
+        if (!this.enabled) {
+            return 'Off';
+        }
+        const match = this.intervals.find((i) => i.seconds === this._seconds);
+        return match ? match.label : `${this._seconds}s`;
+    }
+    toggleMenu(event) {
+        event.stopPropagation();
+        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;
+    }
+    isSelected(seconds) {
+        return this._seconds === seconds;
+    }
+    select(seconds) {
+        this.open = false;
+        if (seconds === this._seconds) {
+            return;
+        }
+        this._seconds = seconds;
+        this.secondsChange.emit(seconds);
+        this.restartTimer();
+    }
+    restartTimer() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+        if (this._seconds > 0) {
+            this.timer = setInterval(() => {
+                if (!this.loading) {
+                    this.refresh.emit();
+                }
+            }, this._seconds * 1000);
+        }
+    }
+    ngOnDestroy() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListTableAutoRefreshComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.34", type: ListTableAutoRefreshComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListTableAutoRefreshComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-table-auto-refresh', standalone: true, imports: [CommonModule, ClickOutsideDirective], 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: [{
+                type: Input
+            }], intervals: [{
+                type: Input
+            }], refresh: [{
+                type: Output
+            }], secondsChange: [{
+                type: Output
+            }], arEl: [{
+                type: ViewChild,
+                args: ['arEl']
+            }], valueEl: [{
+                type: ViewChild,
+                args: ['valueEl']
+            }], chevronEl: [{
+                type: ViewChild,
+                args: ['chevronEl']
+            }] } });
+
+/**
+ * Row selection toggle for {@link ListTableComponent}. Router / exclusive /
+ * reserved / system rows cannot be toggled.
+ */
+class SelectCellComponent {
+    constructor() {
+        this.item = {
+            id: '',
+            name: '',
+            selected: false,
+            hideSelect: false,
+        };
+        this.disableToggle = false;
+    }
+    set row(v) {
+        this.item = v || this.item;
+        this.disableToggle =
+            _.get(this.item, 'typeId') === 'Router' ||
+                _.get(this.item, 'exclusiveTo') ||
+                _.get(this.item, 'reserved') === true ||
+                _.get(this.item, 'isSystem') === true;
+    }
+    toggle(item) {
+        if (this.disableToggle || !this.toggleItem) {
+            return;
+        }
+        this.toggleItem(item);
+    }
+    get tooltip() {
+        let tooltip = '';
+        if (this.item?.isSystem) {
+            tooltip = 'Deleting "system" entities is not allowed';
+        }
+        else if (this.item?.typeId === 'Router') {
+            tooltip = 'Unable to delete "Router" Identities. Please delete the associated Router instead.';
+        }
+        return tooltip;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: SelectCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.34", type: SelectCellComponent, isStandalone: true, selector: "lib-select-cell", inputs: { row: "row", toggleItem: "toggleItem" }, ngImport: i0, template: "@if (!item.hideSelect) {\n  <div\n    #toggleButton\n    (click)=\"toggle(item)\"\n    [ngClass]=\"{ selected: item.selected, indeterminate: item.indeterminate && !item.selected, disabled: disableToggle }\"\n    attr.name=\"RowSelect0_{{ item.name }}\"\n    class=\"row-toggle tSelect\"\n    id=\"RowSelect0_{{ item.id }}\"\n    attr.data-id=\"{{item.id}}\"\n    [matTooltip]=\"tooltip\"\n  ></div>\n}\n", styles: [".row-toggle.tSelect{box-sizing:border-box;width:1rem;height:1rem;border:1px solid var(--lt-border);border-radius:.25rem;cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--lt-control-bg);background-repeat:no-repeat;background-position:center center;transition:border-color .12s,background-color .12s}.row-toggle.tSelect:hover{border-color:var(--lt-link)}.row-toggle.tSelect.selected{border-color:var(--lt-link);background-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.6 5.7 10.8 11.5 3.6'/%3E%3C/svg%3E\")}.row-toggle.tSelect.indeterminate{border-color:var(--lt-link);background-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' d='M3 7 L11 7'/%3E%3C/svg%3E\")}.row-toggle.tSelect.disabled{opacity:.3;cursor:not-allowed;transform:translate(-50%,-50%)!important}.row-toggle.tSelect.disabled:hover{border-color:var(--lt-border);background-color:var(--lt-control-bg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: SelectCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-select-cell', standalone: true, imports: [CommonModule, MatTooltipModule], template: "@if (!item.hideSelect) {\n  <div\n    #toggleButton\n    (click)=\"toggle(item)\"\n    [ngClass]=\"{ selected: item.selected, indeterminate: item.indeterminate && !item.selected, disabled: disableToggle }\"\n    attr.name=\"RowSelect0_{{ item.name }}\"\n    class=\"row-toggle tSelect\"\n    id=\"RowSelect0_{{ item.id }}\"\n    attr.data-id=\"{{item.id}}\"\n    [matTooltip]=\"tooltip\"\n  ></div>\n}\n", styles: [".row-toggle.tSelect{box-sizing:border-box;width:1rem;height:1rem;border:1px solid var(--lt-border);border-radius:.25rem;cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--lt-control-bg);background-repeat:no-repeat;background-position:center center;transition:border-color .12s,background-color .12s}.row-toggle.tSelect:hover{border-color:var(--lt-link)}.row-toggle.tSelect.selected{border-color:var(--lt-link);background-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.6 5.7 10.8 11.5 3.6'/%3E%3C/svg%3E\")}.row-toggle.tSelect.indeterminate{border-color:var(--lt-link);background-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' d='M3 7 L11 7'/%3E%3C/svg%3E\")}.row-toggle.tSelect.disabled{opacity:.3;cursor:not-allowed;transform:translate(-50%,-50%)!important}.row-toggle.tSelect.disabled:hover{border-color:var(--lt-border);background-color:var(--lt-control-bg)}\n"] }]
+        }], propDecorators: { row: [{
+                type: Input
+            }], toggleItem: [{
+                type: Input
+            }] } });
+
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+/**
+ * Modern, themeable placeholder shown inside {@link ListTableComponent} when a list has
+ * no rows. Four variants (first-use empty, no search results, access denied, load error),
+ * per-entity default copy keyed by tableId, and a `[empty-state]` projection slot for a
+ * fully custom placeholder. All copy/glyph/actions can be overridden per table.
+ */
+class ListEmptyComponent {
+    constructor() {
+        this.variant = 'empty';
+        /** tableId used to look up the default copy (e.g. 'services', 'identities'). */
+        this.entityKey = '';
+        /** Human label used to derive a noun when the key has no tailored copy. */
+        this.entityLabel = '';
+        /** What this list belongs to, e.g. 'network'. Set: "This network has no services";
+         *  blank: "There are no services", for lists not tied to a network. */
+        this.scope = '';
+        /** Label for the primary create action (first-use empty only). */
+        this.createLabel = '';
+        /** Whether the create action is offered (false hides it, e.g. read-only tables). */
+        this.hasAdd = true;
+        this.readonly = false;
+        /** Draw the soft card. On for the full-page state; off inside the table, so a card isn't nested in the grid. */
+        this.framed = true;
+        this.create = new EventEmitter();
+        this.clearFilters = new EventEmitter();
+        this.retry = new EventEmitter();
+    }
+    // ---- per-entity default copy (first-use "empty" variant) ---------------------
+    // Keyed by tableId. Anything not listed falls back to a generic noun-based template.
+    static { this.COPY = {
+        services: { noun: 'services', glyph: 'service', cta: 'Create service' },
+        identities: { noun: 'identities', glyph: 'identity', cta: 'Create identity' },
+        'edge-routers': { noun: 'edge routers', glyph: 'router', cta: 'Create edge router' },
+        'service-policies': { noun: 'service policies', glyph: 'policy', cta: 'Create service policy' },
+        'edge-router-policies': { noun: 'edge router policies', glyph: 'policy', cta: 'Create edge router policy' },
+        'service-edge-router-policies': { noun: 'service edge router policies', glyph: 'policy', cta: 'Create policy' },
+        'posture-checks': { noun: 'posture checks', glyph: 'policy', cta: 'Create posture check' },
+        configurations: { noun: 'configs', glyph: 'service', cta: 'Create config' },
+        'config-types': { noun: 'config types', glyph: 'service', cta: 'Create config type' },
+        'auth-policies': { noun: 'auth policies', glyph: 'policy', cta: 'Create auth policy' },
+        'certificate-authorities': { noun: 'certificate authorities', glyph: 'policy', cta: 'Create authority' },
+        'ext-jwt-signers': { noun: 'external JWT signers', glyph: 'policy', cta: 'Create signer' },
+        terminators: { noun: 'terminators', glyph: 'router', cta: 'Create terminator' },
+        'transit-routers': { noun: 'transit routers', glyph: 'router', cta: 'Create transit router' },
+    }; }
+    // ---- resolved content --------------------------------------------------------
+    get copy() {
+        const hit = ListEmptyComponent.COPY[this.entityKey];
+        if (hit) {
+            return hit;
+        }
+        const noun = (this.entityLabel || 'items').toLowerCase();
+        return {
+            noun,
+            glyph: 'service',
+            cta: this.createLabel || 'Create',
+        };
+    }
+    get glyph() {
+        if (this.icon) {
+            return this.icon;
+        }
+        switch (this.variant) {
+            case 'no-results':
+                return 'search';
+            case 'access-denied':
+                return 'lock';
+            case 'error':
+                return 'alert';
+            default:
+                // one generic icon for the no-data state on every page
+                return 'generic';
+        }
+    }
+    /** Tone drives the glyph colour away from the create-accent for non-create variants. */
+    get tone() {
+        if (this.variant === 'access-denied') {
+            return 'warn';
+        }
+        if (this.variant === 'error') {
+            return 'danger';
+        }
+        return '';
+    }
+    get noun() {
+        return this.copy.noun;
+    }
+    get resolvedTitle() {
+        if (this.title) {
+            return this.title;
+        }
+        switch (this.variant) {
+            case 'no-results':
+                return `No matching ${this.noun}`;
+            case 'access-denied':
+                return 'Access restricted';
+            case 'error':
+                return `Couldn’t load ${this.noun}`;
+            default:
+                // first-use empty: name what the list belongs to when we know it
+                return this.scope
+                    ? `This ${this.scope} has no ${this.noun}`
+                    : `There are no ${this.noun}`;
+        }
+    }
+    get resolvedMessage() {
+        if (this.message) {
+            return this.message;
+        }
+        switch (this.variant) {
+            case 'no-results':
+                return `No ${this.noun} match your current filters. Try different terms or clear them to see everything.`;
+            case 'access-denied':
+                return `You don’t have permission to view ${this.noun}. Ask your network administrator to grant access.`;
+            case 'error':
+                return 'Something interrupted the request. Check the connection to the controller, then try again.';
+            default:
+                // first-use empty state keeps just the headline, no explanatory subtext
+                return '';
+        }
+    }
+    /** The primary create action shows only on the first-use empty state when allowed. */
+    get showCreate() {
+        return this.variant === 'empty' && this.hasAdd && !this.readonly;
+    }
+    get primaryLabel() {
+        return this.createLabel || this.copy.cta;
+    }
+    onCreate() {
+        this.create.emit();
+    }
+    onClear() {
+        this.clearFilters.emit();
+    }
+    onRetry() {
+        this.retry.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.34", type: ListEmptyComponent, isStandalone: true, selector: "lib-list-empty", inputs: { variant: "variant", entityKey: "entityKey", entityLabel: "entityLabel", scope: "scope", title: "title", message: "message", icon: "icon", createLabel: "createLabel", hasAdd: "hasAdd", readonly: "readonly", framed: "framed" }, outputs: { create: "create", clearFilters: "clearFilters", retry: "retry" }, ngImport: i0, template: "<!-- host-projected custom empty state; when nothing is projected the default below renders -->\n<div class=\"le-projected\" #projected><ng-content select=\"[empty-state]\"></ng-content></div>\n\n@if (projected.children.length === 0) {\n  <div class=\"le\" [class.le-card]=\"framed\" [attr.data-tone]=\"tone\" role=\"status\">\n    <div class=\"le-figure\" aria-hidden=\"true\">\n      <div class=\"le-glyph\">\n        @switch (glyph) {\n          @case ('generic') {\n            <!-- overlay (stacked layers): what Ziti is, a layer over the network -->\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M12 3 21 7.8 12 12.6 3 7.8z\"/>\n              <path d=\"M3.4 12 12 16.6 20.6 12\" opacity=\"0.72\"/>\n              <path d=\"M3.4 16 12 20.6 20.6 16\" opacity=\"0.4\"/>\n            </svg>\n          }\n          @case ('service') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"5\" r=\"2.2\"/><circle cx=\"5\" cy=\"18\" r=\"2.2\"/><circle cx=\"19\" cy=\"18\" r=\"2.2\"/>\n              <path d=\"M12 7.2v4.3M12 11.5l-5.2 4.6M12 11.5l5.2 4.6\"/>\n            </svg>\n          }\n          @case ('identity') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"9\" r=\"3.2\"/><path d=\"M5.5 19.2a6.8 6.8 0 0 1 13 0\"/><circle cx=\"12\" cy=\"12\" r=\"9.2\" opacity=\"0.35\"/>\n            </svg>\n          }\n          @case ('router') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect x=\"3.5\" y=\"13\" width=\"17\" height=\"6\" rx=\"1.6\"/><path d=\"M7 16h.01M11 16h.01\"/><path d=\"M12 13V9M12 9l-3-3M12 9l3-3\"/>\n            </svg>\n          }\n          @case ('policy') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/><path d=\"M9.2 12.2l2 2 3.6-3.8\"/>\n            </svg>\n          }\n          @case ('search') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"11\" cy=\"11\" r=\"6\"/><line x1=\"15.5\" y1=\"15.5\" x2=\"20\" y2=\"20\"/>\n            </svg>\n          }\n          @case ('lock') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect x=\"5\" y=\"10.5\" width=\"14\" height=\"9\" rx=\"2\"/><path d=\"M8 10.5V7.5a4 4 0 0 1 8 0v3\"/><circle cx=\"12\" cy=\"15\" r=\"1.1\"/>\n            </svg>\n          }\n          @case ('alert') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M12 4.5l8.5 15H3.5z\"/><line x1=\"12\" y1=\"10\" x2=\"12\" y2=\"14\"/><circle cx=\"12\" cy=\"16.6\" r=\"0.6\" fill=\"currentColor\"/>\n            </svg>\n          }\n        }\n      </div>\n    </div>\n\n    <h2 class=\"le-title\">{{ resolvedTitle }}</h2>\n    @if (resolvedMessage) {\n      <p class=\"le-message\">{{ resolvedMessage }}</p>\n    }\n\n    @if (showCreate || variant === 'no-results' || variant === 'error') {\n      <div class=\"le-actions\">\n        @if (showCreate) {\n          <button type=\"button\" class=\"le-btn le-btn-primary\" (click)=\"onCreate()\" id=\"EmptyCreateButton\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" aria-hidden=\"true\">\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/>\n            </svg>\n            <span>{{ primaryLabel }}</span>\n          </button>\n        }\n        @if (variant === 'no-results') {\n          <button type=\"button\" class=\"le-btn le-btn-ghost\" (click)=\"onClear()\" id=\"EmptyClearFiltersButton\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" aria-hidden=\"true\">\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n            </svg>\n            <span>Clear filters</span>\n          </button>\n        }\n        @if (variant === 'error') {\n          <button type=\"button\" class=\"le-btn le-btn-ghost\" (click)=\"onRetry()\" id=\"EmptyRetryButton\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M20 11a8 8 0 1 0-1.3 5.5\"/><path d=\"M20 5v4h-4\"/>\n            </svg>\n            <span>Retry</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{--le-accent: var(--primary, var(--lt-link, #0027ab));--le-muted: color-mix(in srgb, var(--lt-cell-text) 62%, transparent);--le-dot: color-mix(in srgb, var(--lt-border) 75%, transparent);--le-soft: color-mix(in srgb, var(--le-accent) 12%, transparent);--le-warn: #b7791f;--le-danger: #c0392b;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;box-sizing:border-box;padding:1.5rem;font-family:var(--lt-font)}.le-projected{display:contents}.le{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.85rem;width:100%;max-width:30rem;box-sizing:border-box;padding:2.75rem 1.75rem}.le-card{border:1px solid var(--lt-border);border-radius:1rem;background:var(--lt-bg);box-shadow:0 1px 2px #141e3c0a,0 12px 32px -12px #141e3c1f}.le-figure{position:relative;width:6.75rem;height:6.75rem;display:grid;place-items:center}.le-figure:before{content:\"\";position:absolute;inset:0;background-image:radial-gradient(circle at center,var(--le-dot) 1.3px,transparent 1.4px);background-size:.8125rem .8125rem;-webkit-mask-image:radial-gradient(circle at center,#000 38%,transparent 72%);mask-image:radial-gradient(circle at center,#000 38%,transparent 72%)}.le-figure:after{content:\"\";position:absolute;width:3.75rem;height:3.75rem;border-radius:50%;background:radial-gradient(circle,var(--le-soft) 0%,transparent 70%)}.le-glyph{position:relative;width:3.625rem;height:3.625rem;border-radius:.9375rem;display:grid;place-items:center;color:var(--le-accent);background:var(--lt-row-bg, var(--lt-bg));border:1px solid var(--lt-border);box-shadow:0 2px 10px #141e3c0f}.le-glyph svg{width:1.625rem;height:1.625rem}.le[data-tone=warn] .le-glyph{color:var(--le-warn)}.le[data-tone=danger] .le-glyph{color:var(--le-danger)}.le-title{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--lt-cell-text)}.le-message{margin:0;font-size:.875rem;line-height:1.5;color:var(--le-muted);max-width:42ch}.le-actions{display:flex;gap:.6rem;margin-top:.4rem;flex-wrap:wrap;justify-content:center}.le-btn{font:inherit;font-size:.8125rem;font-weight:500;border-radius:.5rem;padding:.5rem .95rem;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;border:1px solid transparent}.le-btn svg{width:.9375rem;height:.9375rem}.le-btn-primary{background:var(--le-accent);color:#fff}.le-btn-primary:hover{filter:brightness(1.07)}.le-btn-ghost{background:transparent;color:var(--lt-cell-text);border-color:var(--lt-border)}.le-btn-ghost:hover{border-color:color-mix(in srgb,var(--lt-border) 55%,var(--lt-icon, var(--lt-cell-text)))}.le-btn:focus-visible{outline:2px solid var(--le-accent);outline-offset:2px}@media(prefers-reduced-motion:no-preference){.le-glyph,.le-title,.le-message{animation:le-rise .28s ease both}.le-title{animation-delay:.03s}.le-message{animation-delay:.06s}@keyframes le-rise{0%{opacity:0;transform:translateY(.3rem)}to{opacity:1;transform:none}}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListEmptyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-empty', standalone: true, imports: [CommonModule], template: "<!-- host-projected custom empty state; when nothing is projected the default below renders -->\n<div class=\"le-projected\" #projected><ng-content select=\"[empty-state]\"></ng-content></div>\n\n@if (projected.children.length === 0) {\n  <div class=\"le\" [class.le-card]=\"framed\" [attr.data-tone]=\"tone\" role=\"status\">\n    <div class=\"le-figure\" aria-hidden=\"true\">\n      <div class=\"le-glyph\">\n        @switch (glyph) {\n          @case ('generic') {\n            <!-- overlay (stacked layers): what Ziti is, a layer over the network -->\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M12 3 21 7.8 12 12.6 3 7.8z\"/>\n              <path d=\"M3.4 12 12 16.6 20.6 12\" opacity=\"0.72\"/>\n              <path d=\"M3.4 16 12 20.6 20.6 16\" opacity=\"0.4\"/>\n            </svg>\n          }\n          @case ('service') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"5\" r=\"2.2\"/><circle cx=\"5\" cy=\"18\" r=\"2.2\"/><circle cx=\"19\" cy=\"18\" r=\"2.2\"/>\n              <path d=\"M12 7.2v4.3M12 11.5l-5.2 4.6M12 11.5l5.2 4.6\"/>\n            </svg>\n          }\n          @case ('identity') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"9\" r=\"3.2\"/><path d=\"M5.5 19.2a6.8 6.8 0 0 1 13 0\"/><circle cx=\"12\" cy=\"12\" r=\"9.2\" opacity=\"0.35\"/>\n            </svg>\n          }\n          @case ('router') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect x=\"3.5\" y=\"13\" width=\"17\" height=\"6\" rx=\"1.6\"/><path d=\"M7 16h.01M11 16h.01\"/><path d=\"M12 13V9M12 9l-3-3M12 9l3-3\"/>\n            </svg>\n          }\n          @case ('policy') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z\"/><path d=\"M9.2 12.2l2 2 3.6-3.8\"/>\n            </svg>\n          }\n          @case ('search') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"11\" cy=\"11\" r=\"6\"/><line x1=\"15.5\" y1=\"15.5\" x2=\"20\" y2=\"20\"/>\n            </svg>\n          }\n          @case ('lock') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <rect x=\"5\" y=\"10.5\" width=\"14\" height=\"9\" rx=\"2\"/><path d=\"M8 10.5V7.5a4 4 0 0 1 8 0v3\"/><circle cx=\"12\" cy=\"15\" r=\"1.1\"/>\n            </svg>\n          }\n          @case ('alert') {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M12 4.5l8.5 15H3.5z\"/><line x1=\"12\" y1=\"10\" x2=\"12\" y2=\"14\"/><circle cx=\"12\" cy=\"16.6\" r=\"0.6\" fill=\"currentColor\"/>\n            </svg>\n          }\n        }\n      </div>\n    </div>\n\n    <h2 class=\"le-title\">{{ resolvedTitle }}</h2>\n    @if (resolvedMessage) {\n      <p class=\"le-message\">{{ resolvedMessage }}</p>\n    }\n\n    @if (showCreate || variant === 'no-results' || variant === 'error') {\n      <div class=\"le-actions\">\n        @if (showCreate) {\n          <button type=\"button\" class=\"le-btn le-btn-primary\" (click)=\"onCreate()\" id=\"EmptyCreateButton\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" aria-hidden=\"true\">\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/>\n            </svg>\n            <span>{{ primaryLabel }}</span>\n          </button>\n        }\n        @if (variant === 'no-results') {\n          <button type=\"button\" class=\"le-btn le-btn-ghost\" (click)=\"onClear()\" id=\"EmptyClearFiltersButton\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" aria-hidden=\"true\">\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n            </svg>\n            <span>Clear filters</span>\n          </button>\n        }\n        @if (variant === 'error') {\n          <button type=\"button\" class=\"le-btn le-btn-ghost\" (click)=\"onRetry()\" id=\"EmptyRetryButton\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M20 11a8 8 0 1 0-1.3 5.5\"/><path d=\"M20 5v4h-4\"/>\n            </svg>\n            <span>Retry</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{--le-accent: var(--primary, var(--lt-link, #0027ab));--le-muted: color-mix(in srgb, var(--lt-cell-text) 62%, transparent);--le-dot: color-mix(in srgb, var(--lt-border) 75%, transparent);--le-soft: color-mix(in srgb, var(--le-accent) 12%, transparent);--le-warn: #b7791f;--le-danger: #c0392b;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100%;box-sizing:border-box;padding:1.5rem;font-family:var(--lt-font)}.le-projected{display:contents}.le{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.85rem;width:100%;max-width:30rem;box-sizing:border-box;padding:2.75rem 1.75rem}.le-card{border:1px solid var(--lt-border);border-radius:1rem;background:var(--lt-bg);box-shadow:0 1px 2px #141e3c0a,0 12px 32px -12px #141e3c1f}.le-figure{position:relative;width:6.75rem;height:6.75rem;display:grid;place-items:center}.le-figure:before{content:\"\";position:absolute;inset:0;background-image:radial-gradient(circle at center,var(--le-dot) 1.3px,transparent 1.4px);background-size:.8125rem .8125rem;-webkit-mask-image:radial-gradient(circle at center,#000 38%,transparent 72%);mask-image:radial-gradient(circle at center,#000 38%,transparent 72%)}.le-figure:after{content:\"\";position:absolute;width:3.75rem;height:3.75rem;border-radius:50%;background:radial-gradient(circle,var(--le-soft) 0%,transparent 70%)}.le-glyph{position:relative;width:3.625rem;height:3.625rem;border-radius:.9375rem;display:grid;place-items:center;color:var(--le-accent);background:var(--lt-row-bg, var(--lt-bg));border:1px solid var(--lt-border);box-shadow:0 2px 10px #141e3c0f}.le-glyph svg{width:1.625rem;height:1.625rem}.le[data-tone=warn] .le-glyph{color:var(--le-warn)}.le[data-tone=danger] .le-glyph{color:var(--le-danger)}.le-title{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--lt-cell-text)}.le-message{margin:0;font-size:.875rem;line-height:1.5;color:var(--le-muted);max-width:42ch}.le-actions{display:flex;gap:.6rem;margin-top:.4rem;flex-wrap:wrap;justify-content:center}.le-btn{font:inherit;font-size:.8125rem;font-weight:500;border-radius:.5rem;padding:.5rem .95rem;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;border:1px solid transparent}.le-btn svg{width:.9375rem;height:.9375rem}.le-btn-primary{background:var(--le-accent);color:#fff}.le-btn-primary:hover{filter:brightness(1.07)}.le-btn-ghost{background:transparent;color:var(--lt-cell-text);border-color:var(--lt-border)}.le-btn-ghost:hover{border-color:color-mix(in srgb,var(--lt-border) 55%,var(--lt-icon, var(--lt-cell-text)))}.le-btn:focus-visible{outline:2px solid var(--le-accent);outline-offset:2px}@media(prefers-reduced-motion:no-preference){.le-glyph,.le-title,.le-message{animation:le-rise .28s ease both}.le-title{animation-delay:.03s}.le-message{animation-delay:.06s}@keyframes le-rise{0%{opacity:0;transform:translateY(.3rem)}to{opacity:1;transform:none}}}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], entityKey: [{
+                type: Input
+            }], entityLabel: [{
+                type: Input
+            }], scope: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], createLabel: [{
+                type: Input
+            }], hasAdd: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], framed: [{
+                type: Input
+            }], create: [{
+                type: Output
+            }], clearFilters: [{
+                type: Output
+            }], retry: [{
+                type: Output
+            }] } });
+
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+/**
+ * Custom, token-skinnable list table. Columns are declared with {@link ListColumn};
+ * sort, filter, and pagination flow through {@link DataTableFilterService}.
+ */
+class ListTableComponent {
+    set tableId(id) {
+        this._tableId = id;
+        this.svc.tableId = id;
+    }
+    get tableId() {
+        return this._tableId;
+    }
+    set columns(value) {
+        this._rawColumns = value || [];
+        if (this._initialized) {
+            this.buildColumns();
+        }
+    }
+    set rowData(value) {
+        this._rowData = value || [];
+        // once real rows have arrived, later loads are "refresh" (keep rows + top bar)
+        // rather than "initial" (skeleton). Never flips back on a later empty result.
+        if (this._rowData.length > 0) {
+            this.hasLoadedOnce = true;
+        }
+        this.updateSkeleton();
+        this.rebuildFlatRows();
+    }
+    get rowData() {
+        return this._rowData;
+    }
+    set isLoading(value) {
+        this._isLoading = value;
+        this.updateRefreshBar();
+        this.updateSkeleton();
+    }
+    get isLoading() {
+        return this._isLoading;
+    }
+    /** The logical "first load with nothing on screen yet" state. The skeleton renders
+     *  off showSkeleton (below), which debounces this so a very fast first load goes
+     *  straight to rows without a skeleton flash. */
+    get isInitialLoad() {
+        return this._isLoading && !this.hasLoadedOnce;
+    }
+    updateSkeleton() {
+        if (this.isInitialLoad) {
+            // arm the show-delay once; a fast first load that finishes before it fires
+            // never shows the skeleton - the rows just appear
+            if (!this.showSkeleton && !this.skeletonShowTimer) {
+                this.skeletonShowTimer = setTimeout(() => {
+                    this.skeletonShowTimer = undefined;
+                    this.showSkeleton = true;
+                }, this.REFRESH_SHOW_DELAY);
+            }
+        }
+        else {
+            // first load ended (rows arrived) or this is not a first load: cancel a
+            // pending skeleton and hide it now so real rows show at once
+            clearTimeout(this.skeletonShowTimer);
+            this.skeletonShowTimer = undefined;
+            this.showSkeleton = false;
+        }
+    }
+    updateRefreshBar() {
+        // the skeleton covers the first load; the bar is only for reloads with rows present
+        const refreshing = this._isLoading && this.hasLoadedOnce;
+        if (refreshing) {
+            // a reload is running: cancel any pending hide and arm the show timer once
+            clearTimeout(this.refreshHideTimer);
+            this.refreshHideTimer = undefined;
+            if (!this.showRefreshBar && !this.refreshShowTimer) {
+                this.refreshShowTimer = setTimeout(() => {
+                    this.refreshShowTimer = undefined;
+                    this.showRefreshBar = true;
+                    this.refreshShownAt = Date.now();
+                }, this.REFRESH_SHOW_DELAY);
+            }
+        }
+        else {
+            // reload ended (or it was the first load): drop a not-yet-shown bar at once,
+            // but let a visible one finish its minimum time on screen so it doesn't blink
+            if (this.refreshShowTimer) {
+                clearTimeout(this.refreshShowTimer);
+                this.refreshShowTimer = undefined;
+            }
+            if (this.showRefreshBar && !this.refreshHideTimer) {
+                const remaining = Math.max(0, this.REFRESH_MIN_VISIBLE - (Date.now() - this.refreshShownAt));
+                this.refreshHideTimer = setTimeout(() => {
+                    this.refreshHideTimer = undefined;
+                    this.showRefreshBar = false;
+                }, remaining);
+            }
+        }
+    }
+    /** Row indexes for the skeleton loop (at least one). */
+    get skeletonRows() {
+        const n = Math.max(1, this.skeletonRowCount || 0);
+        return Array.from({ length: n }, (_v, i) => i);
+    }
+    /** Skeleton bar width (as a %) for a given column/row, varied but stable. */
+    skeletonBarWidth(colIndex, rowIndex) {
+        const base = this.SK_WIDTHS[colIndex % this.SK_WIDTHS.length];
+        const jitter = ((rowIndex * 7 + colIndex * 3) % 5) * 4 - 8; // -8..+8
+        return Math.max(30, Math.min(92, base + jitter));
+    }
+    // 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 || {};
+        this.toolbarControls = this.normalizeToolbar(this._options.toolbar);
+        // 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;
+    }
+    normalizeToolbar(toolbar) {
+        const resolve = (c) => ({
+            show: c?.show !== false,
+            disabled: !!c?.disabled,
+        });
+        return {
+            search: resolve(toolbar?.search),
+            filters: resolve(toolbar?.filters),
+            refresh: resolve(toolbar?.refresh),
+            autoRefresh: resolve(toolbar?.autoRefresh),
+            columns: resolve(toolbar?.columns),
+            pageSize: resolve(toolbar?.pageSize),
+            pagination: resolve(toolbar?.pagination),
+        };
+    }
+    /** 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;
+        this.el = el;
+        this.ngZone = ngZone;
+        this.sanitizer = sanitizer;
+        this._tableId = '';
+        this._rowData = [];
+        this._isLoading = false;
+        /** Placeholder rows drawn during the first load, before any data has arrived. */
+        this.skeletonRowCount = 8;
+        /** True once the table has shown real rows at least once, so a later load shows the
+         *  refresh bar over the existing rows instead of the full-page skeleton again. */
+        this.hasLoadedOnce = false;
+        /** Whether the skeleton placeholder is visible. Debounced from isInitialLoad with the
+         *  same show-delay as the refresh bar: a first load shorter than REFRESH_SHOW_DELAY
+         *  never shows it. Unlike the bar there is no minimum-visible hold, so real rows
+         *  replace the skeleton the moment they arrive. */
+        this.showSkeleton = false;
+        /** Whether the thin top refresh bar is visible. Debounced from isLoading via
+         *  updateRefreshBar rather than read straight off it. */
+        this.showRefreshBar = false;
+        // The refresh bar is debounced so quick reloads (including fast auto-refresh polls)
+        // don't flash it: it only appears once a reload has run past REFRESH_SHOW_DELAY, and
+        // once shown it stays at least REFRESH_MIN_VISIBLE so it never blinks in and out.
+        this.REFRESH_SHOW_DELAY = 150;
+        this.REFRESH_MIN_VISIBLE = 450;
+        this.refreshShownAt = 0;
+        // A small spread of bar widths so skeleton cells don't read as an identical grid.
+        // Deterministic (no randomness) so the widths don't flicker across change detection.
+        this.SK_WIDTHS = [70, 52, 84, 46, 64, 58, 76, 48];
+        this._options = { noSelect: false, noMenu: false };
+        /** Resolved show/disabled state for each toolbar control, read by the template.
+         *  Every control shows and is enabled unless the host's `options.toolbar` says otherwise. */
+        this.toolbarControls = this.normalizeToolbar(undefined);
+        // 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 = '-';
+        this.endCount = '-';
+        this.totalCount = '-';
+        this.filterApplied = false;
+        this.menuItems = [];
+        this.headerActions = [];
+        /** @deprecated kept for the old lib-no-items bindings; the new empty state uses line glyphs, not images. */
+        this.noItemsImage = 'nodata';
+        this.showNoItemsAdd = true;
+        this.noItemsReadonly = false;
+        /** Primary create label shown on the first-use empty state (else the per-entity default). */
+        this.createLabel = '';
+        /** What these rows belong to, used in the empty headline ("This network has no services").
+         *  Defaults to 'network' since the Ziti pages are network-scoped; set '' for a list that is not. */
+        this.emptyScope = 'network';
+        this.accessDenied = false;
+        this.entityTypeName = '';
+        this.filterName = 'name';
+        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();
+        /** The row the pointer is over, or null when it leaves. Emitted once per row (at the
+         *  row level, not per cell) so consumers can react to the whole hovered row, for
+         *  example to highlight that row's path in a connected diagram. */
+        this.rowHover = new EventEmitter();
+        /** Full column list (includes hidden), after persisted state. */
+        this.allColumns = [];
+        /** Currently rendered columns (visible + ordered). */
+        this.visibleColumns = [];
+        /** Hidden columns, shaped for the shared hidden-columns bar (`headerName`). */
+        this.hiddenColumns = [];
+        this.entityTypeLabel = '';
+        // ---- action menus ----
+        this.openMenu = false;
+        this.openHeaderMenu = false;
+        this.menuLeft = 0;
+        this.menuTop = 0;
+        this.selectedItem = { actionList: [] };
+        // ---- selection ----
+        this.allToggled = false;
+        /** 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 ----
+        this.searchString = '';
+        this.activeFilters = [];
+        this.filtering = false;
+        this.inputChangedDebounced = _.debounce(() => this.applySearch(), 400);
+        // ---- responsive filter overflow: controls that don't fit collapse into "More" ----
+        this.visibleFilterColumns = [];
+        this.overflowFilterColumns = [];
+        this.showFilterOverflow = false;
+        this.filterWidths = new Map();
+        this.filtersDirty = true;
+        this.overflowRaf = 0;
+        this.FILTER_GAP = 8; // px, matches the .lt-filter-zone/.lt-filters gap
+        this.MORE_BTN_W = 92; // px reserved for the "More" trigger when overflowing
+        this.onPointerMove = (e) => this.handleResizeMove(e);
+        this.onPointerUp = () => this.handleResizeEnd();
+        this._rawColumns = [];
+        this._initialColumns = [];
+        this._initialized = false;
+        this.subscription = new Subscription();
+        // 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;
+        // ---------------------------------------------------------------- row hover
+        /** The row currently under the pointer, so we only emit when it actually changes. */
+        this.hoveredRow = null;
+        this.toggleItem = (item) => {
+            item.selected = !item.selected;
+            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;
+            this.openMenu = true;
+            _.delay(() => {
+                const height = this.contextMenu?.nativeElement?.offsetHeight || 120;
+                const windowOffset = window.innerHeight - event.clientY;
+                const menuOffset = windowOffset <= height ? height - windowOffset : 0;
+                this.menuLeft = event.clientX - 100;
+                this.menuTop = event.clientY + 5 - menuOffset;
+            }, 10);
+        };
+        this.closeActionMenu = () => {
+            this.selectedItem = { actionList: [] };
+            this.openMenu = false;
+            this.openHeaderMenu = false;
+        };
+        this.closeHeaderActionMenu = () => {
+            this.openHeaderMenu = false;
+        };
+        /** Restore-default (rotate) icon for the built-in header action. */
+        this.RESET_TABLE_ICON = '<svg viewBox="0 0 16 16" width="15" height="15"><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" d="M3.2 8a4.8 4.8 0 1 0 1.3-3.3"/><path fill="currentColor" d="M2.8 2.8l-.3 2.9 2.8-.4z"/></svg>';
+        // ---- rows-per-page + numbered pagination (the skin footer) ----
+        this.pageSizeOptions = [25, 50, 100];
+        /** Default rows-per-page when nothing is remembered (the persisted choice wins). */
+        this.initialPageSize = 50;
+        /** Auto-refresh interval in seconds a page starts the table at (0 = off). This is the
+         *  hook for a page to default the control on; left at 0, the table behaves as before
+         *  (off until the user picks an interval). The user's in-session choice is not persisted. */
+        this.autoRefreshSeconds = 0;
+        // ---- row action icons ----
+        // A menu item's host-supplied `icon` (SVG markup) is rendered before its label in
+        // the row's kebab menu. Sanitized once per unique SVG and cached.
+        this.iconCache = new Map();
+    }
+    ngOnInit() {
+        this._initialized = true;
+        // 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)
+            this.activeFilters = filters.filter((f) => f.hidden !== true && f.columnId !== this.filterColumn);
+            const match = filters.find((f) => f.columnId === this.filterColumn);
+            this.searchString = match ? match.value : '';
+            // an activated filter changes which controls are pinned and how wide they render
+            this.filtersDirty = true;
+            this.scheduleFilterOverflow();
+        }));
+        this.subscription.add(this.tableFilterService.filtering.subscribe((f) => (this.filtering = f)));
+        // close the column chooser whenever a filter dropdown (or anything else) opens
+        this.subscription.add(this.svc.menuOpened$.subscribe((owner) => {
+            if (owner !== this) {
+                this.showColumnChooser = false;
+            }
+        }));
+        this.tableReady.emit({ component: this });
+    }
+    ngAfterViewInit() {
+        this.ensureFilterResizeObserver();
+    }
+    ngAfterViewChecked() {
+        // the whole table sits behind @if(showTable), so the toolbar may not exist
+        // until row data arrives; (re)attach the observer once/whenever it appears
+        this.ensureFilterResizeObserver();
+    }
+    ngOnDestroy() {
+        this._destroyed = true;
+        this.subscription.unsubscribe();
+        this.detachResizeListeners();
+        this.filterRO?.disconnect();
+        if (this.overflowRaf) {
+            cancelAnimationFrame(this.overflowRaf);
+        }
+        clearTimeout(this.refreshShowTimer);
+        clearTimeout(this.refreshHideTimer);
+        clearTimeout(this.skeletonShowTimer);
+    }
+    get showTable() {
+        // always keep the table chrome (toolbar, headers, footer); the body shows a
+        // skeleton while loading and an in-table empty state when there are no rows
+        return true;
+    }
+    /** Columns surfaced as inline filter controls in the toolbar. Text filters are
+     *  excluded because the free-text search box already covers the primary text field. */
+    get filterableColumns() {
+        return this.allColumns.filter((c) => c.filterType && c.filterType !== 'TEXTINPUT');
+    }
+    // -------------------------------------------------- responsive filter overflow
+    /** A filter column is "active" when it has an applied filter. */
+    isFilterActive(col) {
+        return this.activeFilters.some((f) => f.columnId === col.key);
+    }
+    /** Applied filters that are currently hidden in the overflow dropdown. */
+    get hiddenActiveCount() {
+        return this.overflowFilterColumns.filter((c) => this.isFilterActive(c)).length;
+    }
+    toggleFilterOverflow(event) {
+        event.stopPropagation();
+        this.showFilterOverflow = !this.showFilterOverflow;
+        if (this.showFilterOverflow) {
+            this.svc.notifyMenuOpened(this);
+        }
+    }
+    closeFilterOverflow(event) {
+        // keep open when the click lands in a filter's own Material overlay (e.g. the
+        // date-range calendar), which renders outside this popover's DOM subtree
+        const target = event?.target;
+        if (target?.closest?.('.cdk-overlay-container')) {
+            return;
+        }
+        this.showFilterOverflow = false;
+    }
+    ensureFilterResizeObserver() {
+        // observe the toolbar row (not the content-sized zone) so a window resize,
+        // which changes the row's available width, actually fires the observer
+        const target = this.filterZone?.nativeElement?.parentElement ?? undefined;
+        if (!target || typeof ResizeObserver === 'undefined' || target === this.observedToolbar) {
+            return;
+        }
+        // ResizeObserver fires outside Angular's zone; re-enter so the recomputed
+        // visible/overflow split actually triggers change detection.
+        if (!this.filterRO) {
+            this.filterRO = new ResizeObserver(() => this.ngZone.run(() => this.scheduleFilterOverflow()));
+        }
+        else {
+            this.filterRO.disconnect();
+        }
+        this.filterRO.observe(target);
+        this.observedToolbar = target;
+        // compute the split for the newly-observed row (deferred, so it never mutates
+        // bound state inside the change-detection pass that called us)
+        this.scheduleFilterOverflow();
+    }
+    scheduleFilterOverflow() {
+        if (this.overflowRaf) {
+            cancelAnimationFrame(this.overflowRaf);
+        }
+        this.overflowRaf = requestAnimationFrame(() => {
+            this.overflowRaf = 0;
+            this.ensureFilterResizeObserver();
+            this.recomputeFilterOverflow();
+        });
+    }
+    recomputeFilterOverflow() {
+        const cols = this.filterableColumns;
+        if (!cols.length) {
+            this.visibleFilterColumns = [];
+            this.overflowFilterColumns = [];
+            return;
+        }
+        const needMeasure = this.filtersDirty || cols.some((c) => !this.filterWidths.has(c.key));
+        if (!needMeasure) {
+            this.applyFilterSplit();
+            return;
+        }
+        // render every control inline for one frame so each can be measured, then collapse
+        this.visibleFilterColumns = cols;
+        this.overflowFilterColumns = [];
+        requestAnimationFrame(() => {
+            const row = this.filtersRow?.nativeElement;
+            if (row) {
+                row.querySelectorAll('[data-filter-key]').forEach((el) => {
+                    const key = el.getAttribute('data-filter-key');
+                    if (key) {
+                        this.filterWidths.set(key, Math.ceil(el.getBoundingClientRect().width));
+                    }
+                });
+            }
+            this.filtersDirty = false;
+            this.applyFilterSplit();
+        });
+    }
+    /** Split filter controls into inline vs. overflow, pinning active filters and
+     *  dropping inactive (then, only if forced, active) from the right until they fit. */
+    applyFilterSplit() {
+        const zone = this.filterZone?.nativeElement;
+        const cols = this.filterableColumns;
+        if (!zone || !cols.length) {
+            return;
+        }
+        // budget = the toolbar row's width minus its fixed siblings (search / divider /
+        // Columns) and the gaps between them, i.e. the space filters may take before
+        // they'd push the Columns control off the row
+        const toolbarLeft = zone.parentElement;
+        const siblingWidth = (sel) => {
+            const node = toolbarLeft?.querySelector(sel);
+            return node ? Math.ceil(node.getBoundingClientRect().width) : 0;
+        };
+        const available = (toolbarLeft?.clientWidth ?? zone.clientWidth) -
+            siblingWidth('.lt-search') -
+            siblingWidth('.lt-divider') -
+            siblingWidth('.lt-columns') -
+            3 * this.FILTER_GAP;
+        const widthOf = (c) => this.filterWidths.get(c.key) ?? 0;
+        const totalOf = (list, withMore) => {
+            let w = 0;
+            list.forEach((c, i) => (w += widthOf(c) + (i > 0 ? this.FILTER_GAP : 0)));
+            if (withMore) {
+                w += (list.length ? this.FILTER_GAP : 0) + this.MORE_BTN_W;
+            }
+            return w;
+        };
+        if (totalOf(cols, false) <= available) {
+            this.visibleFilterColumns = cols;
+            this.overflowFilterColumns = [];
+            return;
+        }
+        // removal priority: inactive right-to-left first, then active right-to-left
+        const inactive = cols.filter((c) => !this.isFilterActive(c)).reverse();
+        const active = cols.filter((c) => this.isFilterActive(c)).reverse();
+        const removalOrder = [...inactive, ...active];
+        const overflow = new Set();
+        for (const c of removalOrder) {
+            overflow.add(c.key);
+            const visible = cols.filter((x) => !overflow.has(x.key));
+            if (totalOf(visible, true) <= available) {
+                break;
+            }
+        }
+        this.visibleFilterColumns = cols.filter((c) => !overflow.has(c.key));
+        this.overflowFilterColumns = cols.filter((c) => overflow.has(c.key));
+        if (!this.overflowFilterColumns.length) {
+            this.showFilterOverflow = false;
+        }
+    }
+    // ---------------------------------------------------------------- columns
+    buildColumns() {
+        this._initialColumns = this._rawColumns.map((c) => ({ ...c }));
+        this.allColumns = this.svc.applyPersistedState(this._rawColumns);
+        this.updateVisible();
+        // start with every filter control visible; the overflow pass collapses to fit
+        this.visibleFilterColumns = this.filterableColumns;
+        this.overflowFilterColumns = [];
+        this.filtersDirty = true;
+        this.scheduleFilterOverflow();
+    }
+    updateVisible() {
+        this.visibleColumns = this.allColumns.filter((c) => !c.hidden);
+        this.hiddenColumns = this.allColumns
+            .filter((c) => c.hidden)
+            .map((c) => ({ ...c, headerName: c.label }));
+        this.invalidateColumnCache();
+    }
+    colWidth(col) {
+        return col.width != null ? `${col.width}px` : null;
+    }
+    // ---------------------------------------------------------------- cells
+    rawValue(col, row) {
+        return _.get(row, col.field || col.key);
+    }
+    cellContext(col, row, i) {
+        return {
+            row,
+            value: this.rawValue(col, row),
+            colId: col.key,
+            rowIndex: i,
+            emitAction: (action, item = row) => this.actionRequested.emit({ action, item }),
+        };
+    }
+    legacyShim(col, row, i) {
+        return { data: row, value: this.rawValue(col, row), column: { colId: col.key }, rowIndex: i };
+    }
+    renderMode(col) {
+        if (col.cell) {
+            return 'component';
+        }
+        if (col.cellHtml) {
+            return 'html';
+        }
+        return 'text';
+    }
+    cellInputs(col, row, i) {
+        if (col.cellInputs) {
+            return col.cellInputs(this.cellContext(col, row, i));
+        }
+        return { row, value: this.rawValue(col, row) };
+    }
+    cellHtml(col, row, i) {
+        return col.cellHtml ? col.cellHtml(this.legacyShim(col, row, i)) : '';
+    }
+    cellText(col, row, i) {
+        if (col.valueFormatter) {
+            return col.valueFormatter(this.legacyShim(col, row, i));
+        }
+        return this.rawValue(col, row);
+    }
+    cellClass(col) {
+        return col.cellClass || '';
+    }
+    onCellClick(col, row, i) {
+        col.onCellClick?.(this.cellContext(col, row, i));
+    }
+    tooltipInputs(col, row, i) {
+        return col.tooltipInputs ? col.tooltipInputs(this.cellContext(col, row, i)) : { row };
+    }
+    onCellHover(col, row, i, event) {
+        if (!col.tooltip) {
+            return;
+        }
+        const rect = event.currentTarget.getBoundingClientRect();
+        this.hoverTooltip = {
+            component: col.tooltip,
+            inputs: this.tooltipInputs(col, row, i),
+            left: rect.left,
+            top: rect.bottom + 6,
+        };
+    }
+    onCellLeave() {
+        this.hoverTooltip = null;
+    }
+    onRowHover(row) {
+        if (this.hoveredRow === row) {
+            return;
+        }
+        this.hoveredRow = row;
+        this.rowHover.emit(row);
+    }
+    onRowLeave(row) {
+        if (this.hoveredRow !== row) {
+            return;
+        }
+        this.hoveredRow = null;
+        this.rowHover.emit(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 && this.selectableRows.some((r) => r.selected);
+    }
+    toggleAll() {
+        const newState = !this.allToggled;
+        this.allToggled = 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) {
+        this.allColumns.forEach((c) => {
+            c.sortDir = c.key === event.colId ? event.dir : undefined;
+        });
+    }
+    // ---------------------------------------------------------------- show / reorder
+    showColumn(event) {
+        const target = this.allColumns.find((c) => c.key === event.column?.key);
+        if (!target) {
+            return;
+        }
+        target.hidden = false;
+        this.updateVisible();
+        this.svc.saveState(this.allColumns);
+    }
+    onReorder(event) {
+        if (event.previousIndex === event.currentIndex) {
+            return;
+        }
+        moveItemInArray(this.visibleColumns, event.previousIndex, event.currentIndex);
+        const nextVisible = [...this.visibleColumns];
+        let vi = 0;
+        this.allColumns = this.allColumns.map((c) => (c.hidden ? c : nextVisible[vi++]));
+        this.updateVisible();
+        this.svc.saveState(this.allColumns);
+    }
+    resetTableColumns() {
+        this.svc.reset();
+        this._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();
+    }
+    // ---------------------------------------------------------------- column chooser
+    /** Count of columns the user has hidden beyond the defaults (drives the badge).
+     *  Columns hidden by default don't count, so a fresh/default load shows no badge. */
+    get hiddenColumnCount() {
+        return this.allColumns.filter((c) => c.hidden && !c.excludeFromChooser && !this.isDefaultHidden(c)).length;
+    }
+    /** 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;
+        }
+        const parentAtDefault = this.allColumns.every((c, i) => {
+            const init = this._initialColumns[i];
+            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. */
+    isDefaultHidden(col) {
+        const init = this._initialColumns.find((c) => c.key === col.key);
+        return !!init?.hidden;
+    }
+    toggleColumnChooser(event) {
+        event.stopPropagation();
+        this.showColumnChooser = !this.showColumnChooser;
+        if (this.showColumnChooser) {
+            this.svc.notifyMenuOpened(this);
+        }
+    }
+    closeColumnChooser() {
+        this.showColumnChooser = false;
+    }
+    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 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.afterColumnChange(level, set);
+    }
+    /** 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);
+    }
+    /** 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;
+        }
+        // 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(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) {
+        if (col.resizable === false) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const th = event.target?.closest('th');
+        const startWidth = col.width ?? th?.offsetWidth ?? 150;
+        this.resizing = { col, startX: event.clientX, startWidth, 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);
+    }
+    handleResizeMove(event) {
+        if (!this.resizing) {
+            return;
+        }
+        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() {
+        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();
+    }
+    detachResizeListeners() {
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+    }
+    openHeaderActionMenu(event) {
+        this.menuLeft = event.clientX - 150;
+        this.menuTop = event.clientY + 5;
+        _.delay(() => {
+            this.openHeaderMenu = true;
+        }, 100);
+    }
+    hideMenuItem(menuItem, selectedItem) {
+        if (_.isFunction(menuItem.hidden)) {
+            return menuItem.hidden(selectedItem);
+        }
+        else if (_.isBoolean(menuItem.hidden)) {
+            return menuItem.hidden;
+        }
+        return !selectedItem.actionList?.includes(menuItem.action);
+    }
+    /** Header action menu rows: the reset action followed by host-provided header actions.
+     *  A host action's `icon` (SVG markup) is rendered before its label, like the row menu. */
+    get headerMenuItems() {
+        const items = [
+            { label: 'Restore Default Table', action: '__reset_table__', id: 'ResetTableButton', iconSvg: this.safeIcon(this.RESET_TABLE_ICON) },
+        ];
+        _.forEach(this.headerActions, (ha) => {
+            items.push({
+                label: ha.name || ha.label,
+                action: ha.action,
+                id: 'HeaderAction_' + ha.action,
+                iconSvg: ha.icon ? this.safeIcon(ha.icon) : undefined,
+                data: ha,
+            });
+        });
+        return items;
+    }
+    onHeaderMenuClick(evt) {
+        if (evt.item.action === '__reset_table__') {
+            this.resetTableColumns();
+        }
+        else {
+            this.actionRequested.emit({ action: evt.item.action });
+        }
+        this.closeHeaderActionMenu();
+    }
+    /** Row action menu rows, built from `menuItems` against the currently selected row.
+     *  A menu item's `icon` (SVG markup) is rendered before its label in the menu. */
+    get rowMenuItems() {
+        return _.map(this.menuItems, (mi) => ({
+            label: mi.name || mi.label,
+            action: mi.action,
+            id: 'TableActionButton_' + mi.action,
+            hidden: this.hideMenuItem(mi, this.selectedItem),
+            iconSvg: mi.icon ? this.safeIcon(mi.icon) : undefined,
+            data: mi,
+        }));
+    }
+    onRowMenuClick(evt) {
+        this.actionRequested.emit({ action: evt.item.action, item: this.selectedItem });
+        this.closeActionMenu();
+    }
+    openCreate() {
+        this.actionRequested.emit({ action: 'create' });
+    }
+    /** Clear the search box and every active filter, which drives the host to refetch
+     *  unfiltered (used by the "no results" empty state's Clear filters action). */
+    clearTableFilters() {
+        this.searchString = '';
+        this.tableFilterService.clearAllFilters();
+    }
+    // ---------------------------------------------------------------- toolbar search + pagination
+    onSearchInput() {
+        this.inputChangedDebounced();
+    }
+    applySearch() {
+        this.tableFilterService.currentPage = 1;
+        this.tableFilterService.updateFilter({
+            filterName: this.filterName,
+            columnId: this.filterColumn,
+            value: this.searchString,
+            label: this.searchString,
+        });
+    }
+    nextPage() {
+        if (this.nextDisabled) {
+            return;
+        }
+        this.tableFilterService.changePage((this.tableFilterService.currentPage || 1) + 1);
+    }
+    prevPage() {
+        if (this.prevDisabled) {
+            return;
+        }
+        this.tableFilterService.changePage((this.tableFilterService.currentPage || 1) - 1);
+    }
+    get cursorPager() {
+        return this.options?.pager === 'cursor';
+    }
+    get nextDisabled() {
+        if (this.filtering) {
+            return true;
+        }
+        if (this.cursorPager) {
+            return !this.hasNext;
+        }
+        if (!_.isNumber(this.totalCount) || !_.isNumber(this.endCount)) {
+            return true;
+        }
+        return Number(this.endCount) >= Number(this.totalCount);
+    }
+    get prevDisabled() {
+        if (this.filtering) {
+            return true;
+        }
+        if (this.cursorPager) {
+            return !this.hasPrev;
+        }
+        if (!_.isNumber(this.startCount) || !_.isNumber(this.totalCount)) {
+            return true;
+        }
+        return Number(this.startCount) <= 1;
+    }
+    get pageSize() {
+        return this.tableFilterService.pageSize;
+    }
+    get currentPageNum() {
+        return this.tableFilterService.currentPage || 1;
+    }
+    get totalPages() {
+        if (!_.isNumber(this.totalCount) || Number(this.totalCount) <= 0) {
+            return 1;
+        }
+        return Math.max(1, Math.ceil(Number(this.totalCount) / this.pageSize));
+    }
+    /** Page numbers to render, with `0` marking a gap ("..."). Shows the first and
+     *  last page plus a window around the current page so long lists stay compact. */
+    get pageWindow() {
+        const total = this.totalPages;
+        const cur = this.currentPageNum;
+        if (total <= 7) {
+            return Array.from({ length: total }, (_v, i) => i + 1);
+        }
+        const pages = new Set([1, total, cur, cur - 1, cur + 1]);
+        const sorted = [...pages].filter((p) => p >= 1 && p <= total).sort((a, b) => a - b);
+        const out = [];
+        let prev = 0;
+        for (const p of sorted) {
+            if (prev && p - prev > 1) {
+                out.push(0); // gap sentinel
+            }
+            out.push(p);
+            prev = p;
+        }
+        return out;
+    }
+    goToPage(page) {
+        if (page < 1 || page > this.totalPages || page === this.currentPageNum || this.filtering) {
+            return;
+        }
+        this.tableFilterService.changePage(page);
+    }
+    onPageSizeChange(size) {
+        if (!size || size === this.pageSize) {
+            return;
+        }
+        this.svc.savePageSize(size);
+        this.tableFilterService.changePageSize(size);
+    }
+    /** Re-fetch the current page (re-emits the page so the host reloads its data). */
+    refresh() {
+        if (this.filtering) {
+            return;
+        }
+        this.tableFilterService.changePage(this.currentPageNum);
+    }
+    safeIcon(svg) {
+        let safe = this.iconCache.get(svg);
+        if (!safe) {
+            safe = this.sanitizer.bypassSecurityTrustHtml(svg);
+            this.iconCache.set(svg, safe);
+        }
+        return safe;
+    }
+    updateEntityTypeLabel() {
+        const map = {
+            'api-sessions': 'API Sessions',
+            'auth-policies': 'Auth Policies',
+            'certificate-authorities': 'Certificate Authorities',
+            'ext-jwt-signers': 'External JWT Signers',
+            identities: 'Identities',
+            'posture-checks': 'Posture Checks',
+            'edge-routers': 'Edge Routers',
+            services: 'Services',
+            configurations: 'Configs',
+            'config-types': 'Config Types',
+            'service-policies': 'Service Policies',
+            'edge-router-policies': 'Edge Router Policies',
+            'service-edge-router-policies': 'Service Edge Router Policies',
+            sessions: 'Sessions',
+            terminators: 'Terminators',
+            'transit-routers': 'Transit Routers',
+        };
+        this.entityTypeLabel = map[this._tableId] || this.entityTypeName || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListTableComponent, deps: [{ token: ListTableService }, { token: DataTableFilterService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.34", type: ListTableComponent, isStandalone: true, selector: "lib-list-table", inputs: { tableId: "tableId", columns: "columns", rowData: "rowData", isLoading: "isLoading", skeletonRowCount: "skeletonRowCount", 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", createLabel: "createLabel", emptyScope: "emptyScope", accessDenied: "accessDenied", entityTypeName: "entityTypeName", filterName: "filterName", filterColumn: "filterColumn", treeVariant: "treeVariant", showTreeVariantToggle: "showTreeVariantToggle", treeRail: "treeRail", initialPageSize: "initialPageSize", autoRefreshSeconds: "autoRefreshSeconds" }, outputs: { nodeToggled: "nodeToggled", actionRequested: "actionRequested", tableReady: "tableReady", selectionChanged: "selectionChanged", rowHover: "rowHover" }, 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        @if (toolbarControls.search.show) {\n          <div class=\"lt-search\" [class.lt-ctl-disabled]=\"toolbarControls.search.disabled\">\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              [disabled]=\"toolbarControls.search.disabled\"\n              (keyup)=\"onSearchInput()\"\n            />\n          </div>\n        }\n        @if (toolbarControls.filters.show && filterableColumns.length) {\n          <div class=\"lt-filter-zone\" [class.lt-ctl-disabled]=\"toolbarControls.filters.disabled\" #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        @if (toolbarControls.refresh.show) {\n          <button\n            type=\"button\"\n            class=\"lt-refresh-btn\"\n            (click)=\"refresh()\"\n            [disabled]=\"filtering || toolbarControls.refresh.disabled\"\n            aria-label=\"Refresh\"\n            title=\"Refresh\"\n            id=\"RefreshTableButton\"\n          >\n            <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n          </button>\n        }\n        @if (toolbarControls.autoRefresh.show) {\n          <span class=\"lt-autorefresh-wrap\" [class.lt-ctl-disabled]=\"toolbarControls.autoRefresh.disabled\">\n            <lib-list-table-auto-refresh [seconds]=\"autoRefreshSeconds\" [loading]=\"filtering\" (refresh)=\"refresh()\"></lib-list-table-auto-refresh>\n          </span>\n        }\n        @if (toolbarControls.columns.show) {\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            [disabled]=\"toolbarControls.columns.disabled\"\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        }\n      </div>\n    </div>\n\n    <!-- reload with rows already on screen: a thin indeterminate bar under the toolbar,\n         rows stay visible (dimmed) and usable. role=progressbar (indeterminate). -->\n    @if (showRefreshBar) {\n      <div class=\"lt-refresh-bar\" role=\"progressbar\" aria-label=\"Refreshing\" aria-busy=\"true\">\n        <span class=\"lt-refresh-bar-fill\"></span>\n      </div>\n    }\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\" [class.lt-is-refreshing]=\"showRefreshBar\" [class.lt-is-empty]=\"!isLoading && !rowData?.length\" [attr.aria-busy]=\"isLoading ? 'true' : null\">\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          @if (showSkeleton) {\n            <!-- first load, no data yet: placeholder rows matching the real column layout.\n                 aria-hidden so screen readers get the region's aria-busy, not fake rows. -->\n            @for (sk of skeletonRows; track sk; let r = $index) {\n              <tr class=\"lt-row lt-skeleton-row\" aria-hidden=\"true\">\n                @if (!options.noSelect) {\n                  <td class=\"lt-select-cell\"><span class=\"lt-sk lt-sk-check\"></span></td>\n                }\n                @for (col of visibleColumns; track trackCol($index, col); let c = $index) {\n                  <td class=\"lt-cell\" [class.lt-tree-cell]=\"isTreeCell(col)\">\n                    @if (isTreeCell(col)) {\n                      <span class=\"lt-sk lt-sk-dot\"></span>\n                    }\n                    <span class=\"lt-sk lt-sk-bar\" [style.width.%]=\"skeletonBarWidth(c, r)\"></span>\n                  </td>\n                }\n                @if (!options.noMenu) {\n                  <td class=\"lt-menu-cell\"></td>\n                }\n              </tr>\n            }\n          } @else {\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 || row.open\"\n                [class.lt-row-expanded]=\"row.__treeExpanded\"\n                (mouseenter)=\"onRowHover(row)\"\n                (mouseleave)=\"onRowLeave(row)\"\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 || row.open\"\n                [class.lt-row-expanded]=\"row.__treeExpanded\"\n                [class.row-invalid]=\"row.invalid\"\n                [class.row-copied]=\"row.copied\"\n                (mouseenter)=\"onRowHover(row)\"\n                (mouseleave)=\"onRowLeave(row)\"\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          }\n        </tbody>\n      </table>\n      @if (!isLoading && (!rowData || rowData.length === 0)) {\n        <lib-list-empty\n          [variant]=\"filterApplied ? 'no-results' : 'empty'\"\n          [entityKey]=\"tableId\"\n          [entityLabel]=\"entityTypeLabel\"\n          [scope]=\"emptyScope\"\n          [createLabel]=\"createLabel\"\n          [hasAdd]=\"showNoItemsAdd\"\n          [readonly]=\"noItemsReadonly\"\n          [framed]=\"false\"\n          (create)=\"openCreate()\"\n          (clearFilters)=\"clearTableFilters()\"\n        >\n          <ng-content select=\"[empty-state]\" ngProjectAs=\"[empty-state]\"></ng-content>\n        </lib-list-empty>\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        @if (toolbarControls.pageSize.show) {\n          <div class=\"lt-rpp\" [class.lt-ctl-disabled]=\"toolbarControls.pageSize.disabled\">\n            <span class=\"lt-rpp-label\">Rows per page</span>\n            <select\n              class=\"lt-rpp-select\"\n              [disabled]=\"filtering || toolbarControls.pageSize.disabled\"\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        }\n        @if (toolbarControls.pagination.show) {\n          <div class=\"lt-pager\" [class.lt-ctl-disabled]=\"toolbarControls.pagination.disabled\">\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        }\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  <!-- access denied: a full-page wall (no table chrome to show without permission) -->\n  <lib-list-empty\n    variant=\"access-denied\"\n    [entityKey]=\"tableId\"\n    [entityLabel]=\"entityTypeLabel\"\n    [scope]=\"emptyScope\"\n  ></lib-list-empty>\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.lt-is-empty{flex:1 1 auto;display:flex;flex-direction:column}.lt-scroll.lt-is-empty lib-list-empty{flex:1 1 auto;min-height:0}.lt-table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text)}.lt-skeleton-row td{height:var(--lt-row-height, 2.9rem)}.lt-skeleton-row:nth-child(1) .lt-sk{animation-delay:0s}.lt-skeleton-row:nth-child(2) .lt-sk{animation-delay:.08s}.lt-skeleton-row:nth-child(3) .lt-sk{animation-delay:.16s}.lt-skeleton-row:nth-child(4) .lt-sk{animation-delay:.24s}.lt-skeleton-row:nth-child(5) .lt-sk{animation-delay:.32s}.lt-skeleton-row:nth-child(6) .lt-sk{animation-delay:.4s}.lt-skeleton-row:nth-child(7) .lt-sk{animation-delay:.48s}.lt-skeleton-row:nth-child(8) .lt-sk{animation-delay:.56s}.lt-sk{display:inline-block;vertical-align:middle;border-radius:.375rem;background:color-mix(in srgb,var(--lt-border) 60%,transparent);animation:lt-skeleton-pulse 1.4s ease-in-out infinite}.lt-sk-bar{height:.7rem}.lt-sk-dot{width:1rem;height:1rem;border-radius:50%;margin-right:.5rem}.lt-sk-check{display:block;width:1rem;height:1rem;margin:0 auto;border-radius:.25rem}@keyframes lt-skeleton-pulse{0%,to{opacity:1}50%{opacity:.45}}.lt-refresh-bar{--lt-progress: var(--primary, var(--lt-link, #0027ab));position:relative;flex:0 0 auto;height:2px;margin-bottom:-2px;z-index:4;width:100%;overflow:hidden;background:color-mix(in srgb,var(--lt-progress) 20%,transparent)}.lt-refresh-bar-fill{position:absolute;top:0;left:0;height:100%;width:40%;background:var(--lt-progress);border-radius:1px;animation:lt-refresh-indeterminate 1.1s ease-in-out infinite}@keyframes lt-refresh-indeterminate{0%{left:-40%;width:40%}50%{width:55%}to{left:100%;width:40%}}.lt-is-refreshing tbody{opacity:.6;transition:opacity .15s ease}@media(prefers-reduced-motion:reduce){.lt-sk{animation:none}.lt-refresh-bar-fill{left:0;width:100%;animation:lt-refresh-pulse 1.4s ease-in-out infinite}@keyframes lt-refresh-pulse{0%,to{opacity:.45}50%{opacity:1}}}.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-ctl-disabled{opacity:.5;pointer-events:none}.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:18rem;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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6.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.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: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: ListFilterCellComponent, selector: "lib-list-filter-cell", inputs: ["column"] }, { kind: "component", type: ListHeaderCellComponent, selector: "lib-list-header-cell", inputs: ["column", "sortDir"], outputs: ["sortChanged"] }, { 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: ListEmptyComponent, selector: "lib-list-empty", inputs: ["variant", "entityKey", "entityLabel", "scope", "title", "message", "icon", "createLabel", "hasAdd", "readonly", "framed"], outputs: ["create", "clearFilters", "retry"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: ListTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-table', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        DragDropModule,
+                        ClickOutsideDirective,
+                        ListFilterCellComponent,
+                        ListHeaderCellComponent,
+                        ListMenuComponent,
+                        ListTableAutoRefreshComponent,
+                        SelectCellComponent,
+                        ListEmptyComponent,
+                    ], providers: [ListTableService], template: "@if (showTable && !accessDenied) {\n  <div class=\"lt-container\">\n    <div class=\"lt-toolbar\">\n      <div class=\"lt-toolbar-left\">\n        @if (toolbarControls.search.show) {\n          <div class=\"lt-search\" [class.lt-ctl-disabled]=\"toolbarControls.search.disabled\">\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              [disabled]=\"toolbarControls.search.disabled\"\n              (keyup)=\"onSearchInput()\"\n            />\n          </div>\n        }\n        @if (toolbarControls.filters.show && filterableColumns.length) {\n          <div class=\"lt-filter-zone\" [class.lt-ctl-disabled]=\"toolbarControls.filters.disabled\" #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        @if (toolbarControls.refresh.show) {\n          <button\n            type=\"button\"\n            class=\"lt-refresh-btn\"\n            (click)=\"refresh()\"\n            [disabled]=\"filtering || toolbarControls.refresh.disabled\"\n            aria-label=\"Refresh\"\n            title=\"Refresh\"\n            id=\"RefreshTableButton\"\n          >\n            <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n          </button>\n        }\n        @if (toolbarControls.autoRefresh.show) {\n          <span class=\"lt-autorefresh-wrap\" [class.lt-ctl-disabled]=\"toolbarControls.autoRefresh.disabled\">\n            <lib-list-table-auto-refresh [seconds]=\"autoRefreshSeconds\" [loading]=\"filtering\" (refresh)=\"refresh()\"></lib-list-table-auto-refresh>\n          </span>\n        }\n        @if (toolbarControls.columns.show) {\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            [disabled]=\"toolbarControls.columns.disabled\"\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        }\n      </div>\n    </div>\n\n    <!-- reload with rows already on screen: a thin indeterminate bar under the toolbar,\n         rows stay visible (dimmed) and usable. role=progressbar (indeterminate). -->\n    @if (showRefreshBar) {\n      <div class=\"lt-refresh-bar\" role=\"progressbar\" aria-label=\"Refreshing\" aria-busy=\"true\">\n        <span class=\"lt-refresh-bar-fill\"></span>\n      </div>\n    }\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\" [class.lt-is-refreshing]=\"showRefreshBar\" [class.lt-is-empty]=\"!isLoading && !rowData?.length\" [attr.aria-busy]=\"isLoading ? 'true' : null\">\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          @if (showSkeleton) {\n            <!-- first load, no data yet: placeholder rows matching the real column layout.\n                 aria-hidden so screen readers get the region's aria-busy, not fake rows. -->\n            @for (sk of skeletonRows; track sk; let r = $index) {\n              <tr class=\"lt-row lt-skeleton-row\" aria-hidden=\"true\">\n                @if (!options.noSelect) {\n                  <td class=\"lt-select-cell\"><span class=\"lt-sk lt-sk-check\"></span></td>\n                }\n                @for (col of visibleColumns; track trackCol($index, col); let c = $index) {\n                  <td class=\"lt-cell\" [class.lt-tree-cell]=\"isTreeCell(col)\">\n                    @if (isTreeCell(col)) {\n                      <span class=\"lt-sk lt-sk-dot\"></span>\n                    }\n                    <span class=\"lt-sk lt-sk-bar\" [style.width.%]=\"skeletonBarWidth(c, r)\"></span>\n                  </td>\n                }\n                @if (!options.noMenu) {\n                  <td class=\"lt-menu-cell\"></td>\n                }\n              </tr>\n            }\n          } @else {\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 || row.open\"\n                [class.lt-row-expanded]=\"row.__treeExpanded\"\n                (mouseenter)=\"onRowHover(row)\"\n                (mouseleave)=\"onRowLeave(row)\"\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 || row.open\"\n                [class.lt-row-expanded]=\"row.__treeExpanded\"\n                [class.row-invalid]=\"row.invalid\"\n                [class.row-copied]=\"row.copied\"\n                (mouseenter)=\"onRowHover(row)\"\n                (mouseleave)=\"onRowLeave(row)\"\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          }\n        </tbody>\n      </table>\n      @if (!isLoading && (!rowData || rowData.length === 0)) {\n        <lib-list-empty\n          [variant]=\"filterApplied ? 'no-results' : 'empty'\"\n          [entityKey]=\"tableId\"\n          [entityLabel]=\"entityTypeLabel\"\n          [scope]=\"emptyScope\"\n          [createLabel]=\"createLabel\"\n          [hasAdd]=\"showNoItemsAdd\"\n          [readonly]=\"noItemsReadonly\"\n          [framed]=\"false\"\n          (create)=\"openCreate()\"\n          (clearFilters)=\"clearTableFilters()\"\n        >\n          <ng-content select=\"[empty-state]\" ngProjectAs=\"[empty-state]\"></ng-content>\n        </lib-list-empty>\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        @if (toolbarControls.pageSize.show) {\n          <div class=\"lt-rpp\" [class.lt-ctl-disabled]=\"toolbarControls.pageSize.disabled\">\n            <span class=\"lt-rpp-label\">Rows per page</span>\n            <select\n              class=\"lt-rpp-select\"\n              [disabled]=\"filtering || toolbarControls.pageSize.disabled\"\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        }\n        @if (toolbarControls.pagination.show) {\n          <div class=\"lt-pager\" [class.lt-ctl-disabled]=\"toolbarControls.pagination.disabled\">\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        }\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  <!-- access denied: a full-page wall (no table chrome to show without permission) -->\n  <lib-list-empty\n    variant=\"access-denied\"\n    [entityKey]=\"tableId\"\n    [entityLabel]=\"entityTypeLabel\"\n    [scope]=\"emptyScope\"\n  ></lib-list-empty>\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.lt-is-empty{flex:1 1 auto;display:flex;flex-direction:column}.lt-scroll.lt-is-empty lib-list-empty{flex:1 1 auto;min-height:0}.lt-table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text)}.lt-skeleton-row td{height:var(--lt-row-height, 2.9rem)}.lt-skeleton-row:nth-child(1) .lt-sk{animation-delay:0s}.lt-skeleton-row:nth-child(2) .lt-sk{animation-delay:.08s}.lt-skeleton-row:nth-child(3) .lt-sk{animation-delay:.16s}.lt-skeleton-row:nth-child(4) .lt-sk{animation-delay:.24s}.lt-skeleton-row:nth-child(5) .lt-sk{animation-delay:.32s}.lt-skeleton-row:nth-child(6) .lt-sk{animation-delay:.4s}.lt-skeleton-row:nth-child(7) .lt-sk{animation-delay:.48s}.lt-skeleton-row:nth-child(8) .lt-sk{animation-delay:.56s}.lt-sk{display:inline-block;vertical-align:middle;border-radius:.375rem;background:color-mix(in srgb,var(--lt-border) 60%,transparent);animation:lt-skeleton-pulse 1.4s ease-in-out infinite}.lt-sk-bar{height:.7rem}.lt-sk-dot{width:1rem;height:1rem;border-radius:50%;margin-right:.5rem}.lt-sk-check{display:block;width:1rem;height:1rem;margin:0 auto;border-radius:.25rem}@keyframes lt-skeleton-pulse{0%,to{opacity:1}50%{opacity:.45}}.lt-refresh-bar{--lt-progress: var(--primary, var(--lt-link, #0027ab));position:relative;flex:0 0 auto;height:2px;margin-bottom:-2px;z-index:4;width:100%;overflow:hidden;background:color-mix(in srgb,var(--lt-progress) 20%,transparent)}.lt-refresh-bar-fill{position:absolute;top:0;left:0;height:100%;width:40%;background:var(--lt-progress);border-radius:1px;animation:lt-refresh-indeterminate 1.1s ease-in-out infinite}@keyframes lt-refresh-indeterminate{0%{left:-40%;width:40%}50%{width:55%}to{left:100%;width:40%}}.lt-is-refreshing tbody{opacity:.6;transition:opacity .15s ease}@media(prefers-reduced-motion:reduce){.lt-sk{animation:none}.lt-refresh-bar-fill{left:0;width:100%;animation:lt-refresh-pulse 1.4s ease-in-out infinite}@keyframes lt-refresh-pulse{0%,to{opacity:.45}50%{opacity:1}}}.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-ctl-disabled{opacity:.5;pointer-events:none}.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:18rem;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: i3.DomSanitizer }], propDecorators: { tableId: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], skeletonRowCount: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], loadChildren: [{
+                type: Input
+            }], childColumnsByLevel: [{
+                type: Input
+            }], nodeToggled: [{
+                type: Output
+            }], hasNext: [{
+                type: Input
+            }], hasPrev: [{
+                type: Input
+            }], startCount: [{
+                type: Input
+            }], endCount: [{
+                type: Input
+            }], totalCount: [{
+                type: Input
+            }], filterApplied: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
+            }], headerActions: [{
+                type: Input
+            }], noItemsImage: [{
+                type: Input
+            }], showNoItemsAdd: [{
+                type: Input
+            }], noItemsReadonly: [{
+                type: Input
+            }], createLabel: [{
+                type: Input
+            }], emptyScope: [{
+                type: Input
+            }], accessDenied: [{
+                type: Input
+            }], entityTypeName: [{
+                type: Input
+            }], filterName: [{
+                type: Input
+            }], filterColumn: [{
+                type: Input
+            }], actionRequested: [{
+                type: Output
+            }], tableReady: [{
+                type: Output
+            }], selectionChanged: [{
+                type: Output
+            }], rowHover: [{
+                type: Output
+            }], contextMenu: [{
+                type: ViewChild,
+                args: ['contextMenu']
+            }], filterZone: [{
+                type: ViewChild,
+                args: ['filterZone']
+            }], 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
+            }], autoRefreshSeconds: [{
+                type: Input
+            }] } });
+
+class NoItemsComponent {
+    constructor() {
+        this.image = 'No_Gateways';
+        this.typeName = '';
+        this.isEmpty = false;
+        this.hasAdd = true;
+        this.hiddenResults = false;
+        this.isLoading = false;
+        this.readonly = false;
+        this.accessDenied = false;
+        this.clickEmit = new EventEmitter();
+        this.refresh = new EventEmitter();
+    }
+    ngOnChanges() {
+        this.background = {
+            'background-image': 'url(assets/svgs/' + this.image + '.svg)',
+        };
+    }
+    iconClick() {
+        this.clickEmit.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: NoItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.34", type: NoItemsComponent, isStandalone: true, selector: "lib-no-items", inputs: { image: "image", typeName: "typeName", isEmpty: "isEmpty", hasAdd: "hasAdd", hiddenResults: "hiddenResults", isLoading: "isLoading", readonly: "readonly", accessDenied: "accessDenied" }, outputs: { clickEmit: "clickEmit", refresh: "refresh" }, usesOnChanges: true, ngImport: i0, template: "<div [hidden]=\"!isEmpty || isLoading\" class=\"noarea\" id=\"NoArea\">\n  <div (click)=\"iconClick()\">\n    <div [ngStyle]=\"background\" class=\"icon\"></div>\n    <div class=\"title\">\n      @if (accessDenied) {\n        You do not have permission to view {{ typeName }}.\n      } @else {\n        This network currently has no {{ typeName }} to display.<br/>\n        <span [hidden]=\"!hasAdd || readonly\"\n          >Tap on the <span class=\"addExample\"></span> to add one.</span\n        >\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:calc(100% - 12.5rem);width:100%;align-items:center;justify-content:center;position:relative}.addExample{display:inline-block;width:2.1875rem;height:2.1875rem;background-image:url(/assets/svgs/No_Plus.svg);background-size:contain;background-repeat:no-repeat;margin-bottom:-.5rem}.addExample:hover{filter:brightness(90%);transition:.3s}.addExample:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.noarea .icon{width:100%;height:15.625rem;background-position:center center;background-size:contain;position:relative;float:left;z-index:unset;left:unset;cursor:pointer;transition:.3s}@media only screen and (max-width:715px){.addExample{width:1rem;height:1rem}}@media only screen and (max-width:1500px){.noarea{transform:scale(.75)}}@media only screen and (max-width:1250px){.noarea{transform:scale(.6)}}.hidden-results{margin-top:1.25rem}.hidden-results span{font-size:1.375rem;cursor:default}.hidden-results span a{cursor:pointer}.no-items-loader-container{position:absolute;width:100%;height:100%;left:0;top:0;background:#ffffff40;z-index:99999}::ng-deep .no-items-loader-container #Loading{position:absolute;width:100%;height:100%;z-index:9999;background:#fff3}.title{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.34", ngImport: i0, type: NoItemsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-no-items', standalone: true, imports: [CommonModule], template: "<div [hidden]=\"!isEmpty || isLoading\" class=\"noarea\" id=\"NoArea\">\n  <div (click)=\"iconClick()\">\n    <div [ngStyle]=\"background\" class=\"icon\"></div>\n    <div class=\"title\">\n      @if (accessDenied) {\n        You do not have permission to view {{ typeName }}.\n      } @else {\n        This network currently has no {{ typeName }} to display.<br/>\n        <span [hidden]=\"!hasAdd || readonly\"\n          >Tap on the <span class=\"addExample\"></span> to add one.</span\n        >\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:calc(100% - 12.5rem);width:100%;align-items:center;justify-content:center;position:relative}.addExample{display:inline-block;width:2.1875rem;height:2.1875rem;background-image:url(/assets/svgs/No_Plus.svg);background-size:contain;background-repeat:no-repeat;margin-bottom:-.5rem}.addExample:hover{filter:brightness(90%);transition:.3s}.addExample:active{filter:brightness(80%);transform:scale(.97);transition:.3s}.noarea .icon{width:100%;height:15.625rem;background-position:center center;background-size:contain;position:relative;float:left;z-index:unset;left:unset;cursor:pointer;transition:.3s}@media only screen and (max-width:715px){.addExample{width:1rem;height:1rem}}@media only screen and (max-width:1500px){.noarea{transform:scale(.75)}}@media only screen and (max-width:1250px){.noarea{transform:scale(.6)}}.hidden-results{margin-top:1.25rem}.hidden-results span{font-size:1.375rem;cursor:default}.hidden-results span a{cursor:pointer}.no-items-loader-container{position:absolute;width:100%;height:100%;left:0;top:0;background:#ffffff40;z-index:99999}::ng-deep .no-items-loader-container #Loading{position:absolute;width:100%;height:100%;z-index:9999;background:#fff3}.title{text-align:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { image: [{
+                type: Input
+            }], typeName: [{
+                type: Input
+            }], isEmpty: [{
+                type: Input
+            }], hasAdd: [{
+                type: Input
+            }], hiddenResults: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], accessDenied: [{
+                type: Input
+            }], clickEmit: [{
+                type: Output
+            }], refresh: [{
+                type: Output
+            }] } });
+
+/*
+    Copyright NetFoundry Inc.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+/*
+ * Secondary entry point: `@openziti/ziti-console-lib/table-core`.
+ *
+ * The standalone list-table and the self-contained set of pieces it is built from. This entry's
+ * compiled bundle and type declarations never include the library's main NgModule, so none of
+ * that module's heavy, optional peers (ag-grid, primeng, lottie, oauth, json-editor, qrcode, csv,
+ * yaml, json-ref-resolver) are reachable - not even as a build-time import edge. A consumer that
+ * imports the table from this subpath builds with only the lean peers it genuinely needs
+ * (@angular/*, @angular/cdk, @angular/material, rxjs, lodash, moment).
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ClickOutsideDirective, DataTableFilterService, ListEmptyComponent, ListFilterCellComponent, ListHeaderCellComponent, ListMenuComponent, ListTableAutoRefreshComponent, ListTableComponent, ListTableService, NoItemsComponent, SelectCellComponent };
+//# sourceMappingURL=openziti-ziti-console-lib-table-core.mjs.map