@openziti/ziti-console-lib 0.12.9 → 0.12.10

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

@@ -4,7 +4,7 @@ import * as i4 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { Subject, BehaviorSubject, firstValueFrom, tap, map, Subscription } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import _, { isEmpty, isNumber, includes, isNil, defer, cloneDeep, set, invoke, get, debounce, isNaN as isNaN$1, forEach, isString, isFunction, unset, isBoolean, keys, isEqual, isObject, isArray, forOwn, invert, some, filter, sortBy, sortedUniq, map as map$1, trim, delay } from 'lodash';
+import _, { isEmpty, isNumber, includes, isNil, defer, cloneDeep, set, invoke, get, debounce, isNaN as isNaN$1, forEach, isString, isFunction, unset, isBoolean, keys, isEqual, isObject, isArray, forOwn, invert, map as map$1, some, filter, sortBy, sortedUniq, has, trim, delay } from 'lodash';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpParams, HttpClientModule, HttpHeaders } from '@angular/common/http';
 import * as i1 from 'ngx-logger';
@@ -3323,7 +3323,10 @@ let ListPageServiceClass = class ListPageServiceClass {
             const prom = this.dataService.delete(this.resourceType, id);
             promises.push(prom);
         });
-        return Promise.all(promises);
+        return Promise.all(promises).catch((response) => {
+            const message = this.dataService.getErrorMessage(response);
+            throw message;
+        });
     }
     sort(sortBy, ordering = 'asc') {
         this.currentSort = { sortBy, ordering };
@@ -3492,6 +3495,9 @@ class ListPageComponent {
             if (result?.confirmed) {
                 this.svc.removeItems(selectedIds).then(() => {
                     this.refreshData(this.svc.currentSort);
+                }).catch((errorMessage) => {
+                    const growlerData = new GrowlerModel('error', 'Error', `Delete Failed`, `Failed to delete item(s): ${errorMessage}`);
+                    this.growlerSvc.show(growlerData);
                 });
             }
         });
