@openziti/ziti-console-lib 1.5.4 → 1.5.5

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

@@ -10,7 +10,7 @@ import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i4 from '@angular/router';
 import { RouterModule, NavigationEnd } from '@angular/router';
 import { BehaviorSubject, Subject, firstValueFrom, tap, map, Subscription, fromEvent, of, interval } from 'rxjs';
-import _, { debounce, defer, isEmpty, isNumber, includes, isNil, isNaN as isNaN$1, cloneDeep, isBoolean, isArray, isString, forEach, isFunction, get, unset, keys, isEqual, isObject, forOwn, invert, map as map$2, some, filter, sortBy, sortedUniq, set, has, trim, delay, invoke } from 'lodash';
+import _, { debounce, defer, isEmpty, isNumber, includes, isNil, isNaN as isNaN$1, cloneDeep, isEqual, isBoolean, isArray, isString, forEach, isFunction, get, unset, keys, isObject, forOwn, invert, map as map$2, some, filter, sortBy, sortedUniq, set, has, trim, delay, invoke } from 'lodash';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i5$2 from 'angularx-qrcode';
@@ -2728,6 +2728,23 @@ class ZitiDataService {
         }
         return filters;
     }
+    /**
+     * Copies unknown fields (on `formData` but not the model or `excludedProperties`) onto
+     * `saveModel` so raw-JSON-editor edits aren't dropped. On update, pass `originalData` (the
+     * loaded entity) to skip unchanged server-supplied fields (_links, createdAt, enrollment).
+     */
+    mergeUnknownFormProperties(saveModel, formData, modelProperties, excludedProperties = ['id'], originalData) {
+        Object.keys(formData || {}).forEach((prop) => {
+            if (modelProperties.includes(prop) || excludedProperties.includes(prop)) {
+                return;
+            }
+            if (originalData && isEqual(formData[prop], originalData[prop])) {
+                return;
+            }
+            saveModel[prop] = formData[prop];
+        });
+        return saveModel;
+    }
     // escape ziti-ql string contents so a value with a quote/backslash can't alter the query
     escapeQlString(v) {
         return String(v).replace(/\\/g, '\\\\').replace(/"/g, '\\"');
@@ -6428,9 +6445,9 @@ class IdentityFormService {
         this.zitiService = zitiService;
         this.growlerService = growlerService;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getIdentityDataModel(formData, isUpdate);
+        const data = this.getIdentityDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('identities', data, formData.id).then((result) => {
             const growlerData = new GrowlerModel('success', 'Success', `Identity ${isUpdate ? 'Updated' : 'Created'}`, `Successfully ${isUpdate ? 'updated' : 'created'} Identity: ${formData.name}`);
@@ -6442,7 +6459,7 @@ class IdentityFormService {
             throw resp;
         });
     }
-    getIdentityDataModel(formData, isUpdate) {
+    getIdentityDataModel(formData, isUpdate, originalData) {
         const saveModel = new Identity$1();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -6467,7 +6484,7 @@ class IdentityFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id', 'badges'], isUpdate ? originalData : undefined);
     }
     testService(identityId, serviceId) {
         const url = `/identities/${identityId}/policy-advice/${serviceId}`;
@@ -7716,9 +7733,9 @@ class EdgeRouterFormService {
         this.associatedServices = [];
         this.associatedServiceNames = [];
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getEdgeRouterDataModel(formData, isUpdate);
+        const data = this.getEdgeRouterDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('edge-routers', data, formData.id).then(async (result) => {
             const id = result?.data?.id || formData.id;
@@ -7743,7 +7760,7 @@ class EdgeRouterFormService {
             throw resp;
         });
     }
-    getEdgeRouterDataModel(formData, isUpdate) {
+    getEdgeRouterDataModel(formData, isUpdate, originalData) {
         const saveModel = new EdgeRouter();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -7752,7 +7769,7 @@ class EdgeRouterFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id', 'badges'], isUpdate ? originalData : undefined);
     }
     getAuthPolicies() {
         const paging = {
@@ -10689,9 +10706,9 @@ class TerminatorFormService {
         this.identityNamedAttributesMap = {};
         this.routerNamedAttributesMap = {};
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getTerminatorDataModel(formData, isUpdate);
+        const data = this.getTerminatorDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.patch('terminators', data, formData.id, true);
@@ -10733,7 +10750,7 @@ class TerminatorFormService {
             throw resp;
         });
     }
-    getTerminatorDataModel(formData, isUpdate) {
+    getTerminatorDataModel(formData, isUpdate, originalData) {
         const saveModel = new Terminator();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -10742,7 +10759,7 @@ class TerminatorFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     getIdentityNamedAttributes() {
         return this.dataService.get('identities', { rawFilter: true, filter: '', sort: 'name', order: 'asc', total: -1, page: 1 }, []).then((result) => {
@@ -11433,7 +11450,7 @@ class TerminatorFormComponent extends ProjectableForm {
         }
         const apiData = this.apiData;
         this.isLoading = true;
-        this.svc.save(apiData).then((result) => {
+        this.svc.save(apiData, this.initData).then((result) => {
             if (this.isModal) {
                 this.closeModal(true, true);
                 return;
@@ -11963,11 +11980,15 @@ class ListFilterCellComponent {
         return raw;
     }
     // ------------------------------------------------------------------ display
+    labelForValue(value) {
+        const opt = this.options.find((o) => `${o.value}` === `${value}`);
+        return opt ? opt.label : `${value}`;
+    }
     /** Short display of the current selection, shown after the field label when set. */
     get valueLabel() {
         if (this.mode === 'multi') {
             if (this.selectedValues.length === 1) {
-                return this.selectedValues[0];
+                return this.labelForValue(this.selectedValues[0]);
             }
             return `${this.selectedValues.length}`;
         }
@@ -12089,7 +12110,7 @@ class ListFilterCellComponent {
             filterName: this.column.label,
             columnId: this.field,
             value: [...this.selectedValues],
-            label: this.selectedValues.join(', '),
+            label: this.selectedValues.map((v) => this.labelForValue(v)).join(', '),
             type: this.isAttributeMode ? 'ATTRIBUTE' : 'MULTISELECT',
             semantic: 'AnyOf',
         };
@@ -12260,6 +12281,8 @@ class ListTableComponent {
         this.rowData = [];
         this.isLoading = false;
         this.options = { noSelect: false, noMenu: false };
+        this.hasNext = false;
+        this.hasPrev = false;
         this.startCount = '-';
         this.endCount = '-';
         this.totalCount = '-';
@@ -12852,14 +12875,29 @@ class ListTableComponent {
         }
         this.tableFilterService.changePage((this.tableFilterService.currentPage || 1) - 1);
     }
+    get cursorPager() {
+        return this.options?.pager === 'cursor';
+    }
     get nextDisabled() {
-        if (!_.isNumber(this.totalCount) || !_.isNumber(this.endCount) || this.filtering) {
+        if (this.filtering) {
+            return true;
+        }
+        if (this.cursorPager) {
+            return !this.hasNext;
+        }
+        if (!_.isNumber(this.totalCount) || !_.isNumber(this.endCount)) {
             return true;
         }
         return Number(this.endCount) >= Number(this.totalCount);
     }
     get prevDisabled() {
-        if (!_.isNumber(this.startCount) || !_.isNumber(this.totalCount) || this.filtering) {
+        if (this.filtering) {
+            return true;
+        }
+        if (this.cursorPager) {
+            return !this.hasPrev;
+        }
+        if (!_.isNumber(this.startCount) || !_.isNumber(this.totalCount)) {
             return true;
         }
         return Number(this.startCount) <= 1;
@@ -12957,11 +12995,11 @@ class ListTableComponent {
         this.entityTypeLabel = map[this._tableId] || this.entityTypeName || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListTableComponent, deps: [{ token: ListTableService }, { token: DataTableFilterService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListTableComponent, isStandalone: false, selector: "lib-list-table", inputs: { tableId: "tableId", columns: "columns", rowData: "rowData", isLoading: "isLoading", options: "options", startCount: "startCount", endCount: "endCount", totalCount: "totalCount", filterApplied: "filterApplied", menuItems: "menuItems", headerActions: "headerActions", noItemsImage: "noItemsImage", showNoItemsAdd: "showNoItemsAdd", noItemsReadonly: "noItemsReadonly", accessDenied: "accessDenied", entityTypeName: "entityTypeName", filterName: "filterName", filterColumn: "filterColumn", initialPageSize: "initialPageSize" }, outputs: { actionRequested: "actionRequested", tableReady: "tableReady" }, providers: [ListTableService], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "filterZone", first: true, predicate: ["filterZone"], descendants: true }, { propertyName: "filtersRow", first: true, predicate: ["filtersRow"], descendants: true }], ngImport: i0, template: "@if (showTable && !accessDenied) {\n  <div class=\"lt-container\">\n    <div class=\"lt-toolbar\">\n      <div class=\"lt-toolbar-left\">\n        <div class=\"lt-search\">\n          <svg class=\"lt-search-icon\" viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <circle cx=\"7\" cy=\"7\" r=\"4.3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n            <line x1=\"10.4\" y1=\"10.4\" x2=\"14.6\" y2=\"14.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n          </svg>\n          <input\n            class=\"lt-search-input\"\n            id=\"SearchFilter\"\n            type=\"text\"\n            [placeholder]=\"'Search ' + (entityTypeLabel || 'items')\"\n            [(ngModel)]=\"searchString\"\n            (keyup)=\"onSearchInput()\"\n          />\n        </div>\n        @if (filterableColumns.length) {\n          <div class=\"lt-filter-zone\" #filterZone>\n            <div class=\"lt-filters\" #filtersRow>\n              @for (col of visibleFilterColumns; track col.key) {\n                <span class=\"lt-filter-item\" [attr.data-filter-key]=\"col.key\">\n                  <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                </span>\n              }\n            </div>\n            @if (overflowFilterColumns.length) {\n              <div class=\"lt-filter-more\">\n                <button\n                  type=\"button\"\n                  class=\"lt-filter-more-btn\"\n                  [class.is-on]=\"hiddenActiveCount > 0\"\n                  [class.is-open]=\"showFilterOverflow\"\n                  (click)=\"toggleFilterOverflow($event)\"\n                  aria-haspopup=\"true\"\n                  [attr.aria-expanded]=\"showFilterOverflow\"\n                  [attr.aria-label]=\"overflowFilterColumns.length + ' more filters'\"\n                  id=\"FilterOverflowButton\"\n                >\n                  <span class=\"lt-filter-more-icon\" aria-hidden=\"true\">\n                    <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\"><path fill=\"currentColor\" d=\"M2 3h12l-4.6 5.6v4l-2.8 1.4v-5.4z\"/></svg>\n                  </span>\n                  <span class=\"lt-filter-more-label\">More</span>\n                  <span class=\"lt-filter-more-count\">{{ overflowFilterColumns.length }}</span>\n                </button>\n                @if (showFilterOverflow) {\n                  <div class=\"lt-filter-overflow\" (clickOutside)=\"closeFilterOverflow($event)\">\n                    <div class=\"lt-filter-overflow-title\">Filters</div>\n                    @for (col of overflowFilterColumns; track col.key) {\n                      <div class=\"lt-filter-overflow-row\" [class.is-active]=\"isFilterActive(col)\">\n                        <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"lt-toolbar-right\">\n        <ng-template #refreshIcon>\n          <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" d=\"M13.4 8a5.4 5.4 0 1 1-1.5-3.8\"/>\n            <path fill=\"currentColor\" d=\"M13.9 2.1l.5 3.2-3.2-.5z\"/>\n          </svg>\n        </ng-template>\n        <button\n          type=\"button\"\n          class=\"lt-refresh-btn\"\n          (click)=\"refresh()\"\n          [disabled]=\"filtering\"\n          aria-label=\"Refresh\"\n          title=\"Refresh\"\n          id=\"RefreshTableButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n        </button>\n        <button\n          type=\"button\"\n          class=\"lt-autorefresh-btn\"\n          [class.is-on]=\"autoRefresh\"\n          (click)=\"toggleAutoRefresh()\"\n          [attr.aria-pressed]=\"autoRefresh\"\n          id=\"AutoRefreshButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n          <span>Auto-refresh: {{ autoRefresh ? 'On' : 'Off' }}</span>\n        </button>\n        <div class=\"lt-columns\">\n          <button\n            type=\"button\"\n            class=\"lt-columns-btn\"\n            [class.is-on]=\"hiddenColumnCount > 0\"\n            [class.is-open]=\"showColumnChooser\"\n            (click)=\"toggleColumnChooser($event)\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"showColumnChooser\"\n            id=\"ColumnChooserButton\"\n          >\n            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n              <path fill=\"currentColor\" d=\"M2 3.5h9v1.4H2zM2 7.3h6v1.4H2zM2 11.1h11v1.4H2z\"/>\n              <circle cx=\"13\" cy=\"4.2\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"10\" cy=\"8\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"14.4\" cy=\"11.8\" r=\"1.7\" fill=\"currentColor\"/>\n            </svg>\n            <span>Columns</span>\n            @if (hiddenColumnCount > 0) {\n              <span class=\"lt-columns-count\">{{ hiddenColumnCount }}</span>\n            }\n          </button>\n          @if (showColumnChooser) {\n            <div class=\"lt-column-chooser\" (clickOutside)=\"closeColumnChooser()\">\n              <div class=\"lt-chooser-header\">\n                <span class=\"lt-chooser-title\">Columns</span>\n                <span class=\"lt-chooser-subtitle\">Customize order and visibility</span>\n              </div>\n              <ul class=\"lt-chooser-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"chooserReorder($event)\">\n                @for (col of allColumns; track col.key) {\n                  <li class=\"lt-chooser-row\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"col.reorderable === false\">\n                    <button\n                      type=\"button\"\n                      class=\"lt-chooser-toggle\"\n                      [class.checked]=\"!col.hidden\"\n                      [disabled]=\"col.hideable === false\"\n                      (click)=\"toggleColumnVisible(col)\"\n                      [attr.aria-pressed]=\"!col.hidden\"\n                    >\n                      <span class=\"lt-chooser-box\" aria-hidden=\"true\">\n                        @if (!col.hidden) {\n                          <svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\">\n                            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2 6.3 4.6 9 10 3\"/>\n                          </svg>\n                        }\n                      </span>\n                      <span class=\"lt-chooser-text\">{{ col.label }}</span>\n                      @if (isDefaultHidden(col)) {\n                        <span class=\"lt-chooser-default-tag\">hidden by default</span>\n                      }\n                    </button>\n                    @if (col.reorderable !== false) {\n                      <span class=\"lt-chooser-handle\" cdkDragHandle aria-label=\"Drag to reorder\" title=\"Drag to reorder\">\n                        <svg viewBox=\"0 0 10 16\" width=\"10\" height=\"15\" fill=\"currentColor\" aria-hidden=\"true\">\n                          <circle cx=\"3\" cy=\"3\" r=\"1.25\"/><circle cx=\"7\" cy=\"3\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"8\" r=\"1.25\"/><circle cx=\"7\" cy=\"8\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"13\" r=\"1.25\"/><circle cx=\"7\" cy=\"13\" r=\"1.25\"/>\n                        </svg>\n                      </span>\n                    }\n                  </li>\n                }\n              </ul>\n              <div class=\"lt-chooser-footer\">\n                <button\n                  type=\"button\"\n                  class=\"lt-chooser-reset\"\n                  [disabled]=\"columnsAtDefault\"\n                  (click)=\"resetTableColumns()\"\n                  id=\"ResetColumnsButton\"\n                >\n                  Reset to default\n                </button>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <div class=\"lt-scroll\" id=\"ItemTable\">\n      <table class=\"lt-table\">\n        <colgroup>\n          @if (!options.noSelect) { <col class=\"lt-col-select\" /> }\n          @for (col of visibleColumns; track trackCol($index, col)) {\n            <col [style.width]=\"colWidth(col)\" />\n          }\n          @if (!options.noMenu) { <col class=\"lt-col-menu\" /> }\n        </colgroup>\n        <thead class=\"lt-head\">\n          <tr cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"onReorder($event)\">\n            @if (!options.noSelect) {\n              <th class=\"lt-select-cell\">\n                <div\n                  class=\"lt-select-all\"\n                  [class.checked]=\"allToggled\"\n                  [class.indeterminate]=\"someSelected\"\n                  (click)=\"toggleAll()\"\n                  id=\"SelectAllRows\"\n                ></div>\n              </th>\n            }\n            @for (col of visibleColumns; track trackCol($index, col)) {\n              <th\n                cdkDrag\n                [cdkDragDisabled]=\"col.reorderable === false\"\n                class=\"lt-th\"\n                [ngClass]=\"col.cellClass\"\n                id=\"Header_{{ col.key }}\"\n              >\n                <lib-list-header-cell\n                  [column]=\"col\"\n                  [sortDir]=\"col.sortDir\"\n                  (sortChanged)=\"onHeaderSort($event)\"\n                  (hideColumn)=\"hideColumn($event)\"\n                ></lib-list-header-cell>\n                @if (col.resizable !== false) {\n                  <span class=\"lt-resize\" (pointerdown)=\"startResize(col, $event)\"></span>\n                }\n              </th>\n            }\n            @if (!options.noMenu) {\n              <th class=\"lt-menu-cell\">\n                <div class=\"lt-header-menu-trigger\" (click)=\"openHeaderActionMenu($event)\" id=\"ColumnMenuHeader\">\n                  &#8942;\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of rowData; track trackRow($index, row); let i = $index) {\n            <tr\n              class=\"lt-row\"\n              [class.lt-row-odd]=\"i % 2 === 1\"\n              [class.lt-row-selected]=\"row.selected\"\n              [class.row-invalid]=\"row.invalid\"\n              [class.row-copied]=\"row.copied\"\n            >\n              @if (!options.noSelect) {\n                <td class=\"lt-select-cell\">\n                  <lib-select-cell [row]=\"row\" [toggleItem]=\"toggleItem\"></lib-select-cell>\n                </td>\n              }\n              @for (col of visibleColumns; track trackCol($index, col)) {\n                <td\n                  class=\"lt-cell\"\n                  [ngClass]=\"cellClass(col)\"\n                  (click)=\"onCellClick(col, row, i)\"\n                  (mouseenter)=\"onCellHover(col, row, i, $event)\"\n                  (mouseleave)=\"onCellLeave()\"\n                >\n                  @switch (renderMode(col)) {\n                    @case ('component') {\n                      <ng-container *ngComponentOutlet=\"col.cell; inputs: cellInputs(col, row, i)\"></ng-container>\n                    }\n                    @case ('html') {\n                      <span class=\"lt-cell-html\" [innerHTML]=\"cellHtml(col, row, i)\"></span>\n                    }\n                    @default {\n                      <span class=\"lt-cell-text\">{{ cellText(col, row, i) }}</span>\n                    }\n                  }\n                </td>\n              }\n              @if (!options.noMenu) {\n                <td class=\"lt-menu-cell\">\n                  @if (row.actionList?.length) {\n                    <button\n                      type=\"button\"\n                      class=\"lt-row-menu-trigger\"\n                      (click)=\"$event.stopPropagation(); openActionMenu($event, row)\"\n                      attr.id=\"RowMenu_{{ row.id }}\"\n                      aria-label=\"Row actions\"\n                    >&#8942;</button>\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      @if (!isLoading && filterApplied && (!rowData || rowData.length === 0)) {\n        <div class=\"no-rows-message\">No Rows To Show</div>\n      }\n    </div>\n\n    <div class=\"lt-footer\">\n      <div class=\"lt-footer-count\">\n        Showing <span id=\"Start\">{{ startCount }}</span>&#8211;<span id=\"End\">{{ endCount }}</span>\n        of <span id=\"Total\">{{ totalCount }}</span>\n      </div>\n      <div class=\"lt-footer-controls\">\n        <div class=\"lt-rpp\">\n          <span class=\"lt-rpp-label\">Rows per page</span>\n          <select\n            class=\"lt-rpp-select\"\n            [disabled]=\"filtering\"\n            [value]=\"pageSize\"\n            (change)=\"onPageSizeChange(+$any($event.target).value)\"\n            aria-label=\"Rows per page\"\n          >\n            @for (opt of pageSizeOptions; track opt) {\n              <option [value]=\"opt\">{{ opt }}</option>\n            }\n          </select>\n        </div>\n        <div class=\"lt-pager\">\n          <button type=\"button\" class=\"lt-page-btn icon-prev\" [disabled]=\"prevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\"></button>\n          @for (p of pageWindow; track $index) {\n            @if (p === 0) {\n              <span class=\"lt-page-gap\">&#8230;</span>\n            } @else {\n              <button\n                type=\"button\"\n                class=\"lt-page-num\"\n                [class.is-current]=\"p === currentPageNum\"\n                (click)=\"goToPage(p)\"\n              >{{ p }}</button>\n            }\n          }\n          <button type=\"button\" class=\"lt-page-btn icon-next\" [disabled]=\"nextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\"></button>\n        </div>\n      </div>\n    </div>\n\n    <!-- header action menu -->\n    <lib-list-menu\n      menuId=\"HeaderActionMenu\"\n      [open]=\"openHeaderMenu\"\n      [items]=\"headerMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onHeaderMenuClick($event)\"\n      (closed)=\"closeHeaderActionMenu()\"\n    ></lib-list-menu>\n\n    <!-- row action menu -->\n    <lib-list-menu\n      menuId=\"RowActionMenu\"\n      [open]=\"openMenu\"\n      [items]=\"rowMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onRowMenuClick($event)\"\n      (closed)=\"closeActionMenu()\"\n    ></lib-list-menu>\n  </div>\n} @else {\n  <lib-no-items\n    (clickEmit)=\"openCreate()\"\n    [image]=\"noItemsImage\"\n    [isEmpty]=\"!rowData || rowData.length === 0\"\n    [isLoading]=\"isLoading\"\n    [typeName]=\"entityTypeLabel\"\n    [hasAdd]=\"showNoItemsAdd\"\n    [readonly]=\"noItemsReadonly\"\n    [accessDenied]=\"accessDenied\"\n  ></lib-no-items>\n}\n\n@if (hoverTooltip) {\n  <div class=\"lt-tooltip\" [ngStyle]=\"{ left: hoverTooltip.left + 'px', top: hoverTooltip.top + 'px' }\">\n    <ng-container *ngComponentOutlet=\"hoverTooltip.component; inputs: hoverTooltip.inputs\"></ng-container>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.lt-columns-btn,.lt-autorefresh-btn,.lt-refresh-btn,.lt-filter-more-btn{display:inline-flex;align-items:center;gap:.4375rem;height:var(--lt-toolbar-height);padding:0 .75rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.lt-columns-btn svg,.lt-autorefresh-btn svg,.lt-refresh-btn svg,.lt-filter-more-btn svg{display:block}.lt-columns-btn:hover,.lt-autorefresh-btn:hover,.lt-refresh-btn:hover,.lt-filter-more-btn:hover,.is-open.lt-columns-btn,.is-open.lt-autorefresh-btn,.is-open.lt-refresh-btn,.is-open.lt-filter-more-btn,.is-on.lt-columns-btn,.is-on.lt-autorefresh-btn,.is-on.lt-refresh-btn,.is-on.lt-filter-more-btn{border-color:var(--lt-link);color:var(--lt-link)}.lt-columns-count,.lt-filter-more-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.125rem;height:1.125rem;padding:0 .3125rem;font-size:.6875rem;font-weight:700;color:var(--lt-control-bg);background:var(--lt-link);border-radius:.5625rem}.lt-container{display:flex;position:relative;height:calc(100% - var(--lt-container-reserve, 5.625rem));width:100%;flex-direction:column}.lt-scroll{position:relative;z-index:1;width:100%;flex:0 1 auto;min-height:0;overflow:auto;background-color:var(--lt-bg)}.lt-scroll .no-rows-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--lt-cell-text);font-size:.875rem;pointer-events:none}.lt-table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text)}.lt-head{position:sticky;top:0;z-index:10}.lt-head th{position:relative;box-sizing:border-box;height:2.75rem;padding:0 .3125rem 0 .625rem;text-align:left;vertical-align:middle;background-color:var(--lt-header-bg);border-bottom:1px solid var(--lt-header-underline);white-space:nowrap;-webkit-user-select:none;user-select:none}.lt-head th.lt-th{border-right:1px solid var(--lt-border)}.lt-head .lt-select-cell,.lt-head .lt-menu-cell{width:3.75rem;padding:0}.lt-resize{position:absolute;right:0;top:50%;transform:translateY(-50%);width:.625rem;height:.875rem;cursor:col-resize}.lt-resize:before,.lt-resize:after{content:\"\";position:absolute;top:0;height:100%;width:1px;background:transparent;transition:background .15s}.lt-resize:before{right:.25rem}.lt-resize:after{right:.125rem}.lt-resize:hover:before,.lt-resize:hover:after{background:var(--lt-icon)}.lt-head th:hover .lt-resize:before,.lt-head th:hover .lt-resize:after{background:var(--lt-border)}.lt-select-all{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:1rem;height:1rem;border:1px solid var(--lt-control-border, var(--lt-border));border-radius:.25rem;background:var(--lt-control-bg);background-repeat:no-repeat;background-position:center center;cursor:pointer;transition:border-color .12s,background-color .12s}.lt-select-all:hover{border-color:var(--lt-link)}.lt-select-all.checked{background-color:var(--lt-link);border-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.6 5.7 10.8 11.5 3.6'/%3E%3C/svg%3E\")}.lt-select-all.indeterminate{background-color:var(--lt-link);border-color:var(--lt-link);background-image:linear-gradient(#fff,#fff);background-size:.5rem .125rem}.lt-header-menu-trigger{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.25rem;color:var(--lt-icon);cursor:pointer}.lt-header-menu-trigger:hover{color:var(--lt-icon-active)}.lt-row-menu-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;font-size:1.25rem;line-height:1;color:var(--lt-icon);background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer;transition:color .15s,background .15s}.lt-row-menu-trigger:hover{color:var(--lt-icon-active);background:var(--lt-row-hover)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--lt-header-bg);color:var(--lt-header-text);box-shadow:var(--shadowLarge);padding:0 .625rem;display:flex;align-items:center;border-radius:var(--lt-radius)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.lt-row{height:var(--lt-row-height);background-color:var(--lt-row-bg);color:var(--lt-cell-text)}.lt-row td{border-bottom:1px solid var(--lt-border)}.lt-row.lt-row-odd{background-color:var(--lt-row-alt-bg)}.lt-row:hover{background-color:var(--lt-row-hover)}.lt-row.lt-row-selected{background-color:var(--lt-row-selected)}.lt-row.lt-row-selected:hover{background-color:var(--lt-row-hover)}.lt-row.row-invalid{background-color:var(--invalid)!important}.lt-row.row-copied{background-color:var(--copiedRow)!important}.lt-cell{height:var(--lt-row-height);padding:0 .625rem 0 1.25rem;text-align:left;vertical-align:middle;border:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text}.lt-cell-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:middle}.lt-cell.lt-cell-center{text-align:center}.lt-badge-cell .lt-cell-text{padding:.1875rem .5rem;font-size:.75rem;font-weight:600;line-height:1.2;color:var(--lt-cell-text);background:color-mix(in srgb,var(--lt-border) 45%,transparent);border:1px solid var(--lt-border);border-radius:999px}.lt-badge-cell .lt-cell-text:empty{display:none}.lt-select-cell,.lt-menu-cell{width:3.75rem;padding:0;text-align:center;vertical-align:middle;overflow:visible;position:relative}.lt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:var(--lt-toolbar-margin-y, 0) 0;padding:0 0 var(--lt-toolbar-pad-bottom, .625rem);min-height:var(--lt-toolbar-height);position:relative;z-index:30}.lt-toolbar-left{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;flex-wrap:nowrap}.lt-filter-zone{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;flex:0 1 auto;min-width:0}.lt-filters{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;min-width:0;flex:0 1 auto;overflow:hidden}.lt-filter-item{display:inline-flex;flex:0 0 auto}.lt-filter-more{position:relative;flex:0 0 auto}.lt-filter-more-btn{gap:.375rem;padding:0 .625rem}.lt-filter-more-btn .lt-filter-more-icon{display:inline-flex}.lt-filter-overflow{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;min-width:15rem;max-width:min(22rem,90vw);display:flex;flex-direction:column;gap:.5rem;padding:.625rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:lt-chooser-in .12s ease-out}.lt-filter-overflow-title{font-family:var(--lt-font);font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--groupText)}.lt-filter-overflow-row{display:flex}.lt-filter-overflow-row lib-list-filter-cell,.lt-filter-overflow-row .lt-filter-item{flex:1 1 auto;min-width:0}.lt-toolbar-right{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}.lt-divider{flex:0 0 auto;width:1px;height:1.5rem;background:var(--lt-border)}.lt-search{position:relative;display:flex;align-items:center;width:18rem;max-width:40vw;flex:0 1 18rem}.lt-search-icon{position:absolute;left:.625rem;display:block;color:var(--lt-icon);pointer-events:none}.lt-search-input{width:100%;height:var(--lt-toolbar-height);padding:0 .75rem 0 1.75rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);outline:none;transition:border-color .15s,box-shadow .15s}.lt-search-input::placeholder{color:var(--placeholder)}.lt-search-input:focus{border-color:var(--lt-link);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--lt-link) 18%,transparent)}.lt-count{font-size:.8125rem;color:var(--groupText);white-space:nowrap}.lt-count .lt-count-of{color:var(--groupText)}.lt-pager{display:flex;align-items:center;gap:.25rem}.lt-page-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);color:var(--lt-icon);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;font-size:.9375rem;transition:border-color .15s,color .15s}.lt-page-btn:not(:disabled):hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-btn:disabled{opacity:.4;cursor:default}.lt-refresh-btn{padding:0;width:var(--lt-toolbar-height);justify-content:center}.lt-refresh-btn:disabled{opacity:.5;cursor:default;border-color:var(--lt-border);color:var(--lt-cell-text)}.lt-columns{position:relative;flex:0 0 auto}.lt-column-chooser{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;width:15rem;max-height:calc(100vh - 9rem);display:flex;flex-direction:column;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);overflow:hidden;animation:lt-chooser-in .12s ease-out}@keyframes lt-chooser-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.lt-chooser-header{flex:0 0 auto;display:flex;flex-direction:column;padding:.625rem .75rem .5rem;border-bottom:1px solid var(--lt-border)}.lt-chooser-title{font-size:.8125rem;font-weight:700;color:var(--lt-cell-text)}.lt-chooser-subtitle{font-size:.6875rem;color:var(--groupText)}.lt-chooser-list{flex:1 1 auto;list-style:none;margin:0;padding:.375rem .5rem;min-height:0;overflow-y:auto}.lt-chooser-row{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:.5rem;border-radius:var(--lt-radius);background:var(--lt-control-bg)}.lt-chooser-row:hover{background:var(--lt-row-hover)}.lt-chooser-row:hover .lt-chooser-handle{opacity:1}.lt-chooser-toggle{display:flex;align-items:center;gap:.625rem;flex:1 1 auto;min-width:0;padding:0;background:transparent;border:none;font:inherit;font-size:.875rem;color:var(--lt-cell-text);text-align:left;cursor:pointer}.lt-chooser-toggle:disabled{cursor:default;opacity:.5}.lt-chooser-box{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1rem;height:1rem;border:.09375rem solid var(--lt-control-border, var(--lt-border));border-radius:.25rem;color:var(--lt-control-bg);background:var(--lt-control-bg);transition:background .12s,border-color .12s}.lt-chooser-toggle.checked .lt-chooser-box{background:var(--lt-link);border-color:var(--lt-link)}.lt-chooser-toggle:not(:disabled):hover .lt-chooser-box{border-color:var(--lt-link)}.lt-chooser-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lt-chooser-default-tag{flex:0 0 auto;margin-left:.375rem;font-size:.6875rem;font-weight:400;font-style:italic;color:var(--groupText);white-space:nowrap}.lt-chooser-handle{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--lt-icon);cursor:grab;padding-left:.5rem;-webkit-user-select:none;user-select:none}.lt-chooser-handle:active{cursor:grabbing}.lt-chooser-footer{flex:0 0 auto;padding:.5rem .75rem;border-top:1px solid var(--lt-border)}.lt-chooser-reset{width:100%;height:1.875rem;font-size:.75rem;font-weight:600;color:var(--lt-link);background:transparent;border:1px solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer}.lt-chooser-reset:disabled{color:var(--groupText);cursor:default;opacity:.6}.lt-chooser-reset:not(:disabled):hover{border-color:var(--lt-link)}.lt-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.625rem .125rem 0;font-family:var(--lt-font);font-size:.8125rem;color:var(--groupText)}.lt-footer-count{white-space:nowrap}.lt-footer-count span{color:var(--lt-cell-text);font-weight:600}.lt-footer-controls{display:flex;align-items:center;gap:1.25rem;flex-wrap:nowrap}.lt-rpp{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}.lt-rpp-label{text-transform:none;font-weight:400;color:var(--groupText)}.lt-rpp-select{width:auto;min-width:4rem;height:var(--lt-toolbar-height);padding:0 1.75rem 0 .625rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background-color:var(--lt-control-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .5rem center;border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);appearance:none;-webkit-appearance:none;cursor:pointer}.lt-rpp-select:focus{outline:none;border-color:var(--lt-link)}.lt-page-num{display:inline-flex;align-items:center;justify-content:center;min-width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);padding:0 .5rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;transition:border-color .15s,color .15s,background .15s}.lt-page-num:hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-num.is-current{color:#fff;background:var(--lt-link);border-color:var(--lt-link);cursor:default}.lt-page-gap{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;color:var(--groupText)}.lt-tooltip{position:fixed;z-index:1100;pointer-events:none;animation:lt-tooltip-in .12s ease-out}@keyframes lt-tooltip-in{0%{opacity:0;transform:translateY(-.1875rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: ListMenuComponent, selector: "lib-list-menu", inputs: ["open", "items", "left", "top", "menuId"], outputs: ["itemClick", "closed"] }, { kind: "component", type: SelectCellComponent, selector: "lib-select-cell", inputs: ["row", "toggleItem"] }, { kind: "component", type: ListHeaderCellComponent, selector: "lib-list-header-cell", inputs: ["column", "sortDir"], outputs: ["sortChanged", "hideColumn"] }, { kind: "component", type: ListFilterCellComponent, selector: "lib-list-filter-cell", inputs: ["column"] }, { kind: "component", type: NoItemsComponent, selector: "lib-no-items", inputs: ["image", "typeName", "isEmpty", "hasAdd", "hiddenResults", "isLoading", "readonly", "accessDenied"], outputs: ["clickEmit", "refresh"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ListTableComponent, isStandalone: false, selector: "lib-list-table", inputs: { tableId: "tableId", columns: "columns", rowData: "rowData", isLoading: "isLoading", options: "options", hasNext: "hasNext", hasPrev: "hasPrev", startCount: "startCount", endCount: "endCount", totalCount: "totalCount", filterApplied: "filterApplied", menuItems: "menuItems", headerActions: "headerActions", noItemsImage: "noItemsImage", showNoItemsAdd: "showNoItemsAdd", noItemsReadonly: "noItemsReadonly", accessDenied: "accessDenied", entityTypeName: "entityTypeName", filterName: "filterName", filterColumn: "filterColumn", initialPageSize: "initialPageSize" }, outputs: { actionRequested: "actionRequested", tableReady: "tableReady" }, providers: [ListTableService], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "filterZone", first: true, predicate: ["filterZone"], descendants: true }, { propertyName: "filtersRow", first: true, predicate: ["filtersRow"], descendants: true }], ngImport: i0, template: "@if (showTable && !accessDenied) {\n  <div class=\"lt-container\">\n    <div class=\"lt-toolbar\">\n      <div class=\"lt-toolbar-left\">\n        <div class=\"lt-search\">\n          <svg class=\"lt-search-icon\" viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <circle cx=\"7\" cy=\"7\" r=\"4.3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n            <line x1=\"10.4\" y1=\"10.4\" x2=\"14.6\" y2=\"14.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n          </svg>\n          <input\n            class=\"lt-search-input\"\n            id=\"SearchFilter\"\n            type=\"text\"\n            [placeholder]=\"'Search ' + (entityTypeLabel || 'items')\"\n            [(ngModel)]=\"searchString\"\n            (keyup)=\"onSearchInput()\"\n          />\n        </div>\n        @if (filterableColumns.length) {\n          <div class=\"lt-filter-zone\" #filterZone>\n            <div class=\"lt-filters\" #filtersRow>\n              @for (col of visibleFilterColumns; track col.key) {\n                <span class=\"lt-filter-item\" [attr.data-filter-key]=\"col.key\">\n                  <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                </span>\n              }\n            </div>\n            @if (overflowFilterColumns.length) {\n              <div class=\"lt-filter-more\">\n                <button\n                  type=\"button\"\n                  class=\"lt-filter-more-btn\"\n                  [class.is-on]=\"hiddenActiveCount > 0\"\n                  [class.is-open]=\"showFilterOverflow\"\n                  (click)=\"toggleFilterOverflow($event)\"\n                  aria-haspopup=\"true\"\n                  [attr.aria-expanded]=\"showFilterOverflow\"\n                  [attr.aria-label]=\"overflowFilterColumns.length + ' more filters'\"\n                  id=\"FilterOverflowButton\"\n                >\n                  <span class=\"lt-filter-more-icon\" aria-hidden=\"true\">\n                    <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\"><path fill=\"currentColor\" d=\"M2 3h12l-4.6 5.6v4l-2.8 1.4v-5.4z\"/></svg>\n                  </span>\n                  <span class=\"lt-filter-more-label\">More</span>\n                  <span class=\"lt-filter-more-count\">{{ overflowFilterColumns.length }}</span>\n                </button>\n                @if (showFilterOverflow) {\n                  <div class=\"lt-filter-overflow\" (clickOutside)=\"closeFilterOverflow($event)\">\n                    <div class=\"lt-filter-overflow-title\">Filters</div>\n                    @for (col of overflowFilterColumns; track col.key) {\n                      <div class=\"lt-filter-overflow-row\" [class.is-active]=\"isFilterActive(col)\">\n                        <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"lt-toolbar-right\">\n        <ng-template #refreshIcon>\n          <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" d=\"M13.4 8a5.4 5.4 0 1 1-1.5-3.8\"/>\n            <path fill=\"currentColor\" d=\"M13.9 2.1l.5 3.2-3.2-.5z\"/>\n          </svg>\n        </ng-template>\n        <button\n          type=\"button\"\n          class=\"lt-refresh-btn\"\n          (click)=\"refresh()\"\n          [disabled]=\"filtering\"\n          aria-label=\"Refresh\"\n          title=\"Refresh\"\n          id=\"RefreshTableButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n        </button>\n        <button\n          type=\"button\"\n          class=\"lt-autorefresh-btn\"\n          [class.is-on]=\"autoRefresh\"\n          (click)=\"toggleAutoRefresh()\"\n          [attr.aria-pressed]=\"autoRefresh\"\n          id=\"AutoRefreshButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n          <span>Auto-refresh: {{ autoRefresh ? 'On' : 'Off' }}</span>\n        </button>\n        <div class=\"lt-columns\">\n          <button\n            type=\"button\"\n            class=\"lt-columns-btn\"\n            [class.is-on]=\"hiddenColumnCount > 0\"\n            [class.is-open]=\"showColumnChooser\"\n            (click)=\"toggleColumnChooser($event)\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"showColumnChooser\"\n            id=\"ColumnChooserButton\"\n          >\n            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n              <path fill=\"currentColor\" d=\"M2 3.5h9v1.4H2zM2 7.3h6v1.4H2zM2 11.1h11v1.4H2z\"/>\n              <circle cx=\"13\" cy=\"4.2\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"10\" cy=\"8\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"14.4\" cy=\"11.8\" r=\"1.7\" fill=\"currentColor\"/>\n            </svg>\n            <span>Columns</span>\n            @if (hiddenColumnCount > 0) {\n              <span class=\"lt-columns-count\">{{ hiddenColumnCount }}</span>\n            }\n          </button>\n          @if (showColumnChooser) {\n            <div class=\"lt-column-chooser\" (clickOutside)=\"closeColumnChooser()\">\n              <div class=\"lt-chooser-header\">\n                <span class=\"lt-chooser-title\">Columns</span>\n                <span class=\"lt-chooser-subtitle\">Customize order and visibility</span>\n              </div>\n              <ul class=\"lt-chooser-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"chooserReorder($event)\">\n                @for (col of allColumns; track col.key) {\n                  <li class=\"lt-chooser-row\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"col.reorderable === false\">\n                    <button\n                      type=\"button\"\n                      class=\"lt-chooser-toggle\"\n                      [class.checked]=\"!col.hidden\"\n                      [disabled]=\"col.hideable === false\"\n                      (click)=\"toggleColumnVisible(col)\"\n                      [attr.aria-pressed]=\"!col.hidden\"\n                    >\n                      <span class=\"lt-chooser-box\" aria-hidden=\"true\">\n                        @if (!col.hidden) {\n                          <svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\">\n                            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2 6.3 4.6 9 10 3\"/>\n                          </svg>\n                        }\n                      </span>\n                      <span class=\"lt-chooser-text\">{{ col.label }}</span>\n                      @if (isDefaultHidden(col)) {\n                        <span class=\"lt-chooser-default-tag\">hidden by default</span>\n                      }\n                    </button>\n                    @if (col.reorderable !== false) {\n                      <span class=\"lt-chooser-handle\" cdkDragHandle aria-label=\"Drag to reorder\" title=\"Drag to reorder\">\n                        <svg viewBox=\"0 0 10 16\" width=\"10\" height=\"15\" fill=\"currentColor\" aria-hidden=\"true\">\n                          <circle cx=\"3\" cy=\"3\" r=\"1.25\"/><circle cx=\"7\" cy=\"3\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"8\" r=\"1.25\"/><circle cx=\"7\" cy=\"8\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"13\" r=\"1.25\"/><circle cx=\"7\" cy=\"13\" r=\"1.25\"/>\n                        </svg>\n                      </span>\n                    }\n                  </li>\n                }\n              </ul>\n              <div class=\"lt-chooser-footer\">\n                <button\n                  type=\"button\"\n                  class=\"lt-chooser-reset\"\n                  [disabled]=\"columnsAtDefault\"\n                  (click)=\"resetTableColumns()\"\n                  id=\"ResetColumnsButton\"\n                >\n                  Reset to default\n                </button>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <div class=\"lt-scroll\" id=\"ItemTable\">\n      <table class=\"lt-table\">\n        <colgroup>\n          @if (!options.noSelect) { <col class=\"lt-col-select\" /> }\n          @for (col of visibleColumns; track trackCol($index, col)) {\n            <col [style.width]=\"colWidth(col)\" />\n          }\n          @if (!options.noMenu) { <col class=\"lt-col-menu\" /> }\n        </colgroup>\n        <thead class=\"lt-head\">\n          <tr cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"onReorder($event)\">\n            @if (!options.noSelect) {\n              <th class=\"lt-select-cell\">\n                <div\n                  class=\"lt-select-all\"\n                  [class.checked]=\"allToggled\"\n                  [class.indeterminate]=\"someSelected\"\n                  (click)=\"toggleAll()\"\n                  id=\"SelectAllRows\"\n                ></div>\n              </th>\n            }\n            @for (col of visibleColumns; track trackCol($index, col)) {\n              <th\n                cdkDrag\n                [cdkDragDisabled]=\"col.reorderable === false\"\n                class=\"lt-th\"\n                [ngClass]=\"col.cellClass\"\n                id=\"Header_{{ col.key }}\"\n              >\n                <lib-list-header-cell\n                  [column]=\"col\"\n                  [sortDir]=\"col.sortDir\"\n                  (sortChanged)=\"onHeaderSort($event)\"\n                  (hideColumn)=\"hideColumn($event)\"\n                ></lib-list-header-cell>\n                @if (col.resizable !== false) {\n                  <span class=\"lt-resize\" (pointerdown)=\"startResize(col, $event)\"></span>\n                }\n              </th>\n            }\n            @if (!options.noMenu) {\n              <th class=\"lt-menu-cell\">\n                <div class=\"lt-header-menu-trigger\" (click)=\"openHeaderActionMenu($event)\" id=\"ColumnMenuHeader\">\n                  &#8942;\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of rowData; track trackRow($index, row); let i = $index) {\n            <tr\n              class=\"lt-row\"\n              [class.lt-row-odd]=\"i % 2 === 1\"\n              [class.lt-row-selected]=\"row.selected\"\n              [class.row-invalid]=\"row.invalid\"\n              [class.row-copied]=\"row.copied\"\n            >\n              @if (!options.noSelect) {\n                <td class=\"lt-select-cell\">\n                  <lib-select-cell [row]=\"row\" [toggleItem]=\"toggleItem\"></lib-select-cell>\n                </td>\n              }\n              @for (col of visibleColumns; track trackCol($index, col)) {\n                <td\n                  class=\"lt-cell\"\n                  [ngClass]=\"cellClass(col)\"\n                  (click)=\"onCellClick(col, row, i)\"\n                  (mouseenter)=\"onCellHover(col, row, i, $event)\"\n                  (mouseleave)=\"onCellLeave()\"\n                >\n                  @switch (renderMode(col)) {\n                    @case ('component') {\n                      <ng-container *ngComponentOutlet=\"col.cell; inputs: cellInputs(col, row, i)\"></ng-container>\n                    }\n                    @case ('html') {\n                      <span class=\"lt-cell-html\" [innerHTML]=\"cellHtml(col, row, i)\"></span>\n                    }\n                    @default {\n                      <span class=\"lt-cell-text\">{{ cellText(col, row, i) }}</span>\n                    }\n                  }\n                </td>\n              }\n              @if (!options.noMenu) {\n                <td class=\"lt-menu-cell\">\n                  @if (row.actionList?.length) {\n                    <button\n                      type=\"button\"\n                      class=\"lt-row-menu-trigger\"\n                      (click)=\"$event.stopPropagation(); openActionMenu($event, row)\"\n                      attr.id=\"RowMenu_{{ row.id }}\"\n                      aria-label=\"Row actions\"\n                    >&#8942;</button>\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      @if (!isLoading && filterApplied && (!rowData || rowData.length === 0)) {\n        <div class=\"no-rows-message\">No Rows To Show</div>\n      }\n    </div>\n\n    <div class=\"lt-footer\">\n      <div class=\"lt-footer-count\">\n        Showing <span id=\"Start\">{{ startCount }}</span>&#8211;<span id=\"End\">{{ endCount }}</span>\n        of <span id=\"Total\">{{ totalCount }}</span>\n      </div>\n      <div class=\"lt-footer-controls\">\n        <div class=\"lt-rpp\">\n          <span class=\"lt-rpp-label\">Rows per page</span>\n          <select\n            class=\"lt-rpp-select\"\n            [disabled]=\"filtering\"\n            [value]=\"pageSize\"\n            (change)=\"onPageSizeChange(+$any($event.target).value)\"\n            aria-label=\"Rows per page\"\n          >\n            @for (opt of pageSizeOptions; track opt) {\n              <option [value]=\"opt\">{{ opt }}</option>\n            }\n          </select>\n        </div>\n        <div class=\"lt-pager\">\n          <button type=\"button\" class=\"lt-page-btn icon-prev\" [disabled]=\"prevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\"></button>\n          @if (!cursorPager) {\n            @for (p of pageWindow; track $index) {\n              @if (p === 0) {\n                <span class=\"lt-page-gap\">&#8230;</span>\n              } @else {\n                <button\n                  type=\"button\"\n                  class=\"lt-page-num\"\n                  [class.is-current]=\"p === currentPageNum\"\n                  (click)=\"goToPage(p)\"\n                >{{ p }}</button>\n              }\n            }\n          }\n          <button type=\"button\" class=\"lt-page-btn icon-next\" [disabled]=\"nextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\"></button>\n        </div>\n      </div>\n    </div>\n\n    <!-- header action menu -->\n    <lib-list-menu\n      menuId=\"HeaderActionMenu\"\n      [open]=\"openHeaderMenu\"\n      [items]=\"headerMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onHeaderMenuClick($event)\"\n      (closed)=\"closeHeaderActionMenu()\"\n    ></lib-list-menu>\n\n    <!-- row action menu -->\n    <lib-list-menu\n      menuId=\"RowActionMenu\"\n      [open]=\"openMenu\"\n      [items]=\"rowMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onRowMenuClick($event)\"\n      (closed)=\"closeActionMenu()\"\n    ></lib-list-menu>\n  </div>\n} @else {\n  <lib-no-items\n    (clickEmit)=\"openCreate()\"\n    [image]=\"noItemsImage\"\n    [isEmpty]=\"!rowData || rowData.length === 0\"\n    [isLoading]=\"isLoading\"\n    [typeName]=\"entityTypeLabel\"\n    [hasAdd]=\"showNoItemsAdd\"\n    [readonly]=\"noItemsReadonly\"\n    [accessDenied]=\"accessDenied\"\n  ></lib-no-items>\n}\n\n@if (hoverTooltip) {\n  <div class=\"lt-tooltip\" [ngStyle]=\"{ left: hoverTooltip.left + 'px', top: hoverTooltip.top + 'px' }\">\n    <ng-container *ngComponentOutlet=\"hoverTooltip.component; inputs: hoverTooltip.inputs\"></ng-container>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.lt-columns-btn,.lt-autorefresh-btn,.lt-refresh-btn,.lt-filter-more-btn{display:inline-flex;align-items:center;gap:.4375rem;height:var(--lt-toolbar-height);padding:0 .75rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.lt-columns-btn svg,.lt-autorefresh-btn svg,.lt-refresh-btn svg,.lt-filter-more-btn svg{display:block}.lt-columns-btn:hover,.lt-autorefresh-btn:hover,.lt-refresh-btn:hover,.lt-filter-more-btn:hover,.is-open.lt-columns-btn,.is-open.lt-autorefresh-btn,.is-open.lt-refresh-btn,.is-open.lt-filter-more-btn,.is-on.lt-columns-btn,.is-on.lt-autorefresh-btn,.is-on.lt-refresh-btn,.is-on.lt-filter-more-btn{border-color:var(--lt-link);color:var(--lt-link)}.lt-columns-count,.lt-filter-more-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.125rem;height:1.125rem;padding:0 .3125rem;font-size:.6875rem;font-weight:700;color:var(--lt-control-bg);background:var(--lt-link);border-radius:.5625rem}.lt-container{display:flex;position:relative;height:calc(100% - var(--lt-container-reserve, 5.625rem));width:100%;flex-direction:column}.lt-scroll{position:relative;z-index:1;width:100%;flex:0 1 auto;min-height:0;overflow:auto;background-color:var(--lt-bg)}.lt-scroll .no-rows-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--lt-cell-text);font-size:.875rem;pointer-events:none}.lt-table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text)}.lt-head{position:sticky;top:0;z-index:10}.lt-head th{position:relative;box-sizing:border-box;height:2.75rem;padding:0 .3125rem 0 .625rem;text-align:left;vertical-align:middle;background-color:var(--lt-header-bg);border-bottom:1px solid var(--lt-header-underline);white-space:nowrap;-webkit-user-select:none;user-select:none}.lt-head th.lt-th{border-right:1px solid var(--lt-border)}.lt-head .lt-select-cell,.lt-head .lt-menu-cell{width:3.75rem;padding:0}.lt-resize{position:absolute;right:0;top:50%;transform:translateY(-50%);width:.625rem;height:.875rem;cursor:col-resize}.lt-resize:before,.lt-resize:after{content:\"\";position:absolute;top:0;height:100%;width:1px;background:transparent;transition:background .15s}.lt-resize:before{right:.25rem}.lt-resize:after{right:.125rem}.lt-resize:hover:before,.lt-resize:hover:after{background:var(--lt-icon)}.lt-head th:hover .lt-resize:before,.lt-head th:hover .lt-resize:after{background:var(--lt-border)}.lt-select-all{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:1rem;height:1rem;border:1px solid var(--lt-control-border, var(--lt-border));border-radius:.25rem;background:var(--lt-control-bg);background-repeat:no-repeat;background-position:center center;cursor:pointer;transition:border-color .12s,background-color .12s}.lt-select-all:hover{border-color:var(--lt-link)}.lt-select-all.checked{background-color:var(--lt-link);border-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.6 5.7 10.8 11.5 3.6'/%3E%3C/svg%3E\")}.lt-select-all.indeterminate{background-color:var(--lt-link);border-color:var(--lt-link);background-image:linear-gradient(#fff,#fff);background-size:.5rem .125rem}.lt-header-menu-trigger{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.25rem;color:var(--lt-icon);cursor:pointer}.lt-header-menu-trigger:hover{color:var(--lt-icon-active)}.lt-row-menu-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;font-size:1.25rem;line-height:1;color:var(--lt-icon);background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer;transition:color .15s,background .15s}.lt-row-menu-trigger:hover{color:var(--lt-icon-active);background:var(--lt-row-hover)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--lt-header-bg);color:var(--lt-header-text);box-shadow:var(--shadowLarge);padding:0 .625rem;display:flex;align-items:center;border-radius:var(--lt-radius)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.lt-row{height:var(--lt-row-height);background-color:var(--lt-row-bg);color:var(--lt-cell-text)}.lt-row td{border-bottom:1px solid var(--lt-border)}.lt-row.lt-row-odd{background-color:var(--lt-row-alt-bg)}.lt-row:hover{background-color:var(--lt-row-hover)}.lt-row.lt-row-selected{background-color:var(--lt-row-selected)}.lt-row.lt-row-selected:hover{background-color:var(--lt-row-hover)}.lt-row.row-invalid{background-color:var(--invalid)!important}.lt-row.row-copied{background-color:var(--copiedRow)!important}.lt-cell{height:var(--lt-row-height);padding:0 .625rem 0 1.25rem;text-align:left;vertical-align:middle;border:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text}.lt-cell-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:middle}.lt-cell.lt-cell-center{text-align:center}.lt-badge-cell .lt-cell-text{padding:.1875rem .5rem;font-size:.75rem;font-weight:600;line-height:1.2;color:var(--lt-cell-text);background:color-mix(in srgb,var(--lt-border) 45%,transparent);border:1px solid var(--lt-border);border-radius:999px}.lt-badge-cell .lt-cell-text:empty{display:none}.lt-select-cell,.lt-menu-cell{width:3.75rem;padding:0;text-align:center;vertical-align:middle;overflow:visible;position:relative}.lt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:var(--lt-toolbar-margin-y, 0) 0;padding:0 0 var(--lt-toolbar-pad-bottom, .625rem);min-height:var(--lt-toolbar-height);position:relative;z-index:30}.lt-toolbar-left{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;flex-wrap:nowrap}.lt-filter-zone{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;flex:0 1 auto;min-width:0}.lt-filters{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;min-width:0;flex:0 1 auto;overflow:hidden}.lt-filter-item{display:inline-flex;flex:0 0 auto}.lt-filter-more{position:relative;flex:0 0 auto}.lt-filter-more-btn{gap:.375rem;padding:0 .625rem}.lt-filter-more-btn .lt-filter-more-icon{display:inline-flex}.lt-filter-overflow{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;min-width:15rem;max-width:min(22rem,90vw);display:flex;flex-direction:column;gap:.5rem;padding:.625rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:lt-chooser-in .12s ease-out}.lt-filter-overflow-title{font-family:var(--lt-font);font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--groupText)}.lt-filter-overflow-row{display:flex}.lt-filter-overflow-row lib-list-filter-cell,.lt-filter-overflow-row .lt-filter-item{flex:1 1 auto;min-width:0}.lt-toolbar-right{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}.lt-divider{flex:0 0 auto;width:1px;height:1.5rem;background:var(--lt-border)}.lt-search{position:relative;display:flex;align-items:center;width:18rem;max-width:40vw;flex:0 1 18rem}.lt-search-icon{position:absolute;left:.625rem;display:block;color:var(--lt-icon);pointer-events:none}.lt-search-input{width:100%;height:var(--lt-toolbar-height);padding:0 .75rem 0 1.75rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);outline:none;transition:border-color .15s,box-shadow .15s}.lt-search-input::placeholder{color:var(--placeholder)}.lt-search-input:focus{border-color:var(--lt-link);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--lt-link) 18%,transparent)}.lt-count{font-size:.8125rem;color:var(--groupText);white-space:nowrap}.lt-count .lt-count-of{color:var(--groupText)}.lt-pager{display:flex;align-items:center;gap:.25rem}.lt-page-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);color:var(--lt-icon);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;font-size:.9375rem;transition:border-color .15s,color .15s}.lt-page-btn:not(:disabled):hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-btn:disabled{opacity:.4;cursor:default}.lt-refresh-btn{padding:0;width:var(--lt-toolbar-height);justify-content:center}.lt-refresh-btn:disabled{opacity:.5;cursor:default;border-color:var(--lt-border);color:var(--lt-cell-text)}.lt-columns{position:relative;flex:0 0 auto}.lt-column-chooser{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;width:15rem;max-height:calc(100vh - 9rem);display:flex;flex-direction:column;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);overflow:hidden;animation:lt-chooser-in .12s ease-out}@keyframes lt-chooser-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.lt-chooser-header{flex:0 0 auto;display:flex;flex-direction:column;padding:.625rem .75rem .5rem;border-bottom:1px solid var(--lt-border)}.lt-chooser-title{font-size:.8125rem;font-weight:700;color:var(--lt-cell-text)}.lt-chooser-subtitle{font-size:.6875rem;color:var(--groupText)}.lt-chooser-list{flex:1 1 auto;list-style:none;margin:0;padding:.375rem .5rem;min-height:0;overflow-y:auto}.lt-chooser-row{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:.5rem;border-radius:var(--lt-radius);background:var(--lt-control-bg)}.lt-chooser-row:hover{background:var(--lt-row-hover)}.lt-chooser-row:hover .lt-chooser-handle{opacity:1}.lt-chooser-toggle{display:flex;align-items:center;gap:.625rem;flex:1 1 auto;min-width:0;padding:0;background:transparent;border:none;font:inherit;font-size:.875rem;color:var(--lt-cell-text);text-align:left;cursor:pointer}.lt-chooser-toggle:disabled{cursor:default;opacity:.5}.lt-chooser-box{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1rem;height:1rem;border:.09375rem solid var(--lt-control-border, var(--lt-border));border-radius:.25rem;color:var(--lt-control-bg);background:var(--lt-control-bg);transition:background .12s,border-color .12s}.lt-chooser-toggle.checked .lt-chooser-box{background:var(--lt-link);border-color:var(--lt-link)}.lt-chooser-toggle:not(:disabled):hover .lt-chooser-box{border-color:var(--lt-link)}.lt-chooser-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lt-chooser-default-tag{flex:0 0 auto;margin-left:.375rem;font-size:.6875rem;font-weight:400;font-style:italic;color:var(--groupText);white-space:nowrap}.lt-chooser-handle{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--lt-icon);cursor:grab;padding-left:.5rem;-webkit-user-select:none;user-select:none}.lt-chooser-handle:active{cursor:grabbing}.lt-chooser-footer{flex:0 0 auto;padding:.5rem .75rem;border-top:1px solid var(--lt-border)}.lt-chooser-reset{width:100%;height:1.875rem;font-size:.75rem;font-weight:600;color:var(--lt-link);background:transparent;border:1px solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer}.lt-chooser-reset:disabled{color:var(--groupText);cursor:default;opacity:.6}.lt-chooser-reset:not(:disabled):hover{border-color:var(--lt-link)}.lt-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.625rem .125rem 0;font-family:var(--lt-font);font-size:.8125rem;color:var(--groupText)}.lt-footer-count{white-space:nowrap}.lt-footer-count span{color:var(--lt-cell-text);font-weight:600}.lt-footer-controls{display:flex;align-items:center;gap:1.25rem;flex-wrap:nowrap}.lt-rpp{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}.lt-rpp-label{text-transform:none;font-weight:400;color:var(--groupText)}.lt-rpp-select{width:auto;min-width:4rem;height:var(--lt-toolbar-height);padding:0 1.75rem 0 .625rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background-color:var(--lt-control-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .5rem center;border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);appearance:none;-webkit-appearance:none;cursor:pointer}.lt-rpp-select:focus{outline:none;border-color:var(--lt-link)}.lt-page-num{display:inline-flex;align-items:center;justify-content:center;min-width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);padding:0 .5rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;transition:border-color .15s,color .15s,background .15s}.lt-page-num:hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-num.is-current{color:#fff;background:var(--lt-link);border-color:var(--lt-link);cursor:default}.lt-page-gap{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;color:var(--groupText)}.lt-tooltip{position:fixed;z-index:1100;pointer-events:none;animation:lt-tooltip-in .12s ease-out}@keyframes lt-tooltip-in{0%{opacity:0;transform:translateY(-.1875rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3$1.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "component", type: ListMenuComponent, selector: "lib-list-menu", inputs: ["open", "items", "left", "top", "menuId"], outputs: ["itemClick", "closed"] }, { kind: "component", type: SelectCellComponent, selector: "lib-select-cell", inputs: ["row", "toggleItem"] }, { kind: "component", type: ListHeaderCellComponent, selector: "lib-list-header-cell", inputs: ["column", "sortDir"], outputs: ["sortChanged", "hideColumn"] }, { kind: "component", type: ListFilterCellComponent, selector: "lib-list-filter-cell", inputs: ["column"] }, { kind: "component", type: NoItemsComponent, selector: "lib-no-items", inputs: ["image", "typeName", "isEmpty", "hasAdd", "hiddenResults", "isLoading", "readonly", "accessDenied"], outputs: ["clickEmit", "refresh"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-list-table', standalone: false, providers: [ListTableService], template: "@if (showTable && !accessDenied) {\n  <div class=\"lt-container\">\n    <div class=\"lt-toolbar\">\n      <div class=\"lt-toolbar-left\">\n        <div class=\"lt-search\">\n          <svg class=\"lt-search-icon\" viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <circle cx=\"7\" cy=\"7\" r=\"4.3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n            <line x1=\"10.4\" y1=\"10.4\" x2=\"14.6\" y2=\"14.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n          </svg>\n          <input\n            class=\"lt-search-input\"\n            id=\"SearchFilter\"\n            type=\"text\"\n            [placeholder]=\"'Search ' + (entityTypeLabel || 'items')\"\n            [(ngModel)]=\"searchString\"\n            (keyup)=\"onSearchInput()\"\n          />\n        </div>\n        @if (filterableColumns.length) {\n          <div class=\"lt-filter-zone\" #filterZone>\n            <div class=\"lt-filters\" #filtersRow>\n              @for (col of visibleFilterColumns; track col.key) {\n                <span class=\"lt-filter-item\" [attr.data-filter-key]=\"col.key\">\n                  <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                </span>\n              }\n            </div>\n            @if (overflowFilterColumns.length) {\n              <div class=\"lt-filter-more\">\n                <button\n                  type=\"button\"\n                  class=\"lt-filter-more-btn\"\n                  [class.is-on]=\"hiddenActiveCount > 0\"\n                  [class.is-open]=\"showFilterOverflow\"\n                  (click)=\"toggleFilterOverflow($event)\"\n                  aria-haspopup=\"true\"\n                  [attr.aria-expanded]=\"showFilterOverflow\"\n                  [attr.aria-label]=\"overflowFilterColumns.length + ' more filters'\"\n                  id=\"FilterOverflowButton\"\n                >\n                  <span class=\"lt-filter-more-icon\" aria-hidden=\"true\">\n                    <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\"><path fill=\"currentColor\" d=\"M2 3h12l-4.6 5.6v4l-2.8 1.4v-5.4z\"/></svg>\n                  </span>\n                  <span class=\"lt-filter-more-label\">More</span>\n                  <span class=\"lt-filter-more-count\">{{ overflowFilterColumns.length }}</span>\n                </button>\n                @if (showFilterOverflow) {\n                  <div class=\"lt-filter-overflow\" (clickOutside)=\"closeFilterOverflow($event)\">\n                    <div class=\"lt-filter-overflow-title\">Filters</div>\n                    @for (col of overflowFilterColumns; track col.key) {\n                      <div class=\"lt-filter-overflow-row\" [class.is-active]=\"isFilterActive(col)\">\n                        <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"lt-toolbar-right\">\n        <ng-template #refreshIcon>\n          <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" d=\"M13.4 8a5.4 5.4 0 1 1-1.5-3.8\"/>\n            <path fill=\"currentColor\" d=\"M13.9 2.1l.5 3.2-3.2-.5z\"/>\n          </svg>\n        </ng-template>\n        <button\n          type=\"button\"\n          class=\"lt-refresh-btn\"\n          (click)=\"refresh()\"\n          [disabled]=\"filtering\"\n          aria-label=\"Refresh\"\n          title=\"Refresh\"\n          id=\"RefreshTableButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n        </button>\n        <button\n          type=\"button\"\n          class=\"lt-autorefresh-btn\"\n          [class.is-on]=\"autoRefresh\"\n          (click)=\"toggleAutoRefresh()\"\n          [attr.aria-pressed]=\"autoRefresh\"\n          id=\"AutoRefreshButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n          <span>Auto-refresh: {{ autoRefresh ? 'On' : 'Off' }}</span>\n        </button>\n        <div class=\"lt-columns\">\n          <button\n            type=\"button\"\n            class=\"lt-columns-btn\"\n            [class.is-on]=\"hiddenColumnCount > 0\"\n            [class.is-open]=\"showColumnChooser\"\n            (click)=\"toggleColumnChooser($event)\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"showColumnChooser\"\n            id=\"ColumnChooserButton\"\n          >\n            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n              <path fill=\"currentColor\" d=\"M2 3.5h9v1.4H2zM2 7.3h6v1.4H2zM2 11.1h11v1.4H2z\"/>\n              <circle cx=\"13\" cy=\"4.2\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"10\" cy=\"8\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"14.4\" cy=\"11.8\" r=\"1.7\" fill=\"currentColor\"/>\n            </svg>\n            <span>Columns</span>\n            @if (hiddenColumnCount > 0) {\n              <span class=\"lt-columns-count\">{{ hiddenColumnCount }}</span>\n            }\n          </button>\n          @if (showColumnChooser) {\n            <div class=\"lt-column-chooser\" (clickOutside)=\"closeColumnChooser()\">\n              <div class=\"lt-chooser-header\">\n                <span class=\"lt-chooser-title\">Columns</span>\n                <span class=\"lt-chooser-subtitle\">Customize order and visibility</span>\n              </div>\n              <ul class=\"lt-chooser-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"chooserReorder($event)\">\n                @for (col of allColumns; track col.key) {\n                  <li class=\"lt-chooser-row\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"col.reorderable === false\">\n                    <button\n                      type=\"button\"\n                      class=\"lt-chooser-toggle\"\n                      [class.checked]=\"!col.hidden\"\n                      [disabled]=\"col.hideable === false\"\n                      (click)=\"toggleColumnVisible(col)\"\n                      [attr.aria-pressed]=\"!col.hidden\"\n                    >\n                      <span class=\"lt-chooser-box\" aria-hidden=\"true\">\n                        @if (!col.hidden) {\n                          <svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\">\n                            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2 6.3 4.6 9 10 3\"/>\n                          </svg>\n                        }\n                      </span>\n                      <span class=\"lt-chooser-text\">{{ col.label }}</span>\n                      @if (isDefaultHidden(col)) {\n                        <span class=\"lt-chooser-default-tag\">hidden by default</span>\n                      }\n                    </button>\n                    @if (col.reorderable !== false) {\n                      <span class=\"lt-chooser-handle\" cdkDragHandle aria-label=\"Drag to reorder\" title=\"Drag to reorder\">\n                        <svg viewBox=\"0 0 10 16\" width=\"10\" height=\"15\" fill=\"currentColor\" aria-hidden=\"true\">\n                          <circle cx=\"3\" cy=\"3\" r=\"1.25\"/><circle cx=\"7\" cy=\"3\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"8\" r=\"1.25\"/><circle cx=\"7\" cy=\"8\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"13\" r=\"1.25\"/><circle cx=\"7\" cy=\"13\" r=\"1.25\"/>\n                        </svg>\n                      </span>\n                    }\n                  </li>\n                }\n              </ul>\n              <div class=\"lt-chooser-footer\">\n                <button\n                  type=\"button\"\n                  class=\"lt-chooser-reset\"\n                  [disabled]=\"columnsAtDefault\"\n                  (click)=\"resetTableColumns()\"\n                  id=\"ResetColumnsButton\"\n                >\n                  Reset to default\n                </button>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <div class=\"lt-scroll\" id=\"ItemTable\">\n      <table class=\"lt-table\">\n        <colgroup>\n          @if (!options.noSelect) { <col class=\"lt-col-select\" /> }\n          @for (col of visibleColumns; track trackCol($index, col)) {\n            <col [style.width]=\"colWidth(col)\" />\n          }\n          @if (!options.noMenu) { <col class=\"lt-col-menu\" /> }\n        </colgroup>\n        <thead class=\"lt-head\">\n          <tr cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"onReorder($event)\">\n            @if (!options.noSelect) {\n              <th class=\"lt-select-cell\">\n                <div\n                  class=\"lt-select-all\"\n                  [class.checked]=\"allToggled\"\n                  [class.indeterminate]=\"someSelected\"\n                  (click)=\"toggleAll()\"\n                  id=\"SelectAllRows\"\n                ></div>\n              </th>\n            }\n            @for (col of visibleColumns; track trackCol($index, col)) {\n              <th\n                cdkDrag\n                [cdkDragDisabled]=\"col.reorderable === false\"\n                class=\"lt-th\"\n                [ngClass]=\"col.cellClass\"\n                id=\"Header_{{ col.key }}\"\n              >\n                <lib-list-header-cell\n                  [column]=\"col\"\n                  [sortDir]=\"col.sortDir\"\n                  (sortChanged)=\"onHeaderSort($event)\"\n                  (hideColumn)=\"hideColumn($event)\"\n                ></lib-list-header-cell>\n                @if (col.resizable !== false) {\n                  <span class=\"lt-resize\" (pointerdown)=\"startResize(col, $event)\"></span>\n                }\n              </th>\n            }\n            @if (!options.noMenu) {\n              <th class=\"lt-menu-cell\">\n                <div class=\"lt-header-menu-trigger\" (click)=\"openHeaderActionMenu($event)\" id=\"ColumnMenuHeader\">\n                  &#8942;\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of rowData; track trackRow($index, row); let i = $index) {\n            <tr\n              class=\"lt-row\"\n              [class.lt-row-odd]=\"i % 2 === 1\"\n              [class.lt-row-selected]=\"row.selected\"\n              [class.row-invalid]=\"row.invalid\"\n              [class.row-copied]=\"row.copied\"\n            >\n              @if (!options.noSelect) {\n                <td class=\"lt-select-cell\">\n                  <lib-select-cell [row]=\"row\" [toggleItem]=\"toggleItem\"></lib-select-cell>\n                </td>\n              }\n              @for (col of visibleColumns; track trackCol($index, col)) {\n                <td\n                  class=\"lt-cell\"\n                  [ngClass]=\"cellClass(col)\"\n                  (click)=\"onCellClick(col, row, i)\"\n                  (mouseenter)=\"onCellHover(col, row, i, $event)\"\n                  (mouseleave)=\"onCellLeave()\"\n                >\n                  @switch (renderMode(col)) {\n                    @case ('component') {\n                      <ng-container *ngComponentOutlet=\"col.cell; inputs: cellInputs(col, row, i)\"></ng-container>\n                    }\n                    @case ('html') {\n                      <span class=\"lt-cell-html\" [innerHTML]=\"cellHtml(col, row, i)\"></span>\n                    }\n                    @default {\n                      <span class=\"lt-cell-text\">{{ cellText(col, row, i) }}</span>\n                    }\n                  }\n                </td>\n              }\n              @if (!options.noMenu) {\n                <td class=\"lt-menu-cell\">\n                  @if (row.actionList?.length) {\n                    <button\n                      type=\"button\"\n                      class=\"lt-row-menu-trigger\"\n                      (click)=\"$event.stopPropagation(); openActionMenu($event, row)\"\n                      attr.id=\"RowMenu_{{ row.id }}\"\n                      aria-label=\"Row actions\"\n                    >&#8942;</button>\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      @if (!isLoading && filterApplied && (!rowData || rowData.length === 0)) {\n        <div class=\"no-rows-message\">No Rows To Show</div>\n      }\n    </div>\n\n    <div class=\"lt-footer\">\n      <div class=\"lt-footer-count\">\n        Showing <span id=\"Start\">{{ startCount }}</span>&#8211;<span id=\"End\">{{ endCount }}</span>\n        of <span id=\"Total\">{{ totalCount }}</span>\n      </div>\n      <div class=\"lt-footer-controls\">\n        <div class=\"lt-rpp\">\n          <span class=\"lt-rpp-label\">Rows per page</span>\n          <select\n            class=\"lt-rpp-select\"\n            [disabled]=\"filtering\"\n            [value]=\"pageSize\"\n            (change)=\"onPageSizeChange(+$any($event.target).value)\"\n            aria-label=\"Rows per page\"\n          >\n            @for (opt of pageSizeOptions; track opt) {\n              <option [value]=\"opt\">{{ opt }}</option>\n            }\n          </select>\n        </div>\n        <div class=\"lt-pager\">\n          <button type=\"button\" class=\"lt-page-btn icon-prev\" [disabled]=\"prevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\"></button>\n          @for (p of pageWindow; track $index) {\n            @if (p === 0) {\n              <span class=\"lt-page-gap\">&#8230;</span>\n            } @else {\n              <button\n                type=\"button\"\n                class=\"lt-page-num\"\n                [class.is-current]=\"p === currentPageNum\"\n                (click)=\"goToPage(p)\"\n              >{{ p }}</button>\n            }\n          }\n          <button type=\"button\" class=\"lt-page-btn icon-next\" [disabled]=\"nextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\"></button>\n        </div>\n      </div>\n    </div>\n\n    <!-- header action menu -->\n    <lib-list-menu\n      menuId=\"HeaderActionMenu\"\n      [open]=\"openHeaderMenu\"\n      [items]=\"headerMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onHeaderMenuClick($event)\"\n      (closed)=\"closeHeaderActionMenu()\"\n    ></lib-list-menu>\n\n    <!-- row action menu -->\n    <lib-list-menu\n      menuId=\"RowActionMenu\"\n      [open]=\"openMenu\"\n      [items]=\"rowMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onRowMenuClick($event)\"\n      (closed)=\"closeActionMenu()\"\n    ></lib-list-menu>\n  </div>\n} @else {\n  <lib-no-items\n    (clickEmit)=\"openCreate()\"\n    [image]=\"noItemsImage\"\n    [isEmpty]=\"!rowData || rowData.length === 0\"\n    [isLoading]=\"isLoading\"\n    [typeName]=\"entityTypeLabel\"\n    [hasAdd]=\"showNoItemsAdd\"\n    [readonly]=\"noItemsReadonly\"\n    [accessDenied]=\"accessDenied\"\n  ></lib-no-items>\n}\n\n@if (hoverTooltip) {\n  <div class=\"lt-tooltip\" [ngStyle]=\"{ left: hoverTooltip.left + 'px', top: hoverTooltip.top + 'px' }\">\n    <ng-container *ngComponentOutlet=\"hoverTooltip.component; inputs: hoverTooltip.inputs\"></ng-container>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.lt-columns-btn,.lt-autorefresh-btn,.lt-refresh-btn,.lt-filter-more-btn{display:inline-flex;align-items:center;gap:.4375rem;height:var(--lt-toolbar-height);padding:0 .75rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.lt-columns-btn svg,.lt-autorefresh-btn svg,.lt-refresh-btn svg,.lt-filter-more-btn svg{display:block}.lt-columns-btn:hover,.lt-autorefresh-btn:hover,.lt-refresh-btn:hover,.lt-filter-more-btn:hover,.is-open.lt-columns-btn,.is-open.lt-autorefresh-btn,.is-open.lt-refresh-btn,.is-open.lt-filter-more-btn,.is-on.lt-columns-btn,.is-on.lt-autorefresh-btn,.is-on.lt-refresh-btn,.is-on.lt-filter-more-btn{border-color:var(--lt-link);color:var(--lt-link)}.lt-columns-count,.lt-filter-more-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.125rem;height:1.125rem;padding:0 .3125rem;font-size:.6875rem;font-weight:700;color:var(--lt-control-bg);background:var(--lt-link);border-radius:.5625rem}.lt-container{display:flex;position:relative;height:calc(100% - var(--lt-container-reserve, 5.625rem));width:100%;flex-direction:column}.lt-scroll{position:relative;z-index:1;width:100%;flex:0 1 auto;min-height:0;overflow:auto;background-color:var(--lt-bg)}.lt-scroll .no-rows-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--lt-cell-text);font-size:.875rem;pointer-events:none}.lt-table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text)}.lt-head{position:sticky;top:0;z-index:10}.lt-head th{position:relative;box-sizing:border-box;height:2.75rem;padding:0 .3125rem 0 .625rem;text-align:left;vertical-align:middle;background-color:var(--lt-header-bg);border-bottom:1px solid var(--lt-header-underline);white-space:nowrap;-webkit-user-select:none;user-select:none}.lt-head th.lt-th{border-right:1px solid var(--lt-border)}.lt-head .lt-select-cell,.lt-head .lt-menu-cell{width:3.75rem;padding:0}.lt-resize{position:absolute;right:0;top:50%;transform:translateY(-50%);width:.625rem;height:.875rem;cursor:col-resize}.lt-resize:before,.lt-resize:after{content:\"\";position:absolute;top:0;height:100%;width:1px;background:transparent;transition:background .15s}.lt-resize:before{right:.25rem}.lt-resize:after{right:.125rem}.lt-resize:hover:before,.lt-resize:hover:after{background:var(--lt-icon)}.lt-head th:hover .lt-resize:before,.lt-head th:hover .lt-resize:after{background:var(--lt-border)}.lt-select-all{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:1rem;height:1rem;border:1px solid var(--lt-control-border, var(--lt-border));border-radius:.25rem;background:var(--lt-control-bg);background-repeat:no-repeat;background-position:center center;cursor:pointer;transition:border-color .12s,background-color .12s}.lt-select-all:hover{border-color:var(--lt-link)}.lt-select-all.checked{background-color:var(--lt-link);border-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.6 5.7 10.8 11.5 3.6'/%3E%3C/svg%3E\")}.lt-select-all.indeterminate{background-color:var(--lt-link);border-color:var(--lt-link);background-image:linear-gradient(#fff,#fff);background-size:.5rem .125rem}.lt-header-menu-trigger{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.25rem;color:var(--lt-icon);cursor:pointer}.lt-header-menu-trigger:hover{color:var(--lt-icon-active)}.lt-row-menu-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;font-size:1.25rem;line-height:1;color:var(--lt-icon);background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer;transition:color .15s,background .15s}.lt-row-menu-trigger:hover{color:var(--lt-icon-active);background:var(--lt-row-hover)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--lt-header-bg);color:var(--lt-header-text);box-shadow:var(--shadowLarge);padding:0 .625rem;display:flex;align-items:center;border-radius:var(--lt-radius)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.lt-row{height:var(--lt-row-height);background-color:var(--lt-row-bg);color:var(--lt-cell-text)}.lt-row td{border-bottom:1px solid var(--lt-border)}.lt-row.lt-row-odd{background-color:var(--lt-row-alt-bg)}.lt-row:hover{background-color:var(--lt-row-hover)}.lt-row.lt-row-selected{background-color:var(--lt-row-selected)}.lt-row.lt-row-selected:hover{background-color:var(--lt-row-hover)}.lt-row.row-invalid{background-color:var(--invalid)!important}.lt-row.row-copied{background-color:var(--copiedRow)!important}.lt-cell{height:var(--lt-row-height);padding:0 .625rem 0 1.25rem;text-align:left;vertical-align:middle;border:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text}.lt-cell-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:middle}.lt-cell.lt-cell-center{text-align:center}.lt-badge-cell .lt-cell-text{padding:.1875rem .5rem;font-size:.75rem;font-weight:600;line-height:1.2;color:var(--lt-cell-text);background:color-mix(in srgb,var(--lt-border) 45%,transparent);border:1px solid var(--lt-border);border-radius:999px}.lt-badge-cell .lt-cell-text:empty{display:none}.lt-select-cell,.lt-menu-cell{width:3.75rem;padding:0;text-align:center;vertical-align:middle;overflow:visible;position:relative}.lt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:var(--lt-toolbar-margin-y, 0) 0;padding:0 0 var(--lt-toolbar-pad-bottom, .625rem);min-height:var(--lt-toolbar-height);position:relative;z-index:30}.lt-toolbar-left{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;flex-wrap:nowrap}.lt-filter-zone{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;flex:0 1 auto;min-width:0}.lt-filters{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;min-width:0;flex:0 1 auto;overflow:hidden}.lt-filter-item{display:inline-flex;flex:0 0 auto}.lt-filter-more{position:relative;flex:0 0 auto}.lt-filter-more-btn{gap:.375rem;padding:0 .625rem}.lt-filter-more-btn .lt-filter-more-icon{display:inline-flex}.lt-filter-overflow{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;min-width:15rem;max-width:min(22rem,90vw);display:flex;flex-direction:column;gap:.5rem;padding:.625rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:lt-chooser-in .12s ease-out}.lt-filter-overflow-title{font-family:var(--lt-font);font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--groupText)}.lt-filter-overflow-row{display:flex}.lt-filter-overflow-row lib-list-filter-cell,.lt-filter-overflow-row .lt-filter-item{flex:1 1 auto;min-width:0}.lt-toolbar-right{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}.lt-divider{flex:0 0 auto;width:1px;height:1.5rem;background:var(--lt-border)}.lt-search{position:relative;display:flex;align-items:center;width:18rem;max-width:40vw;flex:0 1 18rem}.lt-search-icon{position:absolute;left:.625rem;display:block;color:var(--lt-icon);pointer-events:none}.lt-search-input{width:100%;height:var(--lt-toolbar-height);padding:0 .75rem 0 1.75rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);outline:none;transition:border-color .15s,box-shadow .15s}.lt-search-input::placeholder{color:var(--placeholder)}.lt-search-input:focus{border-color:var(--lt-link);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--lt-link) 18%,transparent)}.lt-count{font-size:.8125rem;color:var(--groupText);white-space:nowrap}.lt-count .lt-count-of{color:var(--groupText)}.lt-pager{display:flex;align-items:center;gap:.25rem}.lt-page-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);color:var(--lt-icon);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;font-size:.9375rem;transition:border-color .15s,color .15s}.lt-page-btn:not(:disabled):hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-btn:disabled{opacity:.4;cursor:default}.lt-refresh-btn{padding:0;width:var(--lt-toolbar-height);justify-content:center}.lt-refresh-btn:disabled{opacity:.5;cursor:default;border-color:var(--lt-border);color:var(--lt-cell-text)}.lt-columns{position:relative;flex:0 0 auto}.lt-column-chooser{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;width:15rem;max-height:calc(100vh - 9rem);display:flex;flex-direction:column;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);overflow:hidden;animation:lt-chooser-in .12s ease-out}@keyframes lt-chooser-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.lt-chooser-header{flex:0 0 auto;display:flex;flex-direction:column;padding:.625rem .75rem .5rem;border-bottom:1px solid var(--lt-border)}.lt-chooser-title{font-size:.8125rem;font-weight:700;color:var(--lt-cell-text)}.lt-chooser-subtitle{font-size:.6875rem;color:var(--groupText)}.lt-chooser-list{flex:1 1 auto;list-style:none;margin:0;padding:.375rem .5rem;min-height:0;overflow-y:auto}.lt-chooser-row{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:.5rem;border-radius:var(--lt-radius);background:var(--lt-control-bg)}.lt-chooser-row:hover{background:var(--lt-row-hover)}.lt-chooser-row:hover .lt-chooser-handle{opacity:1}.lt-chooser-toggle{display:flex;align-items:center;gap:.625rem;flex:1 1 auto;min-width:0;padding:0;background:transparent;border:none;font:inherit;font-size:.875rem;color:var(--lt-cell-text);text-align:left;cursor:pointer}.lt-chooser-toggle:disabled{cursor:default;opacity:.5}.lt-chooser-box{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1rem;height:1rem;border:.09375rem solid var(--lt-control-border, var(--lt-border));border-radius:.25rem;color:var(--lt-control-bg);background:var(--lt-control-bg);transition:background .12s,border-color .12s}.lt-chooser-toggle.checked .lt-chooser-box{background:var(--lt-link);border-color:var(--lt-link)}.lt-chooser-toggle:not(:disabled):hover .lt-chooser-box{border-color:var(--lt-link)}.lt-chooser-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lt-chooser-default-tag{flex:0 0 auto;margin-left:.375rem;font-size:.6875rem;font-weight:400;font-style:italic;color:var(--groupText);white-space:nowrap}.lt-chooser-handle{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--lt-icon);cursor:grab;padding-left:.5rem;-webkit-user-select:none;user-select:none}.lt-chooser-handle:active{cursor:grabbing}.lt-chooser-footer{flex:0 0 auto;padding:.5rem .75rem;border-top:1px solid var(--lt-border)}.lt-chooser-reset{width:100%;height:1.875rem;font-size:.75rem;font-weight:600;color:var(--lt-link);background:transparent;border:1px solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer}.lt-chooser-reset:disabled{color:var(--groupText);cursor:default;opacity:.6}.lt-chooser-reset:not(:disabled):hover{border-color:var(--lt-link)}.lt-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.625rem .125rem 0;font-family:var(--lt-font);font-size:.8125rem;color:var(--groupText)}.lt-footer-count{white-space:nowrap}.lt-footer-count span{color:var(--lt-cell-text);font-weight:600}.lt-footer-controls{display:flex;align-items:center;gap:1.25rem;flex-wrap:nowrap}.lt-rpp{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}.lt-rpp-label{text-transform:none;font-weight:400;color:var(--groupText)}.lt-rpp-select{width:auto;min-width:4rem;height:var(--lt-toolbar-height);padding:0 1.75rem 0 .625rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background-color:var(--lt-control-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .5rem center;border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);appearance:none;-webkit-appearance:none;cursor:pointer}.lt-rpp-select:focus{outline:none;border-color:var(--lt-link)}.lt-page-num{display:inline-flex;align-items:center;justify-content:center;min-width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);padding:0 .5rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;transition:border-color .15s,color .15s,background .15s}.lt-page-num:hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-num.is-current{color:#fff;background:var(--lt-link);border-color:var(--lt-link);cursor:default}.lt-page-gap{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;color:var(--groupText)}.lt-tooltip{position:fixed;z-index:1100;pointer-events:none;animation:lt-tooltip-in .12s ease-out}@keyframes lt-tooltip-in{0%{opacity:0;transform:translateY(-.1875rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            args: [{ selector: 'lib-list-table', standalone: false, providers: [ListTableService], template: "@if (showTable && !accessDenied) {\n  <div class=\"lt-container\">\n    <div class=\"lt-toolbar\">\n      <div class=\"lt-toolbar-left\">\n        <div class=\"lt-search\">\n          <svg class=\"lt-search-icon\" viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <circle cx=\"7\" cy=\"7\" r=\"4.3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n            <line x1=\"10.4\" y1=\"10.4\" x2=\"14.6\" y2=\"14.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n          </svg>\n          <input\n            class=\"lt-search-input\"\n            id=\"SearchFilter\"\n            type=\"text\"\n            [placeholder]=\"'Search ' + (entityTypeLabel || 'items')\"\n            [(ngModel)]=\"searchString\"\n            (keyup)=\"onSearchInput()\"\n          />\n        </div>\n        @if (filterableColumns.length) {\n          <div class=\"lt-filter-zone\" #filterZone>\n            <div class=\"lt-filters\" #filtersRow>\n              @for (col of visibleFilterColumns; track col.key) {\n                <span class=\"lt-filter-item\" [attr.data-filter-key]=\"col.key\">\n                  <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                </span>\n              }\n            </div>\n            @if (overflowFilterColumns.length) {\n              <div class=\"lt-filter-more\">\n                <button\n                  type=\"button\"\n                  class=\"lt-filter-more-btn\"\n                  [class.is-on]=\"hiddenActiveCount > 0\"\n                  [class.is-open]=\"showFilterOverflow\"\n                  (click)=\"toggleFilterOverflow($event)\"\n                  aria-haspopup=\"true\"\n                  [attr.aria-expanded]=\"showFilterOverflow\"\n                  [attr.aria-label]=\"overflowFilterColumns.length + ' more filters'\"\n                  id=\"FilterOverflowButton\"\n                >\n                  <span class=\"lt-filter-more-icon\" aria-hidden=\"true\">\n                    <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\"><path fill=\"currentColor\" d=\"M2 3h12l-4.6 5.6v4l-2.8 1.4v-5.4z\"/></svg>\n                  </span>\n                  <span class=\"lt-filter-more-label\">More</span>\n                  <span class=\"lt-filter-more-count\">{{ overflowFilterColumns.length }}</span>\n                </button>\n                @if (showFilterOverflow) {\n                  <div class=\"lt-filter-overflow\" (clickOutside)=\"closeFilterOverflow($event)\">\n                    <div class=\"lt-filter-overflow-title\">Filters</div>\n                    @for (col of overflowFilterColumns; track col.key) {\n                      <div class=\"lt-filter-overflow-row\" [class.is-active]=\"isFilterActive(col)\">\n                        <lib-list-filter-cell [column]=\"col\"></lib-list-filter-cell>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"lt-toolbar-right\">\n        <ng-template #refreshIcon>\n          <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" d=\"M13.4 8a5.4 5.4 0 1 1-1.5-3.8\"/>\n            <path fill=\"currentColor\" d=\"M13.9 2.1l.5 3.2-3.2-.5z\"/>\n          </svg>\n        </ng-template>\n        <button\n          type=\"button\"\n          class=\"lt-refresh-btn\"\n          (click)=\"refresh()\"\n          [disabled]=\"filtering\"\n          aria-label=\"Refresh\"\n          title=\"Refresh\"\n          id=\"RefreshTableButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n        </button>\n        <button\n          type=\"button\"\n          class=\"lt-autorefresh-btn\"\n          [class.is-on]=\"autoRefresh\"\n          (click)=\"toggleAutoRefresh()\"\n          [attr.aria-pressed]=\"autoRefresh\"\n          id=\"AutoRefreshButton\"\n        >\n          <ng-container [ngTemplateOutlet]=\"refreshIcon\"></ng-container>\n          <span>Auto-refresh: {{ autoRefresh ? 'On' : 'Off' }}</span>\n        </button>\n        <div class=\"lt-columns\">\n          <button\n            type=\"button\"\n            class=\"lt-columns-btn\"\n            [class.is-on]=\"hiddenColumnCount > 0\"\n            [class.is-open]=\"showColumnChooser\"\n            (click)=\"toggleColumnChooser($event)\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"showColumnChooser\"\n            id=\"ColumnChooserButton\"\n          >\n            <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n              <path fill=\"currentColor\" d=\"M2 3.5h9v1.4H2zM2 7.3h6v1.4H2zM2 11.1h11v1.4H2z\"/>\n              <circle cx=\"13\" cy=\"4.2\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"10\" cy=\"8\" r=\"1.7\" fill=\"currentColor\"/>\n              <circle cx=\"14.4\" cy=\"11.8\" r=\"1.7\" fill=\"currentColor\"/>\n            </svg>\n            <span>Columns</span>\n            @if (hiddenColumnCount > 0) {\n              <span class=\"lt-columns-count\">{{ hiddenColumnCount }}</span>\n            }\n          </button>\n          @if (showColumnChooser) {\n            <div class=\"lt-column-chooser\" (clickOutside)=\"closeColumnChooser()\">\n              <div class=\"lt-chooser-header\">\n                <span class=\"lt-chooser-title\">Columns</span>\n                <span class=\"lt-chooser-subtitle\">Customize order and visibility</span>\n              </div>\n              <ul class=\"lt-chooser-list\" cdkDropList cdkDropListLockAxis=\"y\" (cdkDropListDropped)=\"chooserReorder($event)\">\n                @for (col of allColumns; track col.key) {\n                  <li class=\"lt-chooser-row\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"col.reorderable === false\">\n                    <button\n                      type=\"button\"\n                      class=\"lt-chooser-toggle\"\n                      [class.checked]=\"!col.hidden\"\n                      [disabled]=\"col.hideable === false\"\n                      (click)=\"toggleColumnVisible(col)\"\n                      [attr.aria-pressed]=\"!col.hidden\"\n                    >\n                      <span class=\"lt-chooser-box\" aria-hidden=\"true\">\n                        @if (!col.hidden) {\n                          <svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\">\n                            <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2 6.3 4.6 9 10 3\"/>\n                          </svg>\n                        }\n                      </span>\n                      <span class=\"lt-chooser-text\">{{ col.label }}</span>\n                      @if (isDefaultHidden(col)) {\n                        <span class=\"lt-chooser-default-tag\">hidden by default</span>\n                      }\n                    </button>\n                    @if (col.reorderable !== false) {\n                      <span class=\"lt-chooser-handle\" cdkDragHandle aria-label=\"Drag to reorder\" title=\"Drag to reorder\">\n                        <svg viewBox=\"0 0 10 16\" width=\"10\" height=\"15\" fill=\"currentColor\" aria-hidden=\"true\">\n                          <circle cx=\"3\" cy=\"3\" r=\"1.25\"/><circle cx=\"7\" cy=\"3\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"8\" r=\"1.25\"/><circle cx=\"7\" cy=\"8\" r=\"1.25\"/>\n                          <circle cx=\"3\" cy=\"13\" r=\"1.25\"/><circle cx=\"7\" cy=\"13\" r=\"1.25\"/>\n                        </svg>\n                      </span>\n                    }\n                  </li>\n                }\n              </ul>\n              <div class=\"lt-chooser-footer\">\n                <button\n                  type=\"button\"\n                  class=\"lt-chooser-reset\"\n                  [disabled]=\"columnsAtDefault\"\n                  (click)=\"resetTableColumns()\"\n                  id=\"ResetColumnsButton\"\n                >\n                  Reset to default\n                </button>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <div class=\"lt-scroll\" id=\"ItemTable\">\n      <table class=\"lt-table\">\n        <colgroup>\n          @if (!options.noSelect) { <col class=\"lt-col-select\" /> }\n          @for (col of visibleColumns; track trackCol($index, col)) {\n            <col [style.width]=\"colWidth(col)\" />\n          }\n          @if (!options.noMenu) { <col class=\"lt-col-menu\" /> }\n        </colgroup>\n        <thead class=\"lt-head\">\n          <tr cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"onReorder($event)\">\n            @if (!options.noSelect) {\n              <th class=\"lt-select-cell\">\n                <div\n                  class=\"lt-select-all\"\n                  [class.checked]=\"allToggled\"\n                  [class.indeterminate]=\"someSelected\"\n                  (click)=\"toggleAll()\"\n                  id=\"SelectAllRows\"\n                ></div>\n              </th>\n            }\n            @for (col of visibleColumns; track trackCol($index, col)) {\n              <th\n                cdkDrag\n                [cdkDragDisabled]=\"col.reorderable === false\"\n                class=\"lt-th\"\n                [ngClass]=\"col.cellClass\"\n                id=\"Header_{{ col.key }}\"\n              >\n                <lib-list-header-cell\n                  [column]=\"col\"\n                  [sortDir]=\"col.sortDir\"\n                  (sortChanged)=\"onHeaderSort($event)\"\n                  (hideColumn)=\"hideColumn($event)\"\n                ></lib-list-header-cell>\n                @if (col.resizable !== false) {\n                  <span class=\"lt-resize\" (pointerdown)=\"startResize(col, $event)\"></span>\n                }\n              </th>\n            }\n            @if (!options.noMenu) {\n              <th class=\"lt-menu-cell\">\n                <div class=\"lt-header-menu-trigger\" (click)=\"openHeaderActionMenu($event)\" id=\"ColumnMenuHeader\">\n                  &#8942;\n                </div>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of rowData; track trackRow($index, row); let i = $index) {\n            <tr\n              class=\"lt-row\"\n              [class.lt-row-odd]=\"i % 2 === 1\"\n              [class.lt-row-selected]=\"row.selected\"\n              [class.row-invalid]=\"row.invalid\"\n              [class.row-copied]=\"row.copied\"\n            >\n              @if (!options.noSelect) {\n                <td class=\"lt-select-cell\">\n                  <lib-select-cell [row]=\"row\" [toggleItem]=\"toggleItem\"></lib-select-cell>\n                </td>\n              }\n              @for (col of visibleColumns; track trackCol($index, col)) {\n                <td\n                  class=\"lt-cell\"\n                  [ngClass]=\"cellClass(col)\"\n                  (click)=\"onCellClick(col, row, i)\"\n                  (mouseenter)=\"onCellHover(col, row, i, $event)\"\n                  (mouseleave)=\"onCellLeave()\"\n                >\n                  @switch (renderMode(col)) {\n                    @case ('component') {\n                      <ng-container *ngComponentOutlet=\"col.cell; inputs: cellInputs(col, row, i)\"></ng-container>\n                    }\n                    @case ('html') {\n                      <span class=\"lt-cell-html\" [innerHTML]=\"cellHtml(col, row, i)\"></span>\n                    }\n                    @default {\n                      <span class=\"lt-cell-text\">{{ cellText(col, row, i) }}</span>\n                    }\n                  }\n                </td>\n              }\n              @if (!options.noMenu) {\n                <td class=\"lt-menu-cell\">\n                  @if (row.actionList?.length) {\n                    <button\n                      type=\"button\"\n                      class=\"lt-row-menu-trigger\"\n                      (click)=\"$event.stopPropagation(); openActionMenu($event, row)\"\n                      attr.id=\"RowMenu_{{ row.id }}\"\n                      aria-label=\"Row actions\"\n                    >&#8942;</button>\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      @if (!isLoading && filterApplied && (!rowData || rowData.length === 0)) {\n        <div class=\"no-rows-message\">No Rows To Show</div>\n      }\n    </div>\n\n    <div class=\"lt-footer\">\n      <div class=\"lt-footer-count\">\n        Showing <span id=\"Start\">{{ startCount }}</span>&#8211;<span id=\"End\">{{ endCount }}</span>\n        of <span id=\"Total\">{{ totalCount }}</span>\n      </div>\n      <div class=\"lt-footer-controls\">\n        <div class=\"lt-rpp\">\n          <span class=\"lt-rpp-label\">Rows per page</span>\n          <select\n            class=\"lt-rpp-select\"\n            [disabled]=\"filtering\"\n            [value]=\"pageSize\"\n            (change)=\"onPageSizeChange(+$any($event.target).value)\"\n            aria-label=\"Rows per page\"\n          >\n            @for (opt of pageSizeOptions; track opt) {\n              <option [value]=\"opt\">{{ opt }}</option>\n            }\n          </select>\n        </div>\n        <div class=\"lt-pager\">\n          <button type=\"button\" class=\"lt-page-btn icon-prev\" [disabled]=\"prevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\"></button>\n          @if (!cursorPager) {\n            @for (p of pageWindow; track $index) {\n              @if (p === 0) {\n                <span class=\"lt-page-gap\">&#8230;</span>\n              } @else {\n                <button\n                  type=\"button\"\n                  class=\"lt-page-num\"\n                  [class.is-current]=\"p === currentPageNum\"\n                  (click)=\"goToPage(p)\"\n                >{{ p }}</button>\n              }\n            }\n          }\n          <button type=\"button\" class=\"lt-page-btn icon-next\" [disabled]=\"nextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\"></button>\n        </div>\n      </div>\n    </div>\n\n    <!-- header action menu -->\n    <lib-list-menu\n      menuId=\"HeaderActionMenu\"\n      [open]=\"openHeaderMenu\"\n      [items]=\"headerMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onHeaderMenuClick($event)\"\n      (closed)=\"closeHeaderActionMenu()\"\n    ></lib-list-menu>\n\n    <!-- row action menu -->\n    <lib-list-menu\n      menuId=\"RowActionMenu\"\n      [open]=\"openMenu\"\n      [items]=\"rowMenuItems\"\n      [left]=\"menuLeft\"\n      [top]=\"menuTop\"\n      (itemClick)=\"onRowMenuClick($event)\"\n      (closed)=\"closeActionMenu()\"\n    ></lib-list-menu>\n  </div>\n} @else {\n  <lib-no-items\n    (clickEmit)=\"openCreate()\"\n    [image]=\"noItemsImage\"\n    [isEmpty]=\"!rowData || rowData.length === 0\"\n    [isLoading]=\"isLoading\"\n    [typeName]=\"entityTypeLabel\"\n    [hasAdd]=\"showNoItemsAdd\"\n    [readonly]=\"noItemsReadonly\"\n    [accessDenied]=\"accessDenied\"\n  ></lib-no-items>\n}\n\n@if (hoverTooltip) {\n  <div class=\"lt-tooltip\" [ngStyle]=\"{ left: hoverTooltip.left + 'px', top: hoverTooltip.top + 'px' }\">\n    <ng-container *ngComponentOutlet=\"hoverTooltip.component; inputs: hoverTooltip.inputs\"></ng-container>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.lt-columns-btn,.lt-autorefresh-btn,.lt-refresh-btn,.lt-filter-more-btn{display:inline-flex;align-items:center;gap:.4375rem;height:var(--lt-toolbar-height);padding:0 .75rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}.lt-columns-btn svg,.lt-autorefresh-btn svg,.lt-refresh-btn svg,.lt-filter-more-btn svg{display:block}.lt-columns-btn:hover,.lt-autorefresh-btn:hover,.lt-refresh-btn:hover,.lt-filter-more-btn:hover,.is-open.lt-columns-btn,.is-open.lt-autorefresh-btn,.is-open.lt-refresh-btn,.is-open.lt-filter-more-btn,.is-on.lt-columns-btn,.is-on.lt-autorefresh-btn,.is-on.lt-refresh-btn,.is-on.lt-filter-more-btn{border-color:var(--lt-link);color:var(--lt-link)}.lt-columns-count,.lt-filter-more-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.125rem;height:1.125rem;padding:0 .3125rem;font-size:.6875rem;font-weight:700;color:var(--lt-control-bg);background:var(--lt-link);border-radius:.5625rem}.lt-container{display:flex;position:relative;height:calc(100% - var(--lt-container-reserve, 5.625rem));width:100%;flex-direction:column}.lt-scroll{position:relative;z-index:1;width:100%;flex:0 1 auto;min-height:0;overflow:auto;background-color:var(--lt-bg)}.lt-scroll .no-rows-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--lt-cell-text);font-size:.875rem;pointer-events:none}.lt-table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text)}.lt-head{position:sticky;top:0;z-index:10}.lt-head th{position:relative;box-sizing:border-box;height:2.75rem;padding:0 .3125rem 0 .625rem;text-align:left;vertical-align:middle;background-color:var(--lt-header-bg);border-bottom:1px solid var(--lt-header-underline);white-space:nowrap;-webkit-user-select:none;user-select:none}.lt-head th.lt-th{border-right:1px solid var(--lt-border)}.lt-head .lt-select-cell,.lt-head .lt-menu-cell{width:3.75rem;padding:0}.lt-resize{position:absolute;right:0;top:50%;transform:translateY(-50%);width:.625rem;height:.875rem;cursor:col-resize}.lt-resize:before,.lt-resize:after{content:\"\";position:absolute;top:0;height:100%;width:1px;background:transparent;transition:background .15s}.lt-resize:before{right:.25rem}.lt-resize:after{right:.125rem}.lt-resize:hover:before,.lt-resize:hover:after{background:var(--lt-icon)}.lt-head th:hover .lt-resize:before,.lt-head th:hover .lt-resize:after{background:var(--lt-border)}.lt-select-all{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:1rem;height:1rem;border:1px solid var(--lt-control-border, var(--lt-border));border-radius:.25rem;background:var(--lt-control-bg);background-repeat:no-repeat;background-position:center center;cursor:pointer;transition:border-color .12s,background-color .12s}.lt-select-all:hover{border-color:var(--lt-link)}.lt-select-all.checked{background-color:var(--lt-link);border-color:var(--lt-link);background-size:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 7.6 5.7 10.8 11.5 3.6'/%3E%3C/svg%3E\")}.lt-select-all.indeterminate{background-color:var(--lt-link);border-color:var(--lt-link);background-image:linear-gradient(#fff,#fff);background-size:.5rem .125rem}.lt-header-menu-trigger{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.25rem;color:var(--lt-icon);cursor:pointer}.lt-header-menu-trigger:hover{color:var(--lt-icon-active)}.lt-row-menu-trigger{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;font-size:1.25rem;line-height:1;color:var(--lt-icon);background:transparent;border:none;border-radius:var(--lt-radius);cursor:pointer;transition:color .15s,background .15s}.lt-row-menu-trigger:hover{color:var(--lt-icon-active);background:var(--lt-row-hover)}.cdk-drag-preview{box-sizing:border-box;background-color:var(--lt-header-bg);color:var(--lt-header-text);box-shadow:var(--shadowLarge);padding:0 .625rem;display:flex;align-items:center;border-radius:var(--lt-radius)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}.lt-row{height:var(--lt-row-height);background-color:var(--lt-row-bg);color:var(--lt-cell-text)}.lt-row td{border-bottom:1px solid var(--lt-border)}.lt-row.lt-row-odd{background-color:var(--lt-row-alt-bg)}.lt-row:hover{background-color:var(--lt-row-hover)}.lt-row.lt-row-selected{background-color:var(--lt-row-selected)}.lt-row.lt-row-selected:hover{background-color:var(--lt-row-hover)}.lt-row.row-invalid{background-color:var(--invalid)!important}.lt-row.row-copied{background-color:var(--copiedRow)!important}.lt-cell{height:var(--lt-row-height);padding:0 .625rem 0 1.25rem;text-align:left;vertical-align:middle;border:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:text;user-select:text}.lt-cell-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:middle}.lt-cell.lt-cell-center{text-align:center}.lt-badge-cell .lt-cell-text{padding:.1875rem .5rem;font-size:.75rem;font-weight:600;line-height:1.2;color:var(--lt-cell-text);background:color-mix(in srgb,var(--lt-border) 45%,transparent);border:1px solid var(--lt-border);border-radius:999px}.lt-badge-cell .lt-cell-text:empty{display:none}.lt-select-cell,.lt-menu-cell{width:3.75rem;padding:0;text-align:center;vertical-align:middle;overflow:visible;position:relative}.lt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:var(--lt-toolbar-margin-y, 0) 0;padding:0 0 var(--lt-toolbar-pad-bottom, .625rem);min-height:var(--lt-toolbar-height);position:relative;z-index:30}.lt-toolbar-left{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;flex-wrap:nowrap}.lt-filter-zone{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;flex:0 1 auto;min-width:0}.lt-filters{display:flex;align-items:center;flex-wrap:nowrap;gap:.5rem;min-width:0;flex:0 1 auto;overflow:hidden}.lt-filter-item{display:inline-flex;flex:0 0 auto}.lt-filter-more{position:relative;flex:0 0 auto}.lt-filter-more-btn{gap:.375rem;padding:0 .625rem}.lt-filter-more-btn .lt-filter-more-icon{display:inline-flex}.lt-filter-overflow{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;min-width:15rem;max-width:min(22rem,90vw);display:flex;flex-direction:column;gap:.5rem;padding:.625rem;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);animation:lt-chooser-in .12s ease-out}.lt-filter-overflow-title{font-family:var(--lt-font);font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--groupText)}.lt-filter-overflow-row{display:flex}.lt-filter-overflow-row lib-list-filter-cell,.lt-filter-overflow-row .lt-filter-item{flex:1 1 auto;min-width:0}.lt-toolbar-right{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}.lt-divider{flex:0 0 auto;width:1px;height:1.5rem;background:var(--lt-border)}.lt-search{position:relative;display:flex;align-items:center;width:18rem;max-width:40vw;flex:0 1 18rem}.lt-search-icon{position:absolute;left:.625rem;display:block;color:var(--lt-icon);pointer-events:none}.lt-search-input{width:100%;height:var(--lt-toolbar-height);padding:0 .75rem 0 1.75rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);outline:none;transition:border-color .15s,box-shadow .15s}.lt-search-input::placeholder{color:var(--placeholder)}.lt-search-input:focus{border-color:var(--lt-link);box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--lt-link) 18%,transparent)}.lt-count{font-size:.8125rem;color:var(--groupText);white-space:nowrap}.lt-count .lt-count-of{color:var(--groupText)}.lt-pager{display:flex;align-items:center;gap:.25rem}.lt-page-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);color:var(--lt-icon);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;font-size:.9375rem;transition:border-color .15s,color .15s}.lt-page-btn:not(:disabled):hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-btn:disabled{opacity:.4;cursor:default}.lt-refresh-btn{padding:0;width:var(--lt-toolbar-height);justify-content:center}.lt-refresh-btn:disabled{opacity:.5;cursor:default;border-color:var(--lt-border);color:var(--lt-cell-text)}.lt-columns{position:relative;flex:0 0 auto}.lt-column-chooser{position:absolute;top:calc(100% + .25rem);right:0;z-index:1000;width:15rem;max-height:calc(100vh - 9rem);display:flex;flex-direction:column;background:var(--lt-control-bg);border:1px solid var(--lt-border);border-radius:var(--lt-radius);box-shadow:var(--shadowLarge);overflow:hidden;animation:lt-chooser-in .12s ease-out}@keyframes lt-chooser-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.lt-chooser-header{flex:0 0 auto;display:flex;flex-direction:column;padding:.625rem .75rem .5rem;border-bottom:1px solid var(--lt-border)}.lt-chooser-title{font-size:.8125rem;font-weight:700;color:var(--lt-cell-text)}.lt-chooser-subtitle{font-size:.6875rem;color:var(--groupText)}.lt-chooser-list{flex:1 1 auto;list-style:none;margin:0;padding:.375rem .5rem;min-height:0;overflow-y:auto}.lt-chooser-row{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:.5rem;border-radius:var(--lt-radius);background:var(--lt-control-bg)}.lt-chooser-row:hover{background:var(--lt-row-hover)}.lt-chooser-row:hover .lt-chooser-handle{opacity:1}.lt-chooser-toggle{display:flex;align-items:center;gap:.625rem;flex:1 1 auto;min-width:0;padding:0;background:transparent;border:none;font:inherit;font-size:.875rem;color:var(--lt-cell-text);text-align:left;cursor:pointer}.lt-chooser-toggle:disabled{cursor:default;opacity:.5}.lt-chooser-box{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1rem;height:1rem;border:.09375rem solid var(--lt-control-border, var(--lt-border));border-radius:.25rem;color:var(--lt-control-bg);background:var(--lt-control-bg);transition:background .12s,border-color .12s}.lt-chooser-toggle.checked .lt-chooser-box{background:var(--lt-link);border-color:var(--lt-link)}.lt-chooser-toggle:not(:disabled):hover .lt-chooser-box{border-color:var(--lt-link)}.lt-chooser-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lt-chooser-default-tag{flex:0 0 auto;margin-left:.375rem;font-size:.6875rem;font-weight:400;font-style:italic;color:var(--groupText);white-space:nowrap}.lt-chooser-handle{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--lt-icon);cursor:grab;padding-left:.5rem;-webkit-user-select:none;user-select:none}.lt-chooser-handle:active{cursor:grabbing}.lt-chooser-footer{flex:0 0 auto;padding:.5rem .75rem;border-top:1px solid var(--lt-border)}.lt-chooser-reset{width:100%;height:1.875rem;font-size:.75rem;font-weight:600;color:var(--lt-link);background:transparent;border:1px solid var(--lt-border);border-radius:var(--lt-radius);cursor:pointer}.lt-chooser-reset:disabled{color:var(--groupText);cursor:default;opacity:.6}.lt-chooser-reset:not(:disabled):hover{border-color:var(--lt-link)}.lt-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.625rem .125rem 0;font-family:var(--lt-font);font-size:.8125rem;color:var(--groupText)}.lt-footer-count{white-space:nowrap}.lt-footer-count span{color:var(--lt-cell-text);font-weight:600}.lt-footer-controls{display:flex;align-items:center;gap:1.25rem;flex-wrap:nowrap}.lt-rpp{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}.lt-rpp-label{text-transform:none;font-weight:400;color:var(--groupText)}.lt-rpp-select{width:auto;min-width:4rem;height:var(--lt-toolbar-height);padding:0 1.75rem 0 .625rem;font-family:var(--lt-font);font-size:.8125rem;color:var(--lt-cell-text);background-color:var(--lt-control-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .5rem center;border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);appearance:none;-webkit-appearance:none;cursor:pointer}.lt-rpp-select:focus{outline:none;border-color:var(--lt-link)}.lt-page-num{display:inline-flex;align-items:center;justify-content:center;min-width:var(--lt-toolbar-height);height:var(--lt-toolbar-height);padding:0 .5rem;font-family:var(--lt-font);font-size:.8125rem;font-weight:600;color:var(--lt-cell-text);background:var(--lt-control-bg);border:var(--inputBorderWidth) solid var(--lt-control-border, var(--lt-border));border-radius:var(--lt-radius);cursor:pointer;transition:border-color .15s,color .15s,background .15s}.lt-page-num:hover{border-color:var(--lt-link);color:var(--lt-link)}.lt-page-num.is-current{color:#fff;background:var(--lt-link);border-color:var(--lt-link);cursor:default}.lt-page-gap{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;color:var(--groupText)}.lt-tooltip{position:fixed;z-index:1100;pointer-events:none;animation:lt-tooltip-in .12s ease-out}@keyframes lt-tooltip-in{0%{opacity:0;transform:translateY(-.1875rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [{ type: ListTableService }, { type: DataTableFilterService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.DomSanitizer }], propDecorators: { tableId: [{
                 type: Input
             }], columns: [{
@@ -12972,6 +13010,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], hasNext: [{
+                type: Input
+            }], hasPrev: [{
+                type: Input
             }], startCount: [{
                 type: Input
             }], endCount: [{
@@ -15980,7 +16022,7 @@ class IdentitiesListPageComponent extends ListPageComponent {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IdentitiesListPageComponent, deps: [{ token: IdentitiesPageService }, { token: DataTableFilterService }, { token: i5.MatDialog }, { token: TabNameService }, { token: i4.Router }, { token: ConsoleEventsService }, { token: IDENTITY_EXTENSION_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: IdentitiesListPageComponent, isStandalone: false, selector: "lib-identities-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-identities-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Manage identities across the network\"\n    createLabel=\"Create Identity\"\n    infoText=\"Identities are the clients, services, and routers enrolled in this network.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-identity\" aria-hidden=\"true\"></span>\n  </lib-list-table-header>\n  <ng-content select=\"[slot=list-page-subheader]\"></ng-content>\n  <lib-list-table class=\"lt-skin\" [tableId]=\"tableId\" [initialPageSize]=\"initialPageSize\"\n    [noItemsReadonly]=\"headerBlockCreate\"\n    [accessDenied]=\"headerBlockRead\"\n    [rowData]=\"rowData\"\n    [isLoading]=\"isLoading\"\n    [columns]=\"columnDefs\"\n    (actionRequested)=\"tableAction($event)\"\n    [startCount]=\"startCount\"\n    [endCount]=\"endCount\"\n    [totalCount]=\"totalCount\"\n    [filterApplied]=\"filterApplied\"\n    [menuItems]=\"svc.menuItems\"\n    [headerActions]=\"svc.tableHeaderActions\"\n    [noItemsImage]=\"'No_Clients'\"\n    (tableReady)=\"tableReady($event)\"\n    >\n  </lib-list-table>\n</div>\n<lib-side-modal [(open)]=\"svc.sideModalOpen\" [showClose]=\"false\">\n  @if (svc.modalType === 'overrides' && svc.sideModalOpen) {\n    <lib-overrides\n      [identity]=\"svc.selectedIdentity\"\n      (close)=\"closeModal($event)\"\n    ></lib-overrides>\n  }\n</lib-side-modal>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".ziti-page-container .action{line-height:3.75rem;top:1.5625rem;right:1.5625rem;z-index:999}.ziti-identities-container ::ng-deep .zac-wrapper-container{height:0rem;left:-62499.9375rem;position:fixed}.ziti-identities-container ::ng-deep .zac-wrapper-container .action{display:none}.ziti-ag-grid{height:100%;position:relative;width:100%}.ziti-ag-grid .ziti-ag-grid-table{height:100%;width:100%}.ziti-ag-grid .ziti-ag-grid-table .ag-root-wrapper{border-bottom-style:none}.ziti-ag-grid .ziti-ag-grid-table .ag-cell{align-items:center;display:flex}.system-policies-toggle,.hidden-results-container{position:relative;right:0;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;margin-top:.625rem;padding-left:1.25rem;border-radius:var(--inputBorderRadius);padding-bottom:0;padding-right:0;padding-top:0;flex-wrap:nowrap;flex:1 0 auto}.system-policies-toggle .toggle-text,.hidden-results-container .toggle-text{font-weight:600;font-size:.75rem}.system-policies-toggle .toggle-text a,.hidden-results-container .toggle-text a{cursor:pointer}.system-policies-toggle .toggle,.hidden-results-container .toggle{width:4.6875rem;margin-left:.625rem}.system-policies-toggle .toggle.on .switch,.hidden-results-container .toggle.on .switch{left:3.25rem}.system-policies-toggle .spinner,.hidden-results-container .spinner{display:inline-block;width:.625rem;height:.625rem;border-radius:50%;background:transparent;border-top:.125rem solid var(--tableText);border-right:.125rem solid var(--tableText);border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear;margin-left:.3125rem}.hidden-results-container.loading-results{opacity:.7}.nf-cell-vert-align,.ag-row .ag-cell{align-items:center;display:flex}.hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:.4375rem;min-height:1.875rem;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:.875rem}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:.125rem solid var(--background);border-radius:.75rem;cursor:pointer;color:var(----stroke);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:1.5625rem!important;margin-left:.625rem;margin-top:.3125rem;padding:.125rem .625rem .125rem .3125rem;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:.125rem solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial}::ng-deep .darkmode .ag-dnd-ghost-icon .ag-icon-eye-slash{color:#fff!important}.tMenu{transition-property:opacity;z-index:99999999999;height:fit-content}.tMenu.action-menu{position:fixed;width:10.9375rem}.tMenu .tActionRow{transition-property:opacity}.tMenu .tActionRow.has-icon{display:flex;flex-direction:row;align-items:center}.tMenu .tActionRow .v7Offline{background-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline{width:.875rem;height:.875rem;border-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline:hover{border-color:var(--placeholder)}.hidden-items-container{display:flex;flex-direction:row;width:100%;flex-wrap:nowrap;justify-content:space-between}.os-icon{width:1.4375rem;height:1.4375rem;background-size:1.4375rem 1.4375rem;display:inline-flex;margin-right:.5rem;margin-top:.3125rem;margin-bottom:.3125rem}::ng-deep .date-time-container{position:fixed}::ng-deep .date-time-container .p-calendar .p-inputtext{height:.0625rem;width:.0625rem;padding:0}::ng-deep .date-time-container .filter-button-container{height:3.125rem;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .date-time-container .filter-button-container .toggleButton{padding-left:.3125rem;padding-right:.3125rem;width:unset}::ng-deep .date-time-container .p-calendar{height:1.875rem}::ng-deep .date-time-container .p-calendar .p-inputtext{height:1.875rem;border-top-left-radius:1.25rem;border-bottom-left-radius:1.25rem;text-indent:.3125rem}::ng-deep .date-time-container .p-calendar .p-button-icon-only{border-top-right-radius:1.25rem;border-bottom-right-radius:1.25rem}#TimeSearch{position:relative;float:left;display:inline-block;margin-left:.625rem;width:3.125rem;height:2.5rem;background-color:var(--primary)}#TimeSearch #TimeSearchList{width:2.75rem;height:0;position:absolute;top:0;left:-.125rem;overflow:hidden;transition:var(--transition);background-color:var(--menu);border-radius:.5rem;z-index:30}#TimeSearch #TimeSearchList .time{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;font-size:.75rem;font-weight:700;text-align:center;margin-top:.125rem;margin-left:.125rem;left:-.125rem;top:-3.1875rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSearchList.open{top:-3.1875rem;width:2.75rem;height:14.125rem}#TimeSearch #TimeSelectButton{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;text-align:center;font-size:.75rem;font-weight:700;margin-top:.4375rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSelectButton:hover,#TimeSearch #TimeSearchList .time:hover{background-color:var(--primaryColor);color:var(--white)}::ng-deep p-togglebutton .p-togglebutton.p-button{border-radius:var(--inputBorderRadius)!important;box-shadow:0 .3125rem 1.25rem #0000000d!important;margin-top:-.125rem!important}::ng-deep p-togglebutton .p-togglebutton.p-button:hover{filter:brightness(99%)!important;box-shadow:0 .3125rem 1.25rem #0000000d!important;transition:all .3s ease}::ng-deep p-togglebutton .p-togglebutton.p-button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(.0625rem)!important;transition:all .3s ease}#TimeSearch #TimeSelectButton{margin-top:.25rem!important}::ng-deep .p-calendar .p-inputtext{height:2.3125rem}::ng-deep .p-inputtext{border-radius:var(--inputBorderRadius)}.calendar{display:inline-block;padding-left:.3125rem;float:left;padding-right:.625rem;margin-top:-.125rem}::ng-deep .p-datepicker:not(.p-datepicker-inline){background:var(--table);border:0 none;box-shadow:#091e4226 0 1.25rem 2rem -.5rem;border-radius:.75rem}::ng-deep .p-button.p-button-text{background-color:transparent;color:var(--primaryColor);border-color:transparent}::ng-deep .p-button.p-button-text:enabled:hover{background:var(--primaryColorShadowLight);color:var(--primaryColor);border-color:transparent}::ng-deep .p-datepicker table td>span.p-highlight{color:var(--tableText);background:var(--primaryColorShadowLight)}::ng-deep .p-inputtext:enabled:hover{border-color:var(--primaryColor)}::ng-deep .p-datepicker{padding:.5rem;padding-bottom:0;background:var(--table);color:var(--tableText);border:.0625rem solid var(--inputBorder);border-radius:.1875rem}::ng-deep .p-inputtext:enabled:focus{outline:0 none;outline-offset:0;box-shadow:0 0 0 1 var(--primaryColorShadowLight);border-color:var(--primaryColor)}::ng-deep .p-inputtext{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:1rem;color:var(--tableText);background:var(--table);padding:.5rem;border:.0625rem solid var(--inputBorder);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--inputBorderRadius)}::ng-deep .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header{background:var(--table)}::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--tableText);background:var(--table);font-weight:600;margin:0;border-bottom:.0625rem solid var(--inputBorder);border-top-right-radius:.75rem;border-top-left-radius:.75rem}::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#e9ecef;color:var(--table)}::ng-deep .p-datepicker .p-timepicker{border-top:.0625rem solid var(--background);padding:.5rem}::ng-deep .p-togglebutton.p-button{background:var(--background);border:.0625rem solid var(--inputBorder);color:var(--tableText);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:1rem 0;border-top:.0625rem solid var(--inputBorder)}::ng-deep .p-button{color:#fff;background:var(--primaryColor);border:.0625rem solid var(--primaryColor);padding:.495rem 1rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:var(--inputBorderRadius)}::ng-deep .p-togglebutton.p-button.p-highlight{background:var(--primaryColor);border:.0625rem solid var(--primaryColor);color:var(--background)}::ng-deep .p-togglebutton.p-button.p-highlight:hover{background:var(--primaryColor);border:.0625rem solid var(--primaryColor);color:var(--background)}app-zac-wrapper{z-index:999999}\n"], dependencies: [{ kind: "component", type: ListTableHeaderComponent, selector: "lib-list-table-header", inputs: ["title", "subtitle", "createLabel", "infoText", "tabs", "showAdd", "blockCreate", "blockDelete", "tabsUseRouter", "activeTab"], outputs: ["actionClicked", "tabClicked"] }, { kind: "component", type: ListTableComponent, selector: "lib-list-table", inputs: ["tableId", "columns", "rowData", "isLoading", "options", "startCount", "endCount", "totalCount", "filterApplied", "menuItems", "headerActions", "noItemsImage", "showNoItemsAdd", "noItemsReadonly", "accessDenied", "entityTypeName", "filterName", "filterColumn", "initialPageSize"], outputs: ["actionRequested", "tableReady"] }, { kind: "component", type: SideModalComponent, selector: "lib-side-modal", inputs: ["showClose", "open"], outputs: ["openChange"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: OverridesComponent, selector: "lib-overrides", inputs: ["identity"], outputs: ["close"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: IdentitiesListPageComponent, isStandalone: false, selector: "lib-identities-list", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-identities-container lt-skin-page\">\n  <lib-list-table-header\n    [title]=\"title\"\n    subtitle=\"Manage identities across the network\"\n    createLabel=\"Create Identity\"\n    infoText=\"Identities are the clients, services, and routers enrolled in this network.\"\n    [tabs]=\"tabs\"\n    [showAdd]=\"!itemsSelected\"\n    [blockCreate]=\"headerBlockCreate\"\n    [blockDelete]=\"headerBlockDelete\"\n    (actionClicked)=\"headerActionClicked($event)\"\n  >\n    <span header-icon class=\"icon-identity\" aria-hidden=\"true\"></span>\n  </lib-list-table-header>\n  <ng-content select=\"[slot=list-page-subheader]\"></ng-content>\n  <lib-list-table class=\"lt-skin\" [tableId]=\"tableId\" [initialPageSize]=\"initialPageSize\"\n    [noItemsReadonly]=\"headerBlockCreate\"\n    [accessDenied]=\"headerBlockRead\"\n    [rowData]=\"rowData\"\n    [isLoading]=\"isLoading\"\n    [columns]=\"columnDefs\"\n    (actionRequested)=\"tableAction($event)\"\n    [startCount]=\"startCount\"\n    [endCount]=\"endCount\"\n    [totalCount]=\"totalCount\"\n    [filterApplied]=\"filterApplied\"\n    [menuItems]=\"svc.menuItems\"\n    [headerActions]=\"svc.tableHeaderActions\"\n    [noItemsImage]=\"'No_Clients'\"\n    (tableReady)=\"tableReady($event)\"\n    >\n  </lib-list-table>\n</div>\n<lib-side-modal [(open)]=\"svc.sideModalOpen\" [showClose]=\"false\">\n  @if (svc.modalType === 'overrides' && svc.sideModalOpen) {\n    <lib-overrides\n      [identity]=\"svc.selectedIdentity\"\n      (close)=\"closeModal($event)\"\n    ></lib-overrides>\n  }\n</lib-side-modal>\n@if (isLoading) {\n  <lib-loading-indicator [isLoading]=\"isLoading\"></lib-loading-indicator>\n}\n", styles: [".ziti-page-container .action{line-height:3.75rem;top:1.5625rem;right:1.5625rem;z-index:999}.ziti-identities-container ::ng-deep .zac-wrapper-container{height:0rem;left:-62499.9375rem;position:fixed}.ziti-identities-container ::ng-deep .zac-wrapper-container .action{display:none}.ziti-ag-grid{height:100%;position:relative;width:100%}.ziti-ag-grid .ziti-ag-grid-table{height:100%;width:100%}.ziti-ag-grid .ziti-ag-grid-table .ag-root-wrapper{border-bottom-style:none}.ziti-ag-grid .ziti-ag-grid-table .ag-cell{align-items:center;display:flex}.system-policies-toggle,.hidden-results-container{position:relative;right:0;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;margin-top:.625rem;padding-left:1.25rem;border-radius:var(--inputBorderRadius);padding-bottom:0;padding-right:0;padding-top:0;flex-wrap:nowrap;flex:1 0 auto}.system-policies-toggle .toggle-text,.hidden-results-container .toggle-text{font-weight:600;font-size:.75rem}.system-policies-toggle .toggle-text a,.hidden-results-container .toggle-text a{cursor:pointer}.system-policies-toggle .toggle,.hidden-results-container .toggle{width:4.6875rem;margin-left:.625rem}.system-policies-toggle .toggle.on .switch,.hidden-results-container .toggle.on .switch{left:3.25rem}.system-policies-toggle .spinner,.hidden-results-container .spinner{display:inline-block;width:.625rem;height:.625rem;border-radius:50%;background:transparent;border-top:.125rem solid var(--tableText);border-right:.125rem solid var(--tableText);border-bottom:.125rem solid transparent;border-left:.125rem solid transparent;animation:loading .5s infinite linear;margin-left:.3125rem}.hidden-results-container.loading-results{opacity:.7}.nf-cell-vert-align,.ag-row .ag-cell{align-items:center;display:flex}.hidden-columns-list{align-items:center;display:flex;flex-direction:row;margin-left:.4375rem;min-height:1.875rem;flex-wrap:wrap;flex:0 1 auto}.hidden-columns-list.hidden-results{flex-wrap:nowrap;overflow:auto}.hidden-columns-list.hidden-results .hidden-column-item{flex:1 0 auto}.hidden-columns-list::-webkit-scrollbar{height:.875rem}.hidden-columns-list .hidden-column-item{align-items:center;background-color:var(--background);border:.125rem solid var(--background);border-radius:.75rem;cursor:pointer;color:var(----stroke);font-weight:600;font-family:Open Sans,sans-serif;display:flex;flex:0 1 auto;height:1.5625rem!important;margin-left:.625rem;margin-top:.3125rem;padding:.125rem .625rem .125rem .3125rem;position:relative;text-align:center;box-shadow:unset;transform:translateY(0)}.hidden-columns-list .ag-dnd-ghost:hover{border:.125rem solid var(--primaryColor)!important}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-label,.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash{color:var(--ag-alpine-active-color, var(--primaryColor))}.hidden-columns-list .ag-dnd-ghost:hover .ag-dnd-ghost-icon .ag-icon-eye-slash:before{content:\"\\f113\"}.hidden-columns-list .ag-dnd-ghost-label{line-height:initial}::ng-deep .darkmode .ag-dnd-ghost-icon .ag-icon-eye-slash{color:#fff!important}.tMenu{transition-property:opacity;z-index:99999999999;height:fit-content}.tMenu.action-menu{position:fixed;width:10.9375rem}.tMenu .tActionRow{transition-property:opacity}.tMenu .tActionRow.has-icon{display:flex;flex-direction:row;align-items:center}.tMenu .tActionRow .v7Offline{background-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline{width:.875rem;height:.875rem;border-color:var(--placeholder)}.tMenu .tActionRow .v7OnlineOffline:hover{border-color:var(--placeholder)}.hidden-items-container{display:flex;flex-direction:row;width:100%;flex-wrap:nowrap;justify-content:space-between}.os-icon{width:1.4375rem;height:1.4375rem;background-size:1.4375rem 1.4375rem;display:inline-flex;margin-right:.5rem;margin-top:.3125rem;margin-bottom:.3125rem}::ng-deep .date-time-container{position:fixed}::ng-deep .date-time-container .p-calendar .p-inputtext{height:.0625rem;width:.0625rem;padding:0}::ng-deep .date-time-container .filter-button-container{height:3.125rem;display:flex;flex-direction:row;justify-content:center;align-items:center}::ng-deep .date-time-container .filter-button-container .toggleButton{padding-left:.3125rem;padding-right:.3125rem;width:unset}::ng-deep .date-time-container .p-calendar{height:1.875rem}::ng-deep .date-time-container .p-calendar .p-inputtext{height:1.875rem;border-top-left-radius:1.25rem;border-bottom-left-radius:1.25rem;text-indent:.3125rem}::ng-deep .date-time-container .p-calendar .p-button-icon-only{border-top-right-radius:1.25rem;border-bottom-right-radius:1.25rem}#TimeSearch{position:relative;float:left;display:inline-block;margin-left:.625rem;width:3.125rem;height:2.5rem;background-color:var(--primary)}#TimeSearch #TimeSearchList{width:2.75rem;height:0;position:absolute;top:0;left:-.125rem;overflow:hidden;transition:var(--transition);background-color:var(--menu);border-radius:.5rem;z-index:30}#TimeSearch #TimeSearchList .time{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;font-size:.75rem;font-weight:700;text-align:center;margin-top:.125rem;margin-left:.125rem;left:-.125rem;top:-3.1875rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSearchList.open{top:-3.1875rem;width:2.75rem;height:14.125rem}#TimeSearch #TimeSelectButton{width:2.5rem;background-color:var(--background);padding-left:.5rem;padding-right:.5rem;border-radius:.5rem;line-height:1.625rem;text-align:center;font-size:.75rem;font-weight:700;margin-top:.4375rem;cursor:pointer;transition:var(--transition)}#TimeSearch #TimeSelectButton:hover,#TimeSearch #TimeSearchList .time:hover{background-color:var(--primaryColor);color:var(--white)}::ng-deep p-togglebutton .p-togglebutton.p-button{border-radius:var(--inputBorderRadius)!important;box-shadow:0 .3125rem 1.25rem #0000000d!important;margin-top:-.125rem!important}::ng-deep p-togglebutton .p-togglebutton.p-button:hover{filter:brightness(99%)!important;box-shadow:0 .3125rem 1.25rem #0000000d!important;transition:all .3s ease}::ng-deep p-togglebutton .p-togglebutton.p-button:active{filter:brightness(95%)!important;box-shadow:none!important;transform:translateY(.0625rem)!important;transition:all .3s ease}#TimeSearch #TimeSelectButton{margin-top:.25rem!important}::ng-deep .p-calendar .p-inputtext{height:2.3125rem}::ng-deep .p-inputtext{border-radius:var(--inputBorderRadius)}.calendar{display:inline-block;padding-left:.3125rem;float:left;padding-right:.625rem;margin-top:-.125rem}::ng-deep .p-datepicker:not(.p-datepicker-inline){background:var(--table);border:0 none;box-shadow:#091e4226 0 1.25rem 2rem -.5rem;border-radius:.75rem}::ng-deep .p-button.p-button-text{background-color:transparent;color:var(--primaryColor);border-color:transparent}::ng-deep .p-button.p-button-text:enabled:hover{background:var(--primaryColorShadowLight);color:var(--primaryColor);border-color:transparent}::ng-deep .p-datepicker table td>span.p-highlight{color:var(--tableText);background:var(--primaryColorShadowLight)}::ng-deep .p-inputtext:enabled:hover{border-color:var(--primaryColor)}::ng-deep .p-datepicker{padding:.5rem;padding-bottom:0;background:var(--table);color:var(--tableText);border:.0625rem solid var(--inputBorder);border-radius:.1875rem}::ng-deep .p-inputtext:enabled:focus{outline:0 none;outline-offset:0;box-shadow:0 0 0 1 var(--primaryColorShadowLight);border-color:var(--primaryColor)}::ng-deep .p-inputtext{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:1rem;color:var(--tableText);background:var(--table);padding:.5rem;border:.0625rem solid var(--inputBorder);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--inputBorderRadius)}::ng-deep .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header{background:var(--table)}::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--tableText);background:var(--table);font-weight:600;margin:0;border-bottom:.0625rem solid var(--inputBorder);border-top-right-radius:.75rem;border-top-left-radius:.75rem}::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:#e9ecef;color:var(--table)}::ng-deep .p-datepicker .p-timepicker{border-top:.0625rem solid var(--background);padding:.5rem}::ng-deep .p-togglebutton.p-button{background:var(--background);border:.0625rem solid var(--inputBorder);color:var(--tableText);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:1rem 0;border-top:.0625rem solid var(--inputBorder)}::ng-deep .p-button{color:#fff;background:var(--primaryColor);border:.0625rem solid var(--primaryColor);padding:.495rem 1rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:var(--inputBorderRadius)}::ng-deep .p-togglebutton.p-button.p-highlight{background:var(--primaryColor);border:.0625rem solid var(--primaryColor);color:var(--background)}::ng-deep .p-togglebutton.p-button.p-highlight:hover{background:var(--primaryColor);border:.0625rem solid var(--primaryColor);color:var(--background)}app-zac-wrapper{z-index:999999}\n"], dependencies: [{ kind: "component", type: ListTableHeaderComponent, selector: "lib-list-table-header", inputs: ["title", "subtitle", "createLabel", "infoText", "tabs", "showAdd", "blockCreate", "blockDelete", "tabsUseRouter", "activeTab"], outputs: ["actionClicked", "tabClicked"] }, { kind: "component", type: ListTableComponent, selector: "lib-list-table", inputs: ["tableId", "columns", "rowData", "isLoading", "options", "hasNext", "hasPrev", "startCount", "endCount", "totalCount", "filterApplied", "menuItems", "headerActions", "noItemsImage", "showNoItemsAdd", "noItemsReadonly", "accessDenied", "entityTypeName", "filterName", "filterColumn", "initialPageSize"], outputs: ["actionRequested", "tableReady"] }, { kind: "component", type: SideModalComponent, selector: "lib-side-modal", inputs: ["showClose", "open"], outputs: ["openChange"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: OverridesComponent, selector: "lib-overrides", inputs: ["identity"], outputs: ["close"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: IdentitiesListPageComponent, decorators: [{
             type: Component,
@@ -16583,9 +16625,9 @@ class ServiceFormService {
         this.errors = {};
         this.newConfigName = '';
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getServiceDataModel(formData, isUpdate);
+        const data = this.getServiceDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.zitiService.patch('services', data, formData.id, true);
@@ -16747,7 +16789,7 @@ class ServiceFormService {
             promises.push(this.zitiService.post('terminators', terminator));
         });
     }
-    getServiceDataModel(formData, isUpdate) {
+    getServiceDataModel(formData, isUpdate, originalData) {
         const saveModel = new Service$1();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -16756,7 +16798,7 @@ class ServiceFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     getConfigTypes() {
         this.zitiService.get('config-types', this.paging, []).then((result) => {
@@ -17092,9 +17134,9 @@ class ServicePolicyFormService {
         this.serviceNamedAttributesRequestId = 0;
         this.postureNamedAttributesRequestId = 0;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getServicePolicyDataModel(formData, isUpdate);
+        const data = this.getServicePolicyDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('service-policies', data, formData.id).then(async (result) => {
             const id = result?.data?.id || formData.id;
@@ -17202,7 +17244,7 @@ class ServicePolicyFormService {
             this.associatedPostureCheckNames = sortedUniq(this.associatedPostureCheckNames);
         });
     }
-    getServicePolicyDataModel(formData, isUpdate) {
+    getServicePolicyDataModel(formData, isUpdate, originalData) {
         const saveModel = new ServicePolicy$1();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -17211,7 +17253,7 @@ class ServicePolicyFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     copyToClipboard(val) {
         navigator.clipboard.writeText(val);
@@ -18693,7 +18735,7 @@ class IdentityFormComponent extends ProjectableForm {
             });
         }
         this.isLoading = true;
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             if (this.isModal) {
                 this.closeModal(true, true);
                 return;
@@ -22296,7 +22338,7 @@ class EdgeRouterFormComponent extends ProjectableForm {
             return;
         }
         this.isLoading = true;
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             if (result?.close) {
                 if (this.isModal) {
                     this.closeModal(true, true);
@@ -22369,16 +22411,13 @@ class EdgeRouterFormComponent extends ProjectableForm {
     get tunnelerEnabledReadOnly() {
         return this.config.isOpenZiti ? true : !this.isTunnelerDisabled();
     }
-    get isCustomerHosted() {
-        return this.extService.disabledComponents.some(item => item.key === 'customer-hosted');
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterFormComponent, deps: [{ token: SETTINGS_SERVICE }, { token: EdgeRouterFormService }, { token: ZITI_DATA_SERVICE }, { token: GrowlerService }, { token: EDGE_ROUTER_EXTENSION_SERVICE }, { token: DEFAULT_APP_CONFIG }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i1$1.Location }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: EdgeRouterFormComponent, isStandalone: false, selector: "lib-edge-router-form", inputs: { edgeRouterRoleAttributes: "edgeRouterRoleAttributes" }, outputs: { close: "close" }, providers: [
             {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (isCustomerHosted) {\n                <lib-form-field-container\n                  [title]=\"'LINK LISTENER'\"\n                  class=\"form-field-advanced\"\n                  >\n                  <div class=\"config-item disabled\">\n                    <div class=\"config-container toggle-container\">\n                      <div class=\"config-container-label\">ENABLE LINK LISTENER</div>\n                      <div\n                        [ngClass]=\"{ on: formData.linkListener, disabled: true }\"\n                        class=\"toggle\"\n                        role=\"switch\"\n                        aria-disabled=\"true\"\n                        [attr.aria-checked]=\"!!formData.linkListener\"\n                        matTooltip=\"This value is reported by the router and can't be changed here.\"\n                        matTooltipPosition=\"above\"\n                        >\n                        <span [hidden]=\"!formData.linkListener\" class=\"on-label\">YES</span>\n                        <span [hidden]=\"formData.linkListener\" class=\"off-label\">NO</span>\n                        <div class=\"switch\"></div>\n                      </div>\n                    </div>\n                  </div>\n                </lib-form-field-container>\n              }\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container-label.advertise-address-label{height:auto;padding:.125rem 0}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}.config-container.advertise-address-container{height:auto;min-height:var(--defaultInputHeight);padding:0rem 1.25rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "strictReadonlyUi", "multiActions"], outputs: ["formViewChange", "actionRequested", "multiActionRequested"] }, { kind: "component", type: FormFieldContainerComponent, selector: "lib-form-field-container", inputs: ["title", "title2", "titleIcon", "layout", "helpText", "helpText2", "label", "count", "action", "actionLabel", "class", "contentStyle", "contentClass", "showHeader", "showToggle", "headerActions", "headerToggle"], outputs: ["actionRequested", "headerToggleChange", "helpClicked"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter", "localFilter"], outputs: ["itemSelected", "itemRemoved", "filterChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: FormFieldToggleComponent, selector: "lib-form-field-toggle", inputs: ["label", "orientation", "labelOn", "labelOff", "toggleOn"], outputs: ["toggleOnChange"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }, { kind: "component", type: TagSelectorComponent, selector: "lib-tag-selector", inputs: ["placeholder", "disableField", "disableCreate", "hideOption", "isLoading", "errorMessage", "focusOnInit", "namedAttributesServerFiltered", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: QrCodeComponent, selector: "lib-qr-code", inputs: ["jwt", "token", "expiration", "identity", "type", "authenticators", "qrOnly", "canExpand"], outputs: ["doRefresh"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags", "readOnly"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{
             type: Component,
@@ -22387,7 +22426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (isCustomerHosted) {\n                <lib-form-field-container\n                  [title]=\"'LINK LISTENER'\"\n                  class=\"form-field-advanced\"\n                  >\n                  <div class=\"config-item disabled\">\n                    <div class=\"config-container toggle-container\">\n                      <div class=\"config-container-label\">ENABLE LINK LISTENER</div>\n                      <div\n                        [ngClass]=\"{ on: formData.linkListener, disabled: true }\"\n                        class=\"toggle\"\n                        role=\"switch\"\n                        aria-disabled=\"true\"\n                        [attr.aria-checked]=\"!!formData.linkListener\"\n                        matTooltip=\"This value is reported by the router and can't be changed here.\"\n                        matTooltipPosition=\"above\"\n                        >\n                        <span [hidden]=\"!formData.linkListener\" class=\"on-label\">YES</span>\n                        <span [hidden]=\"formData.linkListener\" class=\"off-label\">NO</span>\n                        <div class=\"switch\"></div>\n                      </div>\n                    </div>\n                  </div>\n                </lib-form-field-container>\n              }\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container-label.advertise-address-label{height:auto;padding:.125rem 0}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}.config-container.advertise-address-container{height:auto;min-height:var(--defaultInputHeight);padding:0rem 1.25rem}\n"] }]
+                    ], standalone: false, template: "<div class=\"projectable-form-wrapper\"\n  (keyup.enter)=\"save($event)\"\n  (keyup.escape)=\"closeModal(false)\"\n  [class.projectable-form-hidden]=\"!dataInit\"\n  >\n  <lib-form-header\n    [data]=\"formData\"\n    [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n    [moreActions]=\"moreActions\"\n    [multiActions]=\"multiActions\"\n    (actionRequested)=\"headerActionRequested($event)\"\n    (multiActionRequested)=\"multiActionRequested($event)\"\n    [(formView)]=\"formView\"\n    [class.is-scrolled]=\"isScrolled\"\n    [saveDisabled]=\"formPermissionSaveDisabled\"\n    [saveTooltip]=\"formPermissionSaveTooltip\"\n    [strictReadonlyUi]=\"useStrictReadonlyForm\"\n  ></lib-form-header>\n  <ng-content select=\"[slot=tabs-slot]\"></ng-content>\n  <div class=\"edge-router-form-container projectable-form-container\" #formContainer>\n    @if (formView === 'simple') {\n      <div class=\"projectable-form-main-column form-group-row\">\n        <div class=\"form-group-column three-fifths\">\n          <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"useStrictReadonlyForm ? '' : 'REQUIRED'\">\n              <input\n                class=\"form-field-input\"\n                placeholder=\"Name this edge router\"\n                [ngClass]=\"{error: errors['name']}\"\n                [(ngModel)]=\"formData.name\"\n                autofocus\n                #nameFieldInput\n                [disabled]=\"useStrictReadonlyForm\"\n                />\n          </lib-form-field-container>\n          <lib-form-field-container\n            [title]=\"'Select or create Edge Router attributes'\"\n            [label]=\"'OPTIONAL'\"\n            [contentStyle]=\"'z-index: 99999999'\"\n            [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Edge Routers to form a group of Edge Routers.'\"\n            >\n            <lib-tag-selector\n              [disableField]=\"useStrictReadonlyForm\"\n              [disableCreate]=\"useStrictReadonlyForm\"\n              [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n              [availableRoleAttributes]=\"edgeRouterRoleAttributes\"\n              [placeholder]=\"'Add attributes to group Edge Routers'\"\n            ></lib-tag-selector>\n          </lib-form-field-container>\n          <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n          <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n          @if (showMore) {\n            <div class=\"form-group-column\">\n              <lib-form-field-container\n                [title]=\"'TUNNELER'\"\n                [title2]=\"'TRAVERSAL'\"\n                [layout]=\"'row'\"\n                class=\"form-field-advanced\"\n                >\n                <div class=\"config-item\" [class.disabled]=\"!tunnelerEnabledReadOnly\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                    <div (click)=\"tunnelerEnabledReadOnly && !useStrictReadonlyForm && toggleTunnelerEnabled()\"\n                      [ngClass]=\"{ on: formData.isTunnelerEnabled, disabled: !tunnelerEnabledReadOnly, 'toggle-readonly': useStrictReadonlyForm }\" class=\"toggle\"\n                      [matTooltip]=\"useStrictReadonlyForm ? '' : (!tunnelerEnabledReadOnly ? 'Disabled because already hosted by netfoundry ' : '')\"\n                      matTooltipPosition=\"above\" style=\"pointer-events: auto;\">\n                      <span [hidden]=\"!formData.isTunnelerEnabled\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"formData.isTunnelerEnabled\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"config-item\">\n                  <div class=\"config-container toggle-container\">\n                    <div class=\"config-container-label\">ALLOW TRAVERSAL</div>\n                    <div\n                      (click)=\"!useStrictReadonlyForm && toggleNoTraversal()\"\n                      [ngClass]=\"{ on: !formData.noTraversal, 'toggle-readonly': useStrictReadonlyForm }\"\n                      class=\"toggle\"\n                      >\n                      <span [hidden]=\"formData.noTraversal\" class=\"on-label\">YES</span>\n                      <span [hidden]=\"!formData.noTraversal\" class=\"off-label\">NO</span>\n                      <div class=\"switch\"></div>\n                    </div>\n                  </div>\n                </div>\n              </lib-form-field-container>\n              @if (formData?.hostname || formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                <lib-form-field-container [showHeader]=\"false\">\n                      @if (formData?.hostname) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">Domain Name</span>\n                          </div>\n                          <div class=\"config-container domain-container\">\n                            <div class=\"config-container-label domain-label\">\n                              {{ formData?.hostname }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                      @if (formData?.supportedProtocols?.tls || formData?.supportedProtocols?.wss) {\n                        <div class=\"config-item\">\n                          <div class=\"config-item-label-container\">\n                            <span class=\"config-title\">ADVERTISE ADDRESS</span>\n                          </div>\n                          <div class=\"config-container advertise-address-container\">\n                            <div class=\"config-container-label advertise-address-label\">\n                              {{ formData?.supportedProtocols?.tls }}\n                              <br />\n                              {{ formData?.supportedProtocols?.wss }}\n                            </div>\n                          </div>\n                        </div>\n                      }\n                </lib-form-field-container>\n              }\n              <lib-form-field-container\n                [title]=\"'Custom Tags'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-custom-tags [(tags)]=\"formData.tags\" [readOnly]=\"useStrictReadonlyForm\"></lib-custom-tags>\n              </lib-form-field-container>\n              <lib-form-field-container\n                [title]=\"'App Data'\"\n                [label]=\"'OPTIONAL'\"\n                class=\"form-field-advanced\"\n                >\n                <lib-json-view [(data)]=\"formData.appData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n              </lib-form-field-container>\n            </div>\n          }\n        </div>\n        <div class=\"form-group-column two-fifths\">\n          <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n          @if (hasEnrolmentToken && !extService['hideZitiRegistration']) {\n            <lib-form-field-container\n              [showHeader]=\"false\"\n              >\n              <lib-qr-code\n                [identity]=\"formData\"\n                [jwt]=\"formData.enrollmentJwt\"\n                [token]=\"formData.enrollmentToken\"\n                [expiration]=\"formData.enrollmentExpiresAt\"\n                (doRefresh)=\"refreshEdgeRouter()\"\n                [type]=\"'router'\"\n              ></lib-qr-code>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Services'\"\n              [count]=\"svc.associatedServices.length\"\n              [class]=\"'hide-overflow'\"\n              [helpText]=\"'Preview list of all services that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"servicesLoading\"\n                [allNames]=\"svc.associatedServiceNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (formData.id) {\n            <lib-form-field-container\n              [title]=\"'Associated Identities'\"\n              [count]=\"svc.associatedIdentities.length\"\n              [helpText]=\"'Preview list of all Identities that this Edge Router is associated with.'\"\n              >\n              <lib-preview-list\n                [clickable]=\"false\"\n                [isLoading]=\"identitiesLoading\"\n                [allNames]=\"svc.associatedIdentityNames\"\n              ></lib-preview-list>\n            </lib-form-field-container>\n          }\n          @if (showApiCalls) {\n            <lib-form-field-container\n              [title]=\"'API Calls'\"\n              [label]=\"'OPTIONAL'\"\n              >\n              <div class=\"form-row\">\n                <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                <div class=\"icon-copy copy-text\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n              </div>\n              @if (formData) {\n                <lib-json-view [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n              }\n            </lib-form-field-container>\n          }\n        </div>\n      </div>\n    }\n    @if (formView === 'raw') {\n      <div class=\"form-group-column\">\n        @if (formData) {\n          <lib-json-view [(data)]=\"formData\" [readOnly]=\"useStrictReadonlyForm\"></lib-json-view>\n        }\n      </div>\n    }\n  </div>\n</div>\n@if (isLoading || !dataInit) {\n  <lib-loading-indicator [isLoading]=\"isLoading || !dataInit\"></lib-loading-indicator>\n}\n", styles: [".edge-router-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.form-field-dropdown{background-image:url(/assets/svgs/ArrowDown.svg);background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.toggle.disabled{cursor:not-allowed}::ng-deep .admin-toggle{width:100%;width:35%;display:flex}::ng-deep .admin-toggle .form-field-line{display:none}::ng-deep .admin-toggle .toggle{width:100%}::ng-deep .is-admin-container .form-field-title-container.title-container-2{width:35%!important}.svc-test-result{position:absolute;transition:var(--transition);height:0;width:100%;background-color:var(--background);bottom:0;font-weight:600;padding-left:.625rem;padding-right:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);border-bottom-right-radius:var(--inputBorderRadius);border-bottom-left-radius:var(--inputBorderRadius);border-top-style:none}.svc-test-result.test-result-open{height:fit-content;box-shadow:0 -.125rem .6875rem 0 var(--boxShadow);padding-bottom:.9375rem;padding-top:.9375rem}.svc-test-result .close.icon-close{top:.625rem;right:.625rem;font-size:1.125rem;height:1.125rem;width:1.125rem;line-height:1.125rem}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-label{color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .form-field-line{border-color:var(--primaryColor)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle{border-color:var(--primaryColor);border-style:solid;border-width:var(--inputBorderWidth)}::ng-deep .admin-toggle .form-field-toggle-container:focus .toggle .switch{top:.0625rem}.config-container-label.domain-label,.config-container-label.advertise-address-label{text-transform:lowercase}.config-container.domain-container,.config-container.advertise-address-container{background-color:var(--stroke)}\n"] }]
         }], ctorParameters: () => [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -22417,9 +22456,9 @@ class TransitRouterFormService {
         this.associatedServices = [];
         this.associatedServiceNames = [];
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getEdgeRouterDataModel(formData, isUpdate);
+        const data = this.getEdgeRouterDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('transit-routers', data, formData.id).then(async (result) => {
             const id = result?.data?.id || formData.id;
@@ -22444,7 +22483,7 @@ class TransitRouterFormService {
             throw resp;
         });
     }
-    getEdgeRouterDataModel(formData, isUpdate) {
+    getEdgeRouterDataModel(formData, isUpdate, originalData) {
         const saveModel = new EdgeRouter();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -22453,7 +22492,7 @@ class TransitRouterFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id', 'badges'], isUpdate ? originalData : undefined);
     }
     getAuthPolicies() {
         const paging = {
@@ -22624,7 +22663,7 @@ class TransitRouterFormComponent extends ProjectableForm {
             return;
         }
         this.isLoading = true;
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             if (result?.close) {
                 if (this.isModal) {
                     this.closeModal(true, true);
@@ -23407,7 +23446,7 @@ class ServiceFormComponent extends ProjectableForm {
             return;
         }
         this.isLoading = true;
-        const serviceId = await this.svc.save(this.formData).then((result) => {
+        const serviceId = await this.svc.save(this.formData, this.initData).then((result) => {
             if (!isEmpty(result?.id)) {
                 this.formData = result;
                 this.initData = this.formData;
@@ -26168,7 +26207,7 @@ class ServicePolicyFormComponent extends ProjectableForm {
         }
         this.isLoading = true;
         this.applySelectedAttributes();
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             if (result?.close) {
                 this.closeModal(true, true);
             }
@@ -26307,9 +26346,9 @@ class EdgeRouterPolicyFormService {
         this.identityNamedAttributesRequestId = 0;
         this.edgeRouterNamedAttributesRequestId = 0;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getEdgeRouterPolicyDataModel(formData, isUpdate);
+        const data = this.getEdgeRouterPolicyDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('edge-router-policies', data, formData.id).then(async (result) => {
             const id = result?.data?.id || formData.id;
@@ -26472,7 +26511,7 @@ class EdgeRouterPolicyFormService {
             }
         });
     }
-    getEdgeRouterPolicyDataModel(formData, isUpdate) {
+    getEdgeRouterPolicyDataModel(formData, isUpdate, originalData) {
         const saveModel = new EdgeRouterPolicy();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -26481,7 +26520,7 @@ class EdgeRouterPolicyFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     copyToClipboard(val) {
         navigator.clipboard.writeText(val);
@@ -26686,7 +26725,7 @@ class EdgeRouterPolicyFormComponent extends ProjectableForm {
         }
         this.isLoading = true;
         this.applySelectedAttributes();
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             const data = result?.data?.id ? result.data : result;
             this._dataChange = false;
             if (!isEmpty(data.id)) {
@@ -27302,9 +27341,9 @@ class ServiceEdgeRouterPolicyFormService {
         this.serviceNamedAttributesRequestId = 0;
         this.edgeRouterNamedAttributesRequestId = 0;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getEdgeRouterPolicyDataModel(formData, isUpdate);
+        const data = this.getEdgeRouterPolicyDataModel(formData, isUpdate, originalData);
         const svc = isUpdate ? this.zitiService.patch.bind(this.zitiService) : this.zitiService.post.bind(this.zitiService);
         return svc('service-edge-router-policies', data, formData.id).then(async (result) => {
             const id = result?.data?.id || formData.id;
@@ -27450,7 +27489,7 @@ class ServiceEdgeRouterPolicyFormService {
             }
         });
     }
-    getEdgeRouterPolicyDataModel(formData, isUpdate) {
+    getEdgeRouterPolicyDataModel(formData, isUpdate, originalData) {
         const saveModel = new ServiceEdgeRouterPolicy();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -27459,7 +27498,7 @@ class ServiceEdgeRouterPolicyFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.zitiService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     copyToClipboard(val) {
         navigator.clipboard.writeText(val);
@@ -27659,7 +27698,7 @@ class ServiceEdgeRouterPolicyFormComponent extends ProjectableForm {
         }
         this.isLoading = true;
         this.applySelectedAttributes();
-        this.svc.save(this.formData).then((result) => {
+        this.svc.save(this.formData, this.initData).then((result) => {
             const data = result?.data?.id ? result.data : result;
             this._dataChange = false;
             if (!isEmpty(data.id)) {
@@ -28169,9 +28208,9 @@ class ConfigurationService {
             //this.configSubscriptions.unsubscribe();
         }
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getConfigDataModel(formData, isUpdate);
+        const data = this.getConfigDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.patch('configs', data, formData.id, true);
@@ -28201,7 +28240,7 @@ class ConfigurationService {
             throw resp;
         });
     }
-    getConfigDataModel(formData, isUpdate) {
+    getConfigDataModel(formData, isUpdate, originalData) {
         const saveModel = new Config();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -28211,7 +28250,7 @@ class ConfigurationService {
             }
         });
         saveModel.data = this.validationService.redefineObject(saveModel.data);
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigurationService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: SchemaService }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigurationService, providedIn: 'root' }); }
@@ -28398,7 +28437,7 @@ class ConfigurationFormComponent extends ProjectableForm {
             this.isLoading = false;
             return;
         }
-        const configId = await this.svc.save(this.formData).then((result) => {
+        const configId = await this.svc.save(this.formData, this.initData).then((result) => {
             if (!isEmpty(result?.id)) {
                 this.formData = result;
                 this.initData = this.formData;
@@ -28904,9 +28943,9 @@ class JwtSignerFormService {
         this.errors = [];
         this.saveDisabled = false;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getJwtSignerDataModel(formData, isUpdate);
+        const data = this.getJwtSignerDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.put('external-jwt-signers', data, formData.id, true);
@@ -28936,7 +28975,7 @@ class JwtSignerFormService {
             throw resp;
         });
     }
-    getJwtSignerDataModel(formData, isUpdate) {
+    getJwtSignerDataModel(formData, isUpdate, originalData) {
         const saveModel = new JwtSigner();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -28945,7 +28984,7 @@ class JwtSignerFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: JwtSignerFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: JwtSignerFormService, providedIn: 'root' }); }
@@ -29208,7 +29247,7 @@ class JwtSignerFormComponent extends ProjectableForm {
         }
         const apiData = this.apiData;
         this.isLoading = true;
-        this.svc.save(apiData).then((result) => {
+        this.svc.save(apiData, this.initData).then((result) => {
             if (this.isModal) {
                 this.closeModal(true, true);
                 return;
@@ -30037,9 +30076,9 @@ class AuthPolicyFormService {
             this.jwtSignersLoading = false;
         });
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getAuthPolicyDataModel(formData, isUpdate);
+        const data = this.getAuthPolicyDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.put('auth-policies', data, formData.id, true);
@@ -30069,7 +30108,7 @@ class AuthPolicyFormService {
             throw resp;
         });
     }
-    getAuthPolicyDataModel(formData, isUpdate) {
+    getAuthPolicyDataModel(formData, isUpdate, originalData) {
         const saveModel = new AuthPolicy();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -30078,7 +30117,7 @@ class AuthPolicyFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthPolicyFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AuthPolicyFormService, providedIn: 'root' }); }
@@ -30222,7 +30261,7 @@ class AuthPolicyFormComponent extends ProjectableForm {
         const apiData = this.apiData;
         apiData.id = this.formData.id;
         this.isLoading = true;
-        this.svc.save(apiData).then((result) => {
+        this.svc.save(apiData, this.initData).then((result) => {
             if (this.isModal) {
                 this.closeModal(true, true);
                 return;
@@ -30837,7 +30876,7 @@ class CertificateAuthorityFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CertificateAuthorityFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: CertificateAuthorityFormService, providedIn: 'root' }); }
@@ -31875,9 +31914,9 @@ class ConfigTypeFormService {
                 return this.configTypes[idx].schema;
         }
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getConfigTypeDataModel(formData, isUpdate);
+        const data = this.getConfigTypeDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.patch('config-types', data, formData.id, true);
@@ -31907,7 +31946,7 @@ class ConfigTypeFormService {
             throw resp;
         });
     }
-    getConfigTypeDataModel(formData, isUpdate) {
+    getConfigTypeDataModel(formData, isUpdate, originalData) {
         const saveModel = new ConfigType();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -31916,7 +31955,7 @@ class ConfigTypeFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigTypeFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: SchemaService }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ConfigTypeFormService, providedIn: 'root' }); }
@@ -32075,7 +32114,7 @@ class ConfigTypeFormComponent extends ProjectableForm {
             this.isLoading = false;
             return;
         }
-        const configId = await this.svc.save(this.formData).then((result) => {
+        const configId = await this.svc.save(this.formData, this.initData).then((result) => {
             if (!isEmpty(result?.id)) {
                 this.formData = result;
                 this.initData = cloneDeep(this.formData);
@@ -32501,9 +32540,9 @@ class PostureCheckFormService {
         this.errors = [];
         this.saveDisabled = false;
     }
-    save(formData) {
+    save(formData, originalData) {
         const isUpdate = !isEmpty(formData.id);
-        const data = this.getConfigTypeDataModel(formData, isUpdate);
+        const data = this.getConfigTypeDataModel(formData, isUpdate, originalData);
         let prom;
         if (isUpdate) {
             prom = this.dataService.patch('posture-checks', data, formData.id, true);
@@ -32533,7 +32572,7 @@ class PostureCheckFormService {
             throw resp;
         });
     }
-    getConfigTypeDataModel(formData, isUpdate) {
+    getConfigTypeDataModel(formData, isUpdate, originalData) {
         const saveModel = new PostureCheck();
         const modelProperties = keys(saveModel);
         modelProperties.forEach((prop) => {
@@ -32542,7 +32581,7 @@ class PostureCheckFormService {
                     saveModel[prop] = formData[prop];
             }
         });
-        return saveModel;
+        return this.dataService.mergeUnknownFormProperties(saveModel, formData, modelProperties, ['id'], isUpdate ? originalData : undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureCheckFormService, deps: [{ token: ZITI_DATA_SERVICE }, { token: SHAREDZ_EXTENSION }, { token: SchemaService }, { token: GrowlerService }, { token: ValidationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PostureCheckFormService, providedIn: 'root' }); }
@@ -32860,7 +32899,7 @@ class PostureCheckFormComponent extends ProjectableForm {
                 this.formData.processes = this.processMultiItems;
             }
         }
-        const configId = await this.svc.save(this.formData).then((result) => {
+        const configId = await this.svc.save(this.formData, this.initData).then((result) => {
             if (!isEmpty(result?.id)) {
                 this.formData = result;
                 this.initData = cloneDeep(this.formData);
@@ -43993,7 +44032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 */
 
 const ZAC_VERSION = {
-    "version": "4.5.4"
+    "version": "4.5.5"
 };
 
 /*