@@ -5222,7 +5228,8 @@ class TableCellSelectComponent {
         this.disableToggle =
             _.get(this.item, 'typeId') === 'Router' ||
                 _.get(this.item, 'exclusiveTo') ||
-                _.get(this.item, 'reserved') === true;
+                _.get(this.item, 'reserved') === true ||
+                _.get(this.item, 'isSystem') === true;
     }
     refresh(params) {
         this.cellParams = params;
@@ -5230,7 +5237,8 @@ class TableCellSelectComponent {
         this.disableToggle =
             _.get(this.item, 'typeId') === 'Router' ||
                 _.get(this.item, 'exclusiveTo') ||
-                _.get(this.item, 'reserved') === true;
+                _.get(this.item, 'reserved') === true ||
+                _.get(this.item, 'isSystem') === true;
         return true;
     }
     toggle(item) {
@@ -5239,12 +5247,22 @@ class TableCellSelectComponent {
         }
         this.cellParams.toggleItem(item, this.cellParams);
     }
+    get tooltip() {
+        let tooltip = '';
+        if (this.item?.isSystem) {
+            tooltip = 'Deleting "system" entities is not allowed';
+        }
+        else if (this.item?.typeId === 'Router') {
+            tooltip = 'Unable to delete "Router" Identities. Please delete the associated Router instead.';
+        }
+        return tooltip;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableCellSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableCellSelectComponent, selector: "app-table-cell-select", ngImport: i0, template: "<div\n  #toggleButton\n  (click)=\"toggle(item)\"\n  *ngIf=\"!item.hideSelect\"\n  [ngClass]=\"{ selected: item.selected, disabled: disableToggle }\"\n  attr.name=\"RowSelect0_{{ item.name }}\"\n  class=\"row-toggle tSelect\"\n  id=\"RowSelect0_{{ item.id }}\"\n  attr.data-id=\"{{item.id}}\"\n></div>\n", styles: [".row-toggle.tSelect{width:1.5625rem;height:1.5625rem;border:.1rem var(--stroke) solid;border-radius:.9375rem;cursor:pointer;transition:background-color .5s;position:absolute;top:.8125rem;left:.625rem;background-color:var(--navigation);transition:var(--transition)}.row-toggle.tSelect.selected{background-color:var(--green);background-size:45%;background-position:center center;border:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAD+vg1LAAABdElEQVRIia3UPWsUURSH8f9GRRvtFKtIgoKggo2CYO0XsLKzsbARbNKJYGPndxEEO8VGRRvBF6xFBAkplPiyb/lZzAx7d9jE3ewcmOLOPTyc85x7bw/pKI4keZ7kUpIHQVffIwxU0e91VPHlJK+T9Or19y7Ah5N8TLJeg3eSXO9CwcNCwQCPkWWhFzE2iZ84viz4ED4X4DFuNPvLgO8XCoZ4Wu7vF3oeo0LBL5xcFnwA7wsFI9xs5+0HvFG33ih4NitvUejZAgp/sLoseAVvC7dD3NotfxHw3ZaCl+jtBT6qOn+n94CuoV8o+Fv/27WQ4E3dXh9XZyT18Kql4M7/OozJsdnBb1xoJd0uFIxqzyvzgJ+Y3KAxtrBeJ6yqJt/EEGfmmUlwDB9aVX3FCbwwPbCNeaANOKoX6UvL41axHuOd6tYtBA5OYdP0a9XECOfmhbbBUT0u26pBNjHAvUWgs8DBFdPD/ISDXYCDa/iBb3UXC0GRf9rA4qSLGyBIAAAAAElFTkSuQmCC)}.row-toggle.tSelect.disabled{opacity:.6;cursor:not-allowed;transform:initial!important}.row-toggle.tSelect.disabled:hover{width:1.5625rem;height:1.5625rem;border:.125rem var(--offWhite) solid;border-radius:.9375rem;transition:background-color .5s;position:absolute;top:.8125rem;left:1.0625rem;background-color:var(--background)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableCellSelectComponent, selector: "app-table-cell-select", ngImport: i0, template: "<div\n  #toggleButton\n  (click)=\"toggle(item)\"\n  *ngIf=\"!item.hideSelect\"\n  [ngClass]=\"{ selected: item.selected, disabled: disableToggle }\"\n  attr.name=\"RowSelect0_{{ item.name }}\"\n  class=\"row-toggle tSelect\"\n  id=\"RowSelect0_{{ item.id }}\"\n  attr.data-id=\"{{item.id}}\"\n  [matTooltip]=\"tooltip\"\n></div>\n", styles: [".row-toggle.tSelect{width:1.5625rem;height:1.5625rem;border:.1rem var(--stroke) solid;border-radius:.9375rem;cursor:pointer;position:absolute;top:.8125rem;left:.625rem;background-color:var(--navigation)}.row-toggle.tSelect:hover{border:.125rem var(--placeholder) solid;background-color:var(--background)}.row-toggle.tSelect.selected{background-color:var(--green);background-size:45%;background-position:center center;border:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAD+vg1LAAABdElEQVRIia3UPWsUURSH8f9GRRvtFKtIgoKggo2CYO0XsLKzsbARbNKJYGPndxEEO8VGRRvBF6xFBAkplPiyb/lZzAx7d9jE3ewcmOLOPTyc85x7bw/pKI4keZ7kUpIHQVffIwxU0e91VPHlJK+T9Or19y7Ah5N8TLJeg3eSXO9CwcNCwQCPkWWhFzE2iZ84viz4ED4X4DFuNPvLgO8XCoZ4Wu7vF3oeo0LBL5xcFnwA7wsFI9xs5+0HvFG33ih4NitvUejZAgp/sLoseAVvC7dD3NotfxHw3ZaCl+jtBT6qOn+n94CuoV8o+Fv/27WQ4E3dXh9XZyT18Kql4M7/OozJsdnBb1xoJd0uFIxqzyvzgJ+Y3KAxtrBeJ6yqJt/EEGfmmUlwDB9aVX3FCbwwPbCNeaANOKoX6UvL41axHuOd6tYtBA5OYdP0a9XECOfmhbbBUT0u26pBNjHAvUWgs8DBFdPD/ISDXYCDa/iBb3UXC0GRf9rA4qSLGyBIAAAAAElFTkSuQmCC)}.row-toggle.tSelect.disabled{opacity:.3;cursor:not-allowed;transform:initial!important}.row-toggle.tSelect.disabled:hover{border:.1rem var(--stroke) solid;background-color:var(--navigation)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableCellSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-cell-select', template: "<div\n  #toggleButton\n  (click)=\"toggle(item)\"\n  *ngIf=\"!item.hideSelect\"\n  [ngClass]=\"{ selected: item.selected, disabled: disableToggle }\"\n  attr.name=\"RowSelect0_{{ item.name }}\"\n  class=\"row-toggle tSelect\"\n  id=\"RowSelect0_{{ item.id }}\"\n  attr.data-id=\"{{item.id}}\"\n></div>\n", styles: [".row-toggle.tSelect{width:1.5625rem;height:1.5625rem;border:.1rem var(--stroke) solid;border-radius:.9375rem;cursor:pointer;transition:background-color .5s;position:absolute;top:.8125rem;left:.625rem;background-color:var(--navigation);transition:var(--transition)}.row-toggle.tSelect.selected{background-color:var(--green);background-size:45%;background-position:center center;border:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAD+vg1LAAABdElEQVRIia3UPWsUURSH8f9GRRvtFKtIgoKggo2CYO0XsLKzsbARbNKJYGPndxEEO8VGRRvBF6xFBAkplPiyb/lZzAx7d9jE3ewcmOLOPTyc85x7bw/pKI4keZ7kUpIHQVffIwxU0e91VPHlJK+T9Or19y7Ah5N8TLJeg3eSXO9CwcNCwQCPkWWhFzE2iZ84viz4ED4X4DFuNPvLgO8XCoZ4Wu7vF3oeo0LBL5xcFnwA7wsFI9xs5+0HvFG33ih4NitvUejZAgp/sLoseAVvC7dD3NotfxHw3ZaCl+jtBT6qOn+n94CuoV8o+Fv/27WQ4E3dXh9XZyT18Kql4M7/OozJsdnBb1xoJd0uFIxqzyvzgJ+Y3KAxtrBeJ6yqJt/EEGfmmUlwDB9aVX3FCbwwPbCNeaANOKoX6UvL41axHuOd6tYtBA5OYdP0a9XECOfmhbbBUT0u26pBNjHAvUWgs8DBFdPD/ISDXYCDa/iBb3UXC0GRf9rA4qSLGyBIAAAAAElFTkSuQmCC)}.row-toggle.tSelect.disabled{opacity:.6;cursor:not-allowed;transform:initial!important}.row-toggle.tSelect.disabled:hover{width:1.5625rem;height:1.5625rem;border:.125rem var(--offWhite) solid;border-radius:.9375rem;transition:background-color .5s;position:absolute;top:.8125rem;left:1.0625rem;background-color:var(--background)}\n"] }]
+            args: [{ selector: 'app-table-cell-select', template: "<div\n  #toggleButton\n  (click)=\"toggle(item)\"\n  *ngIf=\"!item.hideSelect\"\n  [ngClass]=\"{ selected: item.selected, disabled: disableToggle }\"\n  attr.name=\"RowSelect0_{{ item.name }}\"\n  class=\"row-toggle tSelect\"\n  id=\"RowSelect0_{{ item.id }}\"\n  attr.data-id=\"{{item.id}}\"\n  [matTooltip]=\"tooltip\"\n></div>\n", styles: [".row-toggle.tSelect{width:1.5625rem;height:1.5625rem;border:.1rem var(--stroke) solid;border-radius:.9375rem;cursor:pointer;position:absolute;top:.8125rem;left:.625rem;background-color:var(--navigation)}.row-toggle.tSelect:hover{border:.125rem var(--placeholder) solid;background-color:var(--background)}.row-toggle.tSelect.selected{background-color:var(--green);background-size:45%;background-position:center center;border:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAD+vg1LAAABdElEQVRIia3UPWsUURSH8f9GRRvtFKtIgoKggo2CYO0XsLKzsbARbNKJYGPndxEEO8VGRRvBF6xFBAkplPiyb/lZzAx7d9jE3ewcmOLOPTyc85x7bw/pKI4keZ7kUpIHQVffIwxU0e91VPHlJK+T9Or19y7Ah5N8TLJeg3eSXO9CwcNCwQCPkWWhFzE2iZ84viz4ED4X4DFuNPvLgO8XCoZ4Wu7vF3oeo0LBL5xcFnwA7wsFI9xs5+0HvFG33ih4NitvUejZAgp/sLoseAVvC7dD3NotfxHw3ZaCl+jtBT6qOn+n94CuoV8o+Fv/27WQ4E3dXh9XZyT18Kql4M7/OozJsdnBb1xoJd0uFIxqzyvzgJ+Y3KAxtrBeJ6yqJt/EEGfmmUlwDB9aVX3FCbwwPbCNeaANOKoX6UvL41axHuOd6tYtBA5OYdP0a9XECOfmhbbBUT0u26pBNjHAvUWgs8DBFdPD/ISDXYCDa/iBb3UXC0GRf9rA4qSLGyBIAAAAAElFTkSuQmCC)}.row-toggle.tSelect.disabled{opacity:.3;cursor:not-allowed;transform:initial!important}.row-toggle.tSelect.disabled:hover{border:.1rem var(--stroke) solid;background-color:var(--navigation)}\n"] }]
         }] });
 
 class TableCellMenuComponent {
@@ -5672,6 +5690,8 @@ class IdentitiesPageService extends ListPageServiceClass {
             { label: 'Created At', path: 'createdAt' },
             { label: 'ID', path: 'id' },
         ];
+        this.identityRoleAttributes = [];
+        this.selectedIdentityRoleAttributes = [];
         this.selectedIdentity = new Identity$1();
         this.columnFilters = {
             name: '',
@@ -5697,9 +5717,49 @@ class IdentitiesPageService extends ListPageServiceClass {
         this.validate = (formData) => {
             return Promise.resolve({ passed: true });
         };
+        this.filterService.filtersChanged.subscribe(filters => {
+            let identityFilter;
+            filters.forEach((filter) => {
+                switch (filter.columnId) {
+                    case 'identityRoles':
+                        identityFilter = true;
+                        break;
+                }
+            });
+            if (!identityFilter) {
+                this.selectedIdentityRoleAttributes = [];
+            }
+        });
     }
     initTableColumns() {
         this.initMenuActions();
+        const self = this;
+        const identityRolesHeaderComponentParams = {
+            filterType: 'ATTRIBUTE',
+            enableSorting: true,
+            appendAttributeHash: false,
+            getRoleAttributes: () => {
+                return self.identityRoleAttributes;
+            },
+            getNamedAttributes: () => {
+                return [];
+            },
+            getSelectedRoleAttributes: () => {
+                return self.selectedIdentityRoleAttributes;
+            },
+            getSelectedNamedAttributes: () => {
+                return [];
+            },
+            setSelectedRoleAttributes: (attributes) => {
+                self.selectedIdentityRoleAttributes = attributes;
+            },
+            setSelectedNamedAttributes: (attributes) => {
+                // no-op
+            },
+            getNamedAttributesMap: () => {
+                return {};
+            }
+        };
         const nameRenderer = (row) => {
             return `<a href="./identities/${row?.data?.id}">
                         <div class="col cell-name-renderer" data-id="${row?.data?.id}">
@@ -5811,6 +5871,7 @@ class IdentitiesPageService extends ListPageServiceClass {
                 field: 'roleAttributes',
                 headerName: 'Roles',
                 headerComponent: TableColumnDefaultComponent,
+                headerComponentParams: identityRolesHeaderComponentParams,
                 onCellClicked: (data) => {
                     if (this.hasSelectedText()) {
                         return;
@@ -5906,6 +5967,12 @@ class IdentitiesPageService extends ListPageServiceClass {
         }
         return tableColumns;
     }
+    getIdentityRoleAttributes() {
+        return this.zitiService.get('identity-role-attributes', {}, []).then((result) => {
+            this.identityRoleAttributes = result.data;
+            return result;
+        });
+    }
     getData(filters, sort, page) {
         // we can customize filters or sorting here before moving on...
         this.paging.page = page || this.paging.page;
@@ -7419,6 +7486,7 @@ class DataTableComponent {
         this.pageChanged = new EventEmitter();
         this._view = 'list';
         this.filterOptions = [];
+        this.appendAttributeHash = true;
         this.attributesColumn = '';
         this.dateTimeColumn = '';
         this.dateTimeFilterLabel = '';
@@ -7634,6 +7702,7 @@ class DataTableComponent {
             }, 100);
         }
         else if (type === 'ATTRIBUTE') {
+            this.appendAttributeHash = headerComponentParams.appendAttributeHash !== false;
             this.attributesColumn = columnId;
             this.roleAttributes = headerComponentParams?.getRoleAttributes();
             this.namedAttributes = headerComponentParams?.getNamedAttributes();
@@ -7721,8 +7790,8 @@ class DataTableComponent {
                     label += ', ';
                     value += ', ';
                 }
-                label += '#' + attr;
-                value += '%23' + attr;
+                label += ((this.appendAttributeHash ? '#' : '') + attr);
+                value += ((this.appendAttributeHash ? '%23' : '') + attr);
             });
         }
         else {
@@ -8975,11 +9044,11 @@ class FormHeaderComponent {
         return this.data.badges || this.badges;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormHeaderComponent, selector: "lib-form-header", inputs: { data: "data", badges: "badges", title: "title", moreActions: "moreActions", formView: "formView", saveDisabled: "saveDisabled", saveTooltip: "saveTooltip", actionButtonText: "actionButtonText", moreActionsText: "moreActionsText", showHeaderToggle: "showHeaderToggle", showHeaderButton: "showHeaderButton", multiActions: "multiActions" }, outputs: { formViewChange: "formViewChange", actionRequested: "actionRequested", multiActionRequested: "multiActionRequested" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n    <div class=\"form-header-group\">\n        <div class=\"form-title-container\">\n            <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n            </div>\n            <div class=\"form-header-title-text\">\n                <span class=\"form-title\">{{title}}</span>\n                <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n            </div>\n        </div>\n        <div class=\"header-actions-container\">\n            <div *ngIf=\"showHeaderToggle\" class=\"form-header-toggle-container\">\n                <span\n                        class=\"toggle-option-text\"\n                        [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n                        (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n                >\n                    FORM\n                </span>\n                <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n                    <div\n                            class=\"form-toggle-switch\"\n                            [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n                    >\n                        <div class=\"form-toggle-indicator\"></div>\n                        <div class=\"form-toggle-indicator\"></div>\n                    </div>\n                </div>\n                <span\n                        class=\"toggle-option-text\"\n                        [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n                        (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n                >\n                    JSON\n                </span>\n            </div>\n            <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n                <div class=\"more-actions-button\">\n                    <div class=\"more-actions-label\">\n                        <div class=\"more-actions-text\">{{moreActionsText}}</div>\n                        <div class=\"more-actions-arrow\"></div>\n                    </div>\n                </div>\n                <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n                    <div\n                        *ngFor=\"let action of moreActions\"\n                        class=\"more-actions-item\"\n                        (click)=\"requestAction(action)\"\n                    >\n                        {{action.label}}\n                    </div>\n                </div>\n            </div>\n            <div class=\"save-button\"\n                 *ngIf=\"!hasMultiActions && showHeaderButton\"\n                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n            <lib-multi-action-button\n                    *ngIf=\"hasMultiActions\"\n                [actions]=\"saveActions\"\n                (actionRequested)=\"actionClicked($event)\"\n            ></lib-multi-action-button>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of headerBadges\" class=\"header-badge-container {{badge.class}}\">\n            <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n            <span class=\"badge-label\">{{badge.label}}</span>\n        </div>\n    </div>\n</div>\n", styles: [":host{position:relative;width:100%;margin-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:999999;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:1.5625rem;width:100%;padding-left:.9375rem;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:1.875rem;padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormHeaderComponent, selector: "lib-form-header", inputs: { data: "data", badges: "badges", title: "title", moreActions: "moreActions", formView: "formView", saveDisabled: "saveDisabled", saveTooltip: "saveTooltip", actionButtonText: "actionButtonText", moreActionsText: "moreActionsText", showHeaderToggle: "showHeaderToggle", showHeaderButton: "showHeaderButton", multiActions: "multiActions" }, outputs: { formViewChange: "formViewChange", actionRequested: "actionRequested", multiActionRequested: "multiActionRequested" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n    <div class=\"form-header-group\">\n        <div class=\"form-title-container\">\n            <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n            </div>\n            <div class=\"form-header-title-text\">\n                <span class=\"form-title\">{{title}}</span>\n                <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n            </div>\n        </div>\n        <div class=\"header-actions-container\">\n            <div *ngIf=\"showHeaderToggle\" class=\"form-header-toggle-container\">\n                <span\n                        class=\"toggle-option-text\"\n                        [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n                        (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n                >\n                    FORM\n                </span>\n                <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n                    <div\n                            class=\"form-toggle-switch\"\n                            [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n                    >\n                        <div class=\"form-toggle-indicator\"></div>\n                        <div class=\"form-toggle-indicator\"></div>\n                    </div>\n                </div>\n                <span\n                        class=\"toggle-option-text\"\n                        [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n                        (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n                >\n                    JSON\n                </span>\n            </div>\n            <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n                <div class=\"more-actions-button\">\n                    <div class=\"more-actions-label\">\n                        <div class=\"more-actions-text\">{{moreActionsText}}</div>\n                        <div class=\"more-actions-arrow\"></div>\n                    </div>\n                </div>\n                <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n                    <div\n                        *ngFor=\"let action of moreActions\"\n                        class=\"more-actions-item\"\n                        (click)=\"requestAction(action)\"\n                    >\n                        {{action.label}}\n                    </div>\n                </div>\n            </div>\n            <div class=\"save-button\"\n                 *ngIf=\"!hasMultiActions && showHeaderButton\"\n                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n            <lib-multi-action-button\n                    *ngIf=\"hasMultiActions\"\n                [actions]=\"saveActions\"\n                (actionRequested)=\"actionClicked($event)\"\n            ></lib-multi-action-button>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of headerBadges\" class=\"header-badge-container {{badge.class}}\">\n            <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n            <span class=\"badge-label\">{{badge.label}}</span>\n        </div>\n    </div>\n</div>\n", styles: [":host{position:relative;width:100%;margin-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:999999;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:1.5625rem;width:100%;padding-left:.9375rem;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:1.875rem;padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: MultiActionButtonComponent, selector: "lib-multi-action-button", inputs: ["actions"], outputs: ["actionRequested"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-header', template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n    <div class=\"form-header-group\">\n        <div class=\"form-title-container\">\n            <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n            </div>\n            <div class=\"form-header-title-text\">\n                <span class=\"form-title\">{{title}}</span>\n                <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n            </div>\n        </div>\n        <div class=\"header-actions-container\">\n            <div *ngIf=\"showHeaderToggle\" class=\"form-header-toggle-container\">\n                <span\n                        class=\"toggle-option-text\"\n                        [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n                        (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n                >\n                    FORM\n                </span>\n                <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n                    <div\n                            class=\"form-toggle-switch\"\n                            [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n                    >\n                        <div class=\"form-toggle-indicator\"></div>\n                        <div class=\"form-toggle-indicator\"></div>\n                    </div>\n                </div>\n                <span\n                        class=\"toggle-option-text\"\n                        [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n                        (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n                >\n                    JSON\n                </span>\n            </div>\n            <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n                <div class=\"more-actions-button\">\n                    <div class=\"more-actions-label\">\n                        <div class=\"more-actions-text\">{{moreActionsText}}</div>\n                        <div class=\"more-actions-arrow\"></div>\n                    </div>\n                </div>\n                <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n                    <div\n                        *ngFor=\"let action of moreActions\"\n                        class=\"more-actions-item\"\n                        (click)=\"requestAction(action)\"\n                    >\n                        {{action.label}}\n                    </div>\n                </div>\n            </div>\n            <div class=\"save-button\"\n                 *ngIf=\"!hasMultiActions && showHeaderButton\"\n                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n            <lib-multi-action-button\n                    *ngIf=\"hasMultiActions\"\n                [actions]=\"saveActions\"\n                (actionRequested)=\"actionClicked($event)\"\n            ></lib-multi-action-button>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of headerBadges\" class=\"header-badge-container {{badge.class}}\">\n            <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n            <span class=\"badge-label\">{{badge.label}}</span>\n        </div>\n    </div>\n</div>\n", styles: [":host{position:relative;width:100%;margin-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:999999;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:1.5625rem;width:100%;padding-left:.9375rem;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:1.875rem;padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}\n"] }]
+            args: [{ selector: 'lib-form-header', template: "<div class=\"form-header-container\" [ngClass]=\"{'show-more-actions': (moreActions && moreActions.length > 0 && data.id)}\">\n    <div class=\"form-header-group\">\n        <div class=\"form-title-container\">\n            <div class=\"form-title-back-arrow\" (click)=\"requestAction({name: 'close'})\">\n                <div class=\"form-title-back-arrow-icon icon-back-arrow\"></div>\n            </div>\n            <div class=\"form-header-title-text\">\n                <span class=\"form-title\">{{title}}</span>\n                <span class=\"form-title title-name\" *ngIf=\"data.name\">{{data.name}}</span>\n            </div>\n        </div>\n        <div class=\"header-actions-container\">\n            <div *ngIf=\"showHeaderToggle\" class=\"form-header-toggle-container\">\n                <span\n                        class=\"toggle-option-text\"\n                        [ngClass]=\"{'toggle-option-selected': formView === 'simple'}\"\n                        (click)=\"requestAction({name: 'toggle-view', data: 'raw'})\"\n                >\n                    FORM\n                </span>\n                <div class=\"form-header-toggle\" (click)=\"requestAction({name: 'toggle-view', data: formView})\">\n                    <div\n                            class=\"form-toggle-switch\"\n                            [ngClass]=\"{'toggle-left': formView === 'simple', 'toggle-right': formView === 'raw'}\"\n                    >\n                        <div class=\"form-toggle-indicator\"></div>\n                        <div class=\"form-toggle-indicator\"></div>\n                    </div>\n                </div>\n                <span\n                        class=\"toggle-option-text\"\n                        [ngClass]=\"{'toggle-option-selected': formView === 'raw'}\"\n                        (click)=\"requestAction({name:'toggle-view', data: 'simple'})\"\n                >\n                    JSON\n                </span>\n            </div>\n            <div class=\"more-actions-container\" [ngClass]=\"{'more-actions-open': showActionsDropDown}\"  *ngIf=\"hasMoreActions\" (click)=\"showMoreActions()\">\n                <div class=\"more-actions-button\">\n                    <div class=\"more-actions-label\">\n                        <div class=\"more-actions-text\">{{moreActionsText}}</div>\n                        <div class=\"more-actions-arrow\"></div>\n                    </div>\n                </div>\n                <div class=\"more-actions-list\" *ngIf=\"showActionsDropDown\" (clickOutside)=\"closeActionsMoreActions()\">\n                    <div\n                        *ngFor=\"let action of moreActions\"\n                        class=\"more-actions-item\"\n                        (click)=\"requestAction(action)\"\n                    >\n                        {{action.label}}\n                    </div>\n                </div>\n            </div>\n            <div class=\"save-button\"\n                 *ngIf=\"!hasMultiActions && showHeaderButton\"\n                 (click)=\"requestAction({name: 'save'})\"\n                 [ngClass]=\"{'save-disabled': saveDisabled}\"\n                 matTooltip=\"{{saveDisabled ? saveTooltip : ''}}\"\n                 matTooltipPosition=\"below\"\n            >{{actionButtonText}}</div>\n            <lib-multi-action-button\n                    *ngIf=\"hasMultiActions\"\n                [actions]=\"saveActions\"\n                (actionRequested)=\"actionClicked($event)\"\n            ></lib-multi-action-button>\n        </div>\n    </div>\n    <div class=\"form-header-group badges-container\">\n        <div *ngFor=\"let badge of headerBadges\" class=\"header-badge-container {{badge.class}}\">\n            <span *ngIf=\"badge.circle\" class=\"circle {{badge.circle}}\"></span>\n            <span class=\"badge-label\">{{badge.label}}</span>\n        </div>\n    </div>\n</div>\n", styles: [":host{position:relative;width:100%;margin-bottom:.625rem;display:flex;justify-content:center;padding-left:3.125rem;padding-right:3.125rem}.form-header-container{display:flex;flex-direction:column;width:100%;padding-right:var(--paddingMedium);max-width:68.75rem}.form-header-container.show-more-actions .form-title-container{max-width:calc(100% - 23.4375rem)}.form-header-container.show-more-actions .header-actions-container{min-width:23.4375rem}.form-header-container .form-header-group{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%}.form-header-container .form-header-group.badges-container{justify-content:flex-start;margin-left:1.875rem;margin-top:.3125rem;gap:.625rem}.form-header-container .form-title-container{display:flex;flex-direction:row;justify-content:flex-start;max-width:calc(100% - 12.5rem)}.form-header-container .form-title-container .form-header-title-text{overflow:hidden;display:block;white-space:nowrap;text-overflow:ellipsis}.form-header-container .form-title-container .form-title{width:100%;flex:1 1 auto;font-weight:700;font-size:1.375rem;color:var(--tableText);margin-left:.4375rem;min-width:8.125rem;text-wrap:nowrap}.form-header-container .form-title-container .form-title.title-name{color:var(--primary);margin-left:.3125rem}.form-header-container .form-title-container .form-title-back-arrow{display:flex;align-items:center;justify-content:flex-start;transform:scaleX(1.25);margin-left:var(--marginSmall);width:1.325rem;min-width:1.325rem;padding-left:.125rem;cursor:pointer}.form-header-container .form-title-container .form-title-back-arrow:hover{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(90%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow:active{background-color:#fff;border-radius:var(--inputBorderRadius);filter:brightness(80%);transition:.3s}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-arrow-icon{font-family:icomoon!important;font-size:1rem;height:1rem;font-weight:600;margin-top:.05rem;color:var(--tableText)}.form-header-container .form-title-container .form-title-back-arrow .form-title-back-button-line{border-color:var(--tableText);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;width:.875rem;position:absolute;left:.5rem}.form-header-container .header-actions-container{display:flex;flex-direction:row;min-width:11.25rem;justify-content:flex-end}.form-header-container .header-actions-container .save-button{min-width:4.0625rem;height:2.0625rem;text-transform:none}.form-header-container .header-actions-container .save-button.save-disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}.form-header-container .header-actions-container .save-button.save-disabled:active{transform:translateY(0);background:var(--primary)}.more-actions-container{width:9.375rem;height:2.0625rem;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer;z-index:999999;margin-right:1.25rem}.more-actions-container .more-actions-button{height:100%;width:100%;background-color:var(--inputBorder);display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:.3125rem;position:relative;cursor:pointer}.more-actions-container .more-actions-button:hover{outline:0;filter:brightness(95%)}.more-actions-container .more-actions-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:.9375rem;margin-right:.625rem}.more-actions-container .more-actions-label .more-actions-arrow{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-size:1.25rem .625rem;width:1.25rem;height:.625rem;transition:.3s}.more-actions-container .more-actions-label .more-actions-text{color:var(--tableText);font-weight:600}.more-actions-container .more-actions-list{display:flex;flex-direction:column;background-color:var(--white);position:absolute;top:2.0625rem;width:100%;box-shadow:0 .1875rem .3125rem .0625rem var(--boxShadow);border-radius:.3125rem}.more-actions-container .more-actions-item{display:flex;flex-direction:row;align-items:center;height:1.5625rem;width:100%;padding-left:.9375rem;color:var(--tableText);cursor:pointer}.more-actions-container .more-actions-item:hover{background-color:var(--inputBorder)}.more-actions-container.more-actions-open .more-actions-arrow{transform:rotate(180deg)}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center;margin-right:1.25rem}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.header-badge-container{height:1.875rem;display:flex;flex-direction:row;align-items:center;border-radius:1.875rem;padding:0rem .75rem;font-weight:600;color:var(--tableText);background:var(--inputBorder)}.header-badge-container.online{background-color:var(--greenShadow)}.header-badge-container.unreg{background-color:var(--redShadow);color:var(--red)}.header-badge-container .badge-label{margin-left:.3125rem}.header-badge-container.verified{background-color:var(--primary);color:var(--white)}.header-badge-container .circle.false{background-color:var(--white)}.header-badge-container .circle.verified{font-size:1.2rem;color:var(--white);font-family:icomoon;background-color:transparent;width:1.2rem;height:1.2rem}.header-badge-container .circle.verified:before{content:\"\\e958\"}.header-badge-container.unknown{background-color:var(--highlightedOpaque)}.header-badge-container.unknown .circle{background-color:var(--highlighted)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], badges: [{
@@ -10898,7 +10967,6 @@ class IdentitiesPageComponent extends ListPageComponent {
         this.extService = extService;
         this.title = 'Identities';
         this.isLoading = false;
-        this.identityRoleAttributes = [];
         this.formDataChanged = false;
     }
     ngOnInit() {
@@ -10913,7 +10981,7 @@ class IdentitiesPageComponent extends ListPageComponent {
             }
         }));
         this.zacWrapperService.resetZacEvents();
-        this.getIdentityRoleAttributes();
+        this.svc.getIdentityRoleAttributes();
         super.ngOnInit();
     }
     headerActionClicked(action) {
@@ -10938,7 +11006,7 @@ class IdentitiesPageComponent extends ListPageComponent {
         this.svc.sideModalOpen = false;
         if (event?.refresh) {
             this.refreshData();
-            this.getIdentityRoleAttributes();
+            this.svc.getIdentityRoleAttributes();
         }
     }
     dataChanged(event) {
@@ -11024,11 +11092,6 @@ class IdentitiesPageComponent extends ListPageComponent {
     deleteItem(item) {
         this.openBulkDelete([item], 'identity');
     }
-    getIdentityRoleAttributes() {
-        this.svc.getIdentitiesRoleAttributes().then((result) => {
-            this.identityRoleAttributes = result.data;
-        });
-    }
     openIdentityVisualizer(identity) {
         this.dialogRef = this.dialogForm.open(IdentityServicePathComponent, {
             data: {
@@ -11642,10 +11705,12 @@ class ServiceFormService {
         this.associatedTerminatorNames = [];
         this.associatedTerminatorsMap = {};
         this.associatedTerminatorsTotal = 0;
+        this.associatedTerminatorsFilter = '';
         this.associatedServicePolicies = [];
         this.associatedServicePolicyNames = [];
         this.associatedServicePoliciesMap = {};
         this.associatedServicePoliciesTotal = 0;
+        this.associatedServicePoliciesFilter = '';
         this.associatedConfigsLoading = false;
         this.associatedServicePoliciesLoading = false;
         this.associatedTerminatorsLoading = false;
@@ -11664,6 +11729,8 @@ class ServiceFormService {
             'var(--formSubGroup)'
         ];
         this.subscription = new Subscription();
+        this.getAssociatedServicePoliciesDebounced = debounce(this.getAssociatedServicePolicies.bind(this), 300);
+        this.getAssociatedTerminatorsDebounced = debounce(this.getAssociatedTerminators.bind(this), 300);
         this._apiData = {};
     }
     resetFormData() {
@@ -11707,11 +11774,24 @@ class ServiceFormService {
             throw resp;
         });
     }
-    getAssociatedServicePolicies() {
+    getAssociatedServicePolicies(nameFilter) {
         const paging = this.zitiService.DEFAULT_PAGING;
         paging.total = 5;
         this.associatedServicePoliciesLoading = true;
-        this.zitiService.getSubdata('services', this.formData.id, 'service-policies', paging).then((result) => {
+        const filters = [];
+        if (!isEmpty(nameFilter)) {
+            paging.noSearch = false;
+            filters.push({
+                columnId: 'name',
+                value: nameFilter,
+                label: nameFilter,
+                filterName: 'Service Policy Name',
+                type: 'TEXTINPUT',
+                verb: 'icontains'
+            });
+        }
+        this.associatedServicePoliciesFilter = nameFilter;
+        this.zitiService.getSubdata('services', this.formData.id, 'service-policies', paging, undefined, filters).then((result) => {
             this.associatedServicePolicies = result.data;
             this.associatedServicePoliciesTotal = result.meta?.pagination.totalCount || 0;
             this.associatedServicePolicyNames = this.associatedServicePolicies.map((policy) => {
@@ -11721,8 +11801,8 @@ class ServiceFormService {
             });
             if (this.associatedServicePoliciesTotal > 5) {
                 let roleAttributes = cloneDeep(this.formData.roleAttributes);
-                roleAttributes = roleAttributes.map((attribute) => {
-                    return '%23' + attribute;
+                roleAttributes = map$1(roleAttributes, (attribute) => {
+                    return ('%23' + attribute);
                 });
                 roleAttributes.push('%40' + this.formData.id);
                 let urlParam = '';
@@ -11741,7 +11821,7 @@ class ServiceFormService {
                 };
                 localStorage.setItem('search_filters', JSON.stringify([searchFilter]));
                 this.associatedServicePolicies.push({
-                    name: 'show more results...',
+                    name: 'view all results ',
                     href: '/service-policies?serviceRoles=' + urlParam,
                     linkClass: 'preview-more-results',
                     //iconClass: 'icon-open',
@@ -11752,12 +11832,28 @@ class ServiceFormService {
             this.associatedServicePoliciesLoading = false;
         });
     }
-    getAssociatedTerminators() {
+    getAssociatedTerminators(nameFilter) {
         this.associatedTerminatorsLoading = true;
-        this.zitiService.getSubdata('services', this.formData.id, 'terminators').then((result) => {
+        this.associatedTerminatorsFilter = nameFilter;
+        const paging = this.zitiService.DEFAULT_PAGING;
+        paging.total = 5;
+        paging.sort = 'createdAt';
+        const filters = [];
+        if (!isEmpty(nameFilter)) {
+            paging.noSearch = false;
+            filters.push({
+                columnId: 'service.name',
+                value: nameFilter,
+                label: nameFilter,
+                filterName: 'Service Name',
+                type: 'TEXTINPUT',
+                verb: 'icontains'
+            });
+        }
+        this.zitiService.getSubdata('services', this.formData.id, 'terminators', paging, undefined, filters).then((result) => {
             this.associatedTerminators = result.data;
             this.associatedTerminatorsTotal = result.meta?.pagination.totalCount || 0;
-            this.associatedTerminatorNames = this.associatedTerminators.map((terminator) => {
+            this.associatedTerminatorNames = map$1(this.associatedTerminators, (terminator) => {
                 this.associatedTerminatorsMap[terminator.id] = terminator.binding + ':      ' + terminator.address;
                 terminator.name = terminator.router.name + ':       ' + terminator.address;
                 terminator.href = '/terminators/' + terminator.id;
@@ -11774,7 +11870,7 @@ class ServiceFormService {
                 };
                 localStorage.setItem('search_filters', JSON.stringify([searchFilter]));
                 this.associatedTerminators.push({
-                    name: 'show more results...',
+                    name: 'view all results ',
                     href: '/terminators?service=' + this.formData.id,
                     linkClass: 'preview-more-results',
                     //iconClass: 'icon-open',
@@ -11844,7 +11940,7 @@ class ServiceFormService {
             this.routers = result.data;
         });
     }
-    getAssociatedConfigs() {
+    getAssociatedConfigs(nameFilter) {
         this.associatedConfigsLoading = true;
         this.zitiService.getSubdata('services', this.formData.id, 'configs').then((result) => {
             this.associatedConfigs = result.data;
@@ -12062,6 +12158,12 @@ class ServiceFormService {
         }
         return isEmpty(this.configErrors);
     }
+    get showServicePoliciesFilter() {
+        return !isEmpty(this.associatedServicePoliciesFilter) || this.associatedServicePoliciesTotal > 5;
+    }
+    get showTerminatorsFilter() {
+        return !isEmpty(this.associatedTerminatorsFilter) || this.associatedTerminatorsTotal > 5;
+    }
     set apiData(data) {
         this._apiData = data;
     }
@@ -12211,8 +12313,9 @@ class ServicePolicyFormService {
                 return svc.name;
             });
             this.associatedServiceNames = [...this.associatedServiceNames, ...namedAttributes];
-            this.associatedServiceNames = sortBy(this.associatedServices);
+            this.associatedServiceNames = sortBy(this.associatedServiceNames);
             this.associatedServiceNames = sortedUniq(this.associatedServiceNames);
+            this.associatedIdentityNames = this.associatedServiceNames.filter(item => item !== undefined);
             return this.associatedServices;
         });
     }
@@ -12233,6 +12336,7 @@ class ServicePolicyFormService {
             this.associatedIdentityNames = [...this.associatedIdentityNames, ...namedAttributes];
             this.associatedIdentityNames = sortBy(this.associatedIdentityNames);
             this.associatedIdentityNames = sortedUniq(this.associatedIdentityNames);
+            this.associatedIdentityNames = this.associatedIdentityNames.filter(item => item !== undefined);
         });
     }
     getAssociatedPostureChecksByAttribute(roleAttributes, namedAttributes) {
@@ -12380,6 +12484,8 @@ class ServicesPageService extends ListPageServiceClass {
             os: '',
             createdAt: '',
         };
+        this.roleAttributes = [];
+        this.selectedRoleAttributes = [];
         this.menuItems = [
             { name: 'Edit', action: 'update' },
             { name: 'Delete', action: 'delete' },
@@ -12402,6 +12508,33 @@ class ServicesPageService extends ListPageServiceClass {
             });
             return roles;
         };
+        const self = this;
+        const serviceRolesHeaderComponentParams = {
+            filterType: 'ATTRIBUTE',
+            enableSorting: true,
+            appendAttributeHash: false,
+            getRoleAttributes: () => {
+                return self.roleAttributes;
+            },
+            getNamedAttributes: () => {
+                return [];
+            },
+            getSelectedRoleAttributes: () => {
+                return self.selectedRoleAttributes;
+            },
+            getSelectedNamedAttributes: () => {
+                return [];
+            },
+            setSelectedRoleAttributes: (attributes) => {
+                self.selectedRoleAttributes = attributes;
+            },
+            setSelectedNamedAttributes: (attributes) => {
+                // no-op
+            },
+            getNamedAttributesMap: () => {
+                return {};
+            }
+        };
         return [
             {
                 colId: 'name',
@@ -12431,6 +12564,7 @@ class ServicesPageService extends ListPageServiceClass {
                 field: 'roleAttributes',
                 headerName: 'Roles',
                 headerComponent: TableColumnDefaultComponent,
+                headerComponentParams: serviceRolesHeaderComponentParams,
                 onCellClicked: (data) => {
                     if (this.hasSelectedText()) {
                         return;
@@ -12490,7 +12624,10 @@ class ServicesPageService extends ListPageServiceClass {
         });
     }
     getServiceRoleAttributes() {
-        return this.zitiService.get('service-role-attributes', {}, []);
+        return this.zitiService.get('service-role-attributes', {}, []).then((result) => {
+            this.roleAttributes = result.data;
+            return result;
+        });
     }
     getIdentityNamedAttributes() {
         return this.zitiService.get('identities', {}, []).then((result) => {
@@ -12692,8 +12829,10 @@ class PreviewListComponent {
         this.allowRemove = false;
         this.tooltip = '';
         this.showfilter = true;
+        this.localFilter = true;
         this.itemSelected = new EventEmitter();
         this.itemRemoved = new EventEmitter();
+        this.filterChanged = new EventEmitter();
         this.previewItems = [];
         this.hideOption = 'asdf';
         this.filterFor = '';
@@ -12717,6 +12856,10 @@ class PreviewListComponent {
         this.sort();
     }
     onKeydownEvent() {
+        if (!this.localFilter) {
+            this.filterChanged.emit(this.filterFor);
+            return;
+        }
         this.previewItems = [];
         for (let i = 0; i < this.allNames.length; i++) {
             if (!isEmpty(this.allNames)) {
@@ -12772,11 +12915,11 @@ class PreviewListComponent {
         return './' + hrefVal;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewListComponent, deps: [{ token: i4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewListComponent, selector: "lib-preview-list", inputs: { label: "label", clickable: "clickable", isLoading: "isLoading", allNames: "allNames", items: "items", allowRemove: "allowRemove", tooltip: "tooltip", showfilter: "showfilter" }, outputs: { itemSelected: "itemSelected", itemRemoved: "itemRemoved" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"listBox row\">\n    <input *ngIf=\"showfilter\" (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n    <div class=\"text row\">\n        <div *ngIf=\"previewItems.length <= 0\" class=\"listText\">\n            <span class=\"preview-name preview-placeholder\">no items to display...</span>\n        </div>\n        <div (click)=\"selected(item)\" *ngFor=\"let item of previewItems\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n            <div *ngIf=\"allowRemove\" class=\"icon-clear\" (click)=\"remove(item)\"></div>\n            <span *ngIf=\"!item.href\" class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n            <a *ngIf=\"item.href\" [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n                <span *ngIf=\"item.name\" class=\"preview-name\">{{ item.name }}<div *ngIf=\"item.iconClass\" class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div></span>\n            </a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"isLoading\" class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:100%;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:1.6875rem;font-size:.875rem;font-weight:600;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAuCAYAAABTTPsKAAAD4klEQVRYhc2ZyYsUSRSHvypLbRfGDfWgzngYFRR3EUQPOm5oOyMuKIoo4kk9iAriQfAPcAMvKuJBPAyiXmbAwWVUFGEYmMHlIi24ogd3cW3trpYnv4CooLKrKiuzqn5QUBmZEe/Lly9fvIjMPH36CmA4cABYAHSnsdQK/AVsBR4Y8E/ATaA30KXBYJ3agffA+Cywt8FhEZsx7jUPf/bC4BNwuc5woWYBPdTWmgti9hSwrv6MBToOrFVD92xwsqOOYFEqYAqBGzGOC5gshv07aANuNZCnM8A4IOcacsEFdjyp9lzly0KipZEBA7VYSKwEfpf7nTqU4uqpHkWYVlkInAR+ATZ4AZ4HmoErdQKeCVz0eGymO2asrpawE38D0xXHdjcfFM93aww7Avgf6CUPWyK4Dsw2cJfW7A4WA4/1P6NHcgHoV0PYfrLpwqFdTIv1vyAPvwXmyLMd8voQ4A+gaw1gu8rWENl2T3mO2AiBTfeARYphFB7TgMM1AD4sWy7V5sVyz78oBDZd0wvoZHe7HtiWIuw22fBntQ1iKVAxYFRw7PE8nVEZ2pwCbLPGdimsXbaPF7vYZYmi54A/gfneY7JSdCpwOyHYscC/QJOOLSOcA36NKg+iPIw6rNBM2Ka2bnqLBycAO1hjdfNgW2QzspbpDNj0EZintzSv6wdojdVUom9natIYAzRmXjbmyWakSgGbnigsnJdzepQngqmzXGXUd6wXam2y8aTUGOUAm/4DVnvHZmgpsDsG8G719SvF1bJRUuUCm84Au7zMkfWMl6sl6uPs5jXmmXIH6CxLRMkqu+Weh94BPwJvSvTrAzwCftCxhcFpq8AqMR4W8OXIFqk/AxPUv0lJfl/Q114gP4yGAT092BtxFrxxgL8Ay4D7OrYa4LciwKOBNRHrxKye0pdKjVcSw74eBSuV4RHXtUW0W9+HcQzHBUaVlFPUflxU+4eI9pKqBriUDqm+db9nSQwaJ4bLldUDOzyn9G904KHAxKRtpBkSpsQ3ZNL0sG1EW9r6quNw2R5Lab90vbX67ZXUS5cUcJTnZmjqtjQ2KAlD1QB/9v4PVAETbgnk5OWeSYQDVQKf9WayjKbnO9oxT03VAO8HrgZbAubpS1pU2tLHKrh/VOtGTdMVqdqQmAvs1Eo37z32LarGWrXXMAV4WW9gBGlL8sn2DS1YRo3U57TNScUvCWYJAxsDHPXarKy00vMgcD6pD5ZJ5mELkU3AQuC15+2stk/7JmEkjYnDlu+jtL/rpuZwRn0Rd/C0Zrrn+m69UauK71ulkt2EbU7HUtrFzxF9BXLpzzZLtusDZuUCvgHvMdO9Y7xsIwAAAABJRU5ErkJggg==);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;animation:loading .5s infinite linear;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewListComponent, selector: "lib-preview-list", inputs: { label: "label", clickable: "clickable", isLoading: "isLoading", allNames: "allNames", items: "items", allowRemove: "allowRemove", tooltip: "tooltip", showfilter: "showfilter", localFilter: "localFilter" }, outputs: { itemSelected: "itemSelected", itemRemoved: "itemRemoved", filterChanged: "filterChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"listBox row\">\n    <input *ngIf=\"showfilter\" (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n    <div class=\"text row\">\n        <div *ngIf=\"previewItems.length <= 0\" class=\"listText\">\n            <span class=\"preview-name preview-placeholder no-items-preview\">no items to display...</span>\n        </div>\n        <div (click)=\"selected(item)\" *ngFor=\"let item of previewItems\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n            <div *ngIf=\"allowRemove\" class=\"icon-clear\" (click)=\"remove(item)\"></div>\n            <span *ngIf=\"!item.href\" class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n            <a *ngIf=\"item.href\" [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n                <span *ngIf=\"item.name\" class=\"preview-name\">{{ item.name }}<div *ngIf=\"item.iconClass\" class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div></span>\n            </a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"isLoading\" class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:100%;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:1.6875rem;font-size:.875rem;font-weight:600;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAuCAYAAABTTPsKAAAD4klEQVRYhc2ZyYsUSRSHvypLbRfGDfWgzngYFRR3EUQPOm5oOyMuKIoo4kk9iAriQfAPcAMvKuJBPAyiXmbAwWVUFGEYmMHlIi24ogd3cW3trpYnv4CooLKrKiuzqn5QUBmZEe/Lly9fvIjMPH36CmA4cABYAHSnsdQK/AVsBR4Y8E/ATaA30KXBYJ3agffA+Cywt8FhEZsx7jUPf/bC4BNwuc5woWYBPdTWmgti9hSwrv6MBToOrFVD92xwsqOOYFEqYAqBGzGOC5gshv07aANuNZCnM8A4IOcacsEFdjyp9lzly0KipZEBA7VYSKwEfpf7nTqU4uqpHkWYVlkInAR+ATZ4AZ4HmoErdQKeCVz0eGymO2asrpawE38D0xXHdjcfFM93aww7Avgf6CUPWyK4Dsw2cJfW7A4WA4/1P6NHcgHoV0PYfrLpwqFdTIv1vyAPvwXmyLMd8voQ4A+gaw1gu8rWENl2T3mO2AiBTfeARYphFB7TgMM1AD4sWy7V5sVyz78oBDZd0wvoZHe7HtiWIuw22fBntQ1iKVAxYFRw7PE8nVEZ2pwCbLPGdimsXbaPF7vYZYmi54A/gfneY7JSdCpwOyHYscC/QJOOLSOcA36NKg+iPIw6rNBM2Ka2bnqLBycAO1hjdfNgW2QzspbpDNj0EZintzSv6wdojdVUom9natIYAzRmXjbmyWakSgGbnigsnJdzepQngqmzXGXUd6wXam2y8aTUGOUAm/4DVnvHZmgpsDsG8G719SvF1bJRUuUCm84Au7zMkfWMl6sl6uPs5jXmmXIH6CxLRMkqu+Weh94BPwJvSvTrAzwCftCxhcFpq8AqMR4W8OXIFqk/AxPUv0lJfl/Q114gP4yGAT092BtxFrxxgL8Ay4D7OrYa4LciwKOBNRHrxKye0pdKjVcSw74eBSuV4RHXtUW0W9+HcQzHBUaVlFPUflxU+4eI9pKqBriUDqm+db9nSQwaJ4bLldUDOzyn9G904KHAxKRtpBkSpsQ3ZNL0sG1EW9r6quNw2R5Lab90vbX67ZXUS5cUcJTnZmjqtjQ2KAlD1QB/9v4PVAETbgnk5OWeSYQDVQKf9WayjKbnO9oxT03VAO8HrgZbAubpS1pU2tLHKrh/VOtGTdMVqdqQmAvs1Eo37z32LarGWrXXMAV4WW9gBGlL8sn2DS1YRo3U57TNScUvCWYJAxsDHPXarKy00vMgcD6pD5ZJ5mELkU3AQuC15+2stk/7JmEkjYnDlu+jtL/rpuZwRn0Rd/C0Zrrn+m69UauK71ulkt2EbU7HUtrFzxF9BXLpzzZLtusDZuUCvgHvMdO9Y7xsIwAAAABJRU5ErkJggg==);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-name.no-items-preview{font-weight:400}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.preview-more-results .preview-name{font-weight:600;border-top-width:1px;text-transform:uppercase;font-size:.825rem;font-style:italic}.preview-more-results .preview-name:after{content:\"\\e939\";font-family:icomoon!important;font-style:normal}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;animation:loading .5s infinite linear;opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-preview-list', template: "<div class=\"listBox row\">\n    <input *ngIf=\"showfilter\" (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n    <div class=\"text row\">\n        <div *ngIf=\"previewItems.length <= 0\" class=\"listText\">\n            <span class=\"preview-name preview-placeholder\">no items to display...</span>\n        </div>\n        <div (click)=\"selected(item)\" *ngFor=\"let item of previewItems\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n            <div *ngIf=\"allowRemove\" class=\"icon-clear\" (click)=\"remove(item)\"></div>\n            <span *ngIf=\"!item.href\" class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n            <a *ngIf=\"item.href\" [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n                <span *ngIf=\"item.name\" class=\"preview-name\">{{ item.name }}<div *ngIf=\"item.iconClass\" class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div></span>\n            </a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"isLoading\" class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:100%;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:1.6875rem;font-size:.875rem;font-weight:600;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAuCAYAAABTTPsKAAAD4klEQVRYhc2ZyYsUSRSHvypLbRfGDfWgzngYFRR3EUQPOm5oOyMuKIoo4kk9iAriQfAPcAMvKuJBPAyiXmbAwWVUFGEYmMHlIi24ogd3cW3trpYnv4CooLKrKiuzqn5QUBmZEe/Lly9fvIjMPH36CmA4cABYAHSnsdQK/AVsBR4Y8E/ATaA30KXBYJ3agffA+Cywt8FhEZsx7jUPf/bC4BNwuc5woWYBPdTWmgti9hSwrv6MBToOrFVD92xwsqOOYFEqYAqBGzGOC5gshv07aANuNZCnM8A4IOcacsEFdjyp9lzly0KipZEBA7VYSKwEfpf7nTqU4uqpHkWYVlkInAR+ATZ4AZ4HmoErdQKeCVz0eGymO2asrpawE38D0xXHdjcfFM93aww7Avgf6CUPWyK4Dsw2cJfW7A4WA4/1P6NHcgHoV0PYfrLpwqFdTIv1vyAPvwXmyLMd8voQ4A+gaw1gu8rWENl2T3mO2AiBTfeARYphFB7TgMM1AD4sWy7V5sVyz78oBDZd0wvoZHe7HtiWIuw22fBntQ1iKVAxYFRw7PE8nVEZ2pwCbLPGdimsXbaPF7vYZYmi54A/gfneY7JSdCpwOyHYscC/QJOOLSOcA36NKg+iPIw6rNBM2Ka2bnqLBycAO1hjdfNgW2QzspbpDNj0EZintzSv6wdojdVUom9natIYAzRmXjbmyWakSgGbnigsnJdzepQngqmzXGXUd6wXam2y8aTUGOUAm/4DVnvHZmgpsDsG8G719SvF1bJRUuUCm84Au7zMkfWMl6sl6uPs5jXmmXIH6CxLRMkqu+Weh94BPwJvSvTrAzwCftCxhcFpq8AqMR4W8OXIFqk/AxPUv0lJfl/Q114gP4yGAT092BtxFrxxgL8Ay4D7OrYa4LciwKOBNRHrxKye0pdKjVcSw74eBSuV4RHXtUW0W9+HcQzHBUaVlFPUflxU+4eI9pKqBriUDqm+db9nSQwaJ4bLldUDOzyn9G904KHAxKRtpBkSpsQ3ZNL0sG1EW9r6quNw2R5Lab90vbX67ZXUS5cUcJTnZmjqtjQ2KAlD1QB/9v4PVAETbgnk5OWeSYQDVQKf9WayjKbnO9oxT03VAO8HrgZbAubpS1pU2tLHKrh/VOtGTdMVqdqQmAvs1Eo37z32LarGWrXXMAV4WW9gBGlL8sn2DS1YRo3U57TNScUvCWYJAxsDHPXarKy00vMgcD6pD5ZJ5mELkU3AQuC15+2stk/7JmEkjYnDlu+jtL/rpuZwRn0Rd/C0Zrrn+m69UauK71ulkt2EbU7HUtrFzxF9BXLpzzZLtusDZuUCvgHvMdO9Y7xsIwAAAABJRU5ErkJggg==);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;animation:loading .5s infinite linear;opacity:.7}\n"] }]
+            args: [{ selector: 'lib-preview-list', template: "<div class=\"listBox row\">\n    <input *ngIf=\"showfilter\" (keyup)=\"onKeydownEvent()\" [(ngModel)]=\"filterFor\" placeholder=\"Type to Filter\"/>\n    <div class=\"text row\">\n        <div *ngIf=\"previewItems.length <= 0\" class=\"listText\">\n            <span class=\"preview-name preview-placeholder no-items-preview\">no items to display...</span>\n        </div>\n        <div (click)=\"selected(item)\" *ngFor=\"let item of previewItems\" [ngClass]=\"{ clickable: clickable }\" class=\"listText\">\n            <div *ngIf=\"allowRemove\" class=\"icon-clear\" (click)=\"remove(item)\"></div>\n            <span *ngIf=\"!item.href\" class=\"preview-name\" matTooltip=\"{{tooltip}}\" matTooltipPosition=\"below\" matTooltipShowDelay=\"1000\">{{ item.name || item }}</span>\n            <a *ngIf=\"item.href\" [href]=\"getHrefVal(item.href)\" (click)=\"linkClicked($event, item)\" class=\"{{item.linkClass ? item.linkClass : ''}}\" matTooltip=\"{{tooltip}}\" matTooltipShowDelay=\"1000\" matTooltipPosition=\"below\">\n                <span *ngIf=\"item.name\" class=\"preview-name\">{{ item.name }}<div *ngIf=\"item.iconClass\" class=\"preview-item-icon {{item.iconClass}}\" (click)=\"remove(item)\"></div></span>\n            </a>\n        </div>\n    </div>\n</div>\n<div *ngIf=\"isLoading\" class=\"spinner-container\">\n    <span class=\"spinner\"></span>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:100%;position:relative}.counter{background-color:#4c5566;color:var(--white);position:absolute;right:0rem}.listBox{background-color:var(--stroke);padding:.625rem;border-radius:var(--inputBorderRadius);height:100%;min-height:3.75rem}.listBox input{height:2.5rem;border-radius:1.6875rem;font-size:.875rem;font-weight:600;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAuCAYAAABTTPsKAAAD4klEQVRYhc2ZyYsUSRSHvypLbRfGDfWgzngYFRR3EUQPOm5oOyMuKIoo4kk9iAriQfAPcAMvKuJBPAyiXmbAwWVUFGEYmMHlIi24ogd3cW3trpYnv4CooLKrKiuzqn5QUBmZEe/Lly9fvIjMPH36CmA4cABYAHSnsdQK/AVsBR4Y8E/ATaA30KXBYJ3agffA+Cywt8FhEZsx7jUPf/bC4BNwuc5woWYBPdTWmgti9hSwrv6MBToOrFVD92xwsqOOYFEqYAqBGzGOC5gshv07aANuNZCnM8A4IOcacsEFdjyp9lzly0KipZEBA7VYSKwEfpf7nTqU4uqpHkWYVlkInAR+ATZ4AZ4HmoErdQKeCVz0eGymO2asrpawE38D0xXHdjcfFM93aww7Avgf6CUPWyK4Dsw2cJfW7A4WA4/1P6NHcgHoV0PYfrLpwqFdTIv1vyAPvwXmyLMd8voQ4A+gaw1gu8rWENl2T3mO2AiBTfeARYphFB7TgMM1AD4sWy7V5sVyz78oBDZd0wvoZHe7HtiWIuw22fBntQ1iKVAxYFRw7PE8nVEZ2pwCbLPGdimsXbaPF7vYZYmi54A/gfneY7JSdCpwOyHYscC/QJOOLSOcA36NKg+iPIw6rNBM2Ka2bnqLBycAO1hjdfNgW2QzspbpDNj0EZintzSv6wdojdVUom9natIYAzRmXjbmyWakSgGbnigsnJdzepQngqmzXGXUd6wXam2y8aTUGOUAm/4DVnvHZmgpsDsG8G719SvF1bJRUuUCm84Au7zMkfWMl6sl6uPs5jXmmXIH6CxLRMkqu+Weh94BPwJvSvTrAzwCftCxhcFpq8AqMR4W8OXIFqk/AxPUv0lJfl/Q114gP4yGAT092BtxFrxxgL8Ay4D7OrYa4LciwKOBNRHrxKye0pdKjVcSw74eBSuV4RHXtUW0W9+HcQzHBUaVlFPUflxU+4eI9pKqBriUDqm+db9nSQwaJ4bLldUDOzyn9G904KHAxKRtpBkSpsQ3ZNL0sG1EW9r6quNw2R5Lab90vbX67ZXUS5cUcJTnZmjqtjQ2KAlD1QB/9v4PVAETbgnk5OWeSYQDVQKf9WayjKbnO9oxT03VAO8HrgZbAubpS1pU2tLHKrh/VOtGTdMVqdqQmAvs1Eo37z32LarGWrXXMAV4WW9gBGlL8sn2DS1YRo3U57TNScUvCWYJAxsDHPXarKy00vMgcD6pD5ZJ5mELkU3AQuC15+2stk/7JmEkjYnDlu+jtL/rpuZwRn0Rd/C0Zrrn+m69UauK71ulkt2EbU7HUtrFzxF9BXLpzzZLtusDZuUCvgHvMdO9Y7xsIwAAAABJRU5ErkJggg==);background-size:auto 1.3125rem;background-position:top .5rem right .75rem;background-repeat:no-repeat;margin-bottom:.625rem;padding-left:.875rem}.text{overflow-y:scroll;height:100%}.listText{width:100%;position:relative;float:left;font-size:.875rem;font-weight:600;padding-left:.625rem;padding-right:.625rem;margin-bottom:.125rem;color:var(--primary);display:flex;flex-direction:row;align-items:center;gap:.3125rem}.listText a{color:var(--primary);display:flex;flex-direction:row;align-items:center}.listText a:hover .preview-item-icon{text-decoration:underline}.listText .icon-clear{margin-top:.125rem}.listText .icon-clear:hover{color:var(--background)}::-webkit-scrollbar-thumb{background-color:var(--background)!important}.clickable{color:var(--primary);cursor:pointer}.clickable:hover,.clickable:focus{filter:brightness(90%)}.clickable:active{color:var(--icon);transform:translateY(.0625rem)}.clickable .preview-name:hover,.clickable .preview-name:focus{text-decoration:underline}.clickable .preview-name:active{text-decoration:underline}.preview-name{white-space:pre}.preview-name.preview-placeholder{font-style:italic}.preview-name.no-items-preview{font-weight:400}.preview-item-icon{margin-left:.4375rem;font-family:zac!important}.preview-more-results{margin-top:.3125rem}.preview-more-results .preview-name{font-weight:600;border-top-width:1px;text-transform:uppercase;font-size:.825rem;font-style:italic}.preview-more-results .preview-name:after{content:\"\\e939\";font-family:icomoon!important;font-style:normal}.spinner-container{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spinner-container .spinner{display:inline-block;width:2rem;height:2rem;border-radius:50%;background:transparent;border-top:.3125rem solid var(--tableText);border-right:.3125rem solid var(--tableText);border-bottom:.3125rem solid transparent;border-left:.3125rem solid transparent;animation:loading .5s infinite linear;opacity:.7}\n"] }]
         }], ctorParameters: function () { return [{ type: i4.Router }]; }, propDecorators: { label: [{
                 type: Input
             }], clickable: [{
@@ -12793,10 +12936,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], showfilter: [{
                 type: Input
+            }], localFilter: [{
+                type: Input
             }], itemSelected: [{
                 type: Output
             }], itemRemoved: [{
                 type: Output
+            }], filterChanged: [{
+                type: Output
             }] } });
 
 /*
@@ -12886,7 +13033,7 @@ class PreviewSelectionsComponent {
         this.dialogRef.close({ confirmed: false });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewSelectionsComponent, deps: [{ token: i5$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ZITI_DATA_SERVICE }, { token: ServicesPageService }, { token: GrowlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewSelectionsComponent, selector: "preview-selections", ngImport: i0, template: "<div class=\"preview-selections-container confirm-modal-container\" [ngClass]=\"{'error-state': state === 'ERROR', 'loading-state': isLoading}\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"preview-selections-body\">\n        <div class=\"preview-selections-content\">\n            <div class=\"preview-selections-title-container\">\n                <div class=\"confirm-modal-icon\" style=\"background-image: url(&quot;../../assets/svgs/Confirm_Trash.svg&quot;);\"></div>\n                <span class=\"preview-selections-title\">Orphaned Configs & Service Policies</span>\n                <span class=\"preview-selections-subtitle\">Preview of all associated entities that will be orphaned and deleted once the selected services are deleted</span>\n            </div>\n            <div class=\"preview-selections-info-message\" *ngIf=\"infoMessage\" [ngClass]=\"{'error-message': state === 'ERROR'}\">{{infoMessage}}</div>\n            <div class=\"preview-selections-main\">\n                <div class=\"preview-selections-left-side\">\n                    <lib-form-field-container\n                            [showHeader]=\"true\"\n                            [title]=\"'Services To Delete'\"\n                            [class]=\"'hide-overflow bold-header-title'\"\n                            [count]=\"selectedItems.length\"\n                    >\n                        <div class=\"selected-items-container\">\n                            <div class=\"selected-items\">\n                                <div class=\"selected-items-category\">\n                                    <ul>\n                                        <li class=\"selected-items-item header-item\" (click)=\"previewItem(allItem)\" [ngClass]=\"{'selected': selectedItem.id === 'all'}\">\n                                            <span class=\"selected-item-name\">{{allItem.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-configuration\"\n                                                        matTooltip=\"Configs\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-configs-count\">{{allItem.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider header-divider\"></div>\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-Policies\"\n                                                        matTooltip=\"Service Policies\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-policies-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                        <div class=\"selected-items-divider\"></div>\n                                        <li *ngFor=\"let item of selectedItems\" class=\"selected-items-item\" (click)=\"previewItem(item)\" [ngClass]=\"{'selected': item.selected}\">\n                                            <span class=\"selected-item-name\">{{item.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedConfigs.length}}</span>\n                                                    <span class=\"associated-configs-count\">{{item.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider\"></div>\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                    <span class=\"associated-policies-count\">{{item.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                    </ul>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                </div>\n                <div class=\"preview-selections-divider\"></div>\n                <div class=\"preview-selections-right-side\">\n                    <div class=\"preview-selections-lists-title\">\n                        <div class=\"resource-type\"> Selected Service </div>\n                        <div class=\"icon-next preview-selections-breadcrumb\"></div>\n                        <div class=\"selected-attribute\"> {{selectedItem.name}} </div>\n                    </div>\n                    <div class=\"preview-selections-lists\">\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Configs'\"\n                                [titleIcon]=\"'icon-configuration'\"\n                                [count]=\"selectedItem.associatedConfigs.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of orphaned Configs that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedConfigs\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Service Policies'\"\n                                [titleIcon]=\"'icon-Policies'\"\n                                [count]=\"selectedItem.associatedServicePolicies.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of all orphaned Service Policies that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedServicePolicies\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"preview-selections-buttons-container\">\n        <button class=\"button save secondary-button\" (click)=\"return()\">Return</button>\n        <button class=\"button save confirm\" *ngIf=\"dataObj.deleteConfirmed && state !== 'ERROR'\" (click)=\"confirm()\" [disabled]=\"isLoading\">Delete All</button>\n    </div>\n</div>\n\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".preview-selections-container{display:flex;flex-direction:column;background-color:var(--formBackground);border-radius:1.5625rem}.preview-selections-container.loading-state .preview-selections-main,.preview-selections-container.error-state .preview-selections-main{filter:grayscale(1);opacity:.6;cursor:default;pointer-events:none}.preview-selections-container .preview-selections-divider{height:100%;min-height:20.625rem;flex:1 0 auto;display:flex;width:.125rem;max-width:.125rem;border-right-width:.125rem;border-right-color:var(--stroke);border-right-style:solid;margin-right:var(--marginMedium);margin-left:var(--marginMedium);padding-top:var(--paddingXXL);padding-bottom:var(--paddingXXL)}.preview-selections-container .selected-items-container{width:18.75rem;height:100%;min-height:18.75rem;max-height:18.75rem;background-color:var(--navigation);overflow:hidden;display:flex;flex-direction:column}.preview-selections-container .selected-items-container .selected-items-filter-header{display:flex;flex-direction:column;position:relative;margin-top:var(--marginMedium)}.preview-selections-container .selected-items-container .selected-items-filter-header .selected-items-filter-search{margin:0;width:100%;height:2.5rem;float:left;border-radius:1.875rem;font-size:.875rem;font-weight:600;padding-left:1.125rem;background-image:url(/assets/svgs/Filter.svg);background-size:1.125rem;background-position:right .9375rem top .625rem;background-repeat:no-repeat}.preview-selections-container .selected-items-container .selected-items{overflow:hidden;height:100%;display:flex;position:relative;flex-direction:column}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-category-title{margin-left:var(--marginMedium);color:var(--primaryColor);font-weight:700;font-size:.9375rem;filter:brightness(65%);text-transform:uppercase}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item{display:flex;flex-direction:row;justify-content:space-between;font-weight:600;font-size:1rem;padding-top:.1875rem;padding-bottom:.1875rem;padding-left:var(--paddingSmall);position:relative;cursor:pointer;border-left-width:.3125rem;border-left-color:transparent;border-left-style:solid}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item{margin-top:1.375rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item .selected-item-name{font-weight:900}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item:hover{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.selected{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--secondaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 2.5rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon{color:var(--red);margin-right:var(--marginSmall);font-weight:600;font-family:zac;display:flex;justify-content:center;align-items:center}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:before{content:\"\\e927\"}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:hover{filter:brightness(.8)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:active{transform:translateY(.0625rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container{display:flex;flex-direction:row;gap:var(--gapMedium);right:.3125rem;justify-content:flex-end;padding-right:var(--paddingSmall);padding-left:var(--paddingSmall)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider{height:150%;margin-top:-.625rem;width:.0625rem;border-width:0;border-right-width:.0625rem;border-style:solid;border-color:var(--placeholder)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider.header-divider{height:300%;margin-top:-2.5rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-header-count{color:transparent;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-configs-count,.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-policies-count{position:absolute}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group .associated-header-icon{position:absolute;display:flex;margin-top:-1.5625rem;margin-right:-.3125rem;top:0;right:0;font-size:1.25rem;cursor:default}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-count{color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-policies-count{color:var(--secondaryColor);filter:brightness(.9)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-divider{width:100%;height:.125rem;border-color:var(--placeholder);border-bottom-style:solid;border-bottom-width:.0625rem;border-top-width:0;border-right-width:0;border-left-width:0}.preview-selections-container .selected-items-container .selected-items .selected-items-category ul{padding-inline-start:0rem;margin-block-start:var(--marginSmall);max-height:18.75rem;overflow:auto;overflow-x:hidden}.preview-selections-container .preview-selections-body{display:flex;flex-direction:row;align-items:center}.preview-selections-container .preview-selections-body .preview-selections-content{display:flex;flex-direction:column}.preview-selections-container .preview-selections-body .preview-selections-info-message{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;border-radius:var(--inputBorderRadius);padding:var(--paddingMedium) var(--paddingXL);margin:var(--marginMedium) var(--marginXL);margin-bottom:0}.preview-selections-container .preview-selections-body .preview-selections-info-message.error-message{color:var(--redText);background-color:var(--redShadow)}.preview-selections-container .preview-selections-body .preview-selections-main{display:flex;flex-direction:row;align-items:center;width:75rem;min-height:25rem;height:-moz-fit-content;height:fit-content;gap:var(--gapLarge);padding:0 var(--paddingXXL)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-left-side{width:25rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side{display:flex;flex-direction:column;height:100%;width:100%;gap:var(--gapSmall)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-title{height:2.5rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-lists{height:20rem;width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--gapLarge)}.preview-selections-container .preview-selections-body .preview-selections-icon{width:7.5rem;height:7.5rem;background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:var(--marginLarge)}.preview-selections-container .preview-selections-title-container{width:100%;display:flex;flex-direction:column}.preview-selections-container .preview-selections-title-container .confirm-modal-icon{width:3.75rem;height:3.75rem;position:absolute;top:1.25rem;left:1.25rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23FFFFFF%3B  %7D  .st1 %7B    fill%3A %23D9DFE3%3B  %7D  .st2 %7B    fill%3A none%3B    stroke%3A %23648293%3B    stroke-width%3A 1.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Cpolygon class%3D'st0' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 46.9%2C10.7 35.7%2C2.1 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 9.3%2C19.7%0915.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cpolygon class%3D'st1' points%3D'50.4%2C8.7 46.9%2C10.7 42.6%2C13.1 35.7%2C8.1 28.9%2C13.2 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 59.2%2C19.7%0959.2%2C13.7 '%2F%3E  %3Cpolygon class%3D'st2' points%3D'9.3%2C19.7 15.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cg%3E%09%3Cline class%3D'st2' x1%3D'60.1' x2%3D'26.9' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'54' x2%3D'14' y1%3D'19.7' y2%3D'59.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.6' x2%3D'31.3' y1%3D'39.3' y2%3D'19.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.3' x2%3D'44.5' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'17.4' x2%3D'57.4' y1%3D'19.7' y2%3D'59.6'%2F%3E    %3Cline class%3D'st2' x1%3D'59.8' x2%3D'40.1' y1%3D'39.3' y2%3D'19.7'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st2' x1%3D'6.4' x2%3D'65' y1%3D'19.7' y2%3D'19.7'%2F%3E  %3Cpolyline class%3D'st2' points%3D'12.3%2C19.7 12.3%2C13.7 21.1%2C8.7 27.6%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 43.9%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'24.5%2C10.7 35.7%2C2.1 46.9%2C10.7 '%2F%3E%3C%2Fsvg%3E\")}.preview-selections-container .preview-selections-title-container .preview-selections-title{color:var(--primaryColor);font-size:1.875rem;position:relative;padding-left:0;width:37.5rem;background:none;text-transform:none;height:auto;font-family:Russo One;margin-top:1.5625rem;margin-left:5rem;filter:brightness(50%)}.preview-selections-container .preview-selections-title-container .preview-selections-subtitle{margin-left:5rem}.preview-selections-container .preview-selections-lists-title{display:flex;flex-direction:row;align-items:center;height:1.25rem;margin-left:var(--marginLarge);margin-top:var(--marginLarge)}.preview-selections-container .preview-selections-lists-title .selected-attribute,.preview-selections-container .preview-selections-lists-title .title-arrow,.preview-selections-container .preview-selections-lists-title .title-tag,.preview-selections-container .preview-selections-lists-title .resource-type{color:var(--primary);font-weight:100;font-size:1.125rem;font-family:Russo One;filter:brightness(.9);text-transform:uppercase}.preview-selections-container .preview-selections-lists-title .selected-attribute{color:var(--primaryColor);color:var(--tableText);text-transform:none}.preview-selections-container .preview-selections-lists-title .title-tag{margin-right:.1875rem;color:var(--red)}.preview-selections-container .preview-selections-lists-title .preview-selections-breadcrumb{font-size:1.25rem;line-height:1.25rem}.preview-selections-container .preview-selections-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;padding-right:var(--paddingXXL);padding-bottom:var(--paddingXXL);align-items:flex-end}.preview-selections-container .preview-selections-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.preview-selections-container .preview-selections-buttons-container .secondary-button{background-color:var(--primary)}.preview-selections-container .preview-selections-buttons-container .confirm{background-color:var(--secondary);margin-left:var(--marginMedium)}.preview-selections-container .preview-selections-buttons-container .confirm:disabled{filter:grayscale(1);opacity:.6;pointer-events:none}.preview-selections-container button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.75rem}.preview-selections-container button.confirm,.preview-selections-container button.cancel{background-color:var(--primary)}::ng-deep .preview-selections-container .form-field-content .listBox{min-height:16.5625rem;max-height:16.5625rem;min-width:22.5rem;max-width:22.5rem;overflow:auto}::ng-deep .preview-selections-container .form-field-content .listBox>input{display:none}::ng-deep .preview-selections-container .form-field-content .listBox .text{width:-moz-fit-content;width:fit-content;overflow-x:hidden}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviewSelectionsComponent, selector: "preview-selections", ngImport: i0, template: "<div class=\"preview-selections-container confirm-modal-container\" [ngClass]=\"{'error-state': state === 'ERROR', 'loading-state': isLoading}\">\n    <div class=\"close icon-close\" (click)=\"cancel()\"></div>\n    <div class=\"preview-selections-body\">\n        <div class=\"preview-selections-content\">\n            <div class=\"preview-selections-title-container\">\n                <div class=\"confirm-modal-icon\" style=\"background-image: url(&quot;../../assets/svgs/Confirm_Trash.svg&quot;);\"></div>\n                <span class=\"preview-selections-title\">Orphaned Configs & Service Policies</span>\n                <span class=\"preview-selections-subtitle\">Preview of all associated entities that will be orphaned and deleted once the selected services are deleted</span>\n            </div>\n            <div class=\"preview-selections-info-message\" *ngIf=\"infoMessage\" [ngClass]=\"{'error-message': state === 'ERROR'}\">{{infoMessage}}</div>\n            <div class=\"preview-selections-main\">\n                <div class=\"preview-selections-left-side\">\n                    <lib-form-field-container\n                            [showHeader]=\"true\"\n                            [title]=\"'Services To Delete'\"\n                            [class]=\"'hide-overflow bold-header-title'\"\n                            [count]=\"selectedItems.length\"\n                    >\n                        <div class=\"selected-items-container\">\n                            <div class=\"selected-items\">\n                                <div class=\"selected-items-category\">\n                                    <ul>\n                                        <li class=\"selected-items-item header-item\" (click)=\"previewItem(allItem)\" [ngClass]=\"{'selected': selectedItem.id === 'all'}\">\n                                            <span class=\"selected-item-name\">{{allItem.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-configuration\"\n                                                        matTooltip=\"Configs\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-configs-count\">{{allItem.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider header-divider\"></div>\n                                                <div class=\"associated-count-header-group\">\n                                                    <div\n                                                        class=\"associated-header-icon icon-Policies\"\n                                                        matTooltip=\"Service Policies\"\n                                                        matTooltipPosition=\"below\"\n                                                        matTooltipShowDelay=\"500\"\n                                                    ></div>\n                                                    <span class=\"associated-policies-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                        <div class=\"selected-items-divider\"></div>\n                                        <li *ngFor=\"let item of selectedItems\" class=\"selected-items-item\" (click)=\"previewItem(item)\" [ngClass]=\"{'selected': item.selected}\">\n                                            <span class=\"selected-item-name\">{{item.name}}</span>\n                                            <div class=\"associated-count-container\">\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedConfigs.length}}</span>\n                                                    <span class=\"associated-configs-count\">{{item.associatedConfigs.length}}</span>\n                                                </div>\n                                                <div class=\"count-divider\"></div>\n                                                <div class=\"associated-count-list-group\">\n                                                    <span class=\"associated-configs-header-count\">{{allItem.associatedServicePolicies.length}}</span>\n                                                    <span class=\"associated-policies-count\">{{item.associatedServicePolicies.length}}</span>\n                                                </div>\n                                            </div>\n                                        </li>\n                                    </ul>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                </div>\n                <div class=\"preview-selections-divider\"></div>\n                <div class=\"preview-selections-right-side\">\n                    <div class=\"preview-selections-lists-title\">\n                        <div class=\"resource-type\"> Selected Service </div>\n                        <div class=\"icon-next preview-selections-breadcrumb\"></div>\n                        <div class=\"selected-attribute\"> {{selectedItem.name}} </div>\n                    </div>\n                    <div class=\"preview-selections-lists\">\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Configs'\"\n                                [titleIcon]=\"'icon-configuration'\"\n                                [count]=\"selectedItem.associatedConfigs.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of orphaned Configs that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedConfigs\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                        <lib-form-field-container\n                                [title]=\"'Orphaned Service Policies'\"\n                                [titleIcon]=\"'icon-Policies'\"\n                                [count]=\"selectedItem.associatedServicePolicies.length\"\n                                [class]=\"'hide-overflow'\"\n                                [helpText]=\"'List of all orphaned Service Policies that will be deleted.'\"\n                        >\n                            <lib-preview-list\n                                    [clickable]=\"false\"\n                                    [items]=\"selectedItem.associatedServicePolicies\"\n                                    [allowRemove]=\"false\"\n                            ></lib-preview-list>\n                        </lib-form-field-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"preview-selections-buttons-container\">\n        <button class=\"button save secondary-button\" (click)=\"return()\">Return</button>\n        <button class=\"button save confirm\" *ngIf=\"dataObj.deleteConfirmed && state !== 'ERROR'\" (click)=\"confirm()\" [disabled]=\"isLoading\">Delete All</button>\n    </div>\n</div>\n\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".preview-selections-container{display:flex;flex-direction:column;background-color:var(--formBackground);border-radius:1.5625rem}.preview-selections-container.loading-state .preview-selections-main,.preview-selections-container.error-state .preview-selections-main{filter:grayscale(1);opacity:.6;cursor:default;pointer-events:none}.preview-selections-container .preview-selections-divider{height:100%;min-height:20.625rem;flex:1 0 auto;display:flex;width:.125rem;max-width:.125rem;border-right-width:.125rem;border-right-color:var(--stroke);border-right-style:solid;margin-right:var(--marginMedium);margin-left:var(--marginMedium);padding-top:var(--paddingXXL);padding-bottom:var(--paddingXXL)}.preview-selections-container .selected-items-container{width:18.75rem;height:100%;min-height:18.75rem;max-height:18.75rem;background-color:var(--navigation);overflow:hidden;display:flex;flex-direction:column}.preview-selections-container .selected-items-container .selected-items-filter-header{display:flex;flex-direction:column;position:relative;margin-top:var(--marginMedium)}.preview-selections-container .selected-items-container .selected-items-filter-header .selected-items-filter-search{margin:0;width:100%;height:2.5rem;float:left;border-radius:1.875rem;font-size:.875rem;font-weight:600;padding-left:1.125rem;background-image:url(/assets/svgs/Filter.svg);background-size:1.125rem;background-position:right .9375rem top .625rem;background-repeat:no-repeat}.preview-selections-container .selected-items-container .selected-items{overflow:hidden;height:100%;display:flex;position:relative;flex-direction:column}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-category-title{margin-left:var(--marginMedium);color:var(--primaryColor);font-weight:700;font-size:.9375rem;filter:brightness(65%);text-transform:uppercase}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item{display:flex;flex-direction:row;justify-content:space-between;font-weight:600;font-size:1rem;padding-top:.1875rem;padding-bottom:.1875rem;padding-left:var(--paddingSmall);position:relative;cursor:pointer;border-left-width:.3125rem;border-left-color:transparent;border-left-style:solid}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item{margin-top:1.375rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.header-item .selected-item-name{font-weight:900}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item:hover{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item.selected{background-color:#2196f31a;border-left-width:.3125rem;border-left-color:var(--secondaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 2.5rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon{color:var(--red);margin-right:var(--marginSmall);font-weight:600;font-family:zac;display:flex;justify-content:center;align-items:center}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:before{content:\"\\e927\"}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:hover{filter:brightness(.8)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .selected-items-remove-icon:active{transform:translateY(.0625rem)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container{display:flex;flex-direction:row;gap:var(--gapMedium);right:.3125rem;justify-content:flex-end;padding-right:var(--paddingSmall);padding-left:var(--paddingSmall)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider{height:150%;margin-top:-.625rem;width:.0625rem;border-width:0;border-right-width:.0625rem;border-style:solid;border-color:var(--placeholder)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .count-divider.header-divider{height:300%;margin-top:-2.5rem}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-header-count{color:transparent;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-configs-count,.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-list-group .associated-policies-count{position:absolute}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;position:relative}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-count-header-group .associated-header-icon{position:absolute;display:flex;margin-top:-1.5625rem;margin-right:-.3125rem;top:0;right:0;font-size:1.25rem;cursor:default}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-configs-count{color:var(--primaryColor)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-item .associated-count-container .associated-policies-count{color:var(--secondaryColor);filter:brightness(.9)}.preview-selections-container .selected-items-container .selected-items .selected-items-category .selected-items-divider{width:100%;height:.125rem;border-color:var(--placeholder);border-bottom-style:solid;border-bottom-width:.0625rem;border-top-width:0;border-right-width:0;border-left-width:0}.preview-selections-container .selected-items-container .selected-items .selected-items-category ul{padding-inline-start:0rem;margin-block-start:var(--marginSmall);max-height:18.75rem;overflow:auto;overflow-x:hidden}.preview-selections-container .preview-selections-body{display:flex;flex-direction:row;align-items:center}.preview-selections-container .preview-selections-body .preview-selections-content{display:flex;flex-direction:column}.preview-selections-container .preview-selections-body .preview-selections-info-message{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;border-radius:var(--inputBorderRadius);padding:var(--paddingMedium) var(--paddingXL);margin:var(--marginMedium) var(--marginXL);margin-bottom:0}.preview-selections-container .preview-selections-body .preview-selections-info-message.error-message{color:var(--redText);background-color:var(--redShadow)}.preview-selections-container .preview-selections-body .preview-selections-main{display:flex;flex-direction:row;align-items:center;width:75rem;min-height:25rem;height:-moz-fit-content;height:fit-content;gap:var(--gapLarge);padding:0 var(--paddingXXL)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-left-side{width:25rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side{display:flex;flex-direction:column;height:100%;width:100%;gap:var(--gapSmall)}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-title{height:2.5rem}.preview-selections-container .preview-selections-body .preview-selections-main .preview-selections-right-side .preview-selections-lists{height:20rem;width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--gapLarge)}.preview-selections-container .preview-selections-body .preview-selections-icon{width:7.5rem;height:7.5rem;background-size:contain;z-index:20;box-sizing:var(--shadow);margin-left:var(--marginLarge)}.preview-selections-container .preview-selections-title-container{width:100%;display:flex;flex-direction:column}.preview-selections-container .preview-selections-title-container .confirm-modal-icon{width:3.75rem;height:3.75rem;position:absolute;top:1.25rem;left:1.25rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg id%3D'Layer_1' style%3D'enable-background%3Anew 0 0 72 72%3B' version%3D'1.1' viewBox%3D'0 0 72 72'     x%3D'0px'     xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23FFFFFF%3B  %7D  .st1 %7B    fill%3A %23D9DFE3%3B  %7D  .st2 %7B    fill%3A none%3B    stroke%3A %23648293%3B    stroke-width%3A 1.5%3B    stroke-linecap%3A round%3B    stroke-linejoin%3A round%3B    stroke-miterlimit%3A 10%3B  %7D%3C%2Fstyle%3E  %3Cpolygon class%3D'st0' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 46.9%2C10.7 35.7%2C2.1 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 9.3%2C19.7%0915.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cpolygon class%3D'st1' points%3D'50.4%2C8.7 46.9%2C10.7 42.6%2C13.1 35.7%2C8.1 28.9%2C13.2 24.5%2C10.7 21.1%2C8.7 12.3%2C13.7 12.3%2C19.7 59.2%2C19.7%0959.2%2C13.7 '%2F%3E  %3Cpolygon class%3D'st2' points%3D'9.3%2C19.7 15.2%2C69.5 56.2%2C69.5 62.1%2C19.7 '%2F%3E  %3Cg%3E%09%3Cline class%3D'st2' x1%3D'60.1' x2%3D'26.9' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'54' x2%3D'14' y1%3D'19.7' y2%3D'59.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.6' x2%3D'31.3' y1%3D'39.3' y2%3D'19.7'%2F%3E    %3Cline class%3D'st2' x1%3D'11.3' x2%3D'44.5' y1%3D'36.3' y2%3D'69.5'%2F%3E    %3Cline class%3D'st2' x1%3D'17.4' x2%3D'57.4' y1%3D'19.7' y2%3D'59.6'%2F%3E    %3Cline class%3D'st2' x1%3D'59.8' x2%3D'40.1' y1%3D'39.3' y2%3D'19.7'%2F%3E%3C%2Fg%3E  %3Cline class%3D'st2' x1%3D'6.4' x2%3D'65' y1%3D'19.7' y2%3D'19.7'%2F%3E  %3Cpolyline class%3D'st2' points%3D'12.3%2C19.7 12.3%2C13.7 21.1%2C8.7 27.6%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'59.2%2C19.7 59.2%2C13.7 50.4%2C8.7 43.9%2C12.4 '%2F%3E  %3Cpolyline class%3D'st2' points%3D'24.5%2C10.7 35.7%2C2.1 46.9%2C10.7 '%2F%3E%3C%2Fsvg%3E\")}.preview-selections-container .preview-selections-title-container .preview-selections-title{color:var(--primaryColor);font-size:1.875rem;position:relative;padding-left:0;width:37.5rem;background:none;text-transform:none;height:auto;font-family:Russo One;margin-top:1.5625rem;margin-left:5rem;filter:brightness(50%)}.preview-selections-container .preview-selections-title-container .preview-selections-subtitle{margin-left:5rem}.preview-selections-container .preview-selections-lists-title{display:flex;flex-direction:row;align-items:center;height:1.25rem;margin-left:var(--marginLarge);margin-top:var(--marginLarge)}.preview-selections-container .preview-selections-lists-title .selected-attribute,.preview-selections-container .preview-selections-lists-title .title-arrow,.preview-selections-container .preview-selections-lists-title .title-tag,.preview-selections-container .preview-selections-lists-title .resource-type{color:var(--primary);font-weight:100;font-size:1.125rem;font-family:Russo One;filter:brightness(.9);text-transform:uppercase}.preview-selections-container .preview-selections-lists-title .selected-attribute{color:var(--primaryColor);color:var(--tableText);text-transform:none}.preview-selections-container .preview-selections-lists-title .title-tag{margin-right:.1875rem;color:var(--red)}.preview-selections-container .preview-selections-lists-title .preview-selections-breadcrumb{font-size:1.25rem;line-height:1.25rem}.preview-selections-container .preview-selections-buttons-container{display:flex;justify-content:flex-end;flex-direction:row;width:100%;padding-right:var(--paddingXXL);padding-bottom:var(--paddingXXL);align-items:flex-end}.preview-selections-container .preview-selections-buttons-container .linkButton{position:absolute;left:1.5625rem;color:var(--subText);font-weight:600}.preview-selections-container .preview-selections-buttons-container .secondary-button{background-color:var(--primary)}.preview-selections-container .preview-selections-buttons-container .confirm{background-color:var(--secondary);margin-left:var(--marginMedium)}.preview-selections-container .preview-selections-buttons-container .confirm:disabled{filter:grayscale(1);opacity:.6;pointer-events:none}.preview-selections-container button{width:6.25rem;height:2.5rem;color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.75rem}.preview-selections-container button.confirm,.preview-selections-container button.cancel{background-color:var(--primary)}::ng-deep .preview-selections-container .form-field-content .listBox{min-height:16.5625rem;max-height:16.5625rem;min-width:22.5rem;max-width:22.5rem;overflow:auto}::ng-deep .preview-selections-container .form-field-content .listBox>input{display:none}::ng-deep .preview-selections-container .form-field-content .listBox .text{width:-moz-fit-content;width:fit-content;overflow-x:hidden}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviewSelectionsComponent, decorators: [{
             type: Component,
@@ -12924,8 +13071,6 @@ class ServicesPageComponent extends ListPageComponent {
         this.settingsService = settingsService;
         this.extensionService = extensionService;
         this.serviceType = '';
-        this.serviceRoleAttributes = [];
-        this.identityRoleAttributes = [];
         this.formDataChanged = false;
         this.title = 'Services';
         this.confirmData = {};
@@ -12934,8 +13079,8 @@ class ServicesPageComponent extends ListPageComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        this.getServiceRoleAttributes();
         this.tabs = this.tabNames.getTabs('services');
+        this.svc.getServiceRoleAttributes();
     }
     headerActionClicked(action) {
         switch (action) {
@@ -12987,14 +13132,6 @@ class ServicesPageComponent extends ListPageComponent {
     deleteItem(item) {
         this.openBulkDelete([item], 'service');
     }
-    getServiceRoleAttributes() {
-        this.svc.getServiceRoleAttributes().then((result) => {
-            this.serviceRoleAttributes = result.data;
-        });
-        this.svc.getIdentityRoleAttributes().then((result) => {
-            this.identityRoleAttributes = result.data;
-        });
-    }
     dataChanged(event) {
         this.formDataChanged = event;
     }
@@ -13010,7 +13147,6 @@ class ServicesPageComponent extends ListPageComponent {
         this.svc.sideModalOpen = false;
         if (event?.refresh) {
             this.refreshData();
-            this.getServiceRoleAttributes();
         }
     }
     serviceTypeSelected(event) {
@@ -13359,7 +13495,19 @@ class IdentityFormComponent extends ProjectableForm {
     entityUpdated() {
         if (this.formData.id) {
             this.formData.badges = [];
-            if (this.formData.hasApiSession || this.formData.hasEdgeRouterConnection) {
+            const hasERConnectionProp = has(this.formData, 'edgeRouterConnectionStatus');
+            if (hasERConnectionProp) {
+                if (this.formData.edgeRouterConnectionStatus === 'online') {
+                    this.formData.badges.push({ label: 'Online', class: 'online', circle: 'true' });
+                }
+                else if (this.formData.edgeRouterConnectionStatus === 'offline') {
+                    this.formData.badges.push({ label: 'Offline', class: 'offline', circle: 'false' });
+                }
+                else {
+                    this.formData.badges.push({ label: 'Connection Status Unknown', class: 'unknown', circle: 'false' });
+                }
+            }
+            else if (this.formData.hasApiSession || this.formData.hasEdgeRouterConnection) {
                 this.formData.badges.push({ label: 'Online', class: 'online', circle: 'true' });
             }
             else {
@@ -13674,7 +13822,7 @@ class IdentityFormComponent extends ProjectableForm {
                 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>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"identity-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this identity\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Identity attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"identityRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Identities'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        [title]=\"'Auth Policy'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.authPolicyId\"\n                            id=\"authPolicyId\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"\">Select an Authentication Policy</option>\n                        <option\n                            *ngFor=\"let policy of authPolicies\"\n                            [value]=\"policy.id\"\n                        >\n                            {{ policy.name }}\n                        </option>\n                    </select>\n                    <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                        <div class=\"form-field-header\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">External ID</span>\n                            </div>\n                            <span class=\"form-field-label\">OPTIONAL</span>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\n                    </div>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Enrollment Type'\"\n                        [title2]=\"enrollmentTypeTitle\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                            id=\"EnrollmentType\"\n                            class=\"form-field-dropdown\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentType\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option value=\"ott\">One Time Token</option>\n                            <option value=\"CA\">Certificate Authority</option>\n                            <option value=\"updb\">UPDB</option>\n                            <option value=\"none\">None</option>\n                        </select>\n                        <select\n                            id=\"CertAuthorities\"\n                            class=\"form-field-dropdown\"\n                            *ngIf=\"enrollmentType === 'CA'\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentCA\"\n                            [ngClass]=\"{error: errors.enrollmentCA}\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n                        </select>\n                        <input\n                            *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n                            [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                            [(ngModel)]=\"enrollmentUPDB\"\n                            (keyup)=\"updateEnrollment()\"\n                            class=\"form-field-input\"\n                            id=\"UPDBName\"\n                            type=\"text\"\n                            maxlength=\"500\"\n                            placeholder=\"Enter a name\"\n                        >\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Admin'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced is-admin-container\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">IS ADMIN</div>\n                                <div\n                                        (click)=\"toggleIsAdmin()\"\n                                        [ngClass]=\"{ on: formData.isAdmin }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Hosting Cost'\"\n                            [title2]=\"'Precedence'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <input class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n                        <select\n                            [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                            id=\"hostingPrecedence\"\n                            class=\"form-field-dropdown\"\n                        >\n                            <option value=\"default\">Default</option>\n                            <option value=\"required\">Required</option>\n                            <option value=\"failed\">Failed</option>\n                        </select>\n                    </lib-form-field-container>\n                    <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n                            [title]=\"tagElement.label\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <div [innerHTML]=\"tagElement.content | safe\"></div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></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\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                        [identity]=\"formData\"\n                        [jwt]=\"jwt\"\n                        [expiration]=\"enrollmentExpiration\"\n                        [authenticators]=\"formData.authenticators\"\n                        [type]=\"'identity'\"\n                        [canExpand]=\"true\"\n                        (doRefresh)=\"refreshIdentity()\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"isEdit\"\n                        [showHeader]=\"false\"\n                        [layout]=\"'column'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                >\n                    <div *ngIf=\"entityDisabled\" class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n                        <div class=\"disable-identity-background\"></div>\n                        <button class=\"download-button disable-identity-button\">Enable Identity</button>\n                    </div>\n                    <div *ngIf=\"!entityDisabled\" class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n                        <div class=\"disable-identity-background\"></div>\n                        <button class=\"download-button disable-identity-button\">Disable Identity</button>\n                    </div>\n                    <div *ngIf=\"!entityDisabled\" class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                        <div class=\"form-field-header\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Disable Until:</span>\n                            </div>\n                        </div>\n                        <div class=\"disable-identity-duration-container\">\n                            <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n                                <option value=\"indefinite\">Indefinite</option>\n                                <option value=\"pick-date\">Pick a Date & Time</option>\n                            </select>\n                            <p-calendar\n                                *ngIf=\"disableDurationType === 'pick-date'\"\n                                [(ngModel)]=\"disableDuration\"\n                                (onSelect)=\"setDisabledDate($event)\"\n                                [showIcon]=\"true\"\n                                [showTime]=\"true\"\n                                [minDate]=\"minDate\"\n                                placeholder=\"Select a date\"\n                                selectionMode=\"single\"\n                                #calendar\n                            >\n                            </p-calendar>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"true\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"associatedServiceNames\"\n                    ></lib-preview-list>\n                    <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                        <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                        <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicePoliciesLoading\"\n                        [allNames]=\"associatedServicePolicyNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::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}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium)}.disable-identity-duration-container .form-field-dropdown{min-width:10rem}.disable-identity-duration-container p-calendar{min-width:12rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.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:-moz-fit-content;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}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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", "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"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Identity: ' : 'Create New Identity'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"identity-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Identity Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this identity\"\n                        [ngClass]=\"{error: errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Identity attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to an resource. Apply the same tag to other Identities to form a group of Identities.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"identityRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Identities'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        [title]=\"'Auth Policy'\"\n                        [label]=\"'OPTIONAL'\"\n                        [helpText]=\"'Authentication Policies restrict the authentication methods available to identities.'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.authPolicyId\"\n                            id=\"authPolicyId\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"\">Select an Authentication Policy</option>\n                        <option\n                            *ngFor=\"let policy of authPolicies\"\n                            [value]=\"policy.id\"\n                        >\n                            {{ policy.name }}\n                        </option>\n                    </select>\n                    <div class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                        <div class=\"form-field-header\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">External ID</span>\n                            </div>\n                            <span class=\"form-field-label\">OPTIONAL</span>\n                        </div>\n                        <input class=\"form-field-input\" placeholder=\"Optional External ID\" [(ngModel)]=\"formData.externalId\"/>\n                    </div>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-2]\"></ng-content>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Enrollment Type'\"\n                        [title2]=\"enrollmentTypeTitle\"\n                        [layout]=\"'row'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                            id=\"EnrollmentType\"\n                            class=\"form-field-dropdown\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentType\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option value=\"ott\">One Time Token</option>\n                            <option value=\"CA\">Certificate Authority</option>\n                            <option value=\"updb\">UPDB</option>\n                            <option value=\"none\">None</option>\n                        </select>\n                        <select\n                            id=\"CertAuthorities\"\n                            class=\"form-field-dropdown\"\n                            *ngIf=\"enrollmentType === 'CA'\"\n                            [ngClass]=\"{disabled: isEditing}\"\n                            [(ngModel)]=\"enrollmentCA\"\n                            [ngClass]=\"{error: errors.enrollmentCA}\"\n                            (change)=\"updateEnrollment()\"\n                        >\n                            <option *ngFor=\"let ca of cas\" [value]=\"ca.id\">{{ca.name}}</option>\n                        </select>\n                        <input\n                            *ngIf=\"enrollmentType === 'updb' && !isEditing\"\n                            [ngClass]=\"{disabled: isEditing, error: errors.enrollmentUPDB}\"\n                            [(ngModel)]=\"enrollmentUPDB\"\n                            (keyup)=\"updateEnrollment()\"\n                            class=\"form-field-input\"\n                            id=\"UPDBName\"\n                            type=\"text\"\n                            maxlength=\"500\"\n                            placeholder=\"Enter a name\"\n                        >\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Admin'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced is-admin-container\"\n                    >\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">IS ADMIN</div>\n                                <div\n                                        (click)=\"toggleIsAdmin()\"\n                                        [ngClass]=\"{ on: formData.isAdmin }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.isAdmin\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.isAdmin\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Hosting Cost'\"\n                            [title2]=\"'Precedence'\"\n                            [layout]=\"'row'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <input class=\"form-field-input\" [(ngModel)]=\"formData.defaultHostingCost\" type=\"number\"/>\n                        <select\n                            [(ngModel)]=\"formData.defaultHostingPrecedence\"\n                            id=\"hostingPrecedence\"\n                            class=\"form-field-dropdown\"\n                        >\n                            <option value=\"default\">Default</option>\n                            <option value=\"required\">Required</option>\n                            <option value=\"failed\">Failed</option>\n                        </select>\n                    </lib-form-field-container>\n                    <lib-form-field-container *ngFor=\"let tagElement of tagElements\"\n                            [title]=\"tagElement.label\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <div [innerHTML]=\"tagElement.content | safe\"></div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></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\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken || hasAuthenticator\"\n                        [showHeader]=\"false\"\n                >\n                    <lib-qr-code\n                        [identity]=\"formData\"\n                        [jwt]=\"jwt\"\n                        [expiration]=\"enrollmentExpiration\"\n                        [authenticators]=\"formData.authenticators\"\n                        [type]=\"'identity'\"\n                        [canExpand]=\"true\"\n                        (doRefresh)=\"refreshIdentity()\"\n                    ></lib-qr-code>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"isEdit\"\n                        [showHeader]=\"false\"\n                        [layout]=\"'column'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                >\n                    <div *ngIf=\"entityDisabled\" class=\"disable-identity-button-container\" (click)=\"enableIdentity()\">\n                        <div class=\"disable-identity-background\"></div>\n                        <button class=\"download-button disable-identity-button\">Enable Identity</button>\n                    </div>\n                    <div *ngIf=\"!entityDisabled\" class=\"disable-identity-button-container\" (click)=\"disableIdentity()\">\n                        <div class=\"disable-identity-background\"></div>\n                        <button class=\"download-button disable-identity-button\">Disable Identity</button>\n                    </div>\n                    <div *ngIf=\"!entityDisabled\" class=\"form-field-label-container\" style=\"gap: var(--paddingMedium)\">\n                        <div class=\"form-field-header\">\n                            <div class=\"form-field-title-container\">\n                                <span class=\"form-field-title\">Disable Until:</span>\n                            </div>\n                        </div>\n                        <div class=\"disable-identity-duration-container\">\n                            <select [(ngModel)]=\"disableDurationType\" id=\"DurationType\" class=\"form-field-dropdown\">\n                                <option value=\"indefinite\">Indefinite</option>\n                                <option value=\"pick-date\">Pick a Date & Time</option>\n                            </select>\n                            <p-calendar\n                                *ngIf=\"disableDurationType === 'pick-date'\"\n                                [(ngModel)]=\"disableDuration\"\n                                (onSelect)=\"setDisabledDate($event)\"\n                                [showIcon]=\"true\"\n                                [showTime]=\"true\"\n                                [minDate]=\"minDate\"\n                                placeholder=\"Select a date\"\n                                selectionMode=\"single\"\n                                #calendar\n                            >\n                            </p-calendar>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Services'\"\n                        [count]=\"associatedServices.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"true\"\n                        [isLoading]=\"servicesLoading\"\n                        [allNames]=\"associatedServiceNames\"\n                    ></lib-preview-list>\n                    <div class=\"svc-test-result\" [ngClass]=\"{'test-result-open': testResultOpen}\">\n                        <div class=\"close icon-close\" (click)=\"closeTestResult()\"></div>\n                        <div class=\"result-container\" [innerHTML]=\"testResult\" ></div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this Identity is associated with.'\"\n                >\n                    <lib-preview-list\n                        (itemSelected)=\"serviceSelected($event)\"\n                        [clickable]=\"false\"\n                        [isLoading]=\"servicePoliciesLoading\"\n                        [allNames]=\"associatedServicePolicyNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [".identity-form-container{display:flex;flex-direction:column;height:100%;width:100%;align-items:center;gap:.9375rem}.disabled{opacity:.5;pointer-events:none}::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}.disable-identity-button-container{position:relative}.disable-identity-duration-container{display:flex;flex-direction:row;gap:var(--gapMedium)}.disable-identity-duration-container .form-field-dropdown{min-width:10rem}.disable-identity-duration-container p-calendar{min-width:12rem}.disable-identity-background{width:100%;height:100%;position:absolute;background:var(--red);border-radius:var(--inputBorderRadius);filter:brightness(.95);height:var(--defaultInputHeight)}.disable-identity-button{background:transparent;border:none;position:relative;z-index:9999999;display:flex;align-items:center;justify-content:center;height:var(--defaultInputHeight)}.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:-moz-fit-content;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}::ng-deep .copy.icon-copy.url-copy{background-color:var(--navigation)}@media (max-width: 1575px){.disable-identity-duration-container{flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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", "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"], outputs: ["tagsChange"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdentityFormComponent, decorators: [{
             type: Component,
@@ -17142,7 +17290,7 @@ class EdgeRouterFormComponent extends ProjectableForm {
                 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>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'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                    />\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                            [(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                <div *ngIf=\"showMore\" 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\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\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\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)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\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                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></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\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\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                <lib-form-field-container\n                        *ngIf=\"formData.id\"\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                <lib-form-field-container\n                        *ngIf=\"formData.id\"\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                <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", 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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}::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:-moz-fit-content;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}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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", "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"], 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>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"formData.id ? 'Edit Edge Router: ' : 'Create New Edge Router'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Name'\" [label]=\"'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                    />\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                            [(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                <div *ngIf=\"showMore\" 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\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">TUNNELER ENABLED</div>\n                                <div\n                                        (click)=\"toggleTunnelerEnabled()\"\n                                        [ngClass]=\"{ on: formData.isTunnelerEnabled }\"\n                                        class=\"toggle\"\n                                >\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\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)=\"toggleNoTraversal()\"\n                                        [ngClass]=\"{ on: !formData.noTraversal }\"\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                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></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\"></lib-json-view>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <ng-content select=\"[slot=column-2-slot-1]\"></ng-content>\n                <lib-form-field-container\n                        *ngIf=\"hasEnrolmentToken && !extService['hideZitiRegistration']\"\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                <lib-form-field-container\n                        *ngIf=\"formData.id\"\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                <lib-form-field-container\n                        *ngIf=\"formData.id\"\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                <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\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", 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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}::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:-moz-fit-content;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}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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", "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"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterFormComponent, decorators: [{
             type: Component,
@@ -18109,7 +18257,7 @@ class ServiceFormComponent extends ProjectableForm {
                 provide: MatDialogRef,
                 useValue: {}
             }
-        ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"returnToListPage()\"\n     tabindex=\"0\"\n     *ngIf=\"dataInit\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this Service\"\n                        [ngClass]=\"{error: svc.errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Service attributes'\"\n                        [label]=\"'Optional'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"serviceRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Services'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Add Configurations'\"\n                        (actionRequested)=\"attachConfig()\"\n                        (keyup.enter)=\"captureConfigEnterEvent($event)\"\n                        [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Select a Config</span>\n                        </div>\n                        <select\n                                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                                (change)=\"configTypeChanged($event)\"\n                                id=\"SelectedConfigType\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select configuration type...</option>\n                            <option\n                                    *ngFor=\"let type of svc.configTypes\"\n                                    [value]=\"type.id\"\n                            >\n                                {{ type.name }}\n                            </option>\n                        </select>\n                        <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n                            <p-dropdown\n                                    placeholder=\"Select configuration...\"\n                                    optionLabel=\"name\"\n                                    optionValue=\"id\"\n                                    filterBy=\"name\"\n                                    [options]=\"svc.filteredConfigs\"\n                                    [filter]=\"true\"\n                                    [showClear]=\"true\"\n                                    [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                                    (onChange)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"dropdown-filter-container\">\n                                        <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                            <input\n                                                    type=\"text\"\n                                                    pInputText\n                                                    placeholder=\"Filter\"\n                                                    (keyup)=\"configFilterChangedDebounced($event)\" />\n                                        </div>\n                                        <button pButton\n                                                icon=\"pi pi-times\"\n                                                [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n                                                (click)=\"clearConfigFilter($event)\"\n                                                severity=\"secondary\">\n                                        </button>\n                                        <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n                                    </div>\n                                </ng-template>\n                            </p-dropdown>\n                        </div>\n                        <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n                            <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                                {{svc.attachLabel}}\n                            </div>\n                        </div>\n                        <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n                            <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Config Name</span>\n                                <div\n                                        class=\"save-button\"\n                                        (click)=\"attachConfig()\"\n                                        *ngIf=\"svc.selectedConfigId !== 'preview'\"\n                                >{{svc.attachLabel}}\n                                </div>\n                            </div>\n                            <input\n                                    *ngIf=\"showConfigData\"\n                                    [(ngModel)]=\"svc.newConfigName\"\n                                    class=\"form-field-input\"\n                                    [placeholder]=\"'New Config Name'\"\n                                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                                    style=\"margin-bottom: 20px;\"\n                            />\n                            <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Configuration Data</span>\n                                <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n                                    <span\n                                            class=\"toggle-option-text\"\n                                            [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                            (click)=\"svc.toggleJSONView()\"\n                                    >\n                                        FORM\n                                    </span>\n                                                <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                                    <div\n                                                            class=\"form-toggle-switch\"\n                                                            [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                                    >\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                    </div>\n                                                </div>\n                                                <span\n                                                        class=\"toggle-option-text\"\n                                                        [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                                        (click)=\"svc.toggleJSONView()\"\n                                                >\n                                        JSON\n                                    </span>\n                                </div>\n                            </div>\n                            <lib-config-editor\n                                [(configData)]=\"svc.configData\"\n                                [schema]=\"svc.selectedSchema\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"svc.configErrors\"\n                                #configEditor\n                            ></lib-config-editor>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Terminator Strategy'\"\n                        [title2]=\"'Encryption'\"\n                        [layout]=\"'row'\"\n                        [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n                        [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                                [(ngModel)]=\"formData.terminatorStrategy\"\n                                id=\"authPolicyId\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select a Strategy....</option>\n                            <option\n                                    *ngFor=\"let strat of strategies\"\n                                    [value]=\"strat.id\"\n                            >\n                                {{ strat.label }}\n                            </option>\n                        </select>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">Require Encryption</div>\n                                <div\n                                        (click)=\"toggleEncryptionRequired()\"\n                                        [ngClass]=\"{ on: formData.encryptionRequired }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                    [title]=\"'Associated Entities'\"\n                    [label]=\"'Click for detailed view'\"\n                    [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                    [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Configurations</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedConfigsLoading\"\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Config'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedServicePoliciesLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewPolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"svc.associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Terminators</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedTerminatorsLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewTerminator($event, router)\"\n                            [tooltip]=\"'View Terminator'\"\n                            [allNames]=\"svc.associatedTerminators\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n<!--                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                </lib-form-field-container>-->\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [class]=\"'api-call-container'\"\n                        [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::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:-moz-fit-content;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}.dropdown-container{display:flex;flex-direction:column;position:relative}::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}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
+        ], viewQueries: [{ propertyName: "configEditor", first: true, predicate: ["configEditor"], descendants: true, read: ConfigEditorComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"returnToListPage()\"\n     tabindex=\"0\"\n     *ngIf=\"dataInit\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this Service\"\n                        [ngClass]=\"{error: svc.errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Service attributes'\"\n                        [label]=\"'Optional'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"serviceRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Services'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Add Configurations'\"\n                        (actionRequested)=\"attachConfig()\"\n                        (keyup.enter)=\"captureConfigEnterEvent($event)\"\n                        [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Select a Config</span>\n                        </div>\n                        <select\n                                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                                (change)=\"configTypeChanged($event)\"\n                                id=\"SelectedConfigType\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select configuration type...</option>\n                            <option\n                                    *ngFor=\"let type of svc.configTypes\"\n                                    [value]=\"type.id\"\n                            >\n                                {{ type.name }}\n                            </option>\n                        </select>\n                        <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n                            <p-dropdown\n                                    placeholder=\"Select configuration...\"\n                                    optionLabel=\"name\"\n                                    optionValue=\"id\"\n                                    filterBy=\"name\"\n                                    [options]=\"svc.filteredConfigs\"\n                                    [filter]=\"true\"\n                                    [showClear]=\"true\"\n                                    [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                                    (onChange)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"dropdown-filter-container\">\n                                        <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                            <input\n                                                    type=\"text\"\n                                                    pInputText\n                                                    placeholder=\"Filter\"\n                                                    (keyup)=\"configFilterChangedDebounced($event)\" />\n                                        </div>\n                                        <button pButton\n                                                icon=\"pi pi-times\"\n                                                [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n                                                (click)=\"clearConfigFilter($event)\"\n                                                severity=\"secondary\">\n                                        </button>\n                                        <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n                                    </div>\n                                </ng-template>\n                            </p-dropdown>\n                        </div>\n                        <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n                            <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                                {{svc.attachLabel}}\n                            </div>\n                        </div>\n                        <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n                            <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Config Name</span>\n                                <div\n                                        class=\"save-button\"\n                                        (click)=\"attachConfig()\"\n                                        *ngIf=\"svc.selectedConfigId !== 'preview'\"\n                                >{{svc.attachLabel}}\n                                </div>\n                            </div>\n                            <input\n                                    *ngIf=\"showConfigData\"\n                                    [(ngModel)]=\"svc.newConfigName\"\n                                    class=\"form-field-input\"\n                                    [placeholder]=\"'New Config Name'\"\n                                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                                    style=\"margin-bottom: 20px;\"\n                            />\n                            <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Configuration Data</span>\n                                <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n                                    <span\n                                            class=\"toggle-option-text\"\n                                            [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                            (click)=\"svc.toggleJSONView()\"\n                                    >\n                                        FORM\n                                    </span>\n                                                <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                                    <div\n                                                            class=\"form-toggle-switch\"\n                                                            [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                                    >\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                    </div>\n                                                </div>\n                                                <span\n                                                        class=\"toggle-option-text\"\n                                                        [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                                        (click)=\"svc.toggleJSONView()\"\n                                                >\n                                        JSON\n                                    </span>\n                                </div>\n                            </div>\n                            <lib-config-editor\n                                [(configData)]=\"svc.configData\"\n                                [schema]=\"svc.selectedSchema\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"svc.configErrors\"\n                                #configEditor\n                            ></lib-config-editor>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Terminator Strategy'\"\n                        [title2]=\"'Encryption'\"\n                        [layout]=\"'row'\"\n                        [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n                        [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                                [(ngModel)]=\"formData.terminatorStrategy\"\n                                id=\"authPolicyId\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select a Strategy....</option>\n                            <option\n                                    *ngFor=\"let strat of strategies\"\n                                    [value]=\"strat.id\"\n                            >\n                                {{ strat.label }}\n                            </option>\n                        </select>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">Require Encryption</div>\n                                <div\n                                        (click)=\"toggleEncryptionRequired()\"\n                                        [ngClass]=\"{ on: formData.encryptionRequired }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                    [title]=\"'Associated Entities'\"\n                    [label]=\"'click item to view details'\"\n                    [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                    [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Configurations</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedConfigsLoading\"\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [tooltip]=\"'View Config'\"\n                        [showfilter]=\"false\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedServicePoliciesLoading\"\n                        [clickable]=\"true\"\n                        (itemSelected)=\"svc.previewPolicy($event, router)\"\n                        [tooltip]=\"'View Service Policy'\"\n                        [allNames]=\"svc.associatedServicePolicies\"\n                        [showfilter]=\"svc.showServicePoliciesFilter\"\n                        [localFilter]=\"false\"\n                        (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Terminators</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedTerminatorsLoading\"\n                        [clickable]=\"true\"\n                        (itemSelected)=\"svc.previewTerminator($event, router)\"\n                        [tooltip]=\"'View Terminator'\"\n                        [allNames]=\"svc.associatedTerminators\"\n                        [showfilter]=\"false\"\n                        [showfilter]=\"svc.showTerminatorsFilter\"\n                        [localFilter]=\"false\"\n                        (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n<!--                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                </lib-form-field-container>-->\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [class]=\"'api-call-container'\"\n                        [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::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:-moz-fit-content;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}.dropdown-container{display:flex;flex-direction:column;position:relative}::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}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$1.InputText, selector: "[pInputText]" }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }, { kind: "component", type: ConfigEditorComponent, selector: "lib-config-editor", inputs: ["configErrors", "configData", "showJsonView", "schema"], outputs: ["configErrorsChange", "configDataChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceFormComponent, decorators: [{
             type: Component,
@@ -18118,7 +18266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"returnToListPage()\"\n     tabindex=\"0\"\n     *ngIf=\"dataInit\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this Service\"\n                        [ngClass]=\"{error: svc.errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Service attributes'\"\n                        [label]=\"'Optional'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"serviceRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Services'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Add Configurations'\"\n                        (actionRequested)=\"attachConfig()\"\n                        (keyup.enter)=\"captureConfigEnterEvent($event)\"\n                        [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Select a Config</span>\n                        </div>\n                        <select\n                                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                                (change)=\"configTypeChanged($event)\"\n                                id=\"SelectedConfigType\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select configuration type...</option>\n                            <option\n                                    *ngFor=\"let type of svc.configTypes\"\n                                    [value]=\"type.id\"\n                            >\n                                {{ type.name }}\n                            </option>\n                        </select>\n                        <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n                            <p-dropdown\n                                    placeholder=\"Select configuration...\"\n                                    optionLabel=\"name\"\n                                    optionValue=\"id\"\n                                    filterBy=\"name\"\n                                    [options]=\"svc.filteredConfigs\"\n                                    [filter]=\"true\"\n                                    [showClear]=\"true\"\n                                    [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                                    (onChange)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"dropdown-filter-container\">\n                                        <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                            <input\n                                                    type=\"text\"\n                                                    pInputText\n                                                    placeholder=\"Filter\"\n                                                    (keyup)=\"configFilterChangedDebounced($event)\" />\n                                        </div>\n                                        <button pButton\n                                                icon=\"pi pi-times\"\n                                                [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n                                                (click)=\"clearConfigFilter($event)\"\n                                                severity=\"secondary\">\n                                        </button>\n                                        <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n                                    </div>\n                                </ng-template>\n                            </p-dropdown>\n                        </div>\n                        <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n                            <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                                {{svc.attachLabel}}\n                            </div>\n                        </div>\n                        <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n                            <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Config Name</span>\n                                <div\n                                        class=\"save-button\"\n                                        (click)=\"attachConfig()\"\n                                        *ngIf=\"svc.selectedConfigId !== 'preview'\"\n                                >{{svc.attachLabel}}\n                                </div>\n                            </div>\n                            <input\n                                    *ngIf=\"showConfigData\"\n                                    [(ngModel)]=\"svc.newConfigName\"\n                                    class=\"form-field-input\"\n                                    [placeholder]=\"'New Config Name'\"\n                                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                                    style=\"margin-bottom: 20px;\"\n                            />\n                            <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Configuration Data</span>\n                                <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n                                    <span\n                                            class=\"toggle-option-text\"\n                                            [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                            (click)=\"svc.toggleJSONView()\"\n                                    >\n                                        FORM\n                                    </span>\n                                                <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                                    <div\n                                                            class=\"form-toggle-switch\"\n                                                            [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                                    >\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                    </div>\n                                                </div>\n                                                <span\n                                                        class=\"toggle-option-text\"\n                                                        [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                                        (click)=\"svc.toggleJSONView()\"\n                                                >\n                                        JSON\n                                    </span>\n                                </div>\n                            </div>\n                            <lib-config-editor\n                                [(configData)]=\"svc.configData\"\n                                [schema]=\"svc.selectedSchema\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"svc.configErrors\"\n                                #configEditor\n                            ></lib-config-editor>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Terminator Strategy'\"\n                        [title2]=\"'Encryption'\"\n                        [layout]=\"'row'\"\n                        [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n                        [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                                [(ngModel)]=\"formData.terminatorStrategy\"\n                                id=\"authPolicyId\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select a Strategy....</option>\n                            <option\n                                    *ngFor=\"let strat of strategies\"\n                                    [value]=\"strat.id\"\n                            >\n                                {{ strat.label }}\n                            </option>\n                        </select>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">Require Encryption</div>\n                                <div\n                                        (click)=\"toggleEncryptionRequired()\"\n                                        [ngClass]=\"{ on: formData.encryptionRequired }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                    [title]=\"'Associated Entities'\"\n                    [label]=\"'Click for detailed view'\"\n                    [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                    [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Configurations</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedConfigsLoading\"\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Config'\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedServicePoliciesLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewPolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"svc.associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Terminators</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedTerminators ? svc.associatedTerminators.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"svc.associatedTerminatorsLoading\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"svc.previewTerminator($event, router)\"\n                            [tooltip]=\"'View Terminator'\"\n                            [allNames]=\"svc.associatedTerminators\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n<!--                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                </lib-form-field-container>-->\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [class]=\"'api-call-container'\"\n                        [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::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:-moz-fit-content;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}.dropdown-container{display:flex;flex-direction:column;position:relative}::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}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
+                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"returnToListPage()\"\n     tabindex=\"0\"\n     *ngIf=\"dataInit\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"(formData.id ? 'Edit Service' : 'Create Service')\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [saveDisabled]=\"svc.saveDisabled || formDataInvalid\"\n        [saveTooltip]=\"saveButtonTooltip\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" [hidden]=\"formView !== 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Name'\" [label]=\"'Required'\">\n                    <input\n                        class=\"form-field-input\"\n                        placeholder=\"Name this Service\"\n                        [ngClass]=\"{error: svc.errors['name']}\"\n                        [(ngModel)]=\"formData.name\"\n                        autofocus\n                        #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select or create Service attributes'\"\n                        [label]=\"'Optional'\"\n                        [contentStyle]=\"'z-index: 99999999'\"\n                        [helpText]=\"'Attributes are tags applied to a resource. Apply the same tag to other Services to form a group of Services.'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"formData.roleAttributes\"\n                            [availableRoleAttributes]=\"serviceRoleAttributes\"\n                            [placeholder]=\"'Add attributes to group Services'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Add Configurations'\"\n                        (actionRequested)=\"attachConfig()\"\n                        (keyup.enter)=\"captureConfigEnterEvent($event)\"\n                        [helpText]=\"'Configurations are used to define how to intercept and host a service. Ziti Networks come with built-in configuration types (ie. intercept.v1 and host.v1)'\"\n                >\n                    <div class=\"form-field-input-group\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Select a Config</span>\n                        </div>\n                        <select\n                                [(ngModel)]=\"svc.selectedConfigTypeId\"\n                                (change)=\"configTypeChanged($event)\"\n                                id=\"SelectedConfigType\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select configuration type...</option>\n                            <option\n                                    *ngFor=\"let type of svc.configTypes\"\n                                    [value]=\"type.id\"\n                            >\n                                {{ type.name }}\n                            </option>\n                        </select>\n                        <div class=\"dropdown-container\" [ngClass]=\"{'dropdown-loading': svc.configsLoading}\">\n                            <p-dropdown\n                                    placeholder=\"Select configuration...\"\n                                    optionLabel=\"name\"\n                                    optionValue=\"id\"\n                                    filterBy=\"name\"\n                                    [options]=\"svc.filteredConfigs\"\n                                    [filter]=\"true\"\n                                    [showClear]=\"true\"\n                                    [disabled]=\"!svc.selectedConfigTypeId || svc.selectedConfigTypeId === ''\"\n                                    (onChange)=\"configChanged($event)\"\n                                    [(ngModel)]=\"svc.selectedConfigId\"\n                            >\n                                <ng-template pTemplate=\"filter\" let-options=\"options\">\n                                    <div class=\"dropdown-filter-container\">\n                                        <div class=\"p-inputgroup\" (click)=\"$event.stopPropagation()\">\n                                            <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n                                            <input\n                                                    type=\"text\"\n                                                    pInputText\n                                                    placeholder=\"Filter\"\n                                                    (keyup)=\"configFilterChangedDebounced($event)\" />\n                                        </div>\n                                        <button pButton\n                                                icon=\"pi pi-times\"\n                                                [ngClass]=\"{'configs-loading': svc.configsLoading}\"\n                                                (click)=\"clearConfigFilter($event)\"\n                                                severity=\"secondary\">\n                                        </button>\n                                        <div class=\"spinner\" *ngIf=\"svc.configsLoading\"></div>\n                                    </div>\n                                </ng-template>\n                            </p-dropdown>\n                        </div>\n                        <div *ngIf=\"!showConfigData && svc.selectedConfigId && svc.selectedConfigId !== '' && svc.selectedConfigId !== 'preview'\" class=\"button-row-right\" >\n                            <div class=\"save-button\" (click)=\"svc.attachConfig(svc.selectedConfigId)\">\n                                {{svc.attachLabel}}\n                            </div>\n                        </div>\n                        <div [hidden]=\"!showConfigData\" class=\"form-field-extended-fields\" [ngClass]=\"{'cfg-preview': svc.selectedConfigId === 'preview'}\">\n                            <div *ngIf=\"showConfigData\" class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Config Name</span>\n                                <div\n                                        class=\"save-button\"\n                                        (click)=\"attachConfig()\"\n                                        *ngIf=\"svc.selectedConfigId !== 'preview'\"\n                                >{{svc.attachLabel}}\n                                </div>\n                            </div>\n                            <input\n                                    *ngIf=\"showConfigData\"\n                                    [(ngModel)]=\"svc.newConfigName\"\n                                    class=\"form-field-input\"\n                                    [placeholder]=\"'New Config Name'\"\n                                    [ngClass]=\"{error: svc.configErrors['name']}\"\n                                    style=\"margin-bottom: 20px;\"\n                            />\n                            <div class=\"config-title-row\" style=\"margin-bottom: 10px;\">\n                                <span class=\"form-field-title\">Configuration Data</span>\n                                <div class=\"form-header-toggle-container\" *ngIf=\"svc.selectedConfigId !== 'preview'\">\n                                    <span\n                                            class=\"toggle-option-text\"\n                                            [ngClass]=\"{'toggle-option-selected': !svc.configJsonView}\"\n                                            (click)=\"svc.toggleJSONView()\"\n                                    >\n                                        FORM\n                                    </span>\n                                                <div class=\"form-header-toggle\" (click)=\"svc.toggleJSONView()\">\n                                                    <div\n                                                            class=\"form-toggle-switch\"\n                                                            [ngClass]=\"{'toggle-left': !svc.configJsonView, 'toggle-right': svc.configJsonView}\"\n                                                    >\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                        <div class=\"form-toggle-indicator\"></div>\n                                                    </div>\n                                                </div>\n                                                <span\n                                                        class=\"toggle-option-text\"\n                                                        [ngClass]=\"{'toggle-option-selected': svc.configJsonView}\"\n                                                        (click)=\"svc.toggleJSONView()\"\n                                                >\n                                        JSON\n                                    </span>\n                                </div>\n                            </div>\n                            <lib-config-editor\n                                [(configData)]=\"svc.configData\"\n                                [schema]=\"svc.selectedSchema\"\n                                [showJsonView]=\"svc.configJsonView\"\n                                [(configErrors)]=\"svc.configErrors\"\n                                #configEditor\n                            ></lib-config-editor>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div *ngIf=\"showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                        [title]=\"'Terminator Strategy'\"\n                        [title2]=\"'Encryption'\"\n                        [layout]=\"'row'\"\n                        [helpText]=\"'Pick a strategy to determine how to rank available terminators for a service'\"\n                        [helpText2]=\"'Encrypts packets when entering or leaving the network.'\"\n                        class=\"form-field-advanced\"\n                    >\n                        <select\n                                [(ngModel)]=\"formData.terminatorStrategy\"\n                                id=\"authPolicyId\"\n                                class=\"form-field-dropdown\"\n                        >\n                            <option value=\"\">Select a Strategy....</option>\n                            <option\n                                    *ngFor=\"let strat of strategies\"\n                                    [value]=\"strat.id\"\n                            >\n                                {{ strat.label }}\n                            </option>\n                        </select>\n                        <div class=\"config-item\">\n                            <div class=\"config-container toggle-container\">\n                                <div class=\"config-container-label\">Require Encryption</div>\n                                <div\n                                        (click)=\"toggleEncryptionRequired()\"\n                                        [ngClass]=\"{ on: formData.encryptionRequired }\"\n                                        class=\"toggle\"\n                                >\n                                    <span [hidden]=\"!formData.encryptionRequired\" class=\"on-label\">YES</span>\n                                    <span [hidden]=\"formData.encryptionRequired\" class=\"off-label\">NO</span>\n                                    <div class=\"switch\"></div>\n                                </div>\n                            </div>\n                        </div>\n                    </lib-form-field-container>\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                    [title]=\"'Associated Entities'\"\n                    [label]=\"'click item to view details'\"\n                    [helpText]=\"'List the configs, policies, and terminators that are associated with this service. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                    [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Configurations</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.addedConfigs ? svc.addedConfigs.length : 0}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedConfigsLoading\"\n                        [allNames]=\"svc.addedConfigs\"\n                        [allowRemove]=\"true\"\n                        [clickable]=\"true\"\n                        [tooltip]=\"'View Config'\"\n                        [showfilter]=\"false\"\n                        (itemRemoved)=\"svc.removeConfig($event)\"\n                        (itemSelected)=\"svc.previewConfig($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedServicePoliciesTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedServicePoliciesLoading\"\n                        [clickable]=\"true\"\n                        (itemSelected)=\"svc.previewPolicy($event, router)\"\n                        [tooltip]=\"'View Service Policy'\"\n                        [allNames]=\"svc.associatedServicePolicies\"\n                        [showfilter]=\"svc.showServicePoliciesFilter\"\n                        [localFilter]=\"false\"\n                        (filterChanged)=\"svc.getAssociatedServicePoliciesDebounced($event)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Terminators</span>\n                        </div>\n                        <span class=\"form-field-count\">{{svc.associatedTerminatorsTotal}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"svc.associatedTerminatorsLoading\"\n                        [clickable]=\"true\"\n                        (itemSelected)=\"svc.previewTerminator($event, router)\"\n                        [tooltip]=\"'View Terminator'\"\n                        [allNames]=\"svc.associatedTerminators\"\n                        [showfilter]=\"false\"\n                        [showfilter]=\"svc.showTerminatorsFilter\"\n                        [localFilter]=\"false\"\n                        (filterChanged)=\"svc.getAssociatedTerminatorsDebounced($event)\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n<!--                <lib-form-field-container\n                        *ngIf=\"formData.id\"\n                        [title]=\"'Associated Service Policies'\"\n                        [count]=\"svc.associatedServicePolicies.length\"\n                        [helpText]=\"'Preview list of all service policies that this service is associated with.'\"\n                >\n                </lib-form-field-container>-->\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [label]=\"''\"\n                        [class]=\"'api-call-container'\"\n                        [helpText]=\"'Preview of the API URL and data model that is used to create/update this service'\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\" readonly/>\n                        <div class=\"url-copy icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"svc.apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\" [(jsonInvalid)]=\"formDataInvalid\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\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(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.form-field-extended-fields{position:relative;display:flex;flex-direction:column}.form-field-extended-fields.cfg-preview{opacity:.8;filter:grayscale(.4);pointer-events:none}.form-header-toggle-container{display:flex;flex-direction:row;align-items:center}.form-header-toggle-container .form-header-toggle{display:flex;flex-direction:row;width:1.875rem;height:1.125rem;border-radius:.625rem;border-color:var(--inputBorder);border-style:solid;border-width:var(--inputBorderWidth);margin-left:.3125rem;cursor:pointer;position:relative;margin-right:.3125rem}.form-header-toggle-container .form-header-toggle:hover{filter:brightness(90%)}.form-header-toggle-container .form-header-toggle:active{transform:translateY(.0625rem);filter:brightness(80%)}.form-header-toggle-container .form-header-toggle .form-toggle-switch{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;height:100%;margin-left:.1875rem;position:absolute;transition:.5s;left:0}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right{left:.625rem}.form-header-toggle-container .form-header-toggle .form-toggle-switch.toggle-right .form-toggle-indicator{border-color:var(--red)}.form-header-toggle-container .form-header-toggle .form-toggle-switch .form-toggle-indicator{height:.625rem;border-color:var(--green);border-style:solid;border-left-width:.0625rem;border-right-width:.0625rem;position:relative;margin-left:.125rem}.form-header-toggle-container .toggle-option-text{font-size:.8125rem;font-weight:600;color:var(--placeholder);cursor:pointer}.form-header-toggle-container .toggle-option-text:hover{filter:brightness(90%)}.form-header-toggle-container .toggle-option-text:hover.toggle-option-selected{filter:unset}.form-header-toggle-container .toggle-option-text.toggle-option-selected{color:var(--tableText);cursor:default}.jsonButton{position:relative;top:0;margin:0;padding:.625rem;height:1.875rem}.disabled{opacity:.5;pointer-events:none}.attach-config{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;background:var(--primary);padding:.4375rem;border-radius:var(--inputBorderRadius);color:var(--white);cursor:pointer;box-shadow:0 .1875rem .5625rem 0 var(--primaryColorOpaque);border:none;width:-moz-fit-content;width:fit-content}.attach-config:active{background:#648293;box-shadow:none;transform:translateY(.0625rem)}.attach-config:hover{outline:0;filter:brightness(90%);box-shadow:0 .125rem .1875rem 0 var(--primaryColorOpaque)}::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:-moz-fit-content;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}.dropdown-container{display:flex;flex-direction:column;position:relative}::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}::ng-deep .form-field-extended-fields .form-field-extended-fields{padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -18389,9 +18537,7 @@ class SimpleServiceComponent extends ProjectableForm {
         this.bindDataChange = false;
         this.identitiesInit = new BehaviorSubject(false);
         this.entitiesInit = false;
-        this.multiActions = [
-            { id: 'convert-to-advanced', label: 'Convert to Advanced', hidden: false },
-        ];
+        this.multiActions = [];
         this.entityType = 'services';
         this.close = new EventEmitter();
         this.selected = new EventEmitter();
@@ -18404,6 +18550,14 @@ class SimpleServiceComponent extends ProjectableForm {
         this.svc.formData = data;
         if (!isEmpty(data?.id)) {
             this.initAssociatedData();
+            if (get(this.formData, 'tags.service-type') === 'simple') {
+                this.multiActions = [
+                    { id: 'convert-to-advanced', label: 'Convert to Advanced', hidden: false }
+                ];
+            }
+            else {
+                this.multiActions = [];
+            }
         }
     }
     get formData() {
@@ -19721,6 +19875,11 @@ class EdgeRouterPoliciesPageComponent extends ListPageComponent {
             case 'toggleAll':
             case 'toggleItem':
                 this.itemToggled(event.item);
+                this.rowData.forEach((item) => {
+                    if (item.isSystem) {
+                        item.selected = false;
+                    }
+                });
                 break;
             case 'update':
                 this.svc.serviceType = 'advanced';
@@ -20552,7 +20711,7 @@ class ServicePolicyFormComponent extends ProjectableForm {
                 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>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Posture Check Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100001'\"\n                        [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n                            [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            [placeholder]=\"'Select posture check attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Type'\"\n                        [title2]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.type\"\n                            id=\"PolicyType\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"Bind\">Bind</option>\n                        <option value=\"Dial\">Dial</option>\n                    </select>\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Service Policy 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                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Service Policy 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                <lib-form-field-container\n                        [title]=\"'Associated Posture Checks'\"\n                        [count]=\"svc.associatedPostureCheckNames.length\"\n                        [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"postureChecksLoading\"\n                            [allNames]=\"svc.associatedPostureCheckNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], 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>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Policy: ' : 'Create New Service Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Posture Check Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100001'\"\n                        [helpText]=\"'Choose which posture checks to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedPostureRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedPostureNamedAttributes\"\n                            [(selectedRoleAttributes)]=\"svc.postureRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.postureNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedPostureChecksByAttribute(selectedPostureRoleAttributes, selectedPostureNamedAttributes)\"\n                            [placeholder]=\"'Select posture check attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Type'\"\n                        [title2]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.type\"\n                            id=\"PolicyType\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"Bind\">Bind</option>\n                        <option value=\"Dial\">Dial</option>\n                    </select>\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all services that this Service Policy 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                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Service Policy 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                <lib-form-field-container\n                        [title]=\"'Associated Posture Checks'\"\n                        [count]=\"svc.associatedPostureCheckNames.length\"\n                        [helpText]=\"'Preview list of all Posture Checks that this Service Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"postureChecksLoading\"\n                            [allNames]=\"svc.associatedPostureCheckNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServicePolicyFormComponent, decorators: [{
             type: Component,
@@ -20655,6 +20814,7 @@ class EdgeRouterPolicyFormService {
             this.associatedEdgeRouterNames = [...this.associatedEdgeRouterNames, ...namedAttributes];
             this.associatedEdgeRouterNames = sortBy(this.associatedEdgeRouterNames);
             this.associatedEdgeRouterNames = sortedUniq(this.associatedEdgeRouterNames);
+            this.associatedEdgeRouterNames = this.associatedEdgeRouterNames.filter(item => item !== undefined);
         });
     }
     getAssociatedIdentitiesByAttribute(roleAttributes, namedAttributes) {
@@ -20674,6 +20834,7 @@ class EdgeRouterPolicyFormService {
             this.associatedIdentityNames = [...this.associatedIdentityNames, ...namedAttributes];
             this.associatedIdentityNames = sortBy(this.associatedIdentityNames);
             this.associatedIdentityNames = sortedUniq(this.associatedIdentityNames);
+            this.associatedIdentityNames = this.associatedIdentityNames.filter(item => item !== undefined);
         });
     }
     getEdgeRouterRoleAttributes() {
@@ -20979,7 +21140,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
                 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>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router Policy 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                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], 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>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Edge Router Policy: ' : 'Create New Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Identity Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which identities to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedIdentityRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedIdentityNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.identityRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.identityNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedIdentitiesByAttribute(selectedIdentityRoleAttributes, selectedIdentityNamedAttributes)\"\n                            [placeholder]=\"'Select identity attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Identities'\"\n                        [count]=\"svc.associatedIdentityNames.length\"\n                        [helpText]=\"'Preview list of all Identities that this Edge Router Policy 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                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeRouterPolicyFormComponent, decorators: [{
             type: Component,
@@ -21540,6 +21701,7 @@ class ServiceEdgeRouterPolicyFormService {
             this.associatedEdgeRouterNames = [...this.associatedEdgeRouterNames, ...namedAttributes];
             this.associatedEdgeRouterNames = sortBy(this.associatedEdgeRouterNames);
             this.associatedEdgeRouterNames = sortedUniq(this.associatedEdgeRouterNames);
+            this.associatedEdgeRouterNames = this.associatedEdgeRouterNames.filter(item => item !== undefined);
         });
     }
     getAssociatedServicesByAttribute(roleAttributes, namedAttributes) {
@@ -21559,6 +21721,7 @@ class ServiceEdgeRouterPolicyFormService {
             this.associatedServiceNames = [...this.associatedServiceNames, ...namedAttributes];
             this.associatedServiceNames = sortBy(this.associatedServiceNames);
             this.associatedServiceNames = sortedUniq(this.associatedServiceNames);
+            this.associatedServiceNames = this.associatedServiceNames.filter(item => item !== undefined);
         });
     }
     getEdgeRouterRoleAttributes() {
@@ -21862,7 +22025,7 @@ ${this.formData.id ? '--request PATCH \\' : ''}
                 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>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [helpText]=\"'Preview list of all Services that this Service Edge Router Policy 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                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { 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", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], 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>\n    <lib-form-header\n            [data]=\"formData\"\n            [title]=\"formData.id ? 'Edit Service Edge Router Policy: ' : 'Create New Service Edge Router Policy'\"\n            [moreActions]=\"moreActions\"\n            (actionRequested)=\"headerActionRequested($event)\"\n            [(formView)]=\"formView\"\n    ></lib-form-header>\n    <div class=\"service-edge-router-policy-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [title]=\"'Service Edge Router Policy Name'\" [label]=\"'REQUIRED'\">\n                    <input\n                            class=\"form-field-input\"\n                            placeholder=\"Name this service edge router policy\"\n                            [ngClass]=\"{error: errors['name']}\"\n                            [(ngModel)]=\"formData.name\"\n                            autofocus\n                            #nameFieldInput\n                    />\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Edge Router Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100003'\"\n                        [helpText]=\"'Choose which edge router to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedEdgeRouterRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedEdgeRouterNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.edgeRouterRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.edgeRouterNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedEdgeRoutersByAttribute(selectedEdgeRouterRoleAttributes, selectedEdgeRouterNamedAttributes)\"\n                            [placeholder]=\"'Select edge router attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Select Service Attributes'\"\n                        [label]=\"'OPTIONAL'\"\n                        [contentStyle]=\"'z-index: 100002'\"\n                        [helpText]=\"'Choose which services to associate to this policy by picking from the list of available attributes'\"\n                >\n                    <lib-tag-selector\n                            [(selectedRoleAttributes)]=\"selectedServiceRoleAttributes\"\n                            [(selectedNamedAttributes)]=\"selectedServiceNamedAttributes\"\n                            [availableRoleAttributes]=\"svc.serviceRoleAttributes\"\n                            [availableNamedAttributes]=\"svc.serviceNamedAttributes\"\n                            (selectedNamedAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            (selectedRoleAttributesChange)=\"svc.getAssociatedServicesByAttribute(selectedServiceRoleAttributes, selectedServiceNamedAttributes)\"\n                            [placeholder]=\"'Select service attributes'\"\n                    ></lib-tag-selector>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Semantic'\"\n                        [layout]=\"'row'\"\n                >\n                    <select\n                            [(ngModel)]=\"formData.semantic\"\n                            id=\"PolicySemantic\"\n                            class=\"form-field-dropdown\"\n                    >\n                        <option value=\"AnyOf\">AnyOf</option>\n                        <option value=\"AllOf\">AllOf</option>\n                    </select>\n                </lib-form-field-container>\n                <lib-form-field-toggle [(toggleOn)]=\"showMore\" (toggleOnChange)=\"showMoreChanged($event)\" style=\"margin: 0px 10px\"></lib-form-field-toggle>\n                <div [hidden]=\"!showMore\" class=\"form-group-column\">\n                    <lib-form-field-container\n                            [title]=\"'Custom Tags'\"\n                            [label]=\"'OPTIONAL'\"\n                            class=\"form-field-advanced\"\n                            *ngIf=\"!hideTags\"\n                    >\n                        <lib-custom-tags [(tags)]=\"formData.tags\"></lib-custom-tags>\n                    </lib-form-field-container>\n                </div>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Edge Routers'\"\n                        [count]=\"svc.associatedEdgeRouterNames.length\"\n                        [class]=\"'hide-overflow'\"\n                        [helpText]=\"'Preview list of all Edge Routers that this Service Edge Router Policy is associated with.'\"\n                >\n                    <lib-preview-list\n                            [clickable]=\"false\"\n                            [isLoading]=\"edgeRoutersLoading\"\n                            [allNames]=\"svc.associatedEdgeRouterNames\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n                <lib-form-field-container\n                        [title]=\"'Associated Services'\"\n                        [count]=\"svc.associatedServiceNames.length\"\n                        [helpText]=\"'Preview list of all Services that this Service Edge Router Policy 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                <lib-form-field-container\n                        [title]=\"'API Calls'\"\n                        [headerActions]=\"apiOptions\"\n                        (actionRequested)=\"apiActionRequested($event)\"\n                >\n                    <div class=\"form-row\">\n                        <input class=\"form-field-input\" [value]=\"apiCallURL\"/>\n                        <div class=\"icon-copy copy\" (click)=\"copyToClipboard(apiCallURL)\"></div>\n                    </div>\n                    <lib-json-view *ngIf=\"formData\" [(data)]=\"apiData\" [readOnly]=\"true\" [showCopy]=\"true\"></lib-json-view>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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", "selectedRoleAttributes", "selectedNamedAttributes", "hasError", "availableRoleAttributes", "availableNamedAttributes"], outputs: ["addRoleAttribute", "addNamedAttribute", "roleAttributeRemoved", "namedAttributeRemoved", "selectedRoleAttributesChange", "selectedNamedAttributesChange", "filterChange"] }, { kind: "component", type: CustomTagsComponent, selector: "lib-custom-tags", inputs: ["tags"], outputs: ["tagsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServiceEdgeRouterPolicyFormComponent, decorators: [{
             type: Component,
@@ -22186,11 +22349,11 @@ class TerminatorsPageComponent extends ListPageComponent {
         this.formDataChanged = event;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TerminatorsPageComponent, deps: [{ token: TerminatorsPageService }, { token: DataTableFilterService }, { token: TabNameService }, { token: ConsoleEventsService }, { token: i5$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TerminatorsPageComponent, selector: "lib-configurations", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-terminators-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [hideAction]=\"true\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n    <lib-data-table [tableId]=\"'terminators'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No terminators defined, Click the plus to add a terminator.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [filterName]=\"'Address'\"\n                    [filterColumn]=\"'address'\"\n                    [menuItems]=\"svc.menuItems\"\n                    (gridReady)=\"gridReady($event)\"\n                    [options]=\"{noSelect: true, noMenu: false}\"\n    >\n    </lib-data-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ListPageHeaderComponent, selector: "lib-list-page-header", inputs: ["title", "tabs", "showAdd", "hideAction"], outputs: ["actionClicked"] }, { kind: "component", type: DataTableComponent, selector: "lib-data-table", inputs: ["rowData", "expandRowData", "collapseRowData", "rowValidation", "isTimeSearchAvailable", "isLoading", "tableId", "options", "validateService", "rowsToggled", "tableRefreshCount", "view", "serverSideDataSource", "allowDownload", "startCount", "endCount", "totalCount", "emptyMsg", "filterApplied", "menuItems", "headerActions", "noItemsClass", "entityTypeName", "showNoItemsAdd", "currentPage", "noItemsImage", "rowHeight", "filterName", "filterColumn", "columnDefinitions", "refreshCount"], outputs: ["actionRequested", "gridReady", "dragStart", "dragLeave", "pageChanged"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TerminatorsPageComponent, selector: "lib-configurations", usesInheritance: true, ngImport: i0, template: "<div class=\"ziti-page-container ziti-terminators-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [hideAction]=\"true\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n    <lib-data-table [tableId]=\"'terminators'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No terminators defined, Click the plus to add a terminator.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [filterName]=\"'Address'\"\n                    [filterColumn]=\"'address'\"\n                    [menuItems]=\"svc.menuItems\"\n                    (gridReady)=\"gridReady($event)\"\n                    [options]=\"{noSelect: true, noMenu: false}\"\n    >\n    </lib-data-table>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListPageHeaderComponent, selector: "lib-list-page-header", inputs: ["title", "tabs", "showAdd", "hideAction"], outputs: ["actionClicked"] }, { kind: "component", type: DataTableComponent, selector: "lib-data-table", inputs: ["rowData", "expandRowData", "collapseRowData", "rowValidation", "isTimeSearchAvailable", "isLoading", "tableId", "options", "validateService", "rowsToggled", "tableRefreshCount", "view", "serverSideDataSource", "allowDownload", "startCount", "endCount", "totalCount", "emptyMsg", "filterApplied", "menuItems", "headerActions", "noItemsClass", "entityTypeName", "showNoItemsAdd", "currentPage", "noItemsImage", "rowHeight", "filterName", "filterColumn", "columnDefinitions", "refreshCount"], outputs: ["actionRequested", "gridReady", "dragStart", "dragLeave", "pageChanged"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TerminatorsPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configurations', template: "<div class=\"ziti-page-container ziti-terminators-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [hideAction]=\"true\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n    <lib-data-table [tableId]=\"'terminators'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No terminators defined, Click the plus to add a terminator.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [filterName]=\"'Address'\"\n                    [filterColumn]=\"'address'\"\n                    [menuItems]=\"svc.menuItems\"\n                    (gridReady)=\"gridReady($event)\"\n                    [options]=\"{noSelect: true, noMenu: false}\"\n    >\n    </lib-data-table>\n</div>\n" }]
+            args: [{ selector: 'lib-configurations', template: "<div class=\"ziti-page-container ziti-terminators-container\">\n    <lib-list-page-header [title]=\"title\"\n                          [tabs]=\"tabs\"\n                          [hideAction]=\"true\"\n                          (actionClicked)=\"headerActionClicked($event)\"></lib-list-page-header>\n    <lib-data-table [tableId]=\"'terminators'\"\n                    [rowData]=\"rowData\"\n                    [columnDefinitions]=\"columnDefs\"\n                    (actionRequested)=\"tableAction($event)\"\n                    [startCount]=\"startCount\"\n                    [endCount]=\"endCount\"\n                    [totalCount]=\"totalCount\"\n                    [emptyMsg]=\"'No terminators defined, Click the plus to add a terminator.'\"\n                    [filterApplied]=\"filterApplied\"\n                    [filterName]=\"'Address'\"\n                    [filterColumn]=\"'address'\"\n                    [menuItems]=\"svc.menuItems\"\n                    (gridReady)=\"gridReady($event)\"\n                    [options]=\"{noSelect: true, noMenu: false}\"\n    >\n    </lib-data-table>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n" }]
         }], ctorParameters: function () { return [{ type: TerminatorsPageService }, { type: DataTableFilterService }, { type: TabNameService }, { type: ConsoleEventsService }, { type: i5$1.MatDialog }]; } });
 
 class Config {
@@ -27382,7 +27545,7 @@ class SessionFormComponent extends ProjectableForm {
                 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>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"'Session Details'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [showHeaderButton]=\"false\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">ID</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.id}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Service Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./services/' + formData.service.id\" (click)=\"serviceNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.service.name}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Identity Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./identities/' + associatedIdentity.id\" (click)=\"identityNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <div class=\"entity-name-and-spinner\">\n                                    <span>{{associatedIdentity.name}}</span>\n                                    <div class=\"spinner\" *ngIf=\"identityLoading\"></div>\n                                </div>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">API Session ID</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./api-sessions/' + formData.apiSessionId\" (click)=\"apiSessionLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.apiSessionId}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Type</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.type}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Created At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.createdAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Updated At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.updatedAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Entities'\"\n                        [label]=\"'Click for detailed view'\"\n                        [helpText]=\"'List the edge routers and service policies that are associated with this session. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                        [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Edge Routers</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedEdgeRouters.length}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"false\"\n                        [allNames]=\"associatedEdgeRouters\"\n                        [allowRemove]=\"false\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Edge Router'\"\n                        (itemSelected)=\"previewEdgeRouter($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedServicePolicies.length}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"false\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"previewServicePolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .api-session-form-wrapper .form-header-container .form-header-toggle-container{margin-right:0!important}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::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:-moz-fit-content;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}.entity-name-and-spinner{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.spinner{border-right-color:var(--formBase);border-top-color:var(--formBase)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { kind: "component", type: PreviewListComponent, selector: "lib-preview-list", inputs: ["label", "clickable", "isLoading", "allNames", "items", "allowRemove", "tooltip", "showfilter"], outputs: ["itemSelected", "itemRemoved"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "lib-loading-indicator", inputs: ["isLoading"] }, { kind: "component", type: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"'Session Details'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [showHeaderButton]=\"false\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">ID</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.id}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Service Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./services/' + formData.service.id\" (click)=\"serviceNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.service.name}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Identity Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./identities/' + associatedIdentity.id\" (click)=\"identityNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <div class=\"entity-name-and-spinner\">\n                                    <span>{{associatedIdentity.name}}</span>\n                                    <div class=\"spinner\" *ngIf=\"identityLoading\"></div>\n                                </div>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">API Session ID</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./api-sessions/' + formData.apiSessionId\" (click)=\"apiSessionLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.apiSessionId}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Type</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.type}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Created At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.createdAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Updated At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.updatedAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Entities'\"\n                        [label]=\"'click item to view details'\"\n                        [helpText]=\"'List the edge routers and service policies that are associated with this session. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                        [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Edge Routers</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedEdgeRouters.length}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"false\"\n                        [allNames]=\"associatedEdgeRouters\"\n                        [allowRemove]=\"false\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Edge Router'\"\n                        (itemSelected)=\"previewEdgeRouter($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedServicePolicies.length}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"false\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"previewServicePolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .api-session-form-wrapper .form-header-container .form-header-toggle-container{margin-right:0!important}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::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:-moz-fit-content;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}.entity-name-and-spinner{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.spinner{border-right-color:var(--formBase);border-top-color:var(--formBase)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormHeaderComponent, selector: "lib-form-header", inputs: ["data", "badges", "title", "moreActions", "formView", "saveDisabled", "saveTooltip", "actionButtonText", "moreActionsText", "showHeaderToggle", "showHeaderButton", "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"] }, { 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: JsonViewComponent, selector: "lib-json-view", inputs: ["data", "schema", "readOnly", "jsonInvalid", "showCopy", "showLineNumbers"], outputs: ["dataChange", "jsonChange", "jsonInvalidChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SessionFormComponent, decorators: [{
             type: Component,
@@ -27391,7 +27554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             provide: MatDialogRef,
                             useValue: {}
                         }
-                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"'Session Details'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [showHeaderButton]=\"false\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">ID</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.id}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Service Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./services/' + formData.service.id\" (click)=\"serviceNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.service.name}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Identity Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./identities/' + associatedIdentity.id\" (click)=\"identityNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <div class=\"entity-name-and-spinner\">\n                                    <span>{{associatedIdentity.name}}</span>\n                                    <div class=\"spinner\" *ngIf=\"identityLoading\"></div>\n                                </div>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">API Session ID</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./api-sessions/' + formData.apiSessionId\" (click)=\"apiSessionLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.apiSessionId}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Type</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.type}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Created At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.createdAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Updated At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.updatedAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Entities'\"\n                        [label]=\"'Click for detailed view'\"\n                        [helpText]=\"'List the edge routers and service policies that are associated with this session. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                        [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Edge Routers</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedEdgeRouters.length}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"false\"\n                        [allNames]=\"associatedEdgeRouters\"\n                        [allowRemove]=\"false\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Edge Router'\"\n                        (itemSelected)=\"previewEdgeRouter($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedServicePolicies.length}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"false\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"previewServicePolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .api-session-form-wrapper .form-header-container .form-header-toggle-container{margin-right:0!important}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::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:-moz-fit-content;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}.entity-name-and-spinner{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.spinner{border-right-color:var(--formBase);border-top-color:var(--formBase)}\n"] }]
+                    ], template: "<div class=\"projectable-form-wrapper\"\n     (keyup.enter)=\"save($event)\"\n     (keyup.escape)=\"closeModal(false)\"\n>\n    <lib-form-header\n        [data]=\"formData\"\n        [title]=\"'Session Details'\"\n        [moreActions]=\"moreActions\"\n        (actionRequested)=\"headerActionRequested($event)\"\n        [(formView)]=\"formView\"\n        [showHeaderButton]=\"false\"\n    ></lib-form-header>\n    <div class=\"edge-router-form-container projectable-form-container\">\n        <div class=\"projectable-form-main-column form-group-row\" *ngIf=\"formView === 'simple'\">\n            <div class=\"form-group-column three-fifths\">\n                <lib-form-field-container [showHeader]=\"false\">\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">ID</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.id}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Service Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./services/' + formData.service.id\" (click)=\"serviceNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.service.name}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Identity Name</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./identities/' + associatedIdentity.id\" (click)=\"identityNameLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <div class=\"entity-name-and-spinner\">\n                                    <span>{{associatedIdentity.name}}</span>\n                                    <div class=\"spinner\" *ngIf=\"identityLoading\"></div>\n                                </div>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">API Session ID</span>\n                        </div>\n                        <a class=\"form-field-link\" [href]=\"'./api-sessions/' + formData.apiSessionId\" (click)=\"apiSessionLinkClicked($event)\">\n                            <div class=\"config-container config-container-clickable\">\n                                <span>{{formData.apiSessionId}}</span>\n                            </div>\n                        </a>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Type</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{formData.type}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Created At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.createdAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                    <div class=\"form-field-label-container\">\n                        <div class=\"form-field-title-container\">\n                            <span class=\"form-field-title\">Updated At</span>\n                        </div>\n                        <div class=\"config-container\">\n                            <span>{{moment(formData.updatedAt).format(\"M/D/YYYY h:mm A\")}}</span>\n                        </div>\n                    </div>\n                </lib-form-field-container>\n                <ng-content select=\"[slot=column-1-slot-1]\"></ng-content>\n            </div>\n            <div class=\"form-group-column two-fifths\">\n                <lib-form-field-container\n                        [title]=\"'Associated Entities'\"\n                        [label]=\"'click item to view details'\"\n                        [helpText]=\"'List the edge routers and service policies that are associated with this session. Click on the entity name to navigate to the entity\\'s detailed view.'\"\n                        [class]=\"'no-gap'\"\n                >\n                    <div class=\"form-row space-between\" style=\"margin-top: 0;\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Edge Routers</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedEdgeRouters.length}}</span>\n                    </div>\n                    <lib-preview-list\n                        [isLoading]=\"false\"\n                        [allNames]=\"associatedEdgeRouters\"\n                        [allowRemove]=\"false\"\n                        [clickable]=\"true\"\n                        [showfilter]=\"false\"\n                        [tooltip]=\"'View Edge Router'\"\n                        (itemSelected)=\"previewEdgeRouter($event, router)\"\n                    ></lib-preview-list>\n                    <div class=\"form-row space-between\">\n                        <div class=\"config-title-row\">\n                            <span class=\"form-field-title\">Service Policies</span>\n                        </div>\n                        <span class=\"form-field-count\">{{associatedServicePolicies.length}}</span>\n                    </div>\n                    <lib-preview-list\n                            [isLoading]=\"false\"\n                            [clickable]=\"true\"\n                            (itemSelected)=\"previewServicePolicy($event, router)\"\n                            [tooltip]=\"'View Service Policy'\"\n                            [allNames]=\"associatedServicePolicies\"\n                            [showfilter]=\"false\"\n                    ></lib-preview-list>\n                </lib-form-field-container>\n            </div>\n        </div>\n        <div class=\"form-group-column\" *ngIf=\"formView === 'raw'\">\n            <lib-json-view *ngIf=\"formData\" [(data)]=\"formData\"></lib-json-view>\n        </div>\n    </div>\n</div>\n<lib-loading-indicator *ngIf=\"isLoading\" [isLoading]=\"isLoading\"></lib-loading-indicator>\n", styles: ["::ng-deep .api-session-form-wrapper .form-header-container .form-header-toggle-container{margin-right:0!important}.form-field-dropdown{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 23.0.3%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg id%3D'Stroke_Color' style%3D'enable-background%3Anew 0 0 20.2 10.8%3B' version%3D'1.1'     viewBox%3D'0 0 20.2 10.8'     x%3D'0px' xml%3Aspace%3D'preserve' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' y%3D'0px'%3E%3Cstyle type%3D'text%2Fcss'%3E%09.st0 %7B    fill%3A %23668291%3B  %7D%3C%2Fstyle%3E  %3Cg%3E%09%3Cpath class%3D'st0' d%3D'M19.8%2C1.7c0%2C0.4-0.1%2C0.7-0.4%2C0.9l-8.5%2C7.3c-0.5%2C0.4-1.2%2C0.4-1.6%2C0L0.7%2C2.7C0.2%2C2.2%2C0.2%2C1.5%2C0.6%2C0.9%09%09c0.5-0.5%2C1.2-0.6%2C1.8-0.1l7.7%2C6.6l7.7-6.6c0.5-0.5%2C1.3-0.4%2C1.8%2C0.1C19.7%2C1.2%2C19.8%2C1.5%2C19.8%2C1.7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");background-position:center right .625rem;background-repeat:no-repeat;background-size:1.125rem;padding-right:1.75rem}.disabled{opacity:.5;pointer-events:none}.config-item{max-height:var(--defaultInputHeight);margin-top:1.15rem}::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:-moz-fit-content;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}.entity-name-and-spinner{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.spinner{border-right-color:var(--formBase);border-top-color:var(--formBase)}\n"] }]
         }], ctorParameters: function () { return [{ type: SettingsService, decorators: [{
                     type: Inject,
                     args: [SETTINGS_SERVICE]
@@ -28643,7 +28806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 const VERSION = {
-    "version": "3.12.7"
+    "version": "3.12.8"
 };
 
 /*
@@ -30112,12 +30275,12 @@ class ZitiControllerDataService extends ZitiDataService {
             return results;
         })));
     }
-    getSubdata(entityType, id, dataType, paging, contentType) {
+    getSubdata(entityType, id, dataType, paging, contentType, filters = []) {
         const apiVersions = this.settingsService.apiVersions || {};
         const prefix = apiVersions["edge-management"]?.v1?.path || '/edge/management/v1';
         let urlFilter = '';
         if (!isEmpty(paging)) {
-            urlFilter = this.getUrlFilter(paging, []);
+            urlFilter = this.getUrlFilter(paging, filters);
         }
         const url = this.settingsService.settings.selectedEdgeController + `${prefix}/${entityType}/${id}/${dataType}/${urlFilter}`;
         let options = {};
@@ -30205,7 +30368,7 @@ class ZitiControllerDataService extends ZitiDataService {
         return firstValueFrom(this.httpClient.delete(serviceUrl, {}).pipe(catchError((err) => {
             const error = "Server Not Accessible";
             if (err.code != "ECONNREFUSED")
-                throw ({ error: err.code });
+                throw err;
             throw ({ error: error });
         }), map((results) => {
             return results